Need help creating and implementing a button class.

edited January 2018 in Library Questions

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);
    }

  }
   `

Answers

  • edited January 2018

    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

  • Class = cookie maker / abstract concept

    Objects = cookies with different positions and images

  • edited January 2018 Answer ✓

    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;
    
                 .....
    
            }
    
        }
    
  • edited January 2018 Answer ✓

    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
    //========================
    
  • Thank you! This helped me quite a bit, and apologies for the late response.

Sign In or Register to comment.