Question

I’m setting out to create a weather model display tool (web application), and from what I’ve seen, I’m really liking the idea of using Google Web Tools, and especially the SmartGWT toolkit. My one biggest sticking point at this point is finding some way to create a sort of image “looper” (displaying all images in a particular “set” one after another, not unlike a slide show). For reference, I need functionality (at least on a basic level) similar to this: http://rapidrefresh.noaa.gov/hrrrconus/jsloop.cgi?dsKeys=hrrr:&runTime=2012053007&plotName=cref_sfc&fcstInc=60&numFcsts=16&model=hrrr&ptitle=HRRR%20Model%20Fields%20-%20Experimental&maxFcstLen=15&fcstStrLen=-1&resizePlot=1&domain=full&wjet=1 (though it certainly need not be exactly like that).

Does anyone know of (ideally) some sort of GWT module that can do image looping? Or if not, does it sound like something an intermediate programmer could figure out without too much trouble (I’m willing to accept a challenge), even if I’ve never explicitly used GWT before? I’m sure I could whip together something that pulls each image in as it goes through a loop, but prefetching them would be even more ideal.

Please comment if you need clarification on anything!

Answer 1

As far as I’m aware there’s not a pre-fab solution to do this, although maybe SmartGWT has something I don’t know about. In any case, it won’t be too hard to roll your own. Here’s some code to get you started:

public class ImageLooper extends Composite {
    // List of images that we will loop through
    private final String[] imageUrls;

    // Index of the image currently being displayed
    private int currentImage = 0;

    // The image element that will be displayed to the user
    private final Image image = new Image();

    // The Timer provides a means to execute arbitrary
    // code after a delay or at regular intervals
    private final Timer imageUpdateTimer = new Timer() {
        public void run() {
            currentImage = (currentImage + 1) % images.length;
            image.setUrl(imageUrls[currentImage]);
        }
    }

    // Constructor. I'll leave it to you how you're going to
    // build your list of image urls.
    public ImageLooper(String[] imageUrls) {
        this.imageUrls = imageUrls;

        // Prefetching the list of images.
        for (String url : imageUrls)
            Image.prefetch(url);

        // Start by displaying the first image.
        image.setUrl(imageUrls[0]);

        // Initialize this Composite on the image. That means
        // you can attach this ImageLooper to the page like you
        // would any other Widget and it will show up as the
        // image.
        initWidget(image);
    }

    // Call this method to start the animation
    public void playAnimation() {
        // Update the image every two seconds
        imageUpdateTimer.scheduleRepeating(2000);
    }

    // Call this method to stop the animation
    public void stopAnimation() {
        imageUpdateTimer.cancel();
    }
}

One annoying thing with this implementation is that you have no way of knowing when your list of images has finished loading; Image.prefetch doesn’t have a callback to help you here.