CS1335 Java and Processing
  • CS 1335 Computer Science 1
  • Getting Started
    • Processing IDE
    • Java vs Javascript
    • Review: Processing, Functions
    • HSB Color Mode
      • HSB Color Wheel
        • Example Code
      • HSB Color Palette Tool
    • Recursion
      • Recursion Call-Stack
      • Example Code
        • Example Code Feb 5 S20
        • Feb 12 Code
  • Project 1
    • Subjective Modeling of Emotions
    • Emotions represented using color, form, space
      • Kandinsky Color - Emotion
      • Emotional Intelligence
    • Project 1: PShapes
      • Example Code
      • Inspiration
    • PShape with Cutout - Inner Contour
    • VertexShape - Recursion
    • Project 1: Recursive Drawing
    • Project 1: Programmatic Variations in Color
      • Recursion with rotate, scale
      • Plan Region Size, Color
    • Map Function
    • Transforms for Mirroring
    • Project1-Steps
  • Grid Based Designs
    • Computational Design
      • Generative Design
    • Artist: Victor Vasarely
    • Grid Pattern Design
    • 1D - Array of PShapes for Grid Layout
      • Truchet Tiling
      • Example Code
    • PShapes in Grid Regions
    • Grid Region Logic
    • Pattern Preview - Transforms: Translate & Scale
  • Project 2
    • Project 2 - 2D Arrays for Gradient Logic
      • 2D Array Grid with Labels
    • Grid Patterns using 2D Array Indexes: i, j
      • Example Class Code
    • lerpColor( ) and map( ) Functions
    • Demo Lerp Colors
    • 2D Arrays with lerpColor
    • Create PShape 2D Array
    • Function: Populate2DArray( )
    • Function: DisplayShapeMatrix()
    • Transforms for Position, Rotation, Scale of ShapeMatrix Elements
    • Project 2 - Steps
    • Animation for ShapeMatrix
      • Animation w/Noise
  • Object Oriented Programming
    • Introduction to Objects
    • OOP vs Data-Flow
    • Button States
    • Buttons as Objects
      • Button Class
    • Create Object Instances
    • Button Types
    • Modeling Buttons: States and Events
    • OOP - Inheritance
    • OOP - Polymorphism
    • Child-Class: PImageButton
    • PShape - SVG Objects
    • Menu of Buttons
    • ButtonGroup - Final Version
    • Slider Controller
    • UML Class Diagram
  • Project 3
    • Project 3 - Logic, Steps
    • Example Code S20
      • Code Wed Apr 1
      • Code Wed Apr 8 v1
      • Code Wed Apr 8 v2
      • Code Mon Apr 13
      • Code Wed Apr 15
      • Code Mon Apr 20
      • Code Wed Apr 22
      • Code Mon Apr 27
      • Code Wed Apr 29
    • Project 3 - Class Definitions
      • Button
      • PImageButton
      • ButtonGroup
      • Pattern
        • PShapes - SVG, Vertex Shapes
        • Setting Colors For Patterns
        • Pattern - With Child-PShapes
      • Slider
      • Particles
  • Java Syntax
    • Java Syntax
      • Typed-Variables
      • Float - Integer Conversion Errors
      • Modulus
      • Functions
      • Object Reference Data Types
      • Arrays
        • Class Example Code
      • Switch-Case Statement
      • Ternary Operator
      • Class
      • Learning Science
    • UML Class Diagram
    • Glossary
  • Resources and References
    • Resources
    • Random Inspiration
      • Ulm School
      • Heart-Mind, Mind, Body
      • Statistical Uncertainty
Powered by GitBook
On this page
  • Composition: A Menu Has Button Objects
  • ButtonGroup Version 1:
  • Menu Buttons Finite State Machine
  • ActiveButton variable: FSM Memory
  • Menu Click Method()
  • Button1 Click()

Was this helpful?

  1. Object Oriented Programming

Menu of Buttons

Now that we've created our button class, which is our template to create button objects, it's time to leverage our hard work to simplify the drawing application

Composition: A Menu Has Button Objects

We will create the ButtonGroup class, and it will be composed of an array of button objects. The button objects are responsible for most of their own behavior, however, since we want these buttons to work together as a radio-button type group, we're going to have to add some additional logic to the Menu class to insure that only 1 button is active at a time.

ButtonGroup Version 1:

In the code below, we have created the ButtonGroup Class, we've added 3 button objects, they are initialized in the constructor and we've created a display() and clicked() method. Within the Menu display() method, we simply call the display() method for each button. However, right now these buttons don't have the required logic needed for them to function as a menu, we still need to add additional control logic to the clicked() method. Currently, each of these buttons each works independently.

class ButtonGroup{

  Button btn1, btn2, btn3;

  Menu( Button _btn1, Button _btn2, Button _btn3){
     btn1 = _btn1;
     btn2 = _btn2;
     btn3 = _btn3;
  }

  void display(){
    btn1.display();
    btn2.display();
    btn3.display();
  }

 //this isn't working correctly, each button functions independently
  void click(int mx, int my){
       btn1.clicked(mx, my);
       btn2.clicked(mx, my);
       btn3.clicked(mx, my);
  }

}  //end class


////main tab

//Global Variable Declaration
int someVal;  //we declare the type: int, then the name someVal
Button myButton;  //we declare the type: Button, then the name: myButton
Button myButton2;
Button myButton3;
Menu myMenu;


//initialization
void setup(){

  size(400,400);
  someVal=5;  //we initialize the int variable

  myButton = new Button();  //for objects, we must call the constructor method
  myButton2= new Button(0,100,50,50); // use Constructor with arguments
  myButton3= new Button(0,200,50,50);

  myMenu = new Menu( myButton, myButton2, myButton3   );
}                            

void draw(){
  myMenu.display();
}

void mouseClicked(){
  myMenu.clicked(mouseX, mouseY);
}

What code do we need to add to create the radio button behavior?

Menu Buttons Finite State Machine

In the image above, each circle represents the state of the system when that button is the active button. The arrows or arcs show the events that cause the system to change state. The arc from Button1 to Button2 shows that if Button1 is the current activeButton, then if the user clicks on button 2, the system will change state so that Button2 will be the activeButton. The arcs also show the other actions that we must implement when the click2 event happens: we must set all other buttons to the off-state. In our code, we'd set btn1.on=false and btn3.on=false. This means we assign the value of false to the on instance variable for the btn1 and btn3 objects. Therefore, In the Menu class, we need to implement a state variable: activeButton which will store the current-state. In addition, we must supply logic so that when these events happen, the other buttons are de-activated.

ActiveButton variable: FSM Memory

We need a variable to store the current activeButton, we can use an int variable and constant values for our allowed states for buttons: 1, 2, 3:

int activeButton=0;  //no buttons are active 
final button1 = 1;   //constant value can't be modified
final button2 = 2;   // we use these as state indicator variables
final button3 = 3;   // this makes our code easier to understand

Menu Click Method()

In the code above, when a click event happens we simply call all button click events, and after those events, we may have several buttons in the on-state. It's impossible for us to know which button was most recently clicked, or which button had already been in the on state. So, we need to add some logical structure to our code so we can determine which button should be identified as the activeButton.

Button1 Click()

Based on the image above, we can start to think about this logic by focusing on just Button1. We can see from the image that the only time we need to worry about button1 being clicked is when it isn't currently the activeButton. If we verify that activeButton != button1, then we can check the state of btn1 after the button1.click() method is executed, if it is now in the on state: btn1.on==true, then we know to change set activeButton=button1. In addition, as shown in the FSM image above, we also know that we need to manually set both btn2 and btn3 off, we do this by setting btn2.on=false. We don't need to know which state was the previous active state...it could have been either button2 or button3, but we set both of their internal states to off and we're on our way to having working radio buttons. We simply need to write similar tests for the cases when we know that button2 is not the activeButton, and similarly with button3. The code below shows the logic for button1.

void click(int mX, int mY){
        // check to make sure btn1 is not the current activeButton
      if(activeButton != button1){
        btn1.click(mX, mY);   //call the click method for btn1
        if(btn1.on==true){  //the button has just been activated by the click event
            btn2.on=false;  //set btn2 off
            btn3.on=false;  //set btn3 off
            activeButton=button1;
         }// end if btn.on
        } // end if activeButton
       //this code must be completed for each of the buttons
      } // end click
PreviousPShape - SVG ObjectsNextButtonGroup - Final Version

Last updated 5 years ago

Was this helpful?