Introduction: 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

Step 1: 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.

Step 2: 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

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.

Step 4: 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

www.lichtbaendiger.de

Comments

author
foutuframboise (author)2015-11-22

This was very helpful! Thank you very much.

author
hondaman900 (author)2011-10-03

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.

Thx

author
lighttamer (author)hondaman9002011-10-04

Hello,

I used the Notepad++ with the "JAVA" text-highlighting.
http://notepad-plus-plus.org/

Greetings from Germany

author
owaunz (author)2010-02-16

Do you have an email address ? Mine is owaunz@gmail.com

author
smessud (author)2010-02-09

 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.

About This Instructable

6,310views

16favorites

License:

Bio: We are the Lichtbaendiger from germany. We are manufacturer of optical glasses. If you like to see what we do, you are welcome to visit ... More »
More by lighttamer:Love lock made with an 3D printerLove Gaugetibetan prayer-wheel made by plywood
Add instructable to: