2022-11-28 11:04:49 +00:00
|
|
|
/**
|
|
|
|
* @file This file provides the button class, which can
|
|
|
|
* be checked for clicks
|
|
|
|
* @author Arlo Filley
|
|
|
|
*
|
|
|
|
* TODO:
|
|
|
|
* - implement visual changes (borders, etc)
|
|
|
|
* - replace with methods with getters and setters
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
* Button class, a rectangle that can be checked for mouse clicks
|
|
|
|
*/
|
2022-10-05 22:44:06 +01:00
|
|
|
class Button {
|
|
|
|
// this is the doc comment for the Timer class
|
|
|
|
/**
|
|
|
|
* @param {int} pX
|
|
|
|
* @param {int} pY
|
|
|
|
* @param {int} pWidth
|
|
|
|
* @param {int} pHeight
|
|
|
|
* @param {int} pLayer
|
|
|
|
* @param {bool} pVisible
|
|
|
|
* @param {hexcode} pTextColor
|
|
|
|
* @param {bool} pBorder
|
|
|
|
* @param {hexcode} pBorderColor
|
|
|
|
* @param {hexcode} pBackgroundColor
|
|
|
|
* @param {int} pTime
|
|
|
|
* @param {bool} pBar
|
|
|
|
* @param {string} Label
|
|
|
|
*/
|
2022-11-28 11:04:49 +00:00
|
|
|
constructor(pX = 100, pY = 100,
|
|
|
|
pWidth = 200, pHeight = 30,
|
|
|
|
pLayer = 0, pVisible = true,
|
|
|
|
pTextColor = "#fff",
|
|
|
|
pBorder = false, pBorderColor = "#000",
|
|
|
|
pBackgroundColor = "#000",
|
|
|
|
pLabel = "Default Button",
|
|
|
|
pHoverBorder = true, pHoverBorderColor = "#000",
|
|
|
|
pHoverTextColor = "#000", pHoverBackgroundColor = "#00ff00"
|
|
|
|
) {
|
2022-10-05 22:44:06 +01:00
|
|
|
this.x = pX;
|
|
|
|
this.y = pY;
|
|
|
|
this.width = pWidth;
|
|
|
|
this.height = pHeight;
|
|
|
|
this.layer = pLayer;
|
|
|
|
this.visible = pVisible;
|
|
|
|
this.textColor = pTextColor;
|
|
|
|
this.border = pBorder;
|
|
|
|
this.borderColor = pBorderColor;
|
|
|
|
this.backgroundColor = pBackgroundColor;
|
|
|
|
this.label = pLabel;
|
2022-11-28 11:04:49 +00:00
|
|
|
|
|
|
|
// Attributes to control the look of the button
|
|
|
|
// when the user is hovering over it
|
|
|
|
this.hoverBorder = pHoverBorder;
|
|
|
|
this.hoverBorderColor = pHoverBorderColor;
|
|
|
|
this.hoverTextColor = pHoverTextColor;
|
|
|
|
this.hoverBackgroundColor = pHoverBackgroundColor;
|
2022-10-05 22:44:06 +01:00
|
|
|
}
|
|
|
|
|
2022-11-28 11:04:49 +00:00
|
|
|
getx() {
|
2022-10-05 22:44:06 +01:00
|
|
|
return this.x;
|
|
|
|
}
|
|
|
|
|
|
|
|
setX(pX) {
|
|
|
|
this.x = pX;
|
|
|
|
}
|
|
|
|
|
|
|
|
getY() {
|
|
|
|
return this.y;
|
|
|
|
}
|
|
|
|
|
|
|
|
setY(pY) {
|
|
|
|
this.y = pY;
|
|
|
|
}
|
|
|
|
|
|
|
|
getWidth() {
|
|
|
|
return this.width;
|
|
|
|
}
|
|
|
|
|
|
|
|
setWidth(pWidth) {
|
|
|
|
this.width = pWidth;
|
|
|
|
}
|
|
|
|
|
|
|
|
getHeight() {
|
|
|
|
return this.height;
|
|
|
|
}
|
|
|
|
|
|
|
|
setHeight(pHeight) {
|
|
|
|
this.height = pHeight;
|
|
|
|
}
|
|
|
|
|
|
|
|
getLayer() {
|
|
|
|
return this.layer;
|
|
|
|
}
|
|
|
|
|
|
|
|
setLayer(pLayer) {
|
|
|
|
this.layer = pLayer;
|
|
|
|
}
|
|
|
|
|
|
|
|
getVisible() {
|
|
|
|
return this.visible;
|
|
|
|
}
|
|
|
|
|
|
|
|
setVisible(pVisible) {
|
|
|
|
this.visible = pVisible;
|
|
|
|
}
|
|
|
|
|
|
|
|
getTextColor() {
|
|
|
|
return this.textColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
setTextColor(pTextColor) {
|
|
|
|
this.textColor = pTextColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
getBorder() {
|
|
|
|
return this.border;
|
|
|
|
}
|
|
|
|
|
|
|
|
setBorder(pBorder) {
|
|
|
|
this.border = pBorder;
|
|
|
|
}
|
|
|
|
|
|
|
|
getBorderColor() {
|
|
|
|
return this.borderColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
setBorderColor(pBorderColor) {
|
|
|
|
this.borderColor = pBorderColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
getBackgroundColor() {
|
|
|
|
return this.backgroundColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
setBackgroundColor(pBackgroundColor) {
|
|
|
|
this.backgroundColor = pBackgroundColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
getLabel() {
|
|
|
|
return this.label;
|
|
|
|
}
|
|
|
|
|
|
|
|
setLabel(pLabel) {
|
|
|
|
this.label = pLabel;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This functions returns more
|
|
|
|
*/
|
|
|
|
isPressed() {
|
2022-11-28 11:04:49 +00:00
|
|
|
if (!this.visible) {
|
|
|
|
return;
|
|
|
|
} else if (!mouseIsPressed) { // a unique p5.js value that checks if the mouse is clicked
|
2022-10-05 22:44:06 +01:00
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
// if the mouse is within the bounds of the return that the button has been pressed
|
|
|
|
if (mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height) {
|
|
|
|
return true;
|
|
|
|
}
|
|
|
|
return false;
|
|
|
|
}
|
|
|
|
|
|
|
|
/**
|
|
|
|
* This function draws the button with the label
|
|
|
|
*/
|
|
|
|
draw() {
|
2022-11-28 11:04:49 +00:00
|
|
|
if (!this.visible) {
|
|
|
|
return;
|
|
|
|
}
|
2022-11-11 13:04:13 +00:00
|
|
|
textSize(20);
|
2022-10-05 22:44:06 +01:00
|
|
|
|
2022-11-28 11:04:49 +00:00
|
|
|
if (mouseX > this.x && mouseX < this.x + this.width && mouseY > this.y && mouseY < this.y + this.height) {
|
|
|
|
|
|
|
|
if (this.hoverBorder) {
|
|
|
|
strokeWeight(2);
|
|
|
|
stroke(this.hoverBorderColor)
|
|
|
|
} else {
|
|
|
|
noStroke();
|
|
|
|
}
|
|
|
|
fill(this.hoverBackgroundColor);
|
|
|
|
rect(this.x, this.y, this.width, this.height);
|
|
|
|
|
|
|
|
noStroke();
|
|
|
|
fill(this.hoverTextColor);
|
|
|
|
text(this.label, this.x, this.y, this.width, this.height);
|
|
|
|
} else {
|
2022-11-29 12:21:38 +00:00
|
|
|
if (this.border) {
|
|
|
|
strokeWeight(2);
|
|
|
|
stroke(this.borderColor)
|
|
|
|
} else {
|
|
|
|
noStroke();
|
|
|
|
}
|
|
|
|
|
2022-11-28 11:04:49 +00:00
|
|
|
fill(this.backgroundColor);
|
|
|
|
rect(this.x, this.y, this.width, this.height);
|
2022-11-29 12:21:38 +00:00
|
|
|
|
|
|
|
noStroke();
|
2022-11-28 11:04:49 +00:00
|
|
|
fill(this.textColor);
|
|
|
|
text(this.label, this.x, this.y, this.width, this.height);
|
|
|
|
}
|
|
|
|
noStroke();
|
2022-10-05 22:44:06 +01:00
|
|
|
}
|
|
|
|
}
|