Keep getting misclicks, with my buttonClicked function

[JellyG37]

Hello everyone. I’m coding a GUI for a schoolproject, where i need to register whether or not the user has clicked on the right button or not. I’ve made different hitboxes on the screen where the clicks will be true, but when I use more than one. I only get a message that there have been misclicks? What to do?

This is my current code, and i apologize in advance if it has not been formatted correctly within the forums guidelines, I’m new here hehe

PImage img;
  Widget b1 = new Widget(20, 843, 32, 30);
  Widget b2 = new Widget(77, 843, 32, 30);
  Widget b3 = new Widget(132, 843, 32, 30);
  Widget b4 = new Widget(189, 843, 32, 30);
  Widget b5 = new Widget(242, 843, 30, 30);
  Widget b6 = new Widget(273, 829, 44, 30);
  Widget b7 = new Widget(273, 860, 44, 30);
  Widget b8 = new Widget(338, 843, 32, 30);
  Widget b9 = new Widget(393, 843, 32, 30);
  Widget b10 = new Widget(449, 843, 32, 30);
  Widget b11 = new Widget(512, 843, 32, 27);
  Widget b12 = new Widget(512, 820, 32, 22);
  Widget b13 = new Widget(512, 871, 32, 20);
  Widget b14 = new Widget(600, 843, 44, 30);
void setup() {
  size(559, 900);
  img = loadImage("GPS.jpg");
}

void draw() {
  
  image(img, 0, 0, width, height);
  b1.display();
  b1.buttonClicked();
  b2.display();
  b2.buttonClicked();
  b3.display();
  b3.buttonClicked();
  b4.display();
  b4.buttonClicked();
  b5.display();
  b5.buttonClicked();
  b6.display();
  b6.buttonClicked();
  b7.display();
  b7.buttonClicked();
  b8.display();
  b8.buttonClicked();
  b9.display();
  b9.buttonClicked();
  b10.display();
  b10.buttonClicked();
  b11.display();
  b11.buttonClicked();
  b12.display();
  b12.buttonClicked();
  b13.display();
  b13.buttonClicked();
  b14.display();
  b14.buttonClicked();
}



class Widget {
  int posX, posY, Rectwidth, Rectheight; 
  String Laple;

  Widget(int posx, int posy, int rectwidth, int rectheight) {
    posX = posx;
    posY = posy;
    Rectwidth = rectwidth;
    Rectheight = rectheight;
  }

  void display() {
    //firekant
    stroke(255);
    strokeWeight(0);
    fill(255, 50);
    rectMode(CORNER);
    rect(posX, posY, Rectwidth, Rectheight);

  }

  boolean buttonClicked() {
    boolean Clicked = false;

    if ((mouseX > posX && mouseX < posX + Rectwidth) && (mouseY > posY && mouseY < posY + Rectheight) && mousePressed) {
      Clicked = true;
      println("Knaptryk: "+mouseX+"x & "+mouseY+"y");
    } else if (mousePressed) {
      Clicked = false;
      println("Misklik: "+mouseX+"x & "+mouseY+"y");
    } else {

      Clicked = false;
    }

    return Clicked;
  }
}

[kll]

using a index helps to see what info comes from what button,
also a button array might be of use

//PImage img;
Widget[] b = new Widget[14];

void makeButtons() {
  b[0] = new Widget(20, 843, 32, 30, 0);
  b[1] = new Widget(77, 843, 32, 30, 1);
  b[2] = new Widget(132, 843, 32, 30, 2);
  b[3] = new Widget(189, 843, 32, 30, 3);
  b[4] = new Widget(242, 843, 30, 30, 4);
  b[5] = new Widget(273, 829, 44, 30, 5);
  b[6] = new Widget(273, 860, 44, 30, 6);
  b[7] = new Widget(338, 843, 32, 30, 7);
  b[8] = new Widget(393, 843, 32, 30, 8);
  b[9] = new Widget(449, 843, 32, 30, 9);
  b[10] = new Widget(512, 843, 32, 27, 10);
  b[11] = new Widget(512, 820, 32, 22, 11);
  b[12] = new Widget(512, 871, 32, 20, 12);
  b[13] = new Widget(600, 843, 44, 30, 13);
}

void setup() {
  size(559, 900);
  //img = loadImage(“GPS.jpg”);
  makeButtons();
}

void draw() {

  //image(img, 0, 0, width, height);
  for ( int i = 0; i< b.length; i++ ) {
    b[i].display();
    b[i].buttonClicked();
  }
}

class Widget {
  int idX, posX, posY, Rectwidth, Rectheight;
  String Laple;

  Widget(int posx, int posy, int rectwidth, int rectheight, int idx) {
    posX = posx;
    posY = posy;
    Rectwidth = rectwidth;
    Rectheight = rectheight;
    idX = idx;
  }

  void display() {
    //firekant
    stroke(255);
    strokeWeight(0);
    fill(255, 50);
    rectMode(CORNER);
    rect(posX, posY, Rectwidth, Rectheight);
  }

  boolean over() {
    return ( mouseX > posX && mouseX < posX + Rectwidth && mouseY > posY && mouseY < posY + Rectheight );
  }
  boolean buttonClicked() {
    boolean Clicked = false;

    if ( over() && mousePressed) {
      Clicked = true;
      println("idX: "+idX+" Knaptryk: "+mouseX+"x & "+mouseY+"y");
    } else if (mousePressed) {
      Clicked = false;
      println("idX: "+idX+" Misklik: "+mouseX+"x & "+mouseY+"y");
    } else {
      Clicked = false;
    }
    return Clicked;
  }
}

now easy understand why you see misclicks

[JellyG37]

Thank you for the help, and also for making my code sleek and sexy with that array, and have beautiful day <3

[Tiemen]

Hi there Jelly, welcome to the forum

Could you please edit your post and format the code? You can click the < /> Preformatted text button to place all your code in a block. Open your Processing sketch, tidy the code by clicking Edit / Auto Format, and paste the results in your post. the outcome should look like:

PImage img;
Widget b1 = new Widget(20, 843, 32, 30);

// ...
// rest of your code
// ...

    return Clicked;
  }
}

Also some tips for future posts:

• we don’t have the image file so we can’t load your sketch. In your sketch it serves as a background, so it’s better to leave it out.
• it’s always a good idea to reduce your sketch to a simplified version which simulates the problem. This makes it easier for yourself to spot and fix the issue, and other forum users might be more likely to (quickly) help you out.

To your issue:
You’re quite close, the problem is caused at two places within your class. One of those places is boolean buttonClicked. You use an if to test the x- and y-positions. But the x and y of what? You’re not refering to the x and y locations of the instances of your classes.

I think the video Constructor Arguments with Classes in JavaScript will be of great help to help you understand what’s causing the issue. It’s for p5 (Processing combined with JavaScript) so the code might be a bit different, but the same principles can be applied on Processing.

Hope that helps!