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.
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
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.