How to use mousePressed() for 2 different events in processing? - processing

Question

I am working on my university project and came across an issue. I am creating a visualization for some data and want to use mousePressed() for different events, but when I try to add another event to mousePressed() it will not run as the code does not know which event to run (when the mouse is pressed it fires both events).
I made an event that allows the user to click the main menu buttons and want to make another event when the user is in the pieChartPage(), they are able to click on the PS_Button (which is a PlayStation Logo) to display a description. Right now the user is able to hover over the PS_Button and the description appears but I want the user to click on the PS_Button so that the description stays on the screen. I created a class 'ImageButton' for the description formatting and I am not sure how, if possible, to add the mousePressed() code into that class and still work with the rest of the code.
Here is my code:
In the setup() draw() page: mousePressed() - line 180, pieChartPage() - line 244
https://drive.google.com/drive/folders/1d5y2Ksq-y05J8tLiyK-1P2uwLjBhm-iH?usp=sharing
The link contains the code and the data used within the code.
Any help would be very appreciated, thank you.
setup() draw():
PieChart pieChart; //pie chart
PImage PS_Button, XBOX_Button, NINTENDO_Button; //creating variables for the images to be used
ImageButton psImageDscpt, xboxImageDscpt, nintendoImageDscpt;
void setup() {
size(1200, 800);
//functions to make the render of the program Apple Retina displays and Windows High-DPI displays look smoother and less pixelated
pixelDensity(2);
smooth();
loadData();
//Pie Chart
//pie chart for pie chart page
pieChart = new PieChart();
psImageDscpt = new ImageButton("Sony", 800, 480, 300, 200);
xboxImageDscpt = new ImageButton("Microsoft", 20, 425, 250, 200);
nintendoImageDscpt = new ImageButton("Nintendo", 925, 75, 200, 300);
}
void draw() {
switch(state) {
case 2:
// pie chart
pieChartPage();
drawMenuButton();
break;
case 3:
bubbleChartPage();
drawMenuButton();
// pie chart
break;
case 4:
scatterGraphPage();
drawMenuButton();
// 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();
drawMenuButton();
}
}
Current mousePressed() and commented is the code I want to add:
void mousePressed() {
switch(state) {
case 2: // pie chart page
ClickedMenuButton();
println("Going back to state home from PC");
//state = 1;
break;
case 3: // bubble chart page
ClickedMenuButton();
println("Going back to state home from BG");
break;
case 4: // scatter graph page
ClickedMenuButton();
println("Going back to state home from SG");
break;
default:
// menu
ClickMenu();
}
}
//void mousePressed() {
// if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) {
// psImageDscpt.drawPieChartDscpt();
// }
//}
void pieChartPage() in setup() draw() page:
//page for pie chart visualisation
void pieChartPage() {
background(10);
//psImgX = 100;
//psImgY = 50;
//xboxImgX = 200;
//xboxImgY = 50;
//nintendoImgX = 300;
//nintendoImgY = 50;
PS_Button = loadImage("ps_logo.png"); //loading images from program folder
psLegend = loadImage("ps_logo.png");
XBOX_Button = loadImage("xbox_logo.png");
xboxLegend = loadImage("xbox_logo.png");
NINTENDO_Button = loadImage("nintendo_logo.png");
nintendoLegend = loadImage("nintendo_logo.png");
//int psImgX, psImgY, xboxImgX, xboxImgY, nintendoImgX, nintendoImgY;
PS_Button.resize(100, 0); //size of the button, all are the same
XBOX_Button.resize(100, 0);
NINTENDO_Button.resize(100, 0);
psLegend.resize(75, 0);
xboxLegend.resize(75, 0);
nintendoLegend.resize(125, 0);
tint(225);// set tint of buttons to be zero
image(PS_Button, psImgX, psImgY); //drawing image to the screen
image(XBOX_Button, xboxImgX, xboxImgY);
image(NINTENDO_Button, nintendoImgX, nintendoImgY);
//drawing legend and tints represent the company's colour respectively
tint(pieChartColours[1]);
image(psLegend, 65, 75);
tint(pieChartColours[2]);
image(xboxLegend, 65, 175);
tint(pieChartColours[0]);
image(nintendoLegend, 45, 285);
pieChart.pieChart(width/2, height/2, 400, values_PieChart, pieChartColours); //draws the pie chart into the window
textSize(12);
if (mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) {
psImageDscpt.drawPieChartDscpt();
} else if (mouseX > xboxImgX && mouseX < (xboxImgX + XBOX_Button.width) && mouseY > xboxImgY && mouseY < (xboxImgY + XBOX_Button.height)) {
xboxImageDscpt.drawPieChartDscpt();
} else if (mouseX > nintendoImgX && mouseX < (nintendoImgX + NINTENDO_Button.width) && mouseY > nintendoImgY && mouseY < (nintendoImgY + NINTENDO_Button.height)) {
nintendoImageDscpt.drawPieChartDscpt();
} else {
psImageDscpt.drawPieChartDscpt();
xboxImageDscpt.drawPieChartDscpt();
nintendoImageDscpt.drawPieChartDscpt();
}
//legend text
fill(225);
text("Sony / PlayStation", 55, 150);
text("Microsoft / XBOX", 52.5, 260);
text("Nintendo", 80, 340);
textSize(40);
fill(pieChartColours[0]);
text("/50", 230, 330);
fill(pieChartColours[1]);
text("/50", 215, 130);
fill(pieChartColours[2]);
text("/50", 185, 230);
fill(150,0,0);
textSize(60);
text("64%", 590, 350);
fill(0,150,0);
textSize(20);
text("7%", 460, 465);
fill(0,0,150);
textSize(40);
text("11%", 565, 525);
homeButtonBar.Draw();
}
ImageButton class:
class ImageButton {
String pieDscptLabel;
int xPos1, yPos1, xPos2, yPos2;
float wDiam1, hDiam1;
ImageButton (String pieDscptLabel, int xPos1, int yPos1, float wDiam1, float hDiam1) {
this.pieDscptLabel=pieDscptLabel;
this.xPos1=xPos1;
this.yPos1=yPos1;
this.wDiam1=wDiam1;
this.hDiam1=hDiam1;
}
void drawPieChartDscpt() { //draws the bubbles description
noFill();
stroke(225);
rect(xPos1, yPos1, wDiam1, hDiam1, 20);
textAlign(LEFT, BASELINE);
fill(200);
text(pieDscptLabel, xPos1+10, yPos1+20);
}
void mousePressed() {
if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height)) {
psImageDscpt.drawPieChartDscpt();
println("it works");
}
}
}

Answer 1

you don't need to write two mousePressed() method, just test the cases inside the method to differentiate which case you are working on, after some reading I figured your state variable equals 2 when the user is on pieChartPage() So I moved your code inside the first mousePressed() and added the test, the method call to draw description works fine but you will have to change it to switch between visible/invisible instead of drawing when the user click, here is the updated code:
void mousePressed() {
if(state == 2)
{
if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height))
{
psImageDscpt.drawPieChartDscpt();
}
}
switch(state) {
case 2: // pie chart page
ClickedMenuButton();
println("Going back to state home from PC");
//state = 1;
break;
case 3: // bubble chart page
ClickedMenuButton();
println("Going back to state home from BG");
break;
case 4: // scatter graph page
ClickedMenuButton();
println("Going back to state home from SG");
break;
default:
// menu
ClickMenu();
}
}
Edit:
to keep the description on the screen you have 3 changes to do: first, you declare a boolean global variable on top and set it to false by default :
//boolean to hold the info whether we draw description or not
boolean show_ps_description=false;
Secondly, you change the Click on Playstation image event to inverse the previous boolean image instead of calling that draw method :
void mousePressed() {
if(state == 2)
{
if ( mouseX > psImgX && mouseX < (psImgX + PS_Button.width) && mouseY > psImgY && mouseY < (psImgY + PS_Button.height))
{
//inverte the boolean
show_ps_description=!show_ps_description;
}
}
...
}
Lastly you call your drawing method (drawPieChartDscpt()) in your draw loop after checking if our boolean is true:
void draw() {
switch(state) {
case 2:
// pie chart
pieChartPage();
drawMenuButton();
if(show_ps_description)
psImageDscpt.drawPieChartDscpt();
break;
...
}