Yahir
2/19/2019 - 9:18 PM
lock Button Simple Momentary Example
/**********************************************************************
Simple Momentary Example of the Button Class by Yahir
For Button Class Version 2
Full guide and Attribute list at:
https://www.yahir360.com/gui
**********************************************************************/
// Declare Button object
Button myButton;
// Variable to be toggled by Button
boolean isOn = false;
void setup() {
size(400, 400, FX2D);
// Initialize Button object
// button constructor(Name, x, y, boolean)
myButton = new Button("my button", 200, 240, isOn);
// Create round button and update button size
myButton.setButtonType("ROUND");
myButton.setButtonHeight(60);
}
void draw() {
backgroundDetails();
// Assign global variable to Button class value
isOn = myButton.getValue();
// Display Button object
myButton.display();
// Toggle button value
myButton.updateMomentary();
// Example showing button on/off
if(isOn) {
fill(105, 138, 119);
} else {
fill(29, 70, 47);
}
ellipse(200, 140, 40, 40);
}
/***
* Simple method that stores the background
* and text for the example sketch
***/
void backgroundDetails() {
background(230);
// boarder columns
fill(180);
noStroke();
rect(0, 0, 100, 400);
rect(300, 0, 100, 400);
// Sketch name and credit
textAlign(CENTER);
textSize(12);
fill(100);
text("by yahir", 200, 370);
fill(89);
textSize(24);
text("button example", 200, 40);
}
/***
* Button Class by Yahir
* Full Guide and Attribute list at: https://www.yahir360.com/gui
*
* Class for creating GUI Buttons
* Version 2
* February 2019
***/
class Button {
boolean value; // The value toggling button
float x; // The x position of the button
float y; // The y position of the button
int buttonHeight; // The button hight
int buttonWidth; // The button width
int cornerRound; // The amount of rounding of rect corners
int nameTextClearance; // The gap from the button name to the button edge
int nameTextSize; // The size of the button name text being displayed
int valueTextSize; // The size of the button value text being displayed
String buttonName; // The name of the button to be displayed
String buttonType; // The type of button RECT or ROUND
String theme; // The color theme of the button
String valueFalseText; // Text to display when button value is false. Default false
String valueTrueText; // Text to display when button value is true. Default true
color buttonActiveColor; // Color when the button is active (mouse over)
color buttonFalseColor; // Color of button when the button value is false
color buttonTrueColor; // Color of button when the button value is true
color nameTextColor; // Color of the button name text
color valueTextColor; // color of the button value text
/**
* Constructor used for setting button name, position, and variable to be toggled
*
* @PARAM sName: String name of the button
* @PARAM sX: float value of the button x position
* @PARAM sY: float value of the button y position
* @PARAM sBool: boolean variable being toggled by button
**/
Button(String sName, float sX, float sY, boolean sBool) {
setButtonName(sName);
setX(sX);
setY(sY);
setButtonHeight(40);
setButtonWidth(100);
setValue(sBool);
setButtonType("RECT");
setValueTrueText("true");
setValueFalseText("false");
setTheme("DARK");
setNameTextSize(12);
setValueTextSize(12);
cornerRound = 10;
nameTextClearance = 10;
}
/**
* Setter methods
**/
void setButtonHeight(int sH) {
buttonHeight = sH;
}
void setButtonWidth(int sW) {
buttonWidth = sW;
}
void setX(float sX) {
x = sX;
}
void setY(float sY) {
y = sY;
}
void setValue(boolean sV) {
value = sV;
}
void setButtonName(String sN) {
buttonName = sN;
}
void setButtonType(String sType) {
buttonType = sType;
}
void setValueFalseText(String sValue) {
valueFalseText = sValue;
}
void setValueTrueText(String sValue) {
valueTrueText = sValue;
}
void setTheme(String sTheme) {
theme = sTheme;
if(theme.equals("LIGHT")) {
buttonTrueColor = color(207, 216, 220);
buttonFalseColor = color(96, 125, 139);
buttonActiveColor = color(142, 145, 163);
valueTextColor = color(69, 90, 100);
nameTextColor = color(207, 216, 220);
} else {
buttonTrueColor = color(96, 125, 139);
buttonFalseColor = color(69, 90, 100);
buttonActiveColor = color(78, 82, 109);
valueTextColor = color(207, 216, 220);
nameTextColor = color(69, 90, 100);
}
}
void setNameTextSize(int sSize) {
nameTextSize = sSize;
}
void setValueTextSize(int sSize) {
valueTextSize = sSize;
}
/**
* Getter methods
**/
int getButtonHeight() {
return buttonHeight;
}
int getButtonWidth() {
return buttonWidth;
}
float getX() {
return x;
}
float getY() {
return y;
}
boolean getValue() {
return value;
}
String getButtonName() {
return buttonName;
}
String getButtonType() {
return buttonType;
}
String getValueFalseText() {
return valueFalseText;
}
String getValueTrueText() {
return valueTrueText;
}
String getTheme() {
return theme;
}
int getNameTextSize() {
return nameTextSize;
}
int getValueTextSize() {
return valueTextSize;
}
/**
* Method for displaying the button and all features
** This method should be called within the draw method of the sketch
**/
void display() {
preShow();
showButton();
showName();
showValue();
postShow();
}
/**
* Method for insuring elements align and are set appropriately
* prior to displaying dial
**/
void preShow() {
ellipseMode(CENTER);
}
/**
* Method for returning the changed settings back to default to
* prevent alterations to remaining sketch
**/
void postShow() {
rectMode(CORNER);
strokeWeight(1);
textAlign(LEFT);
textSize(12);
}
/**
* Method for displaying the main button elements
**/
void showButton() {
noStroke();
if(getTheme().equals("LIGHT")) {
if(active()) {
fill(buttonActiveColor);
} else {
if(getValue()) {
fill(buttonTrueColor);
} else {
fill(buttonFalseColor);
}
}
} else {
if(active()) {
fill(buttonActiveColor);
} else {
if(getValue()) {
fill(buttonTrueColor);
} else {
fill(buttonFalseColor);
}
}
}
if(getButtonType().equals("ROUND")) {
//setButtonWidth(getButtonHeight());
ellipse(getX(), getY(), getButtonHeight(), getButtonHeight());
} else {
rectMode(CENTER);
rect(getX(), getY(), getButtonWidth(), getButtonHeight(), cornerRound);
}
}
/**
* Method for displaying the button name text
**/
void showName() {
fill(nameTextColor);
textSize(getNameTextSize());
textAlign(CENTER, CENTER);
text(getButtonName(), getX(), getY() + (getButtonHeight() / 2) + nameTextClearance);
}
/**
* Method for displaying the value text
**/
void showValue() {
fill(valueTextColor);
textSize(getValueTextSize());
textAlign(CENTER, CENTER);
String valueText;
if(getValue()) {
valueText = getValueTrueText();
} else {
valueText = getValueFalseText();
}
text(valueText, getX(), getY());
}
/**
* Method for toggling button value
** This method should be placed withing the mouseClicked method of the sketch
**/
void update() {
if(active()) {
setValue(!getValue());
}
}
/**
* Method for toggling button value
** This method should be placed withing the draw metho fo the sketch
**/
void updateMomentary() {
if(selected()) {
setValue(true);
} else {
setValue(false);
}
}
/**
* Check if mouse clicked within button
**/
boolean selected() {
if (mousePressed && active()) {
return true;
} else {
return false;
}
}
/**
* Check if mouse position is withing button
**/
boolean active() {
switch(getButtonType()) {
case "ROUND":
if (abs(dist(mouseX, mouseY, getX(), getY())) < (getButtonHeight()/2)) {
return true;
} else {
return false;
}
case "RECT":
default:
if (mouseX > x - (buttonWidth / 2) && mouseX < x + (buttonWidth / 2) &&
mouseY > y - (buttonHeight / 2) && mouseY < y + (buttonHeight / 2)) {
return true;
} else {
return false;
}
}
}
}