repainting JLabels on a JPanel

[D R Wilkinson]

Hello :-)



I have a map of JLabels displaying in a JPanel, within a JScrollPane.

When the cursor enters a hex, the corresponding JLabel icon repaints itself as a red hexagon. When the cursor exits, it repaints itself as a black hexagon.

I used absolute positioning on the JPanel and added the JLabels using add()

Each JLabel is 21x21 and the hexagon is 20x20. This allows the hexes to overlap by a pixel to the right and below/right. Without this, the JLabels didnt display the hexagons properly - each JLabel set to 20x20 resulted in the row end hexes losing the right and below/right edges of the hexagon.

The first hex displays correctly but the rest do not. I think this is because of the order the JLabels are added to the JPanel combined with the overlapping (by 1 pixel) of the JLabels.

Somehow, I need to change the display order of the JLabels so that the one that has detected the cursor entering it gets re-ordered to the top of the list of JLabels displayed on the JPanel. Then it can repaint itself and should show up correctly.

I experimented with JLayeredPane but the map load time was too long (there are 10,000 map hexes) whereas using JPanel, the load time is acceptable.

Any helpful ideas?

Thanks

Darren

[ November 30, 2004: Message edited by: D R Wilkinson ]

[ November 30, 2004: Message edited by: D R Wilkinson ]

[ November 30, 2004: Message edited by: D R Wilkinson ]
[ November 30, 2004: Message edited by: D R Wilkinson ]

[Craig Wood]

I would try to adjust the layout so that all of each Polygon is visible. This will save a lot of event code involving z–order and label identification. Let's see how this does —

import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.util.*;
import javax.swing.*;
 
public class Test extends JPanel {
 
    private Vector mapHexes;
 
    public Test(int MAP_WIDTH, int MAP_HEIGHT) {
 
        mapHexes = new Vector();
 
        this.setLayout(null);
        this.setDoubleBuffered(true);
        this.setPreferredSize(new Dimension(MAP_WIDTH,MAP_HEIGHT));
 
        drawMap();
 
    }
 
    public void drawMap() {
 
        int xOffset = 0;
        int yOffset = 0;
        int horizontalShift = 0;
 
        boolean isOddRow = true;
        int rows = 400/75;
        int cols = 400/100;
 
        for (int x = 0 ; x < rows ; x++) {
 
            for (int y = 0 ; y < cols ; y++) {
 
                this.add(new MapHex1(xOffset,yOffset,"Map Hex : "+xOffset+
                                                             ","+yOffset));
 
                xOffset += 101;
 
            }
 
            if (isOddRow) {
 
                horizontalShift = 50;
                isOddRow = false;
 
            } else {
 
                horizontalShift = 0;
                isOddRow = true;
 
            }
 
            xOffset = 0 + horizontalShift;
            yOffset += 76;
 
        }
 
    }
 
    protected void paintComponent(Graphics g) {
 
        super.paintComponent(g); // without this line, map scrolls with errors
 
    }
 
    public static void main(String[] args)
    {
        JFrame f = new JFrame();
        f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        f.getContentPane().add(new Test(400,400));
        f.pack();
        f.setLocation(200,200);
        f.setVisible(true);
    }
 
}
 
class MapHex1 extends JLabel implements MouseListener {
 
    private int xPosition;
    private int yPosition;
    private String name;
 
    final static Color red = Color.red;
    final static Color black = Color.black;
 
    final static BasicStroke stroke = new BasicStroke(0.5f);
 
    private Polygon polygon;
 
    private boolean isMouseInside = false;
 
    public MapHex1(int xPosition, int yPosition, String name) {
 
        createPolygon();
 
        this.setOpaque(false); // make the JLabel transparent
 
        this.name = name;
 
//        this.setToolTipText(name);
 
        this.xPosition = xPosition;
        this.yPosition = yPosition;
 
         // set position and size
        Rectangle r = polygon.getBounds();
        //if(xPosition == yPosition)
        //    System.out.println("r = " + r.toString());
        this.setBounds(xPosition, yPosition, r.width+2, r.height+2);
 
        addMouseListener(this);
 
    }
 
    public void paintComponent(Graphics g) {
 
        Graphics2D g2d = (Graphics2D) g;
        g2d.setRenderingHint(RenderingHints.KEY_ANTIALIASING,
                             RenderingHints.VALUE_ANTIALIAS_ON);
 
//        g2d.setStroke(stroke);
 
        if (isMouseInside) {
            // draw red polygon
            g2d.setColor(red);
            g2d.draw(polygon);
        } else {
            // draw black polygon
            g2d.setColor(black);
            g2d.draw(polygon);
        }
 
    }
 
    /**
     * Creates a basic polygon for drawing the composite map hex
     * 
     * @return void
     */
    private void createPolygon() {
 
        polygon = new Polygon();
        // all values times 5
        polygon.addPoint(0,25);
        polygon.addPoint(50,0);
        polygon.addPoint(100,25);
        polygon.addPoint(100,75);
        polygon.addPoint(50,100);
        polygon.addPoint(0,75);
        polygon.addPoint(0,25);
 
    }
 
    /**
     * Map Hex's x position getter
     *
     * @return This map hex's x position
     */
    public int getXPosition() {
 
        return xPosition;
 
    }
 
    /**
     * Map Hex's y position getter
     *
     * @return This map hex's y position
     */
    public int getYPosition() {
 
        return yPosition;
 
    }
 
    // MouseListener Interface Implementation
 
    public void mouseClicked(MouseEvent e) {}
 
    public void mousePressed(MouseEvent e) {}
 
    public void mouseReleased(MouseEvent e) {}
 
    public void mouseEntered(MouseEvent e) {
         
        isMouseInside = true;
        repaint();
 
    }
 
    public void mouseExited(MouseEvent e) {
 
        isMouseInside = false;
        repaint();
 
    }
 
    // End of MouseListener Interface Implementation
 
}

[D R Wilkinson]

Thank you very much for the reply Craig.

I tried the approach you have suggested and rejected it due to the fat/thin appearance of the hex map.

Re-ordering the z-order of the map hex that needs to be brought to the top of the JPanel is the route I want to take. What I am struggling with is trying to understand what is involved in using this re-ordering approach. I appreciate your method avoids possible complexities involved in re-ordering, but I feel these complexities are:

a) going to stretch my programming ability
b) worth the development pain for the neater graphic effect

I don't expect anyone else to code it for me, I just need a little guidance as to how to approach it. Your comment regarding the complexities has hinted of the requirements of the approach. Could you (or anyone else) expand on this please?

Again, thank you for your reply and help Craig.

[Craig Wood]

I did this with a JLayeredPane and it turned out to be easier than I first thought. I understand about your not wanting to see code so I'll try to not spoil your fun. I added the JLabel components to the JLayeredPane DEFAULT_LAYER. In the mouse code I changed the component layer to a higher layer in mouseEntered and back again to the default layer at exit. The top part of the JLayeredPane api has a discussion about the layers, adding components to them and changing layers for a component.

[D R Wilkinson]

Hello :-)

I tried using a JlayeredPane but the performance suffered dramatically - there are 10,000 map hexes in a map - no problem on a JPanel but something a JLayeredPane doesn't seem to like... unless I am doing something wrong.

I add the MapHex objects with this line...

// add the map hex
this.add(new MapHex(xOffset,yOffset,this), JLayeredPane.DEFAULT_LAYER);

and the layer switching is done with...

if (isMouseInside) {
            
            mapLPanel.moveToFront(this);
            drawRedPolygon(g2d);
            
        } else {
            
            mapLPanel.moveToBack(this);
            drawBlackPolygon(g2d);
            
        }

Looking at it now, the problem may be that all, or all but one MapHex's always have isMouseInside == false, so maybe there are 9,999 MapHex's permenantly trying to move to the back of the JLayeredPane.

I'll see if this is the problem.

[D R Wilkinson]

I commented out the line...

mapLPanel.moveToBack(this);

and the performance of the red/black highlight effect was fine, however the rest of the map displays incorrectly (see below)...



There is no discernable pattern to the errors, although they centre around the hex the cursor has entered/exited.

Also the initial load time of the map itself is around 50 seconds. Using a JPanel, the load time is maybe 2 seconds.
[ December 03, 2004: Message edited by: D R Wilkinson ]

[Ernest Friedman-Hill]

Is there any reason why you don't just paint the whole panel, rather then using 10,000 JLabels and layout? The performance would be much better all around, and the code would be simpler, too.

Note that (for example) JTable is so fast because, although it appears to be using a separate JLabel for each cell, it actually uses just one (by default, anyway) and repositions and "stamps" it as necessary.

[D R Wilkinson]

Thanks for that.

I was just starting to think along the same lines re: painting the map.

The only reason I wanted to use JLabels was that I wanted to confine the drawing of each map hex to a map hex object that then 'stamped' its image onto the JPanel when it was added - the JLabel seems to do this automatically.

rethinking the map hex object, i need an object that knows its xy position on the map, contains a drawing area that is 21x21 and has mouse event listeners for the mouse enter, exit, click, etc. If this object has a reference to the map object, i could use the size of the map hex (offset by its xy position on the map) to copy the region of the existing map image below it (a sort of clipping region) then it could use this as a background image (capturing the parts of the neighbouring map hex's images that need to stay unaltered), then the map hex can paint itself onto this background image (so graphically representing its new state) and this image could be painted onto the map itself.

OK... not entirely sure how to make that happen but... will give it a go.

Thanks for the help everyone :-)
[ December 03, 2004: Message edited by: D R Wilkinson ]

[D R Wilkinson]

OK - I am getting close but I just can't seem to get it right.

Here's the code - it sort of does what I need but in a very wrong way.

Any help ???

import java.awt.*;
import java.awt.image.*;
import java.awt.event.*;
import javax.swing.*;
import javax.swing.border.TitledBorder;
 
/**
 * Write a description of class MapDisplay here.
 *
 * @author (your name)
 * @version (a version number or a date)
 */
public class MapDisplay extends JFrame {
 
    private static final int MAP_WIDTH = 2010;
    private static final int MAP_HEIGHT = 1505;
    private static final int JFRAME_WIDTH = 640;
    private static final int JFRAME_HEIGHT = 480;
 
    /**
     * Constructor for objects of class MapDisplay.
     */
    public MapDisplay() {
 
        super("MapDisplay 0.1");
        
        Container container = getContentPane();
        container.setLayout(new BorderLayout());
        
        JTabbedPane tabbedPane = new JTabbedPane();
        JPanel mapPropertiesPanel = new JPanel(new BorderLayout());
        JPanel mapPanel = new JPanel(new BorderLayout());
        
        TitledBorder propertiesPanelTitle = BorderFactory.createTitledBorder("Properties");
        mapPropertiesPanel.setBorder(propertiesPanelTitle);
        mapPropertiesPanel.setPreferredSize(new Dimension(200,400));
        
        TitledBorder mapPanelTitle = BorderFactory.createTitledBorder("Map");
        mapPanel.setBorder(mapPanelTitle);
        
        JPanel mapDisplayPanel = new JPanel(new BorderLayout());
        
        mapDisplayPanel.setName("Map Editor");
        
        mapDisplayPanel.add(mapPanel,BorderLayout.CENTER);
        mapDisplayPanel.add(mapPropertiesPanel,BorderLayout.EAST);
        
        JScrollPane scrollingHexMap = new JScrollPane(new MapPanel(MAP_WIDTH, MAP_HEIGHT));
        
        mapPanel.add(scrollingHexMap);
        
        tabbedPane.add(mapDisplayPanel);
        
        container.add(tabbedPane);
        
        setSize(JFRAME_WIDTH,JFRAME_HEIGHT);
        setVisible(true);
        
    }
 
    /**
     * Main method
     * @param args
     */
    public static void main(String[] args) {
        
        MapDisplay md = new MapDisplay();
        md.setDefaultCloseOperation(EXIT_ON_CLOSE);
        
    }
    
}
 
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.*;
import javax.swing.*;
import java.util.*;
 
/**
 * MapPanel presents the map as an arrangement of hexagonal
 * polygons - map hexes.
 * 
 * @author D R Wilkinson 
 * @version 0.1
 */
public class MapPanel extends JPanel {
 
    final static Color black = Color.black;
    
    private Vector mapHexes;
 
    public MapPanel(int MAP_WIDTH, int MAP_HEIGHT) {
        
        this.setOpaque(true);
        this.setLayout(null);
        this.setDoubleBuffered(true);
        this.setBackground(Color.black);
        this.setPreferredSize(new Dimension(MAP_WIDTH,MAP_HEIGHT));
        
        mapHexes = new Vector();
        
        loadMap();
        
    }
    
    // IMPORTANT NOTE FOR LATER :
    // All Code that changes the graphic inside a GUI
    // has to be called from the Swing thread.
    // To be sure of that always change the gui inside SwingUtilities.invokeLater().
    
    private void loadMap() {
 
        int xOffset = 0;
        int yOffset = 0;
        int horizontalShift = 0;
        int vectorIndex = 0;
        
        boolean isOddRow = true;
        
        for (int x = 0 ; x < 100 ; x++) {
            
            for (int y = 0 ; y < 100 ; y++) {
                
                mapHexes.addElement(new MapHex(xOffset,yOffset,this));
                // get the MapHex just added
                MapHex tempMapHex = (MapHex) mapHexes.elementAt(vectorIndex);
                // add the map hex
                this.add(tempMapHex);
                
                vectorIndex++;
 
                xOffset += 20;
                
            }
            
            if (isOddRow) {
                
                horizontalShift = 10;
                isOddRow = false;
                
            } else {
                
                horizontalShift = 0;
                isOddRow = true;
                
            }
                
            xOffset = 0 + horizontalShift;
            yOffset += 15;
                
        }
        
    }
    
    protected void paintComponent(Graphics g) {
        
        super.paintComponent(g); // without this line, map scrolls with errors
        
    }
    
    /**
     * Returns a copy of the map image that is within the bounding rectangle
     * of the map hex object that the cursor is currently within
     */
    public Graphics returnMapImage(int x, int y, int width, int height) {
        
        // returns a copy of the
        Graphics g = this.getGraphics().create(x, y, width, height);
        return g;
        
    }
   
}
 
import java.awt.*;
import java.awt.event.*;
import java.awt.geom.*;
import java.awt.image.*;
import javax.swing.*;
import java.util.*;
/**
 * A Map Hex Polygon.
 * 
 * @author D R Wilkinson 
 * @version 0.1
 */
public class MapHex extends JComponent implements MouseListener {
 
    final static Color red = Color.red;
    final static Color black = Color.black;
    final static Color white = Color.white;
    final static BasicStroke thinStroke = new BasicStroke(0.5f);
 
    private int xPosition;
    private int yPosition;
    private int vectorIndex;
    
    private String mapHexTitle;
    private Polygon polygon;
    private MapPanel mapPanel;
    
    private boolean isMouseInside = false;
    private boolean isMapHexClicked = false;
    private boolean isFirstDrawing = true;
    
    /**
     * Constructor for objects of class MapHex
     */
    public MapHex(int xPosition, int yPosition, MapPanel mapPanel) {
              
        this.xPosition = xPosition;
        this.yPosition = yPosition;
        this.mapPanel = mapPanel;
        
        this.setOpaque(true); // make the JLabel transparent
        this.setToolTipText("Map Hex : "+getXPosition()+", "+getYPosition());
        this.setBounds(xPosition, yPosition, 21, 21);     // set position and size
        this.polygon = new Polygon();
        
        addMouseListener(this);
        createPolygon();
        
    }
    
    protected void paintComponent(Graphics g) {
        
        super.paintComponent(g);
        
        Graphics2D g2d = (Graphics2D) mapPanel.returnMapImage(xPosition, yPosition, 21, 21);
        
        if (isFirstDrawing) {
        
            Graphics2D mapPanelGraphics = (Graphics2D) mapPanel.getGraphics();
        
            // set stroke
            mapPanelGraphics.setStroke(thinStroke);
            // draw black polygon
            mapPanelGraphics.setColor(white);
            mapPanelGraphics.fill(polygon);
            mapPanelGraphics.setColor(black);
            mapPanelGraphics.draw(polygon);
            
            isFirstDrawing = false;
            
        } else {
            
            if (isMouseInside) {
                    
                drawRedPolygon(g2d);
            
            } else {
            
                drawBlackPolygon(g2d);
            }
            
        }
        
    }
    
    // 2D Graphics Drawing Methods
    
    private void drawRedPolygon(Graphics2D g2d) {
        
        // set stroke
        g2d.setStroke(thinStroke);
        // draw red polygon
        g2d.setColor(white);
        g2d.fill(polygon);
        g2d.setColor(red);
        g2d.draw(polygon);
        
    }
    
    private void drawBlackPolygon(Graphics2D g2d) {
        
        // set stroke
        g2d.setStroke(thinStroke);
        // draw black polygon
        g2d.setColor(white);
        g2d.fill(polygon);
        g2d.setColor(black);
        g2d.draw(polygon);
        
    }
    
    // End of 2D Graphics Drawing Methods
    
    /**
     * Creates and returns a hexagonal polygon for drawing on the map
     * 
     * @return  Polygon
     */
    private Polygon createPolygon() {
 
        polygon.addPoint(0,5);
        polygon.addPoint(10,0);
        polygon.addPoint(20,5);
        polygon.addPoint(20,15);
        polygon.addPoint(10,20);
        polygon.addPoint(0,15);
        polygon.addPoint(0,5);
        
        return polygon;
        
    }
    
    /**
     * Map Hex's x position getter
     *
     * @return     This map hex's x position
     */
    public int getXPosition() {
        
        return xPosition;
        
    }
    
    /**
     * Map Hex's y position getter
     *
     * @return     This map hex's y position
     */
    public int getYPosition() {
        
        return yPosition;
        
    }
    
    // MouseListener Interface Implementation
    
    public void mouseClicked(MouseEvent e) {
    
        // display this map hex's properties panel
        if (isMapHexClicked) {
            
            isMapHexClicked = false;
            
        } else {
            
            isMapHexClicked = true;
            
        }
        
        repaint();
 
    }
    
    public void mousePressed(MouseEvent e) {}
    
    public void mouseReleased(MouseEvent e) {}
    
    public void mouseEntered(MouseEvent e) {
    
        isMouseInside = true;
        repaint();
 
    }
    
    public void mouseExited(MouseEvent e) {
    
        isMouseInside = false;
        repaint();
        
    }
    
    // End of MouseListener Interface Implementation
 
}