Simple batch GIF Animation for Weather Forecast

Overview

In this post we’ll discuss a simple method for producing an animated GIF from a collection of separate images, using the ImageMagic command line interface and then setting it as a batch job to run every day.

Background

A common need in representing static information on the web is to somehow show changes in state. In this case, it was a simple need to take a dozen or so static images showing dry and saturated adiabatic lapse rates.

An example of which is shown below and is a snap shot for one hour at one physical location for atmospheric conditions. This changes from hour to hour so we want to animate this so the view can see how the conditions chnage during the day.

RASP sample

Pre-Requistites

The rest of this article makes a few assumptions on the likely setup in use. These are:

  1. That the source image/s are avaialble via a simple HTTP pull (i.e. not embedded in any other pages).
  2. That ImageMagick is available on the command line.
  3. That the UNIX shell script will be hosted somewhere (sorry Microsoft users).
  4. It is possible to schedule the script using a cron interface or similar.

Method

The process for doing this is fairly simple:

  1. Set things up
  2. Grab the images
  3. Merge the images and save the target image somewhere publicly visible.
  4. Set up a cron job

Let’s look at each stage.

Step 1 – Set things up

Our script starts as a shell script and to save a lot of typing we set up some constants as follows:

#!/bin/sh
TARGETDIR=/home/user/somewhere
HOMEDIR=/home/user/cgi-bin/skewt
SRCURL='http://rasp.inn.leedsmet.ac.uk/cgi-bin/get_rasp_skewt.cgi?region=UK12&grid=d2&day=0&i=1332&k=1547&width=2000&height=2000&time'
FILENAME=skewt-rat

#Go to the location of the script
cd $HOMEDIR

#Remove any existing images
rm -f $HOMEDIR/$FILENAME*.gif

In which we set where we send the output to, where the script is, the location of the source images and an output filename prefix. Then we delete any existing temporary files (which we leave in case we need to look at them if the image fails).

Step 2 – Grab The Images

This can be tricky depending on your hosting supplier. If you have complete control, you can use wget but it has been found the curl will often be available if wget is not.

Here we use curl and simply get the images one line at a time. To keep things simple, there is no error checking here. Hence, if the file is empty or the curl fails, then the image will probably have blank pages in it.

# do the main image first, but we don't overwrite the one that's there
curl $SRCURL=0600 > $HOMEDIR/$FILENAME-0600.gif
curl $SRCURL=0700 > $HOMEDIR/$FILENAME-0700.gif
curl $SRCURL=0800 > $HOMEDIR/$FILENAME-0800.gif
curl $SRCURL=0900 > $HOMEDIR/$FILENAME-0900.gif
curl $SRCURL=1000 > $HOMEDIR/$FILENAME-1000.gif
curl $SRCURL=1100 > $HOMEDIR/$FILENAME-1100.gif
curl $SRCURL=1200 > $HOMEDIR/$FILENAME-1200.gif
curl $SRCURL=1300 > $HOMEDIR/$FILENAME-1300.gif
curl $SRCURL=1400 > $HOMEDIR/$FILENAME-1400.gif
curl $SRCURL=1500 > $HOMEDIR/$FILENAME-1500.gif
curl $SRCURL=1600 > $HOMEDIR/$FILENAME-1600.gif
curl $SRCURL=1700 > $HOMEDIR/$FILENAME-1700.gif
curl $SRCURL=1800 > $HOMEDIR/$FILENAME-1800.gif

It is possible to iterate a shell script loop to put the hour in, but to keep it simple the same command line is repeated.

Step 3 – Merge The Images

This is easily done using ImageMagick as shown below.

# Now create the animated GIF
convert -delay 100  -size 800x800 \
 -page +0+0 $HOMEDIR/$FILENAME-0600.gif -page +0+0 $HOMEDIR/$FILENAME-0700.gif \
 -page +0+0 $HOMEDIR/$FILENAME-0800.gif -page +0+0 $HOMEDIR/$FILENAME-0900.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1000.gif -page +0+0 $HOMEDIR/$FILENAME-1100.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1200.gif -page +0+0 $HOMEDIR/$FILENAME-1300.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1400.gif -page +0+0 $HOMEDIR/$FILENAME-1500.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1600.gif -page +0+0 $HOMEDIR/$FILENAME-1700.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1800.gif \
 -loop 0  $TARGETDIR/$FILENAME.gif

The references below will give a breakdown of the options used, but put simply, we have one long command-line entry (split using back-slashes), which is 800×800 pixels, a one second delay between each image that loops forever. We also send the output to the target location.

Easy.

Step 4 – Automation

If you have access to a cron or similar mechanism, making this a daily event is as easy as adding the following to the crontab file. Assuming the script file is called pullskewt.sh in the cgi-bin/skewt folder of your hosted area, add this to run the job at 06:00 every day:

*      6      *      *      *       cgi-bin/skewt/pullskewt.sh

The name “skewt” comes from the graph name used on the source. It can be anything you like.

Useful References

In terms of background information, the following are useful in explaining the detail of GIF animation and the use of ImageMagick:

Final Script

Now finished, your script should look like:

#!/bin/sh
TARGETDIR=/home/user/somewhere
HOMEDIR=/home/user/cgi-bin/skewt
SRCURL='http://rasp.inn.leedsmet.ac.uk/cgi-bin/get_rasp_skewt.cgi?region=UK12&grid=d2&day=0&i=1332&k=1547&width=2000&height=2000&time'
FILENAME=skewt-rat

cd $HOMEDIR

#remove any existing images
rm -f $HOMEDIR/$FILENAME*.gif

# do the main image first, but we don't overwrite the one that's there
curl $SRCURL=0600 > $HOMEDIR/$FILENAME-0600.gif
curl $SRCURL=0700 > $HOMEDIR/$FILENAME-0700.gif
curl $SRCURL=0800 > $HOMEDIR/$FILENAME-0800.gif
curl $SRCURL=0900 > $HOMEDIR/$FILENAME-0900.gif
curl $SRCURL=1000 > $HOMEDIR/$FILENAME-1000.gif
curl $SRCURL=1100 > $HOMEDIR/$FILENAME-1100.gif
curl $SRCURL=1200 > $HOMEDIR/$FILENAME-1200.gif
curl $SRCURL=1300 > $HOMEDIR/$FILENAME-1300.gif
curl $SRCURL=1400 > $HOMEDIR/$FILENAME-1400.gif
curl $SRCURL=1500 > $HOMEDIR/$FILENAME-1500.gif
curl $SRCURL=1600 > $HOMEDIR/$FILENAME-1600.gif
curl $SRCURL=1700 > $HOMEDIR/$FILENAME-1700.gif
curl $SRCURL=1800 > $HOMEDIR/$FILENAME-1800.gif

# Now create the animated GIF
convert -delay 100  -size 800x800 \
 -page +0+0 $HOMEDIR/$FILENAME-0600.gif -page +0+0 $HOMEDIR/$FILENAME-0700.gif \
 -page +0+0 $HOMEDIR/$FILENAME-0800.gif -page +0+0 $HOMEDIR/$FILENAME-0900.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1000.gif -page +0+0 $HOMEDIR/$FILENAME-1100.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1200.gif -page +0+0 $HOMEDIR/$FILENAME-1300.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1400.gif -page +0+0 $HOMEDIR/$FILENAME-1500.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1600.gif -page +0+0 $HOMEDIR/$FILENAME-1700.gif \
 -page +0+0 $HOMEDIR/$FILENAME-1800.gif \
 -loop 0  $TARGETDIR/$FILENAME.gif

Example Image

skewt-rat-animated