# How to display class button

**URL:** <https://discourse.processing.org/t/how-to-display-class-button/11181>\
**Category:** Coding Questions\
**Created:** [May 12, 2019, 9:47pm UTC](https://discourse.processing.org/t/how-to-display-class-button/11181 "2019-05-12T21:47:23Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)\
**Post date:** [May 12, 2019, 9:47pm UTC](https://discourse.processing.org/t/how-to-display-class-button/11181/1 "2019-05-12T21:47:23Z")

</div>

Hello!  
I’ve made this button, but I can’t make it display. I know that some of it works, because I have some text that works.

code:

```auto
Button button1, button2, button3, button4;
int y = 500;
int x1 = 185;
int x2 = 495;
int x3 = 805;
int x4 = 15;
int y4 = 20;

void setup() {
  size(1250,800);
  background(#D5ECF9);
 
  
  button1 = new Button(x1, y, "a", "1");
  button2 = new Button(x2, y, "b", "2"); 
  button3 = new Button(x3, y, "c", "3");
  button4 = new Button(x4, y4, "=", "4");
  
}

void draw (){
  button1.display();
  button2.display();
  button3.display();
  button4.display();

fill(0);
  textAlign(LEFT);
  textSize(40);
  text("HVAD VIL", 125, 330);
  textSize(45);
  fill(0);
  text("DU TRÆNE I DAG?", 60, 390);
 
  
  fill(0);
  textSize(45);
  textAlign(CENTER, CENTER);
  text("a",190,500,260,260);
  text("b",500,500,260,260);
  text("c",810,500,260,260);
  } 

```

class:

```auto
class Button {
  float x, y;
  float d = 260, s = 15;
  float w = 215, h = 110;
  
 String name;
 String caption;
 
 boolean hover = false;
 boolean enabled = true;
 boolean clicked = false;

 color baseColor;
 color hoverColor;
 
 Button(float x, float y, String caption, String name) {
    this.x = x; 
    this.y = y;
    this.caption = caption; // vis text 
    this.name = name; // navnet på knappen, navnet på det mode knappen skifter til
    this.baseColor = color(255); // knappens normalfarve
    this.hoverColor = color(204); // når mouse er over
 }
 
 void display(){
   strokeWeight(9);
   fill(baseColor);
   textSize(50);
   textAlign(CENTER, CENTER);
  
 switch(caption) {
    case "1" :
      text("a",190,500,260,260);
      break;
    case "2":
      text("b",500,500,260,260);
      break;
    case "3":
      text("c",810,500,260,260);
      break;
    case "4":
    text("=",15,20,215,115);
  }
 }
 
 }

```

Does anyone know what I did wrong? 🙂

---

<div class="post-metadata">

**Author:** ![josephh](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/josephh/32/210_2.png) [@josephh](https://discourse.processing.org/u/josephh)\
**Post date:** [May 12, 2019, 9:56pm UTC](https://discourse.processing.org/t/how-to-display-class-button/11181/2 "2019-05-12T21:56:15Z")

</div>

Hi,

First, you should draw the background each time in the draw function so it’s overriding what you’ve done each time.

```auto
void draw () {
  background(#D5ECF9);
  //...

```

I think the solution is that you use `switch(caption)` but the value of `caption` is never `"1", "2", "3" or "4"` so you should use `switch(name)`.

---

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)\
**Post date:** [May 12, 2019, 10:12pm UTC](https://discourse.processing.org/t/how-to-display-class-button/11181/3 "2019-05-12T22:12:15Z")

</div>

sorry I don’t quite understand.

If I draw the background in the draw function, then the outcome is still the same, and all of my objects are supposed to be on top of the background, so I don’t really see the difference. I am aiming to do as little lines as possible (without being complicated), and I have different modes for draw, and that would be a line for every mode only for the background - or not? (I am not sure)

However what I want to change is not the name, it is the caption, so I thought it was supposed to be like this?

---

<div class="post-metadata">

**Author:** ![anna](https://avatars.discourse-cdn.com/v4/letter/a/779978/32.png) [@anna](https://discourse.processing.org/u/anna)\
**Post date:** [May 12, 2019, 10:19pm UTC](https://discourse.processing.org/t/how-to-display-class-button/11181/4 "2019-05-12T22:19:33Z")

</div>

I found my problem, I forgot to write the code 😅 thanks for the help anyways, if you know anything about sound / soundtrack in different modes, I have a question about that, that I can’t figure out

---

<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:** [May 13, 2019, 8:21am UTC](https://discourse.processing.org/t/how-to-display-class-button/11181/5 "2019-05-13T08:21:38Z")

</div>

But joseph is correct

You make the objects in setup and say

… a, 1

Look at the constructor: caption is now a, name 1

But then with switch, you eval the caption (wrong) and not the name. You should eval the name.

**Remark**

Besides, you don’t use the class / OOP correctly.

You don’t use caption and x,y.

The entire `switch()` is unnecessary

See the tutorial: [https://www.processing.org/tutorials/objects/](https://www.processing.org/tutorials/objects/)

**Your sketch and a new sketch**

Here is your sketch, this time with a working `switch()` using `name`

(and without the unnecessary

```auto
  text("a",190,500,260,260);
  text("b",500,500,260,260);

```

in draw()).

Here is the sketch:

```auto
Button button1, button2, button3, button4;

int y = 500;

int x1 = 185;
int x2 = 495;
int x3 = 805;
int x4 = 15;

int y4 = 20;

void setup() {
  size(1250, 800);
  background(#D5ECF9);

  button1 = new Button(x1, y, "a", "1");
  button2 = new Button(x2, y, "b", "2"); 
  button3 = new Button(x3, y, "c", "3");
  button4 = new Button(x4, y4, "=", "4");
}

void draw () {
  button1.display();
  button2.display();
  button3.display();
  button4.display();

  fill(0);
  textAlign(LEFT);
  textSize(40);
  text("HVAD VIL", 125, 330);
  textSize(45);
  fill(0);
  text("DU TRÆNE I DAG?", 60, 390);
} 

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

class Button {
  float x, y;
  float d = 260, s = 15;
  float w = 215, h = 110;

  String name;
  String caption;

  boolean hover = false;
  boolean enabled = true;
  boolean clicked = false;

  color baseColor;
  color hoverColor;

  Button(float x, float y, String caption, String name) {
    this.x = x; 
    this.y = y;
    this.caption = caption; // vis text 
    this.name = name; // navnet på knappen, navnet på det mode knappen skifter til

    this.baseColor = color(255); // knappens normalfarve // white 
    this.hoverColor = color(204); // når mouse er over
  }

  void display() {
    strokeWeight(9);
    fill(baseColor);
    textSize(50);
    textAlign(CENTER, CENTER);

    switch(name) {
    case "1" :
      text("a", 190, 500, 260, 260);
      break;
    case "2":
      text("b", 500, 500, 260, 260);
      break;
    case "3":
      text("c", 810, 500, 260, 260);
      break;
    case "4":
      text("=", 15, 20, 215, 115);
    }
  }
}//class
//

```

**And a new sketch**

This new sketch shows the old sketch without the `switch()` in the class.

Instead it uses the value given to each button in setup().

It also uses baseColor and hoverColor depending on if the mouse hovers over the button.

```auto

Button button1, button2, button3, button4;

int x1 = 185;
int x2 = 495;
int x3 = 805;
int x4 = 15;

int y = 500;
int y4 = 20;

void setup() {
  size(1250, 800);
  background(#D5ECF9);

  button1 = new Button(x1, y, "a", "1");
  button2 = new Button(x2, y, "b", "2"); 
  button3 = new Button(x3, y, "c", "3");
  button4 = new Button(x4, y4, "=", "4");
}

void draw () {
  button1.display();
  button2.display();
  button3.display();
  button4.display();

  fill(0);
  textAlign(LEFT);
  textSize(40);
  text("HVAD VIL", 125, 330);
  textSize(45);
  fill(0);
  text("DU TRÆNE I DAG?", 60, 390);
} 

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

class Button {
  float x, y; // position
  // float d = 260, s = 15;
  float w = 215, h = 110; // size 

  String name;
  String caption;

  boolean hover = false;
  boolean enabled = true;
  boolean clicked = false;

  color baseColor;
  color hoverColor;

  //constr 
  Button(float x, float y, 
    String caption, 
    String name) {
    this.x = x; // position 
    this.y = y;
    this.caption = caption; // vis text 
    this.name = name; // navnet på knappen, navnet på det mode knappen skifter til

    this.baseColor = color(255); // knappens normalfarve // white 
    this.hoverColor = color(204); // når mouse er over
  }//constr 

  void display() {
    // draw rect 
    strokeWeight(3);
    stroke(255, 0, 0); // RED 
    noFill(); 
    rect(x, y, w, h);

    // draw text 
    strokeWeight(9);
    if (over()) // choose color depending on mouse over button 
      fill(hoverColor);
    else fill(baseColor);
    textSize(50);
    textAlign(CENTER, CENTER);
    text(caption, x, y, w, h);
  }// method

  boolean over() {
    // mouse over button?  
    boolean result = false; 
    if (mouseX > x && 
      mouseX < x + w && 
      mouseY > y &&
      mouseY < y+h) 
      result=true; // is over the rect of the button 
    else
      result=false; // is not over 

    // give the result value to the calling function 
    return result;
  }// method
  //
}//class
//

```

Chrisir