A button that can be placed in the application window of a Processing program (processing.org). The button code allows the button to be drawn and checked to see if it has been clicked by a mouse.
At this point in time Processing does not have any button controls as part of the language or built in libraries. The code below is a class for a very simple button that should be easy for beginners in programming to understand, study and improve on. An example of using the button follows.
The image shows two buttons created in a Processing application window using the Button class.
Processing Button Class
This button class can be copied to any Processing sketch and then used in the sketch as demonstrated by the example that follows.
class Button { String label; float x; // top left corner x position float y; // top left corner y position float w; // width of button float h; // height of button Button(String labelB, float xpos, float ypos, float widthB, float heightB) { label = labelB; x = xpos; y = ypos; w = widthB; h = heightB; } void Draw() { fill(218); stroke(141); rect(x, y, w, h, 10); textAlign(CENTER, CENTER); fill(0); text(label, x + (w / 2), y + (h / 2)); } boolean MouseIsOver() { if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) { return true; } return false; } }
Processing Button Demonstration Example
This application uses the above Button class to create a button on the screen. When the mouse cursor is moved over the button, a square is drawn in the window, when the button is clicked, text is written to the text area console of the Processing IDE. This video shows the example code running:
// Processing application that demonstrates the Button class by creating a button // Draws a square in the window when the mouse cursor is over the button // Writes to the Processing IDE console pane when the button is clicked // 3 July 2015 http://startingelectronics.org Button on_button; // the button int clk = 1; // number of times the button is clicked void setup() { size (300, 150); smooth(); // create the button object on_button = new Button("Click Me", 20, 20, 100, 50); } void draw() { // draw a square if the mouse curser is over the button if (on_button.MouseIsOver()) { rect(200, 20, 50, 50); } else { // hide the square if the mouse cursor is not over the button background(0); } // draw the button in the window on_button.Draw(); } // mouse button clicked void mousePressed() { if (on_button.MouseIsOver()) { // print some text to the console pane if the button is clicked print("Clicked: "); println(clk++); } } // the Button class class Button { String label; // button label float x; // top left corner x position float y; // top left corner y position float w; // width of button float h; // height of button // constructor Button(String labelB, float xpos, float ypos, float widthB, float heightB) { label = labelB; x = xpos; y = ypos; w = widthB; h = heightB; } void Draw() { fill(218); stroke(141); rect(x, y, w, h, 10); textAlign(CENTER, CENTER); fill(0); text(label, x + (w / 2), y + (h / 2)); } boolean MouseIsOver() { if (mouseX > x && mouseX < (x + w) && mouseY > y && mouseY < (y + h)) { return true; } return false; } }
really clear, thx !
what about adding a little usability to this fine button and make it trigger the action only when released on it ? Like so you can cancel your input by dragging the cursor out of the button before releasing the mouse button
I did it by adding this variable
on_ButtonPressed = true;
and changing the main code with this
// mouse button clicked
void mousePressed()
{
if (on_button.MouseIsOver()) {
on_ButtonPressed = true;
} else {
on_ButtonPressed = false;
}
}
// mouse button released
void mouseReleased() {
if (on_button.MouseIsOver()) {
if (on_ButtonPressed) {
// print some text to the console pane if the button is clicked
print(“Clicked: “);
println(clk++);
}
}
}
I use this class and its great
How ever how can i make the button itself to change color if the mouse is over? How can i change the fill ()inside the class?
*LATE*
Like this:
In the Draw method, replace the fill(218); with this:
if (mouseX > x && mouseX y && mouseY < (y + h)) {
fill(//color that you want if the mouse is over);
}
fill(//default color);
}