I try to make an kiosk system with a touchscreen. 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.
I made the buttons with a graphic program and save them as an image. And I made a second image where every button is represented by a different color.
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. I look in the array for the corresponding color, and I know which button it clicked.
easy and fast
Here is a demo on openprocessing:
openprocessing.org/visuals/?visualID=7554
and on instructables:
instructables.com/id/shaped-buttons-with-Processing/
hope it is useful for you
Quote:// an unusual way to create shaped buttons with Processing
PImage button; //image of the buttons (visible)
PImage buttoncolmap; //colormap of the buttons (hidden)
String[] buttonstring={"quadrat","thumb up","smile","envelope",
"flower","rectangle","oval","fivestar",
"circle","four star","banner","boom",
"textfield",""}; //the names of the buttons
color[] buttoncolor={0xFF0000FF,0xFF00FFFF,0xFF00FF00,0xFFFFFF00,
0xFFFF0000,0xFFFF00FF,0xFF9900CC,0xFFFF6600,
0xFFFF99CC,0xFF663333,0xFF66FFCC,0xFF99FF00,
0xFFFFFF66,0xFFFFFFFF}; //the colors of the buttons
String textfield="";
PFont font;
void setup ()
{
size(800,600,JAVA2D);
smooth();
noLoop();
//noCursor();
font=loadFont("CourierNewPS-BoldMT-48.vlw");
textFont(font);
button=loadImage("button.png");
buttoncolmap=loadImage("colormap.png");
}
void draw()
{
background(button);
fill(0);
textAlign(CENTER);
text(textfield,400,205);
}
void mouseReleased()
{
color testcolor=0;
testcolor=buttoncolmap.get(mouseX,mouseY); //get the color in the hidden image
//println("0x"+hex(testcolor));
for(int i=0;i<buttonstring.length;++i) //check the color and copy the name of the button
{
if(testcolor==buttoncolor[i])
textfield=buttonstring[i];
}
redraw();
}
Pages: 1
shaped buttons easy and fast (Read 2969 times)