Yahir
5/3/2018 - 10:29 PM
Button Starter Sketch by Yahir
A basic starter Sketch for working with the Button Class.
When opening the .pde file press OK when prompted to create the necessary Sketch folder.
Full guide and attribute list at: https://yahir360.com/processing-buttons/
/**********************************************************************
Basic Starter Sketch for Button Class by Yahir
For Button Class Version 1
Full guide and Attribute list at:
https://yahir360.com/processing-buttons/
**********************************************************************/
Button myButtonLatch, myButtonMomentary; //Declare Buttons here
boolean myVariable1; //Generic variables
boolean myVariable2;
void setup() {
size(300,200);
pixelDensity(2); //HD Displays
myVariable1 = false;
myVariable2 = true;
//Initialize any boolean variables the Buttons will controll above addSliders method
addButtons(); //Run addButtons method
println("Button example by Yahir");
}
void draw() {
background(255);
updateButtons(); //Run updateButtons method
}
void mouseClicked() {
myButtonLatch.latchMode(); // Make Button latch if desired
}
void addButtons() {
//Initialize Buttons here in the form (x, y, boolean, "Mode", "Name");
myButtonLatch = new Button(40, 70, myVariable1, "LATCH", "LATCH MODE"); //(x, y, booleanVar, mode, name)
myButtonMomentary = new Button(140 + 80, 70 + 10, myVariable2, "MOMENTARY", "MOMENTARY");
}
void updateButtons() {
//Update Buttons here
myButtonLatch.display(); //Display Button
myVariable1 = myButtonLatch.variable; //Assign Button to boolean variable
//myButtonName.attributeName = v1;
myButtonLatch.variableLocation = "IN";
myButtonMomentary.display();
myVariable2 = myButtonMomentary.variable;
myButtonMomentary.buttonEllipse = true;
myButtonMomentary.variableLocation = "BOTTOM";
myButtonMomentary.variableClearance = 18;
}
/**********************************************************************
Button Class by Yahir
For Processing
For full guide and Attribute list at:
Yahir360.com/***
Version: 1
May 2018
**********************************************************************/
class Button {
float x;
float y;
color activeColor;
float buttonDiam;
float buttonHeight;
boolean buttonEllipse;
float buttonWidth;
String mode;
float roundedCorner;
String themeColor;
String name;
float nameClearance;
color nameColor;
color nameColorActive;
color nameColorAlt;
String nameLocation;
float nameSize;
boolean variable;
float variableClearance;
color variableColor;
color variableColorActive;
color variableColorAlt;
boolean variableDisplayAlt;
color variableFalseColor;
String variableFalseLabel;
String variableLocation;
float variableSize;
color variableTrueColor;
String variableTrueLabel;
boolean variableUpperCase;
//DO NOT UPDATE
boolean startValue; //for momentary mode
Button(float tX, float tY, boolean tVariable, String tMode, String tName) {
x = tX;
y = tY;
buttonDiam = 50;
buttonHeight = 20;
buttonWidth = 80;
mode = tMode;
roundedCorner = 2;
startValue = false;
themeColor = "DEFAULT";
name = tName;
nameClearance = 4;
nameLocation = "DEFAULT";
nameSize = 12;
variable = tVariable;
variableClearance = 4;
variableFalseLabel = "OFF";
variableLocation = "DEFAULT";
variableSize = 12;
variableTrueLabel = "ON";
variableUpperCase = true;
if(variable) {
startValue = true;
}
}
/***** Display and update button *****/
void display() {
preDisplay();
displayPosition();
updateVariable();
displayName();
displayVariable();
themeDisplay();
endDisplay();
}
/***** Check initial state of slider *****/
void preDisplay() {
noStroke();
if (buttonEllipse) { //For ellipse button
buttonWidth = buttonDiam;
buttonHeight = buttonDiam;
}
}
/***** Reset sketch parameters *****/
void endDisplay() {
strokeWeight(1);
stroke(0);
noFill();
textAlign(LEFT, BASELINE);
textSize(12.0);
}
/***** Select theme color *****/
void themeDisplay() {
switch(themeColor) {//Preprogrammed theme colors
case "GREEN":
activeColor = color(0, 255, 0);
variableColorAlt = color(255);
nameColor = color(0);
variableColor = color(255);
variableTrueColor = color(150, 230, 140);
variableFalseColor = color(45, 170, 35);
break;
case "BLUE":
activeColor = color(0, 0, 255);
variableColorAlt = color(255);
nameColor = color(0);
variableColor = color(255);
variableTrueColor = color(90, 105, 230);
variableFalseColor = color(20, 45, 180);
break;
case "RED":
activeColor = color(255, 0, 0);
variableColorAlt = color(255);
nameColor = color(0);
variableColor = color(255);
variableTrueColor = color(255, 170, 170);
variableFalseColor = color(210, 60, 60);
break;
case "PURPLE":
activeColor = color(160, 50, 255); //Bright
variableColorAlt = color(255); //White
nameColor = color(0); //Black
variableColor = color(255); //White
variableTrueColor = color(195, 130, 255); //Lighter
variableFalseColor = color(140, 0, 255); //Dark
break;
default:
activeColor = color(0); //Black
variableColorAlt = color(255); //White
nameColorActive = (255); //Black
nameColor = color(0); //Black
nameColorAlt = color(0); //Black
variableColorActive = color(255); //White
variableColor = color(0); //Black
variableColorAlt = color(0); //Black
variableTrueColor = color(200); //Light Gray
variableFalseColor = color(80); //Dark Gray
break;
}
}
/***** Position button *****/
void displayPosition() {
if (active()) {
fill(activeColor);
} else {
if (variable) {
fill(variableTrueColor);
} else {
fill(variableFalseColor);
}
}
if (buttonEllipse) {
ellipse(x, y, buttonWidth, buttonHeight);
} else {
rect(x, y, buttonWidth, buttonHeight, roundedCorner);
}
}
void updateVariable() { //Update the value of variable
switch(mode) { //For momentary mode
case "MOMENTARY":
if(startValue) {
if (selected()) {
variable = false;
} else {
variable = true;
}
} else {
if (selected()) {
variable = true;
} else {
variable = false;
}
}
break;
case "LATCH":
//Run latchMode() method in void mouseClicked() or void mouseReleased()
break;
default:
break;
}
}
/***** For latchMode() *****/
void latchMode() { //To be called in void mouseClicked or void mouseReleased
if (active()) {
variable =! variable;
}
}
/***** Display button name *****/
void displayName() {
textSize(nameSize);
fill(nameColor);
if(buttonEllipse) { //Ellipse button
switch(nameLocation) {
case "IN": //Show in button
if (active()) {
fill(nameColorActive);
} else {
if (variable) {
fill(nameColor);
} else {
fill(nameColorAlt);
}
}
textAlign(CENTER, CENTER);
text(name, x, y);
break;
case "TOP": //Show top of button
textAlign(CENTER, BOTTOM);
text(name, x, y - buttonHeight/2 - nameClearance);
break;
case "LEFT": //Show left of button
textAlign(RIGHT, CENTER);
text(name, x - buttonWidth/2 - nameClearance, y);
break;
case "RIGHT": //Show right of button
textAlign(LEFT, CENTER);
text(name, x + buttonWidth/2 + nameClearance, y);
break;
case "NONE": //No name display
break;
case "BOTTOM": //BOTTOM
default:
textAlign(CENTER, TOP);
text(name, x, y + buttonHeight/2 + nameClearance);
break;
}
} else { // Rect button
switch(nameLocation) {
case "IN": //Show in button
if (active()) {
fill(nameColorActive);
} else {
if (variable) {
fill(nameColor);
} else {
fill(nameColorAlt);
}
}
textAlign(CENTER, CENTER);
text(name, x + buttonWidth/2, y + buttonHeight/2);
break;
case "TOP": //Show top of button
textAlign(CENTER, BOTTOM);
text(name, x + buttonWidth/2, y - nameClearance);
break;
case "LEFT": //Show left of button
textAlign(RIGHT, CENTER);
text(name, x - nameClearance, y + buttonHeight/2);
break;
case "RIGHT": //Show right of button
textAlign(LEFT, CENTER);
text(name, x + buttonWidth + nameClearance, y + buttonHeight/2);
break;
case "NONE": //No name display
break;
case "BOTTOM": //BOTTOM
default:
textAlign(CENTER, TOP);
text(name, x + buttonWidth/2, y + buttonHeight + nameClearance);
break;
}
}
}
/***** Display variable value *****/
void displayVariable() { //Display variable of button
textSize(variableSize);
fill(0);
String variableString = String.valueOf(variable); //*Java* Display lower case
//String variableString = variable.toString(); //*.js* Display lower case
if (variableUpperCase) { //Display with uppercase letters
variableString = variableString.toUpperCase();
}
if(buttonEllipse) { //Ellipse button
switch(variableLocation) {
case "IN": //Appear in button
textAlign(CENTER, CENTER);
if (active()) {
fill(variableColorActive);
} else {
if (variable) {
fill(variableColor);
} else {
fill(variableColorAlt);
}
}
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x, y);
} else {
text(variableFalseLabel, x, y);
}
} else {
text(variableString, x, y);
}
break;
case "TOP": //Show top of button
textAlign(CENTER, BOTTOM);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x, y - buttonHeight/2 - variableClearance);
} else {
text(variableFalseLabel, x, y - buttonHeight/2 - variableClearance);
}
} else {
text(variableString, x, y - buttonHeight/2 - variableClearance);
}
break;
case "BOTTOM": //Show bottom of button
textAlign(CENTER, TOP);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x, y + buttonHeight/2 + variableClearance);
} else {
text(variableFalseLabel, x, y + buttonHeight/2 + variableClearance);
}
} else {
text(variableString, x, y + buttonHeight/2 + variableClearance);
}
break;
case "LEFT": //Show left of button
textAlign(RIGHT, CENTER);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x - buttonWidth/2 - variableClearance, y);
} else {
text(variableFalseLabel, x - buttonWidth/2 - variableClearance, y);
}
} else {
text(variableString, x - buttonWidth/2 - variableClearance, y);
}
break;
case "RIGHT": //Show right of button
textAlign(LEFT, CENTER);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x + buttonWidth/2 + variableClearance, y);
} else {
text(variableFalseLabel, x + buttonWidth/2 + variableClearance, y);
}
} else {
text(variableString, x + buttonWidth/2 + variableClearance, y);
}
break;
default: //No variable display
break;
}
} else { //Rect Button
switch(variableLocation) {
case "IN": //Appear in button
textAlign(CENTER, CENTER);
if (active()) {
fill(variableColorActive);
} else {
if (variable) {
fill(variableColor);
} else {
fill(variableColorAlt);
} //HERE
}
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x + buttonWidth/2, y + buttonHeight/2);
} else {
text(variableFalseLabel, x + buttonWidth/2, y + buttonHeight/2);
}
} else {
text(variableString, x + buttonWidth/2, y + buttonHeight/2);
}
break;
case "TOP": //Show top of button
textAlign(CENTER, BOTTOM);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x + buttonWidth/2, y - variableClearance);
} else {
text(variableFalseLabel, x + buttonWidth/2, y - variableClearance);
}
} else {
text(variableString, x + buttonWidth/2, y - variableClearance);
}
break;
case "BOTTOM": //Show bottom of button
textAlign(CENTER, TOP);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x + buttonWidth/2, y + buttonHeight + variableClearance);
} else {
text(variableFalseLabel, x + buttonWidth/2, y + buttonHeight + variableClearance);
}
} else {
text(variableString, x + buttonWidth/2, y + buttonHeight + variableClearance);
}
break;
case "LEFT": //Show left of button
textAlign(RIGHT, CENTER);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x - variableClearance, y + buttonHeight/2);
} else {
text(variableFalseLabel, x - variableClearance, y + buttonHeight/2);
}
} else {
text(variableString, x - variableClearance, y + buttonHeight/2);
}
break;
case "RIGHT": //Show right of button
textAlign(LEFT, CENTER);
if (variableDisplayAlt) {
if (variable) {
text(variableTrueLabel, x + buttonWidth + variableClearance, y + buttonHeight/2);
} else {
text(variableFalseLabel, x + buttonWidth + variableClearance, y + buttonHeight/2);
}
} else {
text(variableString, x + buttonWidth + variableClearance, y + buttonHeight/2);
}
break;
default: //No variable display
break;
}
}
}
boolean selected() { //Is button selected
if (mousePressed && active()) {
return true;
} else {
return false;
}
}
boolean active() { //Is button active
if (buttonEllipse) { //Round button
float disX = x - mouseX;
float disY = y - mouseY;
if (sqrt(sq(disX) + sq(disY)) < buttonWidth/2 ) {
return true;
} else {
return false;
}
} else { //Default Rect
if (mouseX > x && mouseX < x + buttonWidth &&
mouseY > y && mouseY < y + buttonHeight) {
return true;
} else {
return false;
}
}
}
}