# 🎁 A Little Tool to Help You Explore PIERO Touch

**URL:** <https://rossvideo.community/t/a-little-tool-to-help-you-explore-piero-touch/7646>\
**Category:** PIERO\
**Created:** [December 16, 2025, 3:07pm UTC](https://rossvideo.community/t/a-little-tool-to-help-you-explore-piero-touch/7646 "2025-12-16T15:07:00Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexfrekemorin](https://rossvideo.community/letter_avatar_proxy/v4/letter/a/76d3ee/32.png) [@alexfrekemorin](https://rossvideo.community/u/alexfrekemorin)\
**Post date:** [December 16, 2025, 3:07pm UTC](https://rossvideo.community/t/a-little-tool-to-help-you-explore-piero-touch/7646/1 "2025-12-16T15:07:00Z")

</div>

This tool lets you prototype PIERO Touch background images quickly and easily, with no image-editing knowledge and no professional design tools required. The goal is to make it easy to experiment, play around, and shape your own Touch layouts.

 ![](https://discourse-rossvideo-uploads-east2.s3.dualstack.us-east-2.amazonaws.com/original/1X/ef18572decd7e46b277f4ee63c28b2dba9cfe0a1.jpeg)

Using this tool alongside PIERO Touch, you can:

Try out different background layouts and button placements

Build and test your own UI ideas

Prototype and iterate before committing to a final design

Decide whether PIERO Touch fits your workflow

Hand off a clearer concept if you later choose to have a professional designer create the final artwork

It’s a simple way to explore what’s possible and get creative without needing to be a designer.

You can download the HTML from here: [AFM Piero Touch Background Prototyper.html.zip](https://www.dropbox.com/scl/fi/77aba2ckd4so792ja1e6x/AFM-Piero-Touch-Background-Prototyper.html.zip?rlkey=csm5jke75hmhe91khleg5ltfr)

NOTE this HTML file is self-contained. It is not an official Ross Product and does not come with any warranty.

Layout at a glance

Left (Canvas): live SVG preview (click panels to select).

Left column of controls: Selected Panel settings (type, X/Y/W/H, corner radius, fill/stroke, panel image, button grid).

Right column of controls: Background settings (linear/radial/image, gradient stops, Stop C).

Bottom: panel management, snap toggle, watermark, Reset, Export buttons.

Quick workflow

Open the HTML in your browser (Chrome Recommended).

Add panels: choose type → Add.

Select a panel on the canvas (or from the list). Move it by dragging, or resize by dragging a corner handle. Use the X/Y/W/H fields for exact placement, then Apply.

Edit the background: in the right column choose Linear/Radial/Image.

Radial: center X/Y, radius %, Stop A (center), Stop B (edge).

For image backgrounds upload an image and choose cover/contain and opacity.

Export PNG (1920×1080) - produces a bitmap ready for PIERO Touch.

Download SVG - editable file that contains embedded images.