Add a Complex Image in the Panel, With Buttons Around It in One Customized User Interface

Add a complex image in the panel, with buttons around it in one customized user interface

1. Use a 3x3 GridLayout
2. For each of the 9 cells get a subimage:

• For every second component, add a label with the subimage.
• For every other component, add a JButton from which the space is removed. Use the subimage as icon, but you'll need alternate icons to indicate focus, activation etc. This example puts a red border around the 'pressed' icon.

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

public class CompassButtons {

    public CompassButtons(BufferedImage bi) {
        int w = bi.getWidth();
        int h = bi.getHeight();
        int step = w / 3;
        JPanel p = new JPanel(new GridLayout(3, 3));
        p.setBackground(Color.BLACK);
        int count = 0;
        for (int ii = 0; ii < w; ii += step) {
            for (int jj = 0; jj < h; jj += step) {
                // This is it - GET THE SUB IMAGE
                Image icon = bi.getSubimage(jj, ii, step, step);
                if (count % 2 == 1) {
                    JButton button = new JButton(new ImageIcon(icon));

                    // make it transparent
                    button.setContentAreaFilled(false);

                    // remove border, indicate press using different icon
                    button.setBorder(null);

                    // make a 'pressed' icon..
                    BufferedImage iconPressed = new BufferedImage(
                            step, step, BufferedImage.TYPE_INT_ARGB);
                    Graphics g = iconPressed.getGraphics();
                    g.drawImage(icon, 0, 0, p);
                    g.setColor(Color.RED);
                    g.drawRoundRect(
                            0, 0,
                            iconPressed.getWidth(p) - 1, 
                            iconPressed.getHeight(p) - 1,
                            12, 12);
                    g.dispose();
                    button.setPressedIcon(new ImageIcon(iconPressed));

                    button.setActionCommand("" + count);
                    button.addActionListener((ActionEvent ae) -> {
                        System.out.println(ae.getActionCommand());
                    });

                    p.add(button);
                } else {
                    JLabel label = new JLabel(new ImageIcon(icon));
                    p.add(label);
                }
                count++;
            }
        }
        JPanel center = new JPanel(new GridBagLayout());
        center.setBackground(Color.BLACK);
        center.add(p);
        JOptionPane.showMessageDialog(null, center);
    }

    public static void main(String[] args) throws Exception {
        URL url = new URL("http://i.stack.imgur.com/SNN04.png");
        final BufferedImage bi = ImageIO.read(url);
        SwingUtilities.invokeLater(() -> {
            new CompassButtons(bi);
        });
    }
}

setTransform to rotate Images produces unexpected results

By overwriting the transform of the Graphics object you are also overwriting the scaling imposed by your system scale (which I suppose is set to 200%).

Either restrict to using Graphics2D::rotate or pass the transform the drawImage call.

AffineTransform transform = new AffineTransform();
transform.translate(getX(), getY());
transform.rotate(getOrientationRadians());

g.setTransform(transform);
g.drawImage(image, transform, null);

mouseover removes transparent background of round JButton in java

When doing custom painting the basic code should be:

public void paintComponent(Graphics g)
{
    super.paintComponent(g);

    // add custom painting here
}

This will make sure the background is cleared so there are no painting artifacts.

However, in your case you want the background of the parent panel to be painted before the button is painted so you need to use:

button.setOpaque(false);

Also, when you click on a button the rectangle will still appear indicating the button is in a pressed state. To remove this painting you need to use:

button.setContentAreaFilled( false );

Check out: Change JButton focus area for another implementation of a round button.

---

Related Topics