Need help creating and implementing a button class.

Izzy280

Hello, I am in the process of organizing, cleaning, and simplifying my code. I repeat myself a lot in my application, breaking one of the finest rules in programming, therefore I figured the best way to start cleaning up is with a button class. I have the buttons working outside of the class but got lost while trying to create and implement a new button class so I could use some help getting back on track. For now I am working towards simply drawing the buttons and changing the color when the mouse is over it.

`  //using processing video and movie
    import processing.video.*;
    import controlP5.*;
    import java.awt.geom.*;
    ControlP5 cp5;
    Movie movie;
    static String nomeLink;


 //size of buttons and the integers that load a view to the big square
 int toolSize = 20;

 //positions for each buttom
 int playX, playY; 
 int pauseX, pauseY; 
 int fastX, fastY;
 int reverseX, reverseY;
 int plusX, plusY;
 int minusX, minusY;
 String current = "";
 String view = "One";
 boolean constrain = false;


 //booleans to help decide which button the mouse is over   
 boolean playOver = false;
 boolean pauseOver = false;
 boolean fastOver = false;
 boolean reverseOver = false;
 boolean plusOver = false;
 boolean minusOver = false; 
 boolean play = true;
 int mode = 1;

 //naming our buttons
 PImage play1;
 PImage pause;
 PImage rewind;
 PImage fast;
 PImage plus;
 PImage minus;

   //Using to implement the class
   Button playButton, pauseButton, rewindButton, forwardButton, zoomIn, zoomOut;

   void setup() {
   size(1280, 360);
        background (51);
    //set our button images
     play1 = loadImage("Play.png");
     pause = loadImage("Pause.png");
     rewind = loadImage("Rewind.png");
     fast = loadImage("Fast-Forward.png");
     plus = loadImage("Plus.png");
     minus = loadImage("Minus.png");

    //setting the position of our buttons 
    playX =  width/ 4-30;
    playY = height/2 + 130;
    pauseX = width/ 4 - 60;
    pauseY = height/2 + 130;
    fastX = width/ 4 + 30 - 30;
    fastY = height/2 + 130;
    reverseX = width/ 4 - 90;
    reverseY = height/2 + 130;
    plusX = width/4 + 60 - 30;
    plusY = height/2 + 130;
    minusX = width/4 + 90 - 30;
    minusY = height/2 + 130;

   //setting the position and size for each  button
   image(play1, playX, playY, toolSize, toolSize);
   image(pause, pauseX, pauseY, toolSize, toolSize); 
   image(fast, fastX, fastY, toolSize, toolSize);
   image(rewind, reverseX, reverseY, toolSize, toolSize);
   image(plus, plusX, plusY, toolSize, toolSize);
   image(minus, minusX, minusY, toolSize, toolSize);
   } 
   //Button Class - Not Implemented yet
  class Buttons
   {
   final int COLORSTATE0 = color (255, 0, 0);
   final int COLORSTATE1 = color (0, 255, 0);
   int buttonX, buttonY, buttonWidth, buttonHeight;
   boolean over = false , buttonPressed = false;
   boolean pressed = false;
   PImage play;
   PImage forward;
   PImage rewind;
   PImage pause;
   PImage zoomIn;
   PImage zoomOut;
   color buttonColor, hoverColor;
   color currentColor;

   //Assigning values for the button class
   Buttons(int tempbuttonX, int tempbuttonY, int tempbuttonWidth, int tempbuttonHeight)
   {
   buttonX = tempbuttonX;
   buttonY = tempbuttonY;
   buttonWidth = tempbuttonWidth;
   buttonHeight = tempbuttonHeight;

   // mouseposX = tempmouseposX;
   // mouseposY = tempmouseposY;
    }
    }

      //Checking if the mouse is over the button
      boolean overButton(int x, int y, int width, int height)  {
      if (mouseX >= x && mouseX <= x+width && 
      mouseY >= y && mouseY <= y+height) {
      return true;
      } else {
      return false;
      }
      }

     //Changing the button filter if your mouse is over it --Buggy and repetitive
      void redraw(int toolSize) {
      if ((overButton(playX, playY, toolSize, toolSize)))
       {
      current = "Play";
     play1.filter(THRESHOLD);
     pause.filter(GRAY);
     fast.filter(GRAY);
     rewind.filter(GRAY);
     plus.filter(GRAY);
     minus.filter(GRAY);
      }
      else if ((overButton(pauseX, pauseY, toolSize, toolSize)))
      {
      current = "Pause";
     play1.filter(GRAY);
     pause.filter(THRESHOLD);
     fast.filter(GRAY);
     rewind.filter(GRAY);
     plus.filter(GRAY);
     minus.filter(GRAY);
      }

       else if ((overButton(fastX, fastY, toolSize, toolSize)))
      {      
     current = "Forward";
     play1.filter(GRAY);
     pause.filter(GRAY);
     fast.filter(THRESHOLD);
     rewind.filter(GRAY);
     plus.filter(GRAY);
     minus.filter(GRAY);
      }
      else if ((overButton(reverseX, reverseY, toolSize, toolSize)))
     {
    current = "Rewind";
     play1.filter(GRAY);
     pause.filter(GRAY);
     fast.filter(GRAY);
     rewind.filter(THRESHOLD);
     plus.filter(GRAY);
     minus.filter(GRAY);
     }
    else if ((overButton(plusX, plusY, toolSize, toolSize)))
    {
     current = "Plus";
    play1.filter(GRAY);
     pause.filter(GRAY);
     fast.filter(GRAY);
     rewind.filter(GRAY);
     plus.filter(THRESHOLD);
     minus.filter(GRAY);
    }
      else if ((overButton(minusX, minusY, toolSize, toolSize)))
    {
     current = "Minus";
    play1.filter(GRAY);
     pause.filter(GRAY);
     fast.filter(GRAY);
     rewind.filter(GRAY);
     plus.filter(GRAY);
     minus.filter(THRESHOLD);
    }

  }
   `

Chrisir

See here at the very end

https://forum.processing.org/two/discussion/25758/special-calculator-with-pages#latest

Here I use a for loop to init the buttons but you can do this without a for loop.

Tutorial

Did you do the tutorial on objects ?

General Remark

For your code: you can press ctrl-t to automatically format your code. Very useful.

Class Button for ONE Button only

If I were you I would make a class Button in singular which holds only one button.

Then you can have an array of buttons and for loop over it (as in my example above).

(You could make a 2nd class Buttons (plural) using the first class Button later on, but I wouldn't do that)

Now the class Button (Singular) : it needs x,y for position and ONE image - this is the abstract concept of ONE button, so no play or pause here!

Don’t have these data with global scope (before setup) but in setup and pass them to each new button using new : pass to it playX,playY, play1

Put as much as you can in the class

Chrisir

Chrisir

Class = cookie maker / abstract concept

Objects = cookies with different positions and images

Chrisir

This whole section

      //Changing the button filter if your mouse is over it --Buggy and repetitive
      void redraw(int toolSize) {
      if ((overButton(playX, playY, toolSize, toolSize)))
       {
      current = "Play";
     play1.filter(THRESHOLD);
     pause.filter(GRAY);
     fast.filter(GRAY);
     rewind.filter(GRAY);
     plus.filter(GRAY);
     minus.filter(GRAY);
      }
      else if ((overButton(pauseX, pauseY, toolSize, toolSize)))
      {
      current = "Pause";
     play1.filter(GRAY);
     pause.filter(THRESHOLD);

I wouldn't hold in the class.

Because now you wouldn't be able to use class in another sketch unchanged when you have sections in it that are specific for your current sketch.

Instead

Instead have a for loop in mousePressed and check all buttons

void mousePressed() {
  int currentCommandID;
  for (Button but : buttons) {
    but.press();
    if (but.pressed) {
      currentCommandID=but.index;
      break; // Other buttons won't be pressed, just stop here
    }
  }
  executeCommand(currentCommandID);
}


    void executeCommand(int currentCommandID) {

        switch(currentCommandID)  {

             case 0:
                 //play
                 current = "Play";
                 play1.filter(THRESHOLD);
                 pause.filter(GRAY);
                 fast.filter(GRAY);
                 rewind.filter(GRAY);
                 plus.filter(GRAY);
                 minus.filter(GRAY);
             break;

             .....

        }

    }

Chrisir

if you're using your own buttons no controlP5 necessary

here version of entire sketch

//using processing video and movie
import processing.video.*;
import controlP5.*;
import java.awt.geom.*;

ControlP5 cp5;
Movie movie;
static String nomeLink;
Button[] buttons = new Button[6];

void setup() {
  size(1280, 360);
  background (51);
  makeButtons();
} 

void draw() {
  for (Button but : buttons) {
    but.overButton();
    but.display();
  }//for
}//function

// ----------------------------------------------------------------------

void makeButtons() {

  //size of buttons and the integers that load a view to the big square
  int toolSize = 20;

  //positions for each buttom
  int playX, playY; 
  int pauseX, pauseY; 
  int fastX, fastY;
  int reverseX, reverseY;
  int plusX, plusY;
  int minusX, minusY;

  String current = "";
  String view = "One";
  boolean constrain = false;

  int mode = 1;

  //naming our buttons
  PImage play1;
  PImage pause;
  PImage rewind;
  PImage fast;
  PImage plus;
  PImage minus;

  //Using to implement the class
  // Button playButton, pauseButton, rewindButton, forwardButton, zoomIn, zoomOut;

  //set our button images
  play1 = loadImage("Play.png");
  pause = loadImage("Pause.png");
  rewind = loadImage("Rewind.png");
  fast = loadImage("Fast-Forward.png");
  plus = loadImage("Plus.png");
  minus = loadImage("Minus.png");

  //setting the position of our buttons 
  playX =  width/ 4-30;
  playY = height/2 + 130;
  pauseX = width/ 4 - 60;
  pauseY = height/2 + 130;
  fastX = width/ 4 + 30 - 30;
  fastY = height/2 + 130;
  reverseX = width/ 4 - 90;
  reverseY = height/2 + 130;
  plusX = width/4 + 60 - 30;
  plusY = height/2 + 130;
  minusX = width/4 + 90 - 30;
  minusY = height/2 + 130;

  int i=0;
  buttons[i]= new Button (playX, playY, toolSize, toolSize, play1, i);
  i++;
  buttons[i]= new Button (pauseX, pauseY, toolSize, toolSize, pause, i);
  i++;
  buttons[i]= new Button (fastX, fastY, toolSize, toolSize, fast, i);
  i++;
  buttons[i]= new Button (reverseX, reverseY, toolSize, toolSize, rewind, i);
  i++;
  buttons[i]= new Button (plusX, plusY, toolSize, toolSize, plus, i);
  i++;
  buttons[i]= new Button (minusX, minusY, toolSize, toolSize, minus, i);
}

void mousePressed() {

  int currentCommandID=-1;

  for (Button but : buttons) {
    but.overButton();
    if (but.pressed) {
      currentCommandID=but.ID;
      break; // Other buttons won't be pressed, just stop here
    }
  }//for

  if ( currentCommandID!=-1)
    executeCommand(currentCommandID);
}

void executeCommand(int currentCommandID) {

  switch(currentCommandID) {

  case 0:
    //play
    // ........... wwwwwwwwww
    break;

  case 1:
    //   .....
    break;
  }//switch
}

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

//Button Class - Not Implemented yet
class Button {

  final int COLORSTATE0 = color (255, 0, 0);
  final int COLORSTATE1 = color (0, 255, 0);

  int buttonX, buttonY, 
    buttonWidth, buttonHeight;

  boolean over = false, 
    buttonPressed = false;

  boolean pressed = false;

  PImage buttonImage;

  int ID; 

  color buttonColor = COLORSTATE0, hoverColor = COLORSTATE1;
  color currentColor = buttonColor; // base color (off)

  // constructor
  //Assigning values for the button class
  Button(int tempbuttonX, int tempbuttonY, 
    int tempbuttonWidth, int tempbuttonHeight, 
    PImage tempimg, 
    int tempID) {

    buttonX = tempbuttonX;
    buttonY = tempbuttonY;
    buttonWidth = tempbuttonWidth;
    buttonHeight = tempbuttonHeight;

    buttonImage=tempimg;

    ID=tempID;
  } // constructor

  void display() {
    if (buttonImage!=null) {
      image(buttonImage, buttonX, buttonY, buttonWidth, buttonHeight);
    } else {
      fill(currentColor);
      stroke(255);
      rect(buttonX, buttonY, buttonWidth, buttonHeight);
      fill(255);
      textAlign(CENTER); 
      text (ID, buttonX+buttonWidth/2, buttonY+buttonHeight/2+4);
      textAlign(LEFT);
    }
  }

  //Checking if the mouse is over the button
  boolean overButton() {
    if (mouseX >= buttonX &&
      mouseX <= buttonX+buttonWidth && 
      mouseY >= buttonY &&
      mouseY <= buttonY+buttonHeight) {
      currentColor=hoverColor;
      return true;
    } else {
      currentColor=buttonColor;
      return false;
    }
  }
  //
}//class
//========================

Izzy280

Thank you! This helped me quite a bit, and apologies for the late response.

Chrisir

;-)