In processing we do not have the ability to make a simple button. there are libraries that allow us to call to the button class, but there are many cases that do not allow us to use the libraries. In android mode the libraries take up too much memory, and you cannot install a library in processing.js. In the following example I will use OOP to create a simple button class. Here is the example with source code
The class
lets start by creating a class that draws a rounded square, with some text in the middle
class Button{
int xpos, ypos, wid, hei;
String label;
Button(
int tx, int ty,
int tw, int th,
String tlabel
){
xpos = tx;
ypos = ty;
wid = tw;
hei = th;
text = tlabel;
}
void update(){
smooth();
fill(255);
stroke(0);
rect(xpos, ypos, wid, hei, 10);//draws the rectangle, the last param is the round corners
fill(0);
textSize(24);
text(label, xpos+wid/2-(textWidth(label)/2), ypos+hei/2+(textAscent()/2));
//all of this just centers the text in the box
}
}
And in the main part of the little app, create the button
Button b;
void setup(){
size(300,200)
b = new Button(25,20,125,100,"click");
}
void draw(){
b.update();
}
At the moment, creating a new button uses the following b = new Button(xpos,ypos,height,width,label)but that will change depending on how we want to customize our button
Interactivity states within our app
Think back to when you were working in flash. Each button has 3 states: UP, OVER, and DOWN. We have to build those three states with code. Here is some pseudo-code to help us out
- Query to see if the mouse is inside the area of the button, we can use the button’s x and y, and the x+width and y+height to obtain this
- If the mouse is inside the area of the button enact the over state
- If the button is in the over state, and the mouse is pushed down, change to the down state,
- Because processing will recognize a mouse click as being in the down state for as long as the mouse is being clicked we have to listen for the mouse to be released, then do the action
So lets make 2 booleans that will be properties of the class, and define if the mouse is over, or over and pressed. These should be added as properties to the class
class Button{
int xpos, ypos, wid, hei;
String text;
boolean over = false;
boolean down = false;
.....
Where is the Mouse and what is it doing?
we have to create a generic conditional to that will test if the mouse is currently inside the button. This is easy if we use the properties already set in the class
void update(){
if(mouseX>xpos&&mouseY>ypos&&mouseX<xpos+wid&&mouseY<ypos+hei){
over=true;
}else{
over=false;
}
.......
Then in the button’s update, when we create the text and box we change what ever value we want to show the over state, using the . in this example, I am changing the box’s fill to a grey
.....
if(!over){
fill(255);
}else{
fill(100);
}
stroke(0);
rect(xpos, ypos, wid, hei, 10);
.....
Adding to the this big controlling conditional to test if the mouse is down we use the mousePressed conditional. This conditional is a built in boolean value that returns true if the mouse is pressed
.....
if(mouseX>xpos && mouseY>ypos && mouseX<xpos+wid && mouseY<ypos+hei){
over=true;
if(mousePressed){
down=true;
}else{
down=false;
}
}else{
over=false;
}
.....
we then update our code below to change the fill color of the rectangle shape and the fill of the text
.....
if(!over){
fill(255);
}else{
if(!down){
fill(100);
}else{
fill(0);
}
}
stroke(0);
rect(xpos, ypos, wid, hei, 10);//draws the rectangle, the last param is the round corners
if(down){
fill(255);
}else{
fill(0);
}
textSize(24);
text(label, xpos+wid/2-(textWidth(label)/2), ypos+hei/2+(textAscent()/2));
//all of this just centers the text in the box
.....
Test it!!!!
While building all this stuff it is imperative to test when ever you make changes. This ensures you know where problematic code lies. Because OOP requires you to create classes that should be used as a template to create objects, it is useful to create another object to make sure the class can be used again
Button b,b2;
void setup(){
size(300,300);
b = new Button(25,20,125,100,"click");
b2 = new Button(150,20,125,100,"clack");
}
void draw(){
b.update();
b2.update();
}
Now we have 2 buttons in that have over and down states. very good!
What State are you, Mr Button?
The last thing we have to decide is what state the button will be in to do whatever it has to do. Lets call this the ‘click’ state and create a boolean parameter of the class called ‘clicked’.
class Button{
int xpos, ypos, wid, hei;
String text;
boolean over = false;
boolean down = false;
boolean clicked = false;
.....
The real trick here is that the action should only happen once, or at least, that is what I want to have happen. So we must make the clicked event only happen for one frame, it is also a good idea to make the clicked event only happen when you release the button, in case the user has hit the button by mistake, they have a last minute chance to move the mouse away. It is important that you add this code as the very first part in the button class’s update function, as the conditional that controls states of the button will change the values of the variables over and down
void update(){
//it is important that this comes first
if(down&&over&&!mousePressed){
clicked=true;
}else{
clicked=false;
}
}
The main event
Now that we have all this, let us do something with the button already!!! Back to the main file and the draw fucntion
void draw(){
b.update();
b2.update();
if(b.clicked)background(#ff0000);
if(b2.clicked)background(#0000ff);
}
The above looks for the button click ‘event’, and changes the background color. This ‘event’ is basically just the short period of time that clicked is true in each of the button objects. If you click on the buttons really fast, it looks like police lights. 😉
Leave a Reply