2

I'm trying to make the buttons highlight (by changing color) when i am hovering above them with my mouse. this is my code;

import javax.swing.JOptionPane;
final int BUTTON_WIDTH = 100;
final int BUTTON_HEIGHT = 50;

int buttonX = 0;
int COLOR = 150;

void setup() {
  size(800, 400);
}

void draw() {
  for (int i=0; i<=8; i++) {
    drawButtons();
    buttonX = buttonX+BUTTON_WIDTH;
  }
}

void drawButtons() {
  strokeWeight(2);
  fill(0, COLOR, COLOR);
  rect(buttonX, 0, BUTTON_WIDTH, BUTTON_HEIGHT);
 
}

I thought it would work if i add this ;

if(mouseX<BUTTON_WIDTH && mouseY<BUTTON_HEIGHT){
    COLOR = 255;
  }

It does not work though, i am trying to make the button highlight when the mouse is over it and the other buttons would remain unchanged.

processingboy1
  • 31
  • 2
  • I can't see any events in our code. How do you get updated values of mouseX, and how does your code know when to check the location and change the color? Here is an example of how you can add events to a swing component using the `mouseEntered` and `mouseExited` events: [How to put Hover effect on jbutton?](https://stackoverflow.com/questions/22638926/how-to-put-hover-effect-on-jbutton) or you can track when the state is changed: https://stackoverflow.com/questions/16733708/changing-value-of-boolean-when-mouse-cursor-hovers-over-a-jbutton/16733866#16733866 – sorifiend Nov 18 '21 at 01:59
  • I was asked not to use arrays in the code. i cannot use the jbutton. i am looking for a way i can highlight each of the rectangles (buttons) when my mouse is over them – processingboy1 Nov 18 '21 at 15:45
  • 1
    Try using a boolean mouseOver. Set it to true when the cursor is over your button, otherwise set it to false. Then set the fill color of your button accordingly. There is an example here that might help you: https://processing.org/examples/mousefunctions.html – apodidae Nov 18 '21 at 21:11
  • Neither of the links above relies on an array? You need to use some sort of mouse event to capture when the mouse is over the button or not, or you need a swing timer or a thread that checks the mouse location, then you simply toggle a boolean and redraw the button/rectangle differently based on the boolean: `if(mouseOver) {doSamething;}else{doSomethingElse;}` – sorifiend Nov 18 '21 at 23:14

1 Answers1

2

Your condition in the draw (before drawing the buttons) is wrong. Here a correct version of your program :

final int BUTTON_WIDTH = 100;
final int BUTTON_HEIGHT = 50;

int buttonX = 0;

void setup() {
  size(800, 400);
  strokeWeight(2);
}


void draw() {
  for (int i=0; i<=8; i++) {
    
    // The condition was wrong before, now it checks if you are on a button
    if(buttonX <= mouseX && mouseX < buttonX + BUTTON_WIDTH && mouseY<BUTTON_HEIGHT){
      fill(0, 255, 255);
    } else {
      fill(0, 150, 150);
    }

    rect(buttonX, 0, BUTTON_WIDTH, BUTTON_HEIGHT);
    buttonX += BUTTON_WIDTH;
  }
  buttonX = 0; // don't forget to put buttonX at 0 after the for loop, or the next buttons drawn are going to be invisible (on the right of the canva) and you won't see the color change.
}

Now it should be ok !

Grusat
  • 43
  • 8
  • I tried doing this but this just changes all the buttons to a different color and never changes them back – processingboy1 Nov 21 '21 at 10:31
  • The problem here is that the COLOR variable is changing but the it is not affecting the drawButtons function, so it is changing after the buttons have been drawn – processingboy1 Nov 21 '21 at 10:45
  • I've updated my answer, if your COLOR variable is well initialized as global it should work. – Grusat Nov 21 '21 at 15:18
  • Don't forget to use the second code I provided since the first one is wrong : I just put the evolution of your program to become what you're searching ;p – Grusat Nov 21 '21 at 15:32
  • I just tried it and the problem is still there. i have been cracking my head for days and i really want to solve this. the problems in your code is that the if statement that will change the color after the rects are drawn is not effective. when i print COLOR it shows me the val has changed but this has no effect on the object, i hope you understand – processingboy1 Nov 22 '21 at 03:25
  • Take this code for instance; int y = 0;float num = 8; float begY = 0; float wid = 100; float hyt = 50; float COLOR = 100; void setup() { size(800, 400); } void draw() { for ( y=0; y – processingboy1 Nov 22 '21 at 03:46
  • It changes the color for all the buttons – processingboy1 Nov 22 '21 at 03:47
  • sorry for the sloppy variable names, im exhausted rn – processingboy1 Nov 22 '21 at 03:48
  • Maybe try fill(0,150,150) instead of COLOR = 150 and the samed for COLOR =255 – Grusat Nov 22 '21 at 12:27
  • Now it's fine, i let you try the code in my answer – Grusat Nov 23 '21 at 07:43
  • can i have any of your socials, i need someone to talk to about coding. i am falling in love with it – processingboy1 Dec 12 '21 at 14:21
  • You can mark this question as answered if my answer helped you ! – Grusat Jul 21 '22 at 07:58