Button detection not working for some reason

Programming Questions

Elijah Bo..

Button detection not working for some reason

in Programming Questions • 2 months ago

I'm making a calculator as a beginning project. Everything has been going fine until I got to programming the buttons. When I tried to implement button hover detection instead of detecting over the button it detected over the screen (number output).

My code is below:

Calculator.pde

import java.text.NumberFormat;
import java.text.DecimalFormat;
PFont f;
final int topRowYPos = 80;
final int secondRowYPos = 110;
final int thirdRowYPos = 140;
final int fourthRowYPos = 170;
final int fithRowYPos = 200;
final int sixthRowYPos = 230;
final int buttonWidth = 35;
final int buttonHeight = 25;
final int firstRowXPos = 45;
final int secondRowXPos = 85;
final int thirdRowXPos = 125;
final int fourthRowXPos = 165;
final int fithRowXPos = 205;
int digitCount;
boolean isDecimal;
double numOneBuffer;
double numTwoBuffer;
double screenBuffer;
double numMemorY;
Button mc = new Button(firstRowXPos, secondRowYPos);
Button percent = new Button(firstRowXPos, thirdRowYPos);
NumberFormat formatter = new DecimalFormat("0.0000000");
void setup() {
size(250, 280);
}
void draw() {
if (mc.overButton()) {
println("Over MC");
}
screenBuffer = 00.111;
rectMode(CENTER);
fill(255);
rect(125, 140, 240, 270);
rect(125, 40, 220, 30);
rect(firstRowXPos, secondRowYPos, buttonWidth, buttonHeight, 7);
rect(firstRowXPos, thirdRowYPos, buttonWidth, buttonHeight, 7);
rect(firstRowXPos, fourthRowYPos, buttonWidth, buttonHeight, 7);
rect(firstRowXPos, fithRowYPos, buttonWidth, buttonHeight, 7);
rect(firstRowXPos, sixthRowYPos, buttonWidth, buttonHeight, 7);
rect(secondRowXPos, secondRowYPos, buttonWidth, buttonHeight, 7);
rect(secondRowXPos, thirdRowYPos, buttonWidth, buttonHeight, 7);
rect(secondRowXPos, fourthRowYPos, buttonWidth, buttonHeight, 7);
rect(secondRowXPos, fithRowYPos, buttonWidth, buttonHeight, 7);
rect(secondRowXPos, sixthRowYPos, buttonWidth, buttonHeight, 7);
rect(thirdRowXPos, secondRowYPos, buttonWidth, buttonHeight, 7);
rect(thirdRowXPos, thirdRowYPos, buttonWidth, buttonHeight, 7);
rect(thirdRowXPos, fourthRowYPos, buttonWidth, buttonHeight, 7);
rect(thirdRowXPos, fithRowYPos, buttonWidth, buttonHeight, 7);
rect(thirdRowXPos, sixthRowYPos, buttonWidth, buttonHeight, 7);
rect(fourthRowXPos, topRowYPos, buttonWidth, buttonHeight, 7);
rect(fourthRowXPos, secondRowYPos, buttonWidth, buttonHeight, 7);
rect(fourthRowXPos, thirdRowYPos, buttonWidth, buttonHeight, 7);
rect(fourthRowXPos, fourthRowYPos, buttonWidth, buttonHeight, 7);
rect(fourthRowXPos, fithRowYPos, buttonWidth, buttonHeight, 7);
rect(fourthRowXPos, sixthRowYPos, buttonWidth, buttonHeight, 7);
rect(fithRowXPos, topRowYPos, buttonWidth, buttonHeight, 7);
rect(fithRowXPos, secondRowYPos, buttonWidth, buttonHeight, 7);
rect(fithRowXPos, thirdRowYPos, buttonWidth, buttonHeight, 7);
rect(fithRowXPos, fourthRowYPos, buttonWidth, buttonHeight, 7);
rect(fithRowXPos, 215, buttonWidth, 55, 7);
f = createFont("Georgia", 16);
textFont(f);
textAlign(CENTER, CENTER);
fill(0);
text("MC", firstRowXPos, secondRowYPos);
text("%", firstRowXPos, thirdRowYPos);
text("+/-", firstRowXPos, fourthRowYPos);
text("C", firstRowXPos, fithRowYPos);
text("AC", firstRowXPos, sixthRowYPos);
text("MR", secondRowXPos, secondRowYPos);
text("7", secondRowXPos, thirdRowYPos);
text("4", secondRowXPos, fourthRowYPos);
text("1", secondRowXPos, fithRowYPos);
text("0", secondRowXPos, sixthRowYPos);
text("M-", thirdRowXPos, secondRowYPos);
text("8", thirdRowXPos, thirdRowYPos);
text("5", thirdRowXPos, fourthRowYPos);
text("2", thirdRowXPos, fithRowYPos);
text("=", thirdRowXPos, sixthRowYPos);
text("√", fourthRowXPos, topRowYPos);
text("M+", fourthRowXPos, secondRowYPos);
text("9", fourthRowXPos, thirdRowYPos);
text("6", fourthRowXPos, fourthRowYPos);
text("3", fourthRowXPos, fithRowYPos);
text(".", fourthRowXPos, sixthRowYPos);
text("off", fithRowXPos, topRowYPos);
text("÷", fithRowXPos, secondRowYPos);
text("*", fithRowXPos, thirdRowYPos);
text("-", fithRowXPos, fourthRowYPos);
text("+", fithRowXPos, 215);
text(formatter.format(screenBuffer), 125, 40);
}
void mousePressed() {
String debugString = mouseX +","+ mouseY;
println(debugString);
}

Button.pde:

class Button {
final int buttonWidth = 35;
final int buttonHeight = 25;
int xPos, yPos;
Button (int y, int x) {
xPos = x;
yPos = y;
}
boolean overButton() {
if (mouseX >= xPos && mouseX <= xPos+buttonWidth &&
mouseY >= yPos && mouseY <= yPos+buttonHeight) {
return true;
}
else {
return false;
}
}
}

Thanks in advance.

Replies(4)

GoToLoop

Re: Button detection not working for some reason

2 months ago

I've spotted the bug -> You use a diff. rectMode()! Rather than default's CORNER, you've chosen CENTER.
The catch is, a rect() is now drawn from its center coordinates rather than its left-top 1s.
So, your isOverButton() method fails miserably!

Below lies your Button class fixed:

class Button {
  static final int BTN_DX = 35, BTN_DY = 25; // diameters x, y
  static final int BTN_RX = BTN_DX >> 1;     // radius x
  static final int BTN_RY = BTN_DY >> 1;     // radius y

  final int left, right, top, bottom; // button edges

  Button (int cx, int cy) {  // centralized positions x, y
    left = cx - BTN_RX;
    right = cx + BTN_RX;
    top = cy - BTN_RY;
    bottom = cy + BTN_RY;
  }

  boolean isOverButton() {
    return mouseX > left & mouseX < right 
      & mouseY > top & mouseY < bottom;
  }
}

Chrisir

Re: Button detection not working for some reason

2 months ago

err....
If I am not mistaken,

you swapped x and y in line 6 of Button.pde
also try to save your sketch as calc.pde because processing doesn't like it when sketch has the same name as a class in it (Button)

also, I noticed you use

rectMode(CENTER);

Therefore x,y is the center whereas in line 11/12 you assume it is the upper left corner.
Therefore you need to hover little below and right from the text "MC" to get a result.
So either delete rectMode(CENTER); or change line 11/12

Arrays and class
your code is very long winded
I understand you are turning it into a class. Good.
The goal is:

have rect painted in the class
have text in the class

You don't have that yet.

But if you do:
You would end up with code like

mc.display();
percent.display();
....

etc. for all (!) buttons.

To avoid long code like this I recommend using an array of that class.

Thus you could for loop over the class

for i......... {
buttons[i].display();
}

Defining the array
So instead of

Button mc = new Button(firstRowXPos, secondRowYPos);

you'd say

int max = 36; // max buttons
Button[] buttons = new Button [max]; // array
buttons[0] = new Button (firstRowXPos, secondRowYPos, "MC"); // 1st object in the class

(That part would still be long since you need to define the buttons, but then the rest will be short)

Greetings, Chrisir

If you need an answer, please send me a personal message since this forum doesn't notify.

Chrisir

Re: Button detection not working for some reason

2 months ago

GoToLoop, I was working on it and hadn't seen yours
well spotted

Greetings, Chrisir

GoToLoop

Re: Button detection not working for some reason

2 months ago

An online example for a button GUI:
http://studio.processingtogether.com/sp/pad/export/ro.9vAkI4JDuLs8s/latest

Top Reply