How to clear canvas and buttons (and their functuality) after clicking a button?

Question

I am trying to create a data visualisation program from which when the user clicks on one of the home screen buttons, they are taken to the data visualisation. I am not able to figure out how to do this properly. So far I am able to sort of clear the canvas but the buttons are still functioning even though you cannot see them. I want to be able to press one of the home screen buttons to take the user to a brand new page (this is still a work in progress so the only button I have started doing this so is 'pieChartButton').

Here is my Processing code so far:

Button pieChartButton, bubbleGraphButton, scatterGraphButton, homeButton; //button to be used
Button homeButtonBar, PCDescriptionBox, BGDescriptionBox, SGDescriptionBox; //design features that use same attributes as buttons
int buttonClicked = 1; //check to see if button works

void setup() {
  size(1200,800);
  pixelDensity(2); //function to make the render of the program Apple Retina displays and Windows High-DPI displays look smoother and less pixelated
  smooth();
  
  //creating the button object
  pieChartButton = new Button("Pie Chart", 5, 5, 590, 340);
  bubbleGraphButton = new Button("Bubble Graph", 5, 355, 590, 340);
  scatterGraphButton = new Button("Scatter Graph", 605, 5, 590, 340);
  
  //design features
  PCDescriptionBox = new Button("Pie chart will show this and that and other stuff \n test", 605, 355, 590, 340);
  BGDescriptionBox = new Button("Bubble graph with nice bubbles, mucho colours and information with useful stuff", 605, 355, 590, 340);
  SGDescriptionBox = new Button("Scatter Graph \n \n \n \nThis Scatter represents the data about video game publishers and what genres they publish", 605, 355, 590, 340);
}

void draw() {
  //DRAWING BUTTONS + DISPLAY DESCRIPTION 
  //if mouse is hovering over button, button title & description will appear, but now a square will appear to cheack it works
  if (pieChartButton.mouseHoverOver()){
    fill(225,0,0);
    rect(700, 400, 50, 50);
    PCDescriptionBox.drawDesign(); //display of what is in the pie chart window
  } else if (bubbleGraphButton.mouseHoverOver()){
      fill(0,0,225);
      rect(700, 400, 50, 50);
      BGDescriptionBox.drawDesign(); //show description for bubble graph window
  } else if (scatterGraphButton.mouseHoverOver()){
    fill(0,225,0);
    rect(700, 400, 50, 50);
    SGDescriptionBox.drawDesign(); //show description for scattter graph window
  } else{
    homePage();
  }
}

//mouse clicked on button
void mousePressed(){
   if (pieChartButton.mouseHoverOver()){   //check if pie chart button clicked
     println("Clicked PC: "+ buttonClicked++);
     pieChartPage();
   } else if (bubbleGraphButton.mouseHoverOver()) {  //check if bubble graph button clicked
     println("Clicked BG: "+ buttonClicked++);
   } else if (scatterGraphButton.mouseHoverOver()){ //checks if scatter graph button clicked
     println("Clicked SG: "+ buttonClicked++);
   } else {
     homePage();
   }
}


//The different pages of the program
//main home screen page
void homePage(){
  background(225);
  //noStroke();
  //fill(255);
  //rect(0, 725, 1200, 100);
  pieChartButton.Draw();  //draw Pie chart button in home screen
  bubbleGraphButton.Draw();  //draw bubble graph button in home screen
  scatterGraphButton.Draw(); //draw scatter graph button in home screen
  homeButtonBar = new Button("", 5, 710, 1190, 200);
  homeButtonBar.Draw();
}

void pieChartPage(){
  background(175,0,225);
  homeButtonBar = new Button("", 5, 710, 1190, 200);
  homeButtonBar.Draw(); 
}

Button Class for code:

 class Button {

 String label;
 float x, y, w, h; //top left corner x position, top left corner y position, button width, button height

 Button(String labelButton, float xpos, float ypos, float widthButton, float heightButton){
   label=labelButton;
   x=xpos;
   y=ypos;
   w=widthButton;
   h=heightButton;
 }

 void Draw(){
   fill(170);
   stroke(170);
   rect(x, y, w, h, 40);
   textAlign(CENTER, CENTER);
   fill(0);
   text(label, x+(w/2), y+(h/2));
 }

  void drawDesign(){
   fill(225);
   stroke(170);
   rect(x, y, w, h, 40);
   textAlign(LEFT, BASELINE);
   fill(0);
   text(label, x+20, y+40);
 }

 boolean mouseHoverOver(){
   if (mouseX>x && mouseX<(x+w) && mouseY>y && mouseY<(y+h)){ //if mouse within button, return true, if not return false
     return true;
   }
   return false;
 }

}

Any help would be appreciated, thank you.

Answer 1

A sweet design pattern which could help you out of this issue would be the Finite State Machine. A FSM let you determine the context which can lead to another context and limit some actions to some context. A good example of this is Super Mario Bros: When he's small, getting a magic mushroom will transform him into Super Mario. When he's Super, getting a flower will transform him into Fire Mario. But while small, getting a flower will only make him into Super Mario, not Fire Mario. That's because each one of these states have rules, and he cannot just jump from one to the other without regard for these.

Here's an approximative schema for a FSM which could resemble what you're doing: you have a menu, and while in the menu you can use it, but when you select an option you change state toward something else and have different options ans visuals. I assume that you can also go back from these graph to the menu and choose something else.

I'll show you how to implement this in your code.

---

The menu

in your situation, the menu is the key to make the rest fall in place. The business rules would state that the user see and can use the 3 buttons.

First, we'll add a global variable:

int state = 1;

1 will mean "Menu", as in the schema it's the STATE 1. In the draw() method, we'll put a switch which will decide what to draw:

void draw() {
  switch(state) {
  case 2:
    // pie chart
    break;
  case 3:
    // pie chart
    break;
  case 4:
    // pie chart
    break;
  default:
    // menu
    // the default case means "everything else" and in our case it will be the menu so you cannot have an impossible case
    drawMenu();
  }
}

What about the code which was previously in the draw() method? We'll create the void menu() method and put it there. That's the one which is called when you're un the 'menu' state, so as long as you're in the menu the buttons will be visible and usable.

void drawMenu() {
  // DRAWING BUTTONS
  homePage();

  // show graph previews
  if (pieChartButton.mouseHoverOver()) {
    fill(225, 0, 0);
    rect(700, 400, 50, 50);
    PCDescriptionBox.drawDesign(); //display of what is in the pie chart window
  } else if (bubbleGraphButton.mouseHoverOver()) {
    fill(0, 0, 225);
    rect(700, 400, 50, 50);
    BGDescriptionBox.drawDesign(); //show description for bubble graph window
  } else if (scatterGraphButton.mouseHoverOver()) {
    fill(0, 225, 0);
    rect(700, 400, 50, 50);
    SGDescriptionBox.drawDesign(); //show description for scattter graph window
  }
}

Now we'll add that clicking a button will also change the state accordingly. To do so, we'll implement the state switch in the mousePressed() method. This is the same principle than what we just did. Notice that I removed the call to "homePage" and added a state change after a click has selected one of the other states:

//mouse clicked on button
void mousePressed() {
  switch(state) {
  case 2:
    // pie chart
    break;
  case 3:
    // bubble graph
    break;
  case 4:
    // scatter graph
    break;
  default:
    // menu
    ClickMenu();
  }
}

void ClickMenu() {
  if (pieChartButton.mouseHoverOver()) {   //check if pie chart button clicked
    println("Clicked PC: "+ buttonClicked++);
    pieChartPage();
    state = 2;
  } else if (bubbleGraphButton.mouseHoverOver()) {  //check if bubble graph button clicked
    println("Clicked BG: "+ buttonClicked++);
    state = 3;
  } else if (scatterGraphButton.mouseHoverOver()) { //checks if scatter graph button clicked
    println("Clicked SG: "+ buttonClicked++);
    state = 4;
  }
}

I see that you have a pieChartPage() method to draw the pie chart page (great naming convention to make everything obvious btw). That's something which should go in the draw() method's switch. Now, just so you can test play with it, I'll add that when you click at random while on the pie chart page you go back to the menu page by adding a state change in the mousePressed() method.

Also, notice that if you choose any other graph than the pie chart, you're stuck there forever (and the buttons won't work now). That's because we have nothing programmed for those states. Here's the complete code for this example and I'm leaving the rest to you:

Button pieChartButton, bubbleGraphButton, scatterGraphButton, homeButton; //button to be used
Button homeButtonBar, PCDescriptionBox, BGDescriptionBox, SGDescriptionBox; //design features that use same attributes as buttons
int buttonClicked = 1; //check to see if button works
int state = 0;

void setup() {
  size(1200, 800);
  pixelDensity(2); //function to make the render of the program Apple Retina displays and Windows High-DPI displays look smoother and less pixelated
  smooth();

  //creating the button object
  pieChartButton = new Button("Pie Chart", 5, 5, 590, 340);
  bubbleGraphButton = new Button("Bubble Graph", 5, 355, 590, 340);
  scatterGraphButton = new Button("Scatter Graph", 605, 5, 590, 340);

  //design features
  PCDescriptionBox = new Button("Pie chart will show this and that and other stuff \n test", 605, 355, 590, 340);
  BGDescriptionBox = new Button("Bubble graph with nice bubbles, mucho colours and information with useful stuff", 605, 355, 590, 340);
  SGDescriptionBox = new Button("Scatter Graph \n \n \n \nThis Scatter represents the data about video game publishers and what genres they publish", 605, 355, 590, 340);
}

void draw() {
  switch(state) {
  case 2:
    // pie chart
    pieChartPage();
    break;
  case 3:
    // pie chart
    break;
  case 4:
    // pie chart
    break;
  default:
    // menu
    // the default case means "everything else" and in our case it will be the menu so you cannot have an impossible case
    drawMenu();
  }
}

void drawMenu() {
  // DRAWING BUTTONS
  homePage();

  // show graph previews
  if (pieChartButton.mouseHoverOver()) {
    fill(225, 0, 0);
    rect(700, 400, 50, 50);
    PCDescriptionBox.drawDesign(); //display of what is in the pie chart window
  } else if (bubbleGraphButton.mouseHoverOver()) {
    fill(0, 0, 225);
    rect(700, 400, 50, 50);
    BGDescriptionBox.drawDesign(); //show description for bubble graph window
  } else if (scatterGraphButton.mouseHoverOver()) {
    fill(0, 225, 0);
    rect(700, 400, 50, 50);
    SGDescriptionBox.drawDesign(); //show description for scattter graph window
  } else {
    homePage();
  }
}

//mouse clicked on button
void mousePressed() {
  switch(state) {
  case 2:
    // pie chart
    println("Going back to state 1!");
    state = 1;
    break;
  case 3:
    // pie chart
    break;
  case 4:
    // pie chart
    break;
  default:
    // menu
    ClickMenu();
  }
}

void ClickMenu() {
  if (pieChartButton.mouseHoverOver()) {   //check if pie chart button clicked
    println("Clicked PC: "+ buttonClicked++);
    state = 2;
  } else if (bubbleGraphButton.mouseHoverOver()) {  //check if bubble graph button clicked
    println("Clicked BG: "+ buttonClicked++);
    state = 3;
  } else if (scatterGraphButton.mouseHoverOver()) { //checks if scatter graph button clicked
    println("Clicked SG: "+ buttonClicked++);
    state = 4;
  }
}

//The different pages of the program
//main home screen page
void homePage() {
  background(225);
  //noStroke();
  //fill(255);
  //rect(0, 725, 1200, 100);
  pieChartButton.Draw();  //draw Pie chart button in home screen
  bubbleGraphButton.Draw();  //draw bubble graph button in home screen
  scatterGraphButton.Draw(); //draw scatter graph button in home screen
  homeButtonBar = new Button("", 5, 710, 1190, 200);
  homeButtonBar.Draw();
}

void pieChartPage() {
  background(175, 0, 225);
  homeButtonBar = new Button("PIE CHART BUTTON", 5, 710, 1190, 200);
  homeButtonBar.Draw();
}

Don't hesitate to reach out if there's something you don't understand. Have fun!