How to display class button

anna · May 12, 2019, 9:47pm

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:

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:

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?

josephh · May 12, 2019, 9:56pm

Hi,

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

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).

anna · May 12, 2019, 10:12pm

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?

anna · May 12, 2019, 10:19pm

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

Chrisir · May 13, 2019, 8:21am

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/

Your sketch and a new sketch

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

(and without the unnecessary

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

in draw()).

Here is the sketch:

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.


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

Topic		Replies	Views
Why are my buttons connected? Coding Questions	7	822	May 12, 2019
Help with button objects Libraries	3	486	March 5, 2019
Feedback on Button maker Coding Questions	5	411	February 12, 2020
Lavoro con le Classi Coding Questions	4	485	March 18, 2020
Processing, button, void Coding Questions	31	1775	May 20, 2019

How to display class button

Related topics