We are about to switch to a new forum software. Until then we have removed the registration on this forum.
How would i go about adding multiple image buttons to the one screen? I figure it has something to do with the Class Ibutton function in my code. Button two uses img4,img5 and img6 Please Help!
int sWidth = 1000;
int sHeight = 600;
IImageButton btn1;
IImageButton btn2;
color rectangleCol;
boolean isTiming;
int savedTimer;
int elapsedTime;
int y;
PImage bg;
PImage img1;
PImage img2;
PImage img3;
PImage img4;
PImage img5;
PImage img6;
String currentScreen = "start";
String[] btnImages = {"buttonone.jpg","buttontwo.jpg","buttonthree.jpg","map.jpg","maprollover.jpg","maprollover.jpg"};
String buttonPressedID = "none";
void setup(){
bg = loadImage("timepiecehomescreen.jpg");
img1 = loadImage(btnImages[0]);
img2 = loadImage(btnImages[1]);
img3 = loadImage(btnImages[2]);
img4 = loadImage(btnImages[3]);
img5 = loadImage(btnImages[4]);
img6 = loadImage(btnImages[5]);
size(sWidth,sHeight);
btn1 = new IImageButton("button 1",187,360,img1,img2,img3);
btn2 = new IImageButton("button 2",740,10,img4,img5,img6);
}
void draw(){
if(currentScreen == "start"){
background(bg);
} else if(currentScreen == "stop"){
}
btn1.update();
btn2.update();
//change colour of rectangle depending on button pressed
if(buttonPressedID == "button 1"){
rectangleCol = #5749D6;
} else if(buttonPressedID == "button 2"){
rectangleCol = #49AFD6;
} else {
rectangleCol = #E5E5E5;
}
}
void mousePressed(){
if(btn1.mPressed()){
buttonPressedID = btn1.getID();
}
if(btn2.mPressed()){
buttonPressedID = btn2.getID();
}
if (isTiming = !isTiming) {
savedTimer = millis();
println("Current Time: " + savedTimer/1000 + "s.");
}
else {
elapsedTime = (millis() - savedTimer) / 1000;
println("Elapsed Time: " + elapsedTime + "s.\n");
}
}
void mouseReleased(){
btn1.mReleased();
btn2.mReleased();
}
class IImageButton {
String id;
int xPos;
int yPos;
int bWidth;
int bHeight;
boolean isPressed;
boolean isMouseOver;
PImage img1;
PImage img2;
PImage img3;
PImage currentImg;
IImageButton(String pID, int pX, int pY, PImage pImg1, PImage pImg2, PImage pImg3){
//constructor
id = pID;
xPos = pX;
yPos = pY;
isPressed = false;
isMouseOver = false;
img1 = pImg1;
img2 = pImg2;
img3 = pImg3;
bWidth = img1.width;
bHeight = img1.height;
}
void update(){
checkMouseOver();
if(isPressed){
currentImg = img3;
} else if(isMouseOver) {
currentImg = img2;
} else {
currentImg = img1;
}
image(currentImg,xPos,yPos);
}
void checkMouseOver(){
if(mouseX > xPos && mouseX < xPos+bWidth && mouseY > yPos && mouseY < yPos+bHeight){
isMouseOver = true;
} else {
isMouseOver = false;
}
}
boolean mPressed(){
if(mouseX > xPos && mouseX < xPos+bWidth && mouseY > yPos && mouseY < yPos+bHeight){
isPressed = true;
return true;
}
return false;
}
boolean mReleased(){
if(mouseX > xPos && mouseX < xPos+bWidth && mouseY > yPos && mouseY < yPos+bHeight){
isPressed = false;
return true;
}
return false;
}
String getID(){
return id;
}
}
Answers
Maybe this is not what you want, but this is how I handle buttons. I first draw the screen with the buttons, and then load and resize a background with the buttons locations painted in different colours. When mousePressed I just check the pixel colour in the background image and act accordingly.
something like this :