Making several buttons with images

I am currently trying to make a few buttons using images that ofcourse change when you press the button. I am using the code from here: http://processingjs.org/learning/topic/imagebutton/ but I cannot whatever I do, find out how to make more than one button appear at the same time. there is also the problem that the button activates with a press, not a release. which is a problem because I can press on a side of the screen, drag my mouse over the button and it then activates.

Tagged:

Answers

  • you need to make an array:

    ImageButtons[] buttons = new ImageButtons [5];
    
    ..................
    
      button[0]  = new ImageButtons(x, y, w, h, b, r, d);
    
    .............
    
      button[1]  = new ImageButtons(x2, y2, w, h, b, r, d);
    
    
    ..........
    
      button[3]  = new ImageButtons(x, y, w, h, b, r, d);
    

    and then in draw() for loop over those

    you can replace if(over && mousePressed) { by if(over && mouseReleased) { afaik

  • I keep getting the error "the type of the expression must be an array type but it resolved to (nameoftheprogram).imageButtons.

    I am very unsure of how to make an array since I am very new at programming still. :P

  • post entire code

    in every spot where you had button. e.g.

      button.update();
    
      button.display();
    

    we want now

    button[...].update();

    button[....].display();

  • edited August 2015

    I did some tinkering with the things iv'e read here and seen on youtube and from looking at codes, that I figured out a fairly simple way of creating buttons. I am sure there are easier ways, but anyways. I will post my code here if anyone is interested :)

    this was to test if it worked, and I successfully made it able to track the mouse hovering over button and the release of the button aswell as pressing it. (this is surely not the optimal way, but I am super new at programming)

    EDIT seems like you can still hold down the button, drag mouse away and release, and the button still counts as pressed.

    PImage p0, p1, p2, p3;
    
    PImage [] picArray = new PImage[4];
    
    float[] buttonX1 = {40};
    float[] buttonY1 = {40};
    float[] buttonWidth1 = {29};
    float[] buttonHeight1 = {29};
    
    int test = 1;
    int test2 = 1;
    
    void setup(){
    
      size(700,500);
    
      p0 = loadImage("brush1.png");
      p1 = loadImage("brush2.png");
      p2 = loadImage("spray1.png");
      p3 = loadImage("spray2.png");
      picArray[0] = p0;
      picArray[1] = p1;
      picArray[2] = p2;
      picArray[3] = p3;
    
    
    }
    
    
    void draw() {
    
    
      background(255);
    
      image(picArray[0], 40,40);
      image(picArray[2], 100,40);
    
    
    
      for (int i=0; i<buttonX1.length; i++) {
          if ((mouseX > 40) &&
          (mouseX < 40+29)&&
          (mouseY > 40) &&
          (mouseY < 29+40)) {
          test = 1;
              } else {
                test = 2;
                }
    
          }
        fill(0);
        text(test,40,40);
        text(test2,70,40);
    
    if(mousePressed && test == 1){
      if(mouseButton == LEFT) {
        image(picArray[1], 40, 40);
         }
      }
    }
    
    void mouseReleased() {
          if (test == 1);{
            test2 = 2;
          }
    }
    
  • edited August 2015
    PImage [] picArray = new PImage[4];
    
    float[] buttonX1 = {
      40
    };
    float[] buttonY1 = {
      40
    };
    float[] buttonWidth1 = {
      29
    };
    float[] buttonHeight1 = {
      29
    };
    
    int test = 1;
    int test2 = 1;
    
    void setup() {
    
      size(700, 500);
    
      PImage p0, p1, p2, p3;
    
      p0 = loadImage("brush1.png");
      p1 = loadImage("brush2.png");
      p2 = loadImage("spray1.png");
      p3 = loadImage("spray2.png");
      picArray[0] = p0;
      picArray[1] = p1;
      picArray[2] = p2;
      picArray[3] = p3;
    }
    
    
    void draw() {
    
      background(255);
    
      image(picArray[0], 40, 40);
      image(picArray[2], 100, 40);
    
      fill(0);
      text(test, 40, 40);
      text(test2, 70, 40);
      //
    }
    
    void mousePressed() {
    
      for (int i=0; i<buttonX1.length; i++) {
        if ((mouseX > buttonX1[i]) &&
          (mouseX < buttonX1[i]+buttonWidth1[i])&&
          (mouseY > buttonY1[i]) &&
          (mouseY < buttonY1[i]+buttonHeight1[i])) {
          test = 1;
        } else {
          test = 2;
        }
      }
    
      if (mousePressed && test == 1) {
        if (mouseButton == LEFT) {
          image(picArray[1], 40, 40);
        }
      }
    }
    
    void mouseReleased() {
      if (test == 1);
      {
        test2 = 2;
      }
    }
    
  • edited August 2015 Answer ✓

    some minor changes ...

    1.

    this line can be in setup()

    PImage p0, p1, p2, p3;

    local vars are always better than global vars

    done.

    2.

    in lines 41 to 44 you forgot to use the arrays buttonX1 etc. etc.

    that will come back and haunt you when you have more buttons than one

    fixed

    3.

    I used ctrl-t to auto-format in processing (indents)

    4.

    you dropped the whole class / object thing... which is fine since you are a beginner... later you should really come back here and master the whole class / object thing...

    ;-)

  • The only change is that it flickers to it's pressed image (brush2.png) and I can still release mouse anywhere to change the value of test2

  • true

    I don't have the images

    in mouseReleased() you want to check if we are still inside the same button

    is (brush2.png) supposed to be shown during mouse button is held down?

    then you could set a marker in mousePressed() and eval it in draw() with if

  • Thank you so much Chrisir, that helped alot :) and didn't know abot CTRL - T, that is useful and saves time :D

Sign In or Register to comment.