Dynamic animated countdown clock gif

On stack overflow, user1857868 asked:

I recently received an emailer from Onnit Labs that included a Countdown Module Timer inside the emailer using a gif image. The emailer can be viewed here: https://www.onnit.com/emails/lastchance-historic/

I looked into it, and it seems you can keep sending new frames to an animated GIF using gifsockets, as a GIF doesn’t specify how many frames it has when loaded in the browser. Here it is on github: http://github.com/videlalvaro/gifsockets

I thought this was pretty interesting and a cool effect indeed. Does anyone have any other insights on how this could be accomplished? It seems as though the one they’re using at Onnit seems to change the countdown according to date appended at the end of URL or image.

I’m trying to accomplish the same thing to send in an email, but I am a little stumped.

My initial thought was that it couldn’t be too complicated because most email clients and older browsers don’t support sockets, so that was discounted almost immediately. I looked at the network tab in chrome, that seemed to confirm it, and when I saw it loop back to the start after 60 seconds I have a pretty good idea how it was being done. The answer it that it loops 60 frames and hopes that the user isn’t enthralled by the clock, or that they read too quickly for the animation to loop. No gifsockets, no magic, just a server generated gif like this one:

Here is all the code that it required, there isn’t too much magic to it (other than the gif layer creator). You can see all the code here: on github. Or here on my test page: which is a bit prettier and also has a link to the font and the background image.

This doesn’t have to be a full countdown clock, with a few modifications it could count the number of days until Christmas or New Years instead.

Here is the code (minus the php 5.2 hack and the gif layering class):

 

Sidenote: Holy cow the guy who wrote the class to create animated gif sucks at formatting his code and also commenting it and naming the variables.


flattr this!

29 thoughts on “Dynamic animated countdown clock gif”

  1. I noticed on the demo image above that the minutes sometimes increment by one minute. Seems to be somewhat random … no real pattern to it. It does it on my server also, running php5.2. Has anyone found a fix for this?

    1. The minutes increment by 1 because there is only a minute worth of time in the animation. I think there may still be a bug in the php 5.2 hack, I stopped worrying about it because I have not actually been running 5.2 for a while (5.2 was released in 2006…).

      1. Thanks SeanJA
        I did figure that out after I posted the question.
        I’ve done some modifying on the script for my own personal use.
        I have it running for 3 minutes and then pausing at the end of the loop.
        Very cool script indeed.
        I was wondering how moveableink accomplished this task and found your site.
        Thanks again. Good work.

        1. I need to use the counters created on websites. It is essential that is not add a minute in countdown.

          What changes I need to make in the code not to happen this increase? Or so, only happen after long periods, as more than 30 minutes?

  2. Thanks again for the help Sean. It appears the preg_match code did the trick. If you are manually adjusting each character separately, you have to tweak the parameters to make preg_match work however:

    (preg_match(‘/^[0-9]$/’, $text))

    I also integrated the letter spacing code from here:

    http://stackoverflow.com/questions/6926613/php-imagettftext-letter-spacing

    The only problem I’m running into is that the characters seem to justify left. For the most part it isn’t that big of a deal, but everytime a number hits a “1” then the clock shifts too much to the left. It is more or less pronounced depending on the font used.

    It seems the only way to align/justify the text is to use a imagettfbox() function.

      1. Thanks for the heads up on the fixed width font. I was hoping to use one of the fonts for my business, but they aren’t fixed width :-( If you want, I’d be happy to send you the updates I did to gif.php. This includes the letter spacing code. Let me know they best way to PM you.

  3. Read back on the old comments, and saw why you set it to %a (sorry still waking up here). That seems to have the day value run properly but it isn’t padding to 2 digits when the days remaining are less than 10.

    1. Actually, it looks like you are right, it should be %D instead of %a for php 5.3… it is the code that is there for php 5.2 that is throwing it off.

    2. Actually… sorry, for a date in september that won’t work. Not sure why date_interval insists on the single digit. Here is a fix for that:

      // just below this line (line 47ish):
      $text = $interval->format(‘%a:%H:%I:%S’);

      //add this:
      //check to see if the text starts with 0:
      if(strpos($text, ‘0:’) === 0){
      //prepend a 0 if it has only one 0 at the start
      $text = “0”.$text;
      }

  4. More experimentation and this is what happens: I thought changing the lower case %a for days to %D fixed the padding issue, which it did. However, when I change the day out more than a day, it doesn’t update..I go back to the %a and it will update the day properly…arg

    Help please.

  5. Okay, sorry for the several updates, but I figured it out. In gif.php you have the following:
    $text = $interval->format(‘%a:%H:%I:%S’);

    It appears changing %a to %D for the day format gives me the two digits:
    $text = $interval->format(‘%D:%H:%I:%S’);

    Thanks again for putting this together! :-)

  6. One more update: Okay so it appears the first digit of “days” is missing only when it’s zero. When I have a countdown that is farther than 1 day away it shows both digits. Also, because that first digit is missing from “days” it’s shifting the position of all the text, so it appears lined up when the there is more than one day remaining..

  7. Heya SeanJA thanks for putting this together. I really want a countdown clock for my email that is gonna go out for a kickstarter project at the end of the summer. I saved the 3 .php files and .png background image into a folder. How do you get it to work? I tried pointing a browser to the gif.php file, but it just errors out. I tried the other working examples, and their gif.php file seems to be compiled or something. Am I missing something?

    1. You may just be missing the font file (DIGITALDREAM.ttf referenced on line 25ish of gif.php) that is being used to print out the clock to the image (I notice that you didn’t include it in the list of files that you pulled down).

      Another possibility is that out you might have a version of php that is too old. It needs to be run from a server with PHP 5.3 or higher to work properly (I have tried it with PHP 5.3 and 5.4). The problem is that the date_diff function does not exist in older versions of php, and even though there are lots of functions out there that people have written as “date_diff” they do not work the same way that the one in PHP 5.3+ works and they have problems when the date is near 12 am.

      1. Thanks for the quick response Sean. Good news is that it was simply that I didn’t include the font file (doh!). However, when I run it, the formatting of the text seems to be off from the background image. It’s off enough so that we don’t see the first digit of “days”. Here’s the path where I have it:

        http://everythingsmadeofchocolate.com/wp-content/themes/chocolate-responsive/images/countdown/gif.php?time=2013-06-24+22:00:00

        Any suggestions?

        Thanks again for all your help!

    2. Hi , I have tested the code of the countdown gif, but I can not make it work, in effect , creates animated gif, but does not show me in the browser , you had some difficulty making it work the code ? thank you very much

  8. How do you set the time with this code?

    I understand it is in a format like: time=2013-05-18+02:00:00 however, I cannot seem to get it to countdown from dates further out than 30 days. Any insight?

    1. Looks like you found a bug, I will take a look and see if I can figure out what is up with it. I would have expected it to go up to 99 days (limitation of the clock). To be honest, I never really tried it passed a couple when I was developing it.

    2. Hey Dan, it was a combination of the php 5.2 fix code being not quite right (it didn’t do the date diff) and the datediff->format function was using the wrong character, it should have been %a not the %D that it was using. I have fixed both of these.

Leave a Reply