{"id":66,"date":"2010-01-10T10:43:27","date_gmt":"2010-01-10T10:43:27","guid":{"rendered":"http:\/\/blog.stratus.org.uk\/?page_id=66"},"modified":"2010-01-13T08:43:50","modified_gmt":"2010-01-13T08:43:50","slug":"dev-simple-batch-gif-animation-for-weather-forecast","status":"publish","type":"page","link":"https:\/\/blog.stratus.org.uk\/?page_id=66","title":{"rendered":"Simple batch GIF Animation for Weather Forecast"},"content":{"rendered":"

Overview<\/strong><\/h2>\n

In this post we\u2019ll 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.<\/p>\n

Background<\/strong><\/h2>\n

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.<\/p>\n

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.<\/p>\n

\"RASP <\/strong><\/p>\n

Pre-Requistites<\/strong><\/h2>\n

The rest of this article makes a few assumptions on the likely setup in use. These are:<\/p>\n

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

    Method<\/strong><\/h2>\n

    The process for doing this is fairly simple:<\/p>\n

      \n
    1. Set things up<\/li>\n
    2. Grab the images<\/li>\n
    3. Merge the images and save the target image somewhere publicly visible.<\/li>\n
    4. Set up a cron job<\/li>\n<\/ol>\n

      Let\u2019s look at each stage.<\/p>\n

      Step 1 \u2013 Set things up
      \n<\/strong><\/h3>\n

      Our script starts as a shell script and to save a lot of typing we set up some constants as follows:<\/p>\n

      #!\/bin\/sh\r\nTARGETDIR=\/home\/user\/somewhere\r\nHOMEDIR=\/home\/user\/cgi-bin\/skewt\r\nSRCURL='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'\r\nFILENAME=skewt-rat\r\n\r\n#Go to the location of the script\r\ncd $HOMEDIR\r\n\r\n#Remove any existing images\r\nrm -f $HOMEDIR\/$FILENAME*.gif<\/pre>\n
      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).<\/p>\n
      Step 2 \u2013 Grab The Images<\/strong><\/h3>\n
      This can be tricky depending on your hosting supplier. If you have complete control, you can use wget<\/em> but it has been found the curl <\/em>will often be available if wget <\/em>is not.<\/p>\n
      Here we use curl<\/em> 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<\/em> fails, then the image will probably have blank pages in it.<\/p>\n
      # do the main image first, but we don't overwrite the one that's there\r\ncurl $SRCURL=0600 > $HOMEDIR\/$FILENAME-0600.gif\r\ncurl $SRCURL=0700 > $HOMEDIR\/$FILENAME-0700.gif\r\ncurl $SRCURL=0800 > $HOMEDIR\/$FILENAME-0800.gif\r\ncurl $SRCURL=0900 > $HOMEDIR\/$FILENAME-0900.gif\r\ncurl $SRCURL=1000 > $HOMEDIR\/$FILENAME-1000.gif\r\ncurl $SRCURL=1100 > $HOMEDIR\/$FILENAME-1100.gif\r\ncurl $SRCURL=1200 > $HOMEDIR\/$FILENAME-1200.gif\r\ncurl $SRCURL=1300 > $HOMEDIR\/$FILENAME-1300.gif\r\ncurl $SRCURL=1400 > $HOMEDIR\/$FILENAME-1400.gif\r\ncurl $SRCURL=1500 > $HOMEDIR\/$FILENAME-1500.gif\r\ncurl $SRCURL=1600 > $HOMEDIR\/$FILENAME-1600.gif\r\ncurl $SRCURL=1700 > $HOMEDIR\/$FILENAME-1700.gif\r\ncurl $SRCURL=1800 > $HOMEDIR\/$FILENAME-1800.gif<\/pre>\n
      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.<\/p>\n
      Step 3 \u2013 Merge The Images<\/strong><\/h3>\n
      This is easily done using ImageMagick as shown below.<\/p>\n
      # Now create the animated GIF\r\nconvert -delay 100\u00a0 -size 800x800 \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-0600.gif -page +0+0 $HOMEDIR\/$FILENAME-0700.gif \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-0800.gif -page +0+0 $HOMEDIR\/$FILENAME-0900.gif \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-1000.gif -page +0+0 $HOMEDIR\/$FILENAME-1100.gif \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-1200.gif -page +0+0 $HOMEDIR\/$FILENAME-1300.gif \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-1400.gif -page +0+0 $HOMEDIR\/$FILENAME-1500.gif \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-1600.gif -page +0+0 $HOMEDIR\/$FILENAME-1700.gif \\\r\n -page +0+0 $HOMEDIR\/$FILENAME-1800.gif \\\r\n -loop 0\u00a0 $TARGETDIR\/$FILENAME.gif<\/pre>\n
      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\u00d7800 pixels, a one second delay between each image that loops forever. We also send the output to the target location.<\/p>\n
      Easy.<\/p>\n
      Step 4 \u2013 Automation<\/strong><\/h3>\n
      If you have access to a cron <\/em>or similar mechanism, making this a daily event is as easy as adding the following to the crontab<\/em> file. Assuming the script file is called pullskewt.sh<\/em> in the cgi-bin\/skewt <\/em>folder of your hosted area, add this to run the job at 06:00 every day:<\/p>\n
      * \u00a0\u00a0\u00a0 \u00a06 \u00a0\u00a0\u00a0 \u00a0* \u00a0\u00a0\u00a0 \u00a0* \u00a0\u00a0\u00a0 \u00a0* \u00a0\u00a0\u00a0 \u00a0 cgi-bin\/skewt\/pullskewt.sh<\/pre>\n
      The name \u201cskewt<\/em>\u201d comes from the graph name used on the source. It can be anything you like.<\/p>\n
      Useful References<\/strong><\/h2>\n
      In terms of background information, the following are useful in explaining the detail of GIF animation and the use of ImageMagick:<\/p>\n