Progress Bars Are Boring (Extreme GUI Makeover)

Some applications, like Eclipse, show a progress bar in their splash screen during the startup phase. This is a useful way to show the user that the application is actually working in the background. It helps the user to wait for the end of the process without kicking. Without such a progress indicator, the application could appear to be frozen.

During this year’s Extreme GUI Makeover session we demonstrated a nice replacement for common progress indicator. Rather than using a progress bar, a percentage or even a status text, we chose to use colors instead.

Download the following video to see how our splash screen conveys the progress information.

• QuickTime movie (250 kB)
• DivX movie (200 kB)

Alternatively, you can take a look at the screenshot below. The splash screen first appear as a sepia image. As the application loads, the image gradually turns to a fully colored picture.

Implementing this effect is very simple with Java SE 6 and the Timing Framework to fake the loading process. The first state of the splash screen is shown by using a new command line flag which lets you pick any PNG file to use it as your application’s splash screen. This is really nice because this command supports the alpha channel of the PNG file format, thus letting you create splash screens with drop shadows and other translucency effects.

java -splash:./lib/splash-sepia.png [...]

The biggest advantage of this flag over the use of a Java window is that the splash screen shows up as soon as the JVM is started. The user will therefore see the splash screen during your application’s startup and during the JVM’s startup.

Even though the JVM is responsible for creating and drawing the splash screen, our application can get a handle on a Graphics2D object which lets us paint over the splash screen. In this example, we will fade the colored version of the splash screen over the original sepia image. By doing so, we will mimic the effect of coloring the sepia image.

SplashScreen splash = SplashScreen.getSplashScreen();
if (splash != null) {
    // Load the sepia and colored images
    colorSplashImage = null;
    try {
        colorSplashImage = GraphicsUtilities.loadCompatibleImage(
            getClass().getResource("/reality/resources/splash-color.png"));
        sepiaSplashImage = GraphicsUtilities.loadCompatibleImage(
            new File("./lib/splash-sepia.png").toURI().toURL());
    } catch (IOException e) {
    }

    // Emulates the progress
    Animator animator = PropertySetter.createAnimator(
        6000, this, "colorSplash", 1.0f);
    animator.addTarget(new TimingTargetAdapter() {
        @Override
        public void end() {
            show(mainPanel);
        }
    });
    animator.start();
}

This piece of code grabs the SplashScreen instance to make sure we have a splash screen. The null test is mandatory in case your application is started without the -splash flag. The code then proceeds with loading the sepia and colored images and finally starts an animation to simulate a lengthy startup process. In this example, we simulate a startup sequence of 6 seconds.

The actual work is performed in the method setColorSplash(), which would be the equivalent of a progress bar’s setProgress() method. The method stores the current progress value, grabs the splash screen’s graphics surface and paints the effect:

public float getColorSplash() {
    return colorSplash;
}

public void setColorSplash(float colorSplash) {
    this.colorSplash = colorSplash;

    SplashScreen splash = SplashScreen.getSplashScreen();
    Graphics2D g2 = splash.createGraphics();

    g2.setComposite(AlphaComposite.Clear);
    g2.fillRect(0, 0, splash.getSize().width, splash.getSize().height);

    g2.setPaintMode();
    g2.drawImage(sepiaSplashImage, 0, 0, null);

    g2.setComposite(AlphaComposite.SrcOver.derive(colorSplash));
    g2.drawImage(colorSplashImage, 0, 0, null);

    g2.dispose();
    splash.update();
}

You might be surprised by the first painting commands. The first action here is to clear the splash screen. On the contrary to Swing components, the splash screen is never updated automatically and everything you draw on the splash screen is persistent. Without the clear operation, our drawings would add up and the colorization would happen a lot faster than expected. The rest of the code is straightforward. We first draw the sepia image, then we set an alpha composite to draw a translucent copy of the colored image. Do not forget the call to update() to synchronize the splash screen with the changes you made on the graphics surface.

This is naturally only one example of what you can do with a splash screen to replace a dull progress bar. The translucency trick will work in many situations but you might want to consider SwingX’s blending modes. The BlendComposite class mimics all of Photoshop’s blending modes and lets you create beautiful lighting and coloring effects.