JTextPane Flicker During Image Swap

[Chris Dole]

Hello, I was wondering if someone wiser in the ways of Swing could help with an issue I'm having (see code below). You can run this JTextPane slide show demo code as-is, just substitute some images you have laying around for the slide show in the images[] array. The code assumes they are local to the file system.

The program works fine, but it doesn't always refresh the screen cleanly. I've seen a thumbnail of the graphic show up near top/center briefly before painting the image at full size. I've also seen the image appear full size but way off center before snapping into place. Is there something that can be done to this code to smooth it out?

Part of the problem is that I could not find a way to just replace the graphic within the HTMLDocument. I got the code to work to modify the document's HTML without just completely replacing it, but the image would not repaint when swapped into the document unless the new image had different dimensions than the one being replaced. Changing the IMG ID didn't help. I had to goose the screen size to get that to work, which is somewhat less than professional. So this is a possible second approach to solving the problem: Find a way to swap in the graphic but make the editor realize it has new content.

I also tried a CardLayout with two JTextPane controls, but I found the same issues, and in some cases it never did paint right.

Extra credit for ideas on how to implement cool transition effects. I have a feeling Swing wasn't set up for that. I don't know how much of a challenge it would be to take over painting...

BTW, I'm using Java 1.6.0_21. It was a fun program to write. Enjoy and thanks for any tips!

import java.awt.Color;

import javax.swing.ImageIcon;
import javax.swing.JFrame;
import javax.swing.JTextPane;
import javax.swing.text.html.HTMLDocument;

/**
 * This is a slide show that shows pictures centered horizontally (with native 
 * HTML supported by JTextPane) and vertically (with a cheat that works, putting 
 * a div above the picture's div that takes up the space to very nearly center it). 
 * The latter hack was necessary because the CSS examples I found to center 
 * vertically did not work in JTextPane.
 */
public class ImageSlideShowInHTMLControl 
{
	private static String userDir = System.getProperty("user.dir").replace('\\', '/');

    private JTextPane edit = new JTextPane();
    
	private String[] images = new String[] {
       		"Inspiring-landscapes-photography-part15-1.jpg",
       		"Inspiring-landscapes-photography-part15-2.jpg",
       		"Inspiring-landscapes-photography-part15-3.jpg",
       		"Inspiring-landscapes-photography-part15-4.jpg",
       		"Inspiring-landscapes-photography-part15-5.jpg",
    		"Inspiring-landscapes-photography-part15-6.jpg",
    		"Inspiring-landscapes-photography-part15-7.jpg",
    		"Inspiring-landscapes-photography-part15-8.jpg",
    		"Inspiring-landscapes-photography-part15-9.jpg",
    		"Inspiring-landscapes-photography-part15-10.jpg",
    		"Inspiring-landscapes-photography-part15-11.jpg",
    		"Inspiring-landscapes-photography-part15-12.jpg",
    		"Inspiring-landscapes-photography-part15-13.jpg",
    		"Inspiring-landscapes-photography-part15-16.jpg",
    		"BigSurDawn.jpg",
    		"CraterLake.jpg",
    		"Stonehenge.jpg"
    	};

	public ImageSlideShowInHTMLControl()
	{
		JFrame frame = new JFrame();
		frame.setUndecorated(true);
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        frame.getContentPane().add(edit);
        edit.setContentType("text/html");
        edit.setBackground(Color.BLACK);
        
    	try
        {
            frame.setSize(1000,800);
            frame.setLocationRelativeTo(null);
            frame.setVisible(true);

        	HTMLDocument htmldoc = (HTMLDocument)edit.getDocument();
        	
            int imgIdx = 0;
           	while (true)
           	{ /*I18NOK:BLK*/
           		String infile = userDir + "/Source/Images/" + images[imgIdx];
           		ImageIcon ii = new ImageIcon(infile);
           		int height = ii.getIconHeight();
        		StringBuffer sb = new StringBuffer();
        		sb.append("<div style=\"height:");
        		sb.append((800 - height) / 2);
        		sb.append("\"></div>");
        		sb.append("<div align=\"center\">");
        		sb.append("<img src=\"file:");
        		sb.append(infile).append("\">");
        		sb.append("</div>");
        		
        		imgIdx = (imgIdx < images.length - 1 ? imgIdx + 1 : 0);

           		// It was not enough to simply update the DIV's inner HTML with a new image.
           		// The image would only repaint if it was a different size than the previous 
        		// image. So, do the brute force approach: replace the entire document!
        		int length = htmldoc.getLength();
				if (length > 0)
				{
					htmldoc.remove(0, length);
				}
        		edit.setText(sb.toString());

        		// Wait a bit for the next one...
        		Thread.sleep(10000);
           	}
        }
        catch(Exception e)
        {
        	throw new IllegalArgumentException("Something bad happened...", e);
        }
	}
	
	public static final void main(String[] args)
	{
		new ImageSlideShowInHTMLControl();
	}
}

[Darryl Burke]

I see a number of things I don't like about that code, chief of which is that you are either calling Thread.sleep(...) on the EDT, or calling Swing constructors and methods off of the EDT. Here's a resource to learn more about that: Lesson: Concurrency in Swing.

Then, I don't really understand why you are using a text component to display an image. What's wrong with a JLabel and icon?

Third, you are apparently constructing an ImageIcon only to obtain the image's height. If you must load the image twice, you could save a little overhead -- and the likelihood of the image being not completely loaded when you query the height, possibly one cause of the resizing you observed -- by reading it to a BufferedImage with ImageIO.

Fourth, you are needlessly discarding away any information contained in any Exception by throwing a new IllegalArgumentException from the catch block. If your design requires this (it shouldn't), at the very least you should print or log the stack trace of the original Exception.

[Darryl Burke]

Extra credit for ideas on how to implement cool transition effects.

Did you copy that from your assignment, or was that meant for us?

You can create transition effects using a Timer and various approaches available in Java 2D, or you can migrate your application to JavaFX, where transitions are available 'out of the box' -- but note that JavaFX Script is not going to be supported very much longer, and JavaFX 2.0 is in its first public beta.

[Chris Dole]

Daryl,

Thanks for your responses. I chose JTextPane because there's going to be text as well as graphics. I was just trying out graphics to get started. I find it best to see how smaller things work before getting to the bigger things.

Thanks also for the pointers to further resources. I'm not new to Java development, though I am new to Swing. I'm aware of the issues you pointed out. This was just a quick and dirty learner project. I wasn't putting it out there for a general code review.

Having said all that, let's get back to the main thrust of this post. I was hoping to learn more about JTextPane and if there was anything I could do with it, specifically, to alleviate the flickering issue. I outlined some of the things I tried, based on research into other similar posts. I have exhausted my resources. So I'm reaching out to get the benefit of those who are experienced with Swing.

So if you, or anyone else, has some information that's more on topic, I'd be glad to hear it.

Thanks,
Chris

[Stephan van Hulst]

Darryl's advice was perfectly on topic. Follow his advice and then tell us if you still run into troubles.