How to display class button

Processing Coding Questions
5

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

2 Likes