Adding multiple image buttons?

mel_

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;

 }

 }

angel_esc

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 :

PImage menu, menubg;

void setup() {
   size(800,600);
   menu = loadImage("menu.png");
   menubg = loadImage("menubg.png");
   menubg.resize(800,600);
}

void draw(){
  image(menu,0,0,width,height);
}

void mousePressed(){
color c = menubg.get(mouseX,mouseY);
if(c==#ff0000){  // the color #ff0000 is the background color of one button
   do whatever;
} else if(c==#00ff00){ // the other button
   do whatever;
}