Simple clickable Swing 'grid' Mouse Events don't seem accurate

Question

I'm trying (for now) to create a grid of 25 squares wide, by 12 squares down and make them toggle between 2 colors when clicked (all squares are blue by default and clicking on one will turn it red. Another click will turn it back again to blue)

I've not done any Swing stuff for a long time, this is going to be a very very basic level design tool for my Android app. It 'kind of' works, but the mouse positions seem 'off' a little for some reason.

This is a screenshot:

enter image description here

The mouse pointer you can see, is where I clicked and the red square is the one that changed colour (the x positions are also off but not by as much as the 'y').

Why this is happening? Help would be appreciated.

Code (Apologies for confusion caused by calling my JPanels 'myFrames' ;-) )

public class GUI extends JFrame implements MouseListener{

JFrame myFrame = new JFrame();
JLabel myPanels[];

    public GUI(){

        super("Grid");
        setSize(1000,400);
        setResizable(false);
        setLayout(new GridLayout(12,25));
        addMouseListener(this);

        myPanels = new JLabel[300];

        for (int x = 0;x<myPanels.length;x++){

            myPanels[x]=new JLabel("");
            myPanels[x].setOpaque(true);
            myPanels[x].setBackground(Color.BLUE);
            myPanels[x].setBorder(BorderFactory.createLineBorder(Color.black));
        }
//Add all the squares (JLabels)
        for (int x = 0;x<myPanels.length;x++)
        add(myPanels[x]);
    }

    @Override
    public void mouseClicked(MouseEvent e) {
    //iterate through all JPanels to determine clicked one  
        for (int x = 0;x<myPanels.length;x++){
        if (e.getX()>myPanels[x].getX()&&e.getX()<(myPanels[x].getX()+myPanels[x].getWidth()))

        {

            if(e.getY()>myPanels[x].getY()&&e.getY()<(myPanels[x].getY()+myPanels[x].getHeight())){
        //Toggle colours    
        if (myPanels[x].getBackground()==Color.blue)
        myPanels[x].setBackground(Color.red);

        else {myPanels[x].setBackground(Color.blue);}
          }
        }
       }
     }



}

Samuel · Accepted Answer · 2013-07-09T15:45:47.723

The click listener is added for the JFrame (i.e. the window) so the mouse coordinates are relative to the top left corner of the window, not the top left corner of the grid.

If you want to figure out which grid element was clicked, it might be easier to just add click listeners to each grid panel instead of the entire JFrame.

    for (int x = 0;x<myPanels.length;x++){

        myPanels[x]=new JLabel("");
        myPanels[x].setOpaque(true);
        myPanels[x].setBackground(Color.BLUE);
        myPanels[x].setBorder(BorderFactory.createLineBorder(Color.black));
        myPanels[x].addMouseListener(this); // <-- add same listener to each grid
    }

and change the listener to

@Override
public void mouseClicked(MouseEvent e) {
    JLabel clickedPanel = (JLabel) e.getSource();

    //Toggle colours    
    if (clickedPanel.getBackground()==Color.blue)
        clickedPanel.setBackground(Color.red);
    else 
        clickedPanel.setBackground(Color.blue);
}

Thanks @Samual - that was indeed the problem and would explain why the Y was off more than the X (because of the title bar) - I've implemented your solution and it works great - cheers! :-) — Zippy, Jul 09 '13 at 15:00

score 1 · Answer 2 · edited May 23 '17 at 12:11

I'm trying (for now) to create a grid of 25 squares wide, by 12 squares down and make them toggle between 2 colors when clicked (all squares are blue by default and clicking on one will turn it red. Another click will turn it back again to blue)

use JToggleButton.setBackground(Color.Xxx), if JToggleButton.isSelected()
add last selected to the local variable (String),
all coordinates for previous point is based on get/putClientProperty(), then loop inside JComponents from container and to test if String in local variable contains, if equals
btw the same with JPanel, but with JToggleButton is easiest, without any added Listener, any code line moreover, because those two Colors for two possible states for JToggleButton can be defined in UIManager directly

Simple clickable Swing 'grid' Mouse Events don't seem accurate

2 Answers2