Picture of shaped buttons with Processing
I try to make an kiosk system with a touchscreen. The program language I chose is Processing Java.
The Buttons on the screen should not be just rectangular, they should be shaped.

If you ever tried to make shaped buttons with any programming language, you know it is hard.
I found an unusual and very easy way to make buttons in any shape you like.

You can see the result in the attached zip file (just unzip and open the "index.html" in your browser)
or here on www.openprocessing.com
Remove these adsRemove these ads by Signing Up

Step 1: Paint the buttons

Picture of paint the buttons
You can create the buttons with a graphic program (e.g. Inkscape)
The dimensions should be the same as the window size of your program or applet.

Then you copy the buttons and fill the buttons with different colors.

colormap_button.svg(595x842) 22 KB

Step 2: Export the images

Picture of export the images
Now export both images as png files in exact the same dimension of your program (here 800x600)

Step 3: The Processing sketch

Picture of the  Processing sketch
And now the trick.

The first image is visible on the screen, but the second is just loaded not shown.
You can find out which button is clicked with the second image. If you have an
click event, look on the invisible image which color is there.

So, every button has an different color in the invisible image. Look in the array
for the corresponding color, and you know which button it was.

To create the color array you can uncomment the line 43 (println("0x"+hex(testcolor));)
and click each button separately.

source.pdf(595x842) 17 KB

Step 4: Try it

Picture of try it
With this methode I have made different funny sketches. e.g. an talking picture book with an touchscreen, the children love it :-)

In the pic you can see an working onscreen keyboard (german layout) for an kiosk computer.

And now play with your ideas. Hope you can create many interesting things with this trick. Please let me know.

Hope you enjoy
greetings from germany


hondaman9003 years ago
Nice I'ble.

What do you use for printing out your Processing sketches? The native Processing IDE sucks at printing out code, and I'd like to have line numbers.

lighttamer (author)  hondaman9003 years ago

I used the Notepad++ with the "JAVA" text-highlighting.

Greetings from Germany
owaunz5 years ago
Do you have an email address ? Mine is owaunz@gmail.com
smessud5 years ago
 Pretty clever!!
This will work not only with well defined buttons, but with any zone of a screen as long as you have the "look-up image" beneath.

It may not be new but it's worth a five-start to me.