Tips on debugging drawImage()

[Jim Venolia]

I've got a program that has 2 threads. One thread generates images and puts them into a blocking queue. The other thread reads from the blocking queue and paints the image to the screen.
The display thread's main loop is:

           while(true)
          {
                gen = doTake(nuBoard);
                drawLife(gen);
                paintScreen();
                doPut(mtBoard, gen);
          }

drawLife() builds the image, paintScreen does the heavy lifting:

        private void paintScreen()
        {
            try
            {
                Graphics g = this.getGraphics();
                if( (g != null) && (image != null) )
                    g.drawImage(image, 0, 0, null);
                g.dispose();
            } catch(Exception e) {
                System.err.println("getGraphics err: " + e);
            }
        }

I've checked, neither g nor image is null. I know someone will ask, so here is drawLife():

        private void drawLife(Generation gen)
        {
            int row_pixel, col_pixel;

            if(image == null)
            {
                image = createVolatileImage(XSIZE * CELL_SIZE,
                                            YSIZE * CELL_SIZE);
                if(image == null)
                {
                    System.out.println("Image is null");
                    System.exit(-1);
                }
                g = image.getGraphics();
            }

            paintTimer.start();
            if(DEBUG > 1)
                System.err.println("drawLife");

            final int offset = CELL_SIZE / 2;

            for(Cell cell: gen.cellsChanged)
            {
                col_pixel = cell.y * CELL_SIZE + offset;
                row_pixel = cell.x * CELL_SIZE + offset;
                g.setColor(gen.board[cell.x][cell.y] ? COLOR_FG : COLOR_BG);
                g.fillOval(row_pixel, col_pixel, LIFE_SIZE, LIFE_SIZE);
                if(useGetCell)
                    putCell(cell);
            }

            paintTimer.stop();
        }

paintTimer is a class I wrote to profile my code.

My GUI has 2 buttons: run and step. One runs at full speed, the other is a single step. The problem is, my image doesn't show up onscreen until I hit either Run or Step. If I hit step it runs 1 generation and the screen gets updated, but it shows the second generation. If I use a breakpoint and step through the code drawImage() paints the second generation. I never see the beginning condition.

I've run this in Eclipse with breakpoints all over the place. Everything works fine except my screen doesn't update until I show the second iteration.

Out of frustration I put the GUI into it's own thread, that didn't help. Eclipse shows I've now got 12 threads in my little program. All suspended waiting for something to happen, my screen is the default create screen.

Any advice on figuring out why drawImage() doesn't seem to update my screen until I hit a button?

/ I'm the guy with the "I've lost my head" thread
// How did I fix it?
/// hellifino, working on something else it suddenly started working and I'm afraid to touch the create GUI stuff.

[Rob Camick]

        Graphics g = this.getGraphics();
        if( (g != null) && (image != null) )
            g.drawImage(image, 0, 0, null);

You should not do painting by using getGraphics(). Any painting you do is only temporary until Swing decides the component needs to be repainted at which time you will lose your painting. Custom painting is done by overriding the paintComponent() method of the panel and then you add the panel to the frame.

However, you don't even need to go to all that trouble. You are painting the image at is actual size, so you can just use a JLabel and add an ImageIcon to the label.

Instead for using a do while loop, you can then use a Swing Timer to schedule the changing of the Image.

[Rob Camick]

Here is an example that demonstrates both of the above suggestions:

import java.awt.*;
import java.awt.event.*;
import java.awt.image.*;
import java.io.*;
import java.util.*;
import javax.imageio.*;
import javax.swing.*;
import java.net.*;

public class ImageReload extends JPanel implements ActionListener
{
	JLabel timeLabel;
	JLabel imageLabel;
	ImageIcon icon = new ImageIcon("timeLabel.jpg");

	public ImageReload()
	{
		setLayout( new BorderLayout() );

		timeLabel = new JLabel( new Date().toString() );
		imageLabel = new JLabel( timeLabel.getText() );

		add(timeLabel, BorderLayout.NORTH);
		add(imageLabel, BorderLayout.SOUTH);

		javax.swing.Timer timer = new javax.swing.Timer(1000, this);
		timer.start();
	}

	public void actionPerformed(ActionEvent e)
	{
		timeLabel.setText( new Date().toString() );

		SwingUtilities.invokeLater(new Runnable()
		{
			public void run()
			{
				try
				{
					String imageName = "timeLabel.jpg";
					BufferedImage image = ScreenImage.createImage(timeLabel);
					ScreenImage.writeImage(image, imageName);

					imageLabel.setIcon( new ImageIcon(ImageIO.read( new File(imageName) ) ) );
					imageLabel.setText("");
				}
				catch(Exception e)
				{
					System.out.println( e );
				}
			}
		});
	}

	private static void createAndShowUI()
	{
		JFrame frame = new JFrame("SSCCE");
		frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
		frame.add( new ImageReload() );
		frame.setLocationByPlatform( true );
		frame.pack();
		frame.setVisible( true );
	}

	public static void main(String[] args)
	{
		EventQueue.invokeLater(new Runnable()
		{
			public void run()
			{
				createAndShowUI();
			}
		});
	}
}

You will also need the Screen Image class to run this code as it dynamically creates a image every second.

[Jim Venolia]

It's an animation that gets updated every millisecond or so. PaintComponent only updates when Swing gets around to it. drawImage is what I want.

Ever notice how hard it is to type when you have a cat between you and the keyboard?

[Campbell Ritchie]

Cats are unlimited evil.
Why are you updating the animation every millisecond? You cannot see anything that quickly; consider updating every 20ms or similar. I do not know how quickly you can update a GUI display, but it may not be possible for it to update every millisecond.

[Jim Venolia]

He may be unlimited evil, but her sure is cute and soft

It's Conway's game of Life, I want it to go as fast as possible.

[Campbell Ritchie]

Even if the display can't keep up with the game?

[Piet Souris]

it concerns two different things:

1) updating something for display

you can do that at any pace you like

2) displaying the thing

every, say, 50th of a second, for instance when a timer fires.

If the update speed is around 1000 times per second, you may
miss 19 out of every 20 updates, but that is probably not important.
If you look at today's modern games and graphics hardware, they
are able to do updating 200 times a second, if I may believe reviews.
Yet, screen is only updated 50 times per sec.

Like Rob, I do not understand why OP is doing it in this complicated
way. As far as I can tell, only one BufferedImage would suffice.
Update it as fast as you can, and when a Timer fires, simply draw whatever
you have to your JPanel, via the 'repaint()' mechanism. He would surely not
have the difficulties that lead to this topic.

But maybe OP can explain why he does it the way he does.

Greetz,
Piet

[Jim Venolia]

My math was wrong, I'm updating every 10 ms or so. When I used paintComponant the screen updated maybe once a second, the animation was horrible.

For my question the update speed is irrelevant. I need to know why drawImage doesn't actually draw the initial image. I know drawImage returns immediately, but the return value is true indicating it drew the complete image.

[Piet Souris]

Well, when I draw directly to the Graphics of a JPanel, that panel gets
updated as it should. Problems only when the system wants to do
a repaint. So, I have no idea.

[Rob Camick]

When I used paintComponant the screen updated maybe once a second, the animation was horrible.

Your code is wrong. I have animated 10k balls on a screen every 50ms.

I need to know why drawImage doesn't actually draw the initial image.

Post a proper SSCCE that demonstrates the problem I gave you a simple example of how to create a SSCCE. We can't guess what is going on based on a few lines of code. We don't know the context of your code. Create a simple SSCCE that just displays 1, then 2, then 3 etc. on the image. We don't care about your game if life because is irrelevant to the stated problem of just displaying an image.

[Jim Venolia]

The code is over 700 lines, plus a couple ancillary files.

I know I'm doing something wrong, I'm trying to figure out what.

[Rob Camick]

The code is over 700 lines

The detail of the code is irrelevant. The complexity of the buffered image you are creating is irrelevant.

A buffered image depicting the game of life or an image displaying an increasing number is the same thing. It is an image that you update periodically.

It is the concept that you are trying to understand. Until you understand that, you won't solve your problem.

If you can't simplify the code then I have no idea why you are asking a question. We can't possibly guess which of your 700 lines is causing the problem. We can only help you understand the concept.

[Jim Venolia]

Here's the GUI part of my code. I could zip the entire program but I have nowhere to put it so you can get at it. The fact that I need FUDGEX and FUDGEY, plus my buttons/slider don't resize like I think they should, tells me there is something I'm not understanding here.

Rob, I've looked at your code and it's cleaner than mine. I'll be changing my stuff to use a timer instead of sleeping to control the speed. Looks like I also need to rename my Timer.java class I wrote.

    // Create the GUI, then as new boards become available display them.

    // See comment by writeObject()
    @SuppressWarnings("serial")
    private class RunGUI extends JPanel implements ChangeListener
    {
        // The size of each cell, in pixels
        final static int CELL_SIZE = 2;   

        // The size of the circle in the cell.  If LIFE_SIZE is < 2 then
        // fillOval() won't display anything.
        final static int LIFE_SIZE = 2;

        Generation gen = null;
        JPanel game = null;
        JButton runButton = null;

        public RunGUI(String filename)
        {
            // For some reason my window isn't big enough.  sigh
            final int FUDGEX = 18;
            final int FUDGEY = 40;

            // The x value doesn't matter, it's a vertical menu
            final int X_BUFFER = 5;
            final int Y_BUFFER = 15;

            Thread me = Thread.currentThread();
            me.setName("GUI thread");

            JFrame frame = new JFrame("Life: " + filename);
            frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
            frame.setLayout(new BorderLayout());
            frame.setBackground(COLOR_BG);

            game = new JPanel();
            game.setSize(new Dimension(XSIZE * CELL_SIZE + FUDGEX,
                                        YSIZE * CELL_SIZE + FUDGEY));
            game.setBackground(COLOR_BG);
            game.setVisible(true);

            // frame.add(game, ...) and you get "Image is null".
            // frame.add(this, anything but CENTER) and it runs, but you can't
            //    see it.  Why?  hellifino.  But I've spent days on this crap,
            //    I don't know why it works like it does, I don't know why it
            //    doesn't work like I expect, and I really don't give a damn
            //    anymore.  Jeeez, I've spent 90% of my time in this program
            //    on the GUI and dicking with Eclipse.

            //frame.add(game, BorderLayout.WEST);
            frame.add(this, BorderLayout.CENTER);

            JPanel UI = new JPanel();
            UI.setLayout(new BoxLayout(UI, BoxLayout.PAGE_AXIS));
            UI.add(Box.createRigidArea(new Dimension(X_BUFFER, Y_BUFFER)));

            runButton = new JButton("Run");
            runButton.setMnemonic(KeyEvent.VK_R);
            runButton.addActionListener(new runAction());
            runButton.setToolTipText("Start the animation");
            UI.add(runButton);
            UI.add(Box.createRigidArea(new Dimension(X_BUFFER, Y_BUFFER)));

            JButton stepButton = new JButton("Step");
            stepButton.setMnemonic(KeyEvent.VK_S);
            stepButton.addActionListener(new stepAction());
            stepButton.setToolTipText("Run 1 generation");
            UI.add(stepButton);
            UI.add(Box.createRigidArea(new Dimension(X_BUFFER, Y_BUFFER)));
            
            JLabel label = new JLabel("Speed");
            UI.add(label);

            JSlider speedSlider = new JSlider(JSlider.VERTICAL,0,SLIDER_MAX,0);
            speedSlider.setMajorTickSpacing(100);
            speedSlider.setMinorTickSpacing(10);
            speedSlider.setPaintTicks(true);
            speedSlider.setPaintLabels(true);
            Hashtable<Integer, JLabel> labelTable =
                            new Hashtable<Integer, JLabel>();
            labelTable.put(new Integer(0), new JLabel("Faster"));
            labelTable.put(new Integer(SLIDER_MAX), new JLabel("Slower"));
            speedSlider.setLabelTable(labelTable);
            speedSlider.addChangeListener(this);
            UI.add(speedSlider);

            frame.add(UI, BorderLayout.WEST);
            frame.setVisible(true);
            frame.pack();

            frame.setSize(new Dimension(XSIZE * CELL_SIZE + FUDGEX + 50,
                                        YSIZE * CELL_SIZE + FUDGEY));
            runButton.setSize(
                new Dimension(stepButton.getWidth(), stepButton.getHeight()));
        }

        public void stateChanged(ChangeEvent ce)
        {
            JSlider src = (JSlider) ce.getSource();
            if(!src.getValueIsAdjusting())
            {
                UIspeed.set(src.getValue());
            }
        }

        private class runAction implements ActionListener
        {
            public void actionPerformed(ActionEvent ae)
            {
                // One would think there would be an AtomicBoolean.flip(),
                // which would just change the value.  One would be wrong.
                synchronized(UIstart)
                {
                    if(UIstart.get())
                    {
                        UIstart.set(false);
                        runButton.setText("Start");
                    }
                    else
                    {
                        UIstart.set(true);
                        runButton.setText("Stop");
                    }
                    UIstart.notify();
                }
            }
        }

        private class stepAction implements ActionListener
        {
            public void actionPerformed(ActionEvent ae)
            {
                UIstep.set(true);
                synchronized(UIstart)
                {
                    UIstart.notify();  // Not a typo, wake UIstart.wait()
                }
            }
        }

        private Graphics g;
        private VolatileImage image = null;

        // Draw the board to the image buffer

        private void drawLife(Generation gen)
        {
            int row_pixel, col_pixel;

            if(image == null)
            {
                image = createVolatileImage(XSIZE * CELL_SIZE,
                                            YSIZE * CELL_SIZE);
                if(image == null)
                {
                    System.out.println("Image is null");
                    System.exit(-1);
                }
                g = image.getGraphics();
            }

            paintTimer.start();
            if(DEBUG > 1)
                System.err.println("drawLife");

            final int offset = CELL_SIZE / 2;

            for(Cell cell: gen.cellsChanged)
            {
                col_pixel = cell.y * CELL_SIZE + offset;
                row_pixel = cell.x * CELL_SIZE + offset;
                g.setColor(gen.board[cell.x][cell.y] ? COLOR_FG : COLOR_BG);
                g.fillOval(row_pixel, col_pixel, LIFE_SIZE, LIFE_SIZE);
                if(useGetCell)
                    putCell(cell);
            }

            paintTimer.stop();
        }

        // Send the buffer image to the screen
        private void paintScreen()
        {
            try
            {
                Graphics g = this.getGraphics();
                if( (g != null) && (image != null) )
                    g.drawImage(image, 0, 0, null);
                g.dispose();
                g = null;
            } catch(Exception e) {
                System.err.println("getGraphics err: " + e);
            }
        }

        public void go()
        {
            while(true)
            {
                gen = doTake(nuBoard);
                drawLife(gen);
                paintScreen();
                doPut(mtBoard, gen);
            }
        }
    }

    class GUIThread extends Thread
    {
        String runMe;

        public GUIThread(String filename)
        {
            runMe = filename;
        }

        public void run()
        {
            RunGUI runGUI = new RunGUI(runMe);
            runGUI.go();
        }
    }

    //  Suddenly started getting "warning: [serial] serializable class 
    //  Life.RunGUI has no definition of serialVersionUID" errors. 
    //  Google says that's because I'm not serializable.  I don't want to be
    //  serializable so force a crash if someone serializes us.
    //  This goes with "@SuppressWarnings("serial")" above RunGUI().

    private void writeObject(ObjectOutputStream oos) throws IOException {
       throw new IOException("This class is NOT serializable.");
    }

    public void doIt(String filename)
    {
        NextGeneration nextGeneration = new NextGeneration(filename);
        nextGeneration.start();

        GUIThread gui = new GUIThread(filename);
        gui.start();
        //RunGUI runGUI = new RunGUI(filename);
        //runGUI.go();
    }

    public static void main(String[] args)
    {
        String filename;

        if(args.length == 0)
            filename = DATA_DIRECTORY + "Breeders/spacefiller.rle";
            //filename = DATA_DIRECTORY + "problem.rle";
        else
            filename = args[0];

        Life life = new Life();
        life.doIt(filename);
    }
}

[Rob Camick]

You still miss the point of my comments.

There is no need for buttons or sliders. All you are trying to do is paint a buffered image. The game of life code is irrelevant for this and I am not even going to look at it.

Until you learn to simplify problems you won't learn how to debug code.

fact that I need FUDGEX and FUDGEY

Probably because you are using getGraphics on the frame. The frame includes the borders and title bar. You want your painting to be only on the content pane of the frame. Another reason for doing custom painting properly.

Until you learn how to create a SSCCE I can't help.

[Jim Venolia]

What is an SSCCE? What is ScreenImage?

[Campbell Ritchie]

This is an SSCCE.

[Rob Camick]

What is an SSCCE? What is ScreenImage?

Those are links that you click on.

Or you can always search the web. This is another part of problem solving.