Making several buttons with images

Gromek999

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.

Chrisir

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

Gromek999

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

GoToLoop

https://processing.org/reference/Array.html
http://docs.oracle.com/javase/tutorial/java/nutsandbolts/arrays.html

Chrisir

post entire code

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

  button.update();

  button.display();

we want now

button[...].update();

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

Gromek999

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;
      }
}

Chrisir

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;
  }
}

Chrisir

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...

;-)

Gromek999

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

Chrisir

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

Gromek999

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

Chrisir

;-)