# Feedback on Button maker

**URL:** <https://discourse.processing.org/t/feedback-on-button-maker/17768>\
**Category:** Coding Questions\
**Created:** [February 12, 2020, 10:12am UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768 "2020-02-12T10:12:03Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![SWijnen](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SWijnen](https://discourse.processing.org/u/SWijnen)\
**Post date:** [February 12, 2020, 10:12am UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768/1 "2020-02-12T10:12:03Z")

</div>

Hello everyone,

I tried to create a button class and now I am wondering what I can improve upon this code.  
I am also wondering how I would be able to only have the upper button working when the buttons overlap each other. At the moment, both buttons will work then.

```auto
Button b1, b2, b3;

int Bsize = 150; //Button size
void setup() {
  size(500, 500);
  background(150);

  b1 = new Button("-", #0A0A0A, width/2-100, height/2, Bsize, Bsize);
  b2 = new Button("+", #0A0A0A, width/2+100, height/2, Bsize/2, Bsize);
  b3 = new Button("B", #0A0A0A, width/2, height/2-100, Bsize, Bsize);
}

void draw() {  
  if (b1.MousePressed()) {
    background(200, 200, 0);
  }
  if (b2.MousePressed()) {
    background(150);
  }
  if (b3.MousePressed()) {
    background(0, 200, 200);
  }
  b1.B_draw();
  b2.B_draw();
  b3.B_draw();
}

class Button {
  int button_w, button_h, pm_size, posx, posy; //pm_size == the size of the built in + and - sign.
  String T; //Text on the button.
  color ct, cb; //ct = text color, cb = button color (cb gets his values from noSelect/Select)
  color noSelect = #00B9FF; //Color when the button is not selected
  color Select = #0081B2; //Color when the button is selected.
  boolean Output;
  Button(String Text, color cText, int x, int y, int w, int h) { //(Text on the button, color of the text, pos X, pos Y, width, height)
    posx = x;
    posy = y;
    button_w = w;
    button_h = h;
    T = Text;
    ct = cText;
    cb = noSelect;
    if( button_w > button_h){ //Checks what the smallest is: button_w or button_h. And gives the smallest value to pm_size.
      pm_size = button_h;
    }else if ( button_h > button_w){
      pm_size = button_w;
    }else if(button_w == button_h){
      pm_size = button_h;
    }
  }
  void B_draw() {
    MousePressed();
    pushMatrix();
    translate(posx, posy);
    strokeWeight(1);
    fill(cb);
    rectMode(CENTER);
    rect(0, 0, button_w, button_h);

    stroke(0);
    strokeCap(SQUARE);
    strokeWeight(pm_size/15);
    if (T == "+") { //Build in + symbol to get a centered +
      line(-pm_size/2.5, 0, pm_size/2.5, 0);
      line(0, -pm_size/2.5, 0, pm_size/2.5);
    } else if (T == "-") { //Build in - symbol to get a centered -
      line(-pm_size/2.5, 0, pm_size/2.5, 0);
    } else { //Display the custom text
      fill(ct);
      textAlign(CENTER, CENTER);
      textSize(button_h);
      text(T, 0, 0-(button_h/9));
    }
    popMatrix();
  }
  boolean MousePressed() { //Checks if the mouse is over the button
    if (mouseY > posy-(button_h/2) && mouseY < posy+(button_h/2) && mouseX > posx-(button_w/2) && mouseX < posx+(button_w/2)) {
      cb = Select;
      if (mousePressed == true) { //Checks if the mouse is pressing the button
        return true;
      } else {
        return false;
      }
    } else {
      cb = noSelect;
      return false;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 12, 2020, 3:03pm UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768/2 "2020-02-12T15:03:31Z")

</div>

here is my version.

It’s best to check the mousePress in a function mousePressed. It registers each click only once.

I marked some pieces with !!!

You can of course make an array from b1,b2,b3 like `Button[] b = new Button[3];` or rather `Button[] buttons = new Button[3];`

Chrisir

```auto

Button b1, b2, b3;

int Bsize = 150; //Button size //move this line into setup() !!!!!!!!!!!!!!!!!!!!!!!!!

void setup() {
  size(500, 500);
  background(150);

  b1 = new Button("-", #0A0A0A, width/2-100, height/2, Bsize, Bsize);
  b2 = new Button("+", #0A0A0A, width/2+100, height/2, Bsize/2, Bsize);
  b3 = new Button("B", #0A0A0A, width/2, height/2-100, Bsize, Bsize);
}

void draw() {  
  b1.B_draw();
  b2.B_draw();
  b3.B_draw();
}

void mousePressed() {
  // here the order decides which button is executed when overlapping // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
   // only ONE button gets executed 
  if (b1.MousePressed()) {
    background(200, 200, 0);
    return; // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
  if (b2.MousePressed()) {
    background(150);
    return; // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
  if (b3.MousePressed()) {
    background(0, 200, 200);
    return; // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
}//func

//=====================================================================================================

class Button {

  int button_w, button_h, pm_size, posx, posy; //pm_size == the size of the built in + and - sign.

  String T; //Text on the button.

  color ct, cb; //ct = text color, cb = button color (cb gets his values from noSelect/Select)

  color noSelect = #00B9FF; //Color when the button is not selected
  color Select = #0081B2; //Color when the button is selected.

  boolean Output;

  Button(String Text, 
    color cText, 
    int x, int y, 
    int w, int h) {  

    //(Text on the button, color of the text, pos X, pos Y, width, height)

    posx = x;
    posy = y;
    button_w = w;
    button_h = h;
    T = Text;
    ct = cText;
    cb = noSelect;
    if ( button_w > button_h) { //Checks what the smallest is: button_w or button_h. And gives the smallest value to pm_size.
      pm_size = button_h;
    } else if ( button_h > button_w) {
      pm_size = button_w;
    } else if (button_w == button_h) {
      pm_size = button_h;
    }
  }

  void B_draw() {
    // MousePressed(); // delete this // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
    pushMatrix();
    translate(posx, posy);
    strokeWeight(1);

    // check mouse over 
    if (mouseY > posy-(button_h/2) &&
      mouseY < posy+(button_h/2) && 
      mouseX > posx-(button_w/2) && 
      mouseX < posx+(button_w/2)) {
      cb = Select;
    } else {
      cb = noSelect;
    }

    fill(cb);
    rectMode(CENTER);
    rect(0, 0, button_w, button_h);

    stroke(0);
    strokeCap(SQUARE);
    strokeWeight(pm_size/15);
    if (T .equals( "+")) { //Build in + symbol to get a centered +
      line(-pm_size/2.5, 0, pm_size/2.5, 0);
      line(0, -pm_size/2.5, 0, pm_size/2.5);
    } else if (T .equals( "-")) { //Build in - symbol to get a centered -
      line(-pm_size/2.5, 0, pm_size/2.5, 0);
    } else { //Display the custom text
      fill(ct);
      textAlign(CENTER, CENTER);
      textSize(button_h);
      text(T, 0, 0-(button_h/9));
    }
    popMatrix();
  }

  boolean MousePressed() {  
    //Checks if the mouse is over the button
    if (mouseY > posy-(button_h/2) &&
      mouseY < posy+(button_h/2) && 
      mouseX > posx-(button_w/2) && 
      mouseX < posx+(button_w/2)) {

      cb = Select;
      if (mousePressed) { //Checks if the mouse is pressing the button
        return true;
      } else {
        return false;
      }
    } else {
      cb = noSelect;
      return false;
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![SWijnen](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SWijnen](https://discourse.processing.org/u/SWijnen)\
**Post date:** [February 12, 2020, 6:05pm UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768/3 "2020-02-12T18:05:28Z")

</div>

> [@Chrisir](#):
>
> if (b1.MousePressed()) { background(200, 200, 0); return;

Why do you end this with ‘return’?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 12, 2020, 6:06pm UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768/4 "2020-02-12T18:06:36Z")

</div>

> [@SWijnen](#):
>
> I am also wondering how I would be able to only have the upper button working when the buttons overlap each other.

You said you wanted to execute only one button.

With return we leave the function, so that other buttons can’t be executed

---

<div class="post-metadata">

**Author:** ![SWijnen](https://avatars.discourse-cdn.com/v4/letter/s/e274bd/32.png) [@SWijnen](https://discourse.processing.org/u/SWijnen)\
**Post date:** [February 12, 2020, 6:09pm UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768/5 "2020-02-12T18:09:32Z")

</div>

> [@Chrisir](#):
>
> Button b1, b2, b3; int Bsize = 150; //Button size //move this line into setup() !!! void setup() { size(500, 500); background(150); b1 = new Button(“-”, #0A0A0A, width/2-100, height/2, Bsize, Bsize); b2 = new Button(“+”, #0A0A0A, width/2+100, height/2, Bsize/2, Bsize); b3 = new Button(“B”, #0A0A0A, width/2, height/2-100, Bsize, Bsize); } void draw() { b1.B\_draw(); b2.B\_draw(); b3.B\_draw(); } void mousePressed() { // here the order decides which button is executed when overlapping // !!! // only ONE button gets executed if (b1.MousePressed()) { background(200, 200, 0); return; // leave here !!! } if (b2.MousePressed()) { background(150); return; // leave here !!! } if (b3.MousePressed()) { background(0, 200, 200); return; // leave here !!! } }//func //===================================================================================================== class Button { int button\_w, button\_h, pm\_size, posx, posy; //pm\_size == the size of the built in + and - sign. String T; //Text on the button. color ct, cb; //ct = text color, cb = button color (cb gets his values from noSelect/Select) color noSelect = #00B9FF; //Color when the button is not selected color Select = #0081B2; //Color when the button is selected. boolean Output; Button(String Text, color cText, int x, int y, int w, int h) { //(Text on the button, color of the text, pos X, pos Y, width, height) posx = x; posy = y; button\_w = w; button\_h = h; T = Text; ct = cText; cb = noSelect; if ( button\_w \> button\_h) { //Checks what the smallest is: button\_w or button\_h. And gives the smallest value to pm\_size. pm\_size = button\_h; } else if ( button\_h \> button\_w) { pm\_size = button\_w; } else if (button\_w == button\_h) { pm\_size = button\_h; } } void B\_draw() { // MousePressed(); // delete this // leave here !!! pushMatrix(); translate(posx, posy); strokeWeight(1); // check mouse over if (mouseY \> posy-(button\_h/2) && mouseY \< posy+(button\_h/2) && mouseX \> posx-(button\_w/2) && mouseX \< posx+(button\_w/2)) { cb = Select; } else { cb = noSelect; } fill(cb); rectMode(CENTER); rect(0, 0, button\_w, button\_h); stroke(0); strokeCap(SQUARE); strokeWeight(pm\_size/15); if (T .equals( “+”)) { //Build in + symbol to get a centered + line(-pm\_size/2.5, 0, pm\_size/2.5, 0); line(0, -pm\_size/2.5, 0, pm\_size/2.5); } else if (T .equals( “-”)) { //Build in - symbol to get a centered - line(-pm\_size/2.5, 0, pm\_size/2.5, 0); } else { //Display the custom text fill(ct); textAlign(CENTER, CENTER); textSize(button\_h); text(T, 0, 0-(button\_h/9)); } popMatrix(); } boolean MousePressed() { //Checks if the mouse is over the button if (mouseY \> posy-(button\_h/2) && mouseY \< posy+(button\_h/2) && mouseX \> posx-(button\_w/2) && mouseX \< posx+(button\_w/2)) { cb = Select; if (mousePressed) { //Checks if the mouse is pressing the button return true; } else { return false; } } else { cb = noSelect; return false; } } }

I see what you mean. But what I meant, (but did not describe) is that now, if you are hovering over 2 buttons, both buttons will change color. What I want is that only the top button changes color and gets executed.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [February 12, 2020, 6:44pm UTC](https://discourse.processing.org/t/feedback-on-button-maker/17768/6 "2020-02-12T18:44:23Z")

</div>

That was REALLY tricky…

```auto

Button b1, b2, b3;

int Bsize = 150; //Button size //move this line into setup() !!!!!!!!!!!!!!!!!!!!!!!!!

void setup() {
  size(500, 500);
  background(150);

  b1 = new Button("-", #0A0A0A, width/2-100, height/2, Bsize, Bsize);
  b2 = new Button("+", #0A0A0A, width/2+100, height/2, Bsize/2, Bsize);
  b3 = new Button("B", #0A0A0A, width/2, height/2-100, Bsize, Bsize);
}

void draw() {  
  boolean anyWasSelected=false; 
  anyWasSelected=b3.checkMouseOver(anyWasSelected);
  anyWasSelected=b1.checkMouseOver(anyWasSelected);
  anyWasSelected=b2.checkMouseOver(anyWasSelected);

  b1.B_draw();
  b2.B_draw();
  b3.B_draw();
}

void mousePressed() {
  // here the order decides which button is executed when overlapping // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  // only ONE button gets executed 
  if (b3.MousePressed()) {
    background(0, 200, 200);
    return; // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
  if (b1.MousePressed()) {
    background(200, 200, 0);
    return; // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
  if (b2.MousePressed()) {
    background(150);
    return; // leave here !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
  }
}//func

//=====================================================================================================

class Button {

  int button_w, button_h, pm_size, posx, posy; //pm_size == the size of the built in + and - sign.

  String T; //Text on the button.

  color ct, cb; //ct = text color, cb = button color (cb gets his values from noSelect/Select)

  color noSelect = #00B9FF; //Color when the button is not selected
  color Select = #0081B2; //Color when the button is selected.

  boolean Output;

  Button(String Text, 
    color cText, 
    int x, int y, 
    int w, int h) {  

    //(Text on the button, color of the text, pos X, pos Y, width, height)

    posx = x;
    posy = y;
    button_w = w;
    button_h = h;
    T = Text;
    ct = cText;
    cb = noSelect;
    if ( button_w > button_h) { //Checks what the smallest is: button_w or button_h. And gives the smallest value to pm_size.
      pm_size = button_h;
    } else if ( button_h > button_w) {
      pm_size = button_w;
    } else if (button_w == button_h) {
      pm_size = button_h;
    }
  }

  boolean checkMouseOver(boolean anyWasSelected) { 

    boolean returnValue=anyWasSelected; 

    cb = noSelect;

    // check mouse over 
    if (mouseY > posy-(button_h/2) &&
      mouseY < posy+(button_h/2) && 
      mouseX > posx-(button_w/2) && 
      mouseX < posx+(button_w/2)) {
      if (!anyWasSelected) {
        cb = Select;
      }
      returnValue=true;
    } else {
      cb = noSelect;
    }

    if (anyWasSelected) 
      return true; 
    if (cb==Select) 
      return true; 
    return returnValue;
    // return false;
  }

  void B_draw() {

    pushMatrix();
    translate(posx, posy);
    strokeWeight(1);
    fill(cb);
    rectMode(CENTER);
    rect(0, 0, button_w, button_h);
    stroke(0);
    strokeCap(SQUARE);
    strokeWeight(pm_size/15);
    if (T .equals( "+")) { //Build in + symbol to get a centered +
      line(-pm_size/2.5, 0, pm_size/2.5, 0);
      line(0, -pm_size/2.5, 0, pm_size/2.5);
    } else if (T .equals( "-")) { //Build in - symbol to get a centered -
      line(-pm_size/2.5, 0, pm_size/2.5, 0);
    } else { //Display the custom text
      fill(ct);
      textAlign(CENTER, CENTER);
      textSize(button_h);
      text(T, 0, 0-(button_h/9));
    }
    popMatrix();
  }

  boolean MousePressed() {  
    //Checks if the mouse is over the button
    if (mouseY > posy-(button_h/2) &&
      mouseY < posy+(button_h/2) && 
      mouseX > posx-(button_w/2) && 
      mouseX < posx+(button_w/2)) {

      //Checks if the mouse is pressing the button
      return true;
    } else {
      return false;
    }
  }
}

```