Clickable image buttons

Question

I'm making a puzzle app that needs to assign information to each piece. Here is a photo.

In the photo I've just printed each puzzle piece to the screen.

The pieces are generated before they are displayed, the pieces vary in amount. e.g. I want a puzzle thats 9x9 pieces... So I need 9x9 or 81 buttons...

When selected the button or piece is highlighted. When selected and when other buttons are clicked such as Assign Location than the piece data and the action of the button are executed/processed. Only one button can be selected at a time..

I've got every working as far as data and functions.

I just need to figure out how to make the buttons and make they selectable.

why don't you start with reading this : http://docs.oracle.com/javase/7/docs/api/java/awt/Button.html — kiruwka, Oct 28 '13 at 14:17
I need the buttons generated over time... I need the buttons to have certain properties listed in my question... Also that doc doesn't provide anything I didn't know. — visc, Oct 28 '13 at 14:22

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

See if this example gives you some ideas:

enter image description here

import java.awt.*;
import java.awt.image.BufferedImage;
import java.net.URL;
import javax.imageio.ImageIO;
import javax.swing.*;

class ImageButtonFun {

    public static void main(String[] args) throws Exception {
        URL url1 = new URL("https://i.stack.imgur.com/XZ4V5.jpg");
        final BufferedImage img1 = ImageIO.read(url1);
        URL url2 = new URL("https://i.stack.imgur.com/7bI1Y.jpg");
        final BufferedImage img2 = ImageIO.read(url2);
        final int sW = img2.getWidth();
        final int sH = img2.getHeight();
        final int tileW = 40;
        final int tileH = 40;
        Runnable r = new Runnable() {
        @Override
            public void run() {
                JPanel gui = new JPanel(new GridLayout(8,12));
                ButtonGroup bg = new ButtonGroup();
                for (int jj=0; jj<sH/tileH; jj++) {
                    for (int ii=0; ii<sW/tileW; ii++) {
                        Image im1 = img1.getSubimage(ii*tileW, jj*tileH, tileW, tileH);
                        Image im2 = img2.getSubimage(ii*tileW, jj*tileH, tileW, tileH);
                        JToggleButton button = new JToggleButton(new ImageIcon(im1));
                        button.setSelected( (ii%2==0 && jj%2==0) || (ii%2==1 && jj%2==1));
                        button.setSelectedIcon(new ImageIcon(im2));
                        button.setContentAreaFilled(false);
                        button.setBorderPainted(false);
                        button.setBorder(null);
                        bg.add(button);  // ensure only one button is selected at a time
                        gui.add(button);
                    }
                }

                JOptionPane.showMessageDialog(null, gui);
            }
        };
        // Swing GUIs should be created and updated on the EDT
        // http://docs.oracle.com/javase/tutorial/uiswing/concurrency
        SwingUtilities.invokeLater(r);
    }
}

The images are seen in Example images for code and mark-up Q&As.

Edit

Only one button can be selected at a time..

Use a ButtonGroup for that.

The ButtonGroup component manages the selected/unselected state for a set of buttons. For the group, the ButtonGroup instance guarantees that only one button can be selected at a time.

Clickable image buttons

1 Answers1

Edit

Linked