Making a countdown digital display in PHP

The project came up to email some sort of countdown clock by email through lyris to potential donors. The challenge is to produce in the email box of the prospect an accurate representation of how much time is left to help Middlebury acheive 60% participation that results in Middlebury College receiving a $1mm additional donation.

Countdown timers are very effective in instilling a sense of urgency in a challenge. The problem is email clients can not perform any scripts or complex animations other than GIFs. So the solution is to pull a series of images that reflect the current difference in time from when the images are pulled and the deadline. Adding an animated gif will help the illustration.

With this solution in mind I remember being able to produce a graphic from data in a MySQL table. This was done this way:

CODE*

//—

<?
require(‘dbconnect.php3’);

$uniqid = $_GET[‘u’];
$SQL = “SELECT bin_datab,filetypesb from prod WHERE uniqid = $uniqid”;
$result = mysql_db_query($db, $SQL, $connection) or die(mysql_error());

$data = mysql_result($result,0,”bin_datab”);
$type = mysql_result($result,0,”filetypesb”);

Header (“Content-type: $type”);//headertype very important
echo $data;
?>

–//

This PHP file is called from another page with <img src=”image.php?u=92938″>

I also know how to display time in php
<?php
$today = date(d);
print “today is “.$time;
?>

I know how to set a day in the future:
<?php
$target = mktime(12, 0, 0, 7, 01, 2009);
?>

I know how to make a time differential:
$target = mktime(12, 0, 0, 7, 01, 2009);//what time to which to countdown
$today = time ();
$difference =($target-$today);//howmuch time is left

So, I’m almost there.
I need to have a series of images 0-9 that will help represent the time left in my digital clock.
Created in illustrator

Now I need to grab the time difference and pull out the days, hours, minutes, seconds numerically then separate the 10’s and 1’s columns of the return. I also don’t want to make more than 10 graphics or more than one image.php.

I know I can pass variables to image.php by adding ?variablename=definition to the url and use $_GET[] to pull it into the php page. so I define the unit of I want to return by sending ?t=d (for day in numbers). This will return. 01-12 That’s good but I would have to make 12 graphics to represent this ( and 48 more to represent the minutes).

I need to grab a column(10’s or 1’s) in the returned number. PHP can handle this but I need to tell the parsing program what column I want returned: image.php?t=d0 and image.php?t=d1.

My client-side page looks like this:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” style=”height:100%;”>
<head>
<title>Test Countdown</title>
</head>

<body style=”margin: 0; height:100%;”>
<div style=”margin: 0 auto; width: 790px”>

<table cellspacing=”0″ cellpadding=”0″ bgcolor=”#003366″ style=”font: 11px courier; font-style: italic; color:#ddd; border: 4px #003366 ridge; padding: 10px 10px 5px 10px;”>
<tr>
<td valign=”bottom”>
<img src=”image.php?t=d0″ width=”52″ height=”70″ />
<img src=”image.php?t=d1″ width=”52″ height=”70″ />
</td>
<td valign=”bottom”><img src=”images/col.gif” />
</td>
<td valign=”bottom”>
<img src=”image.php?t=H0″ width=”52″ height=”70″ />
<img src=”image.php?t=H1″ width=”52″ height=”70″ />
</td>
<td valign=”bottom”>
<img src=”images/col.gif” />
</td>
<td valign=”bottom”>
<img src=”image.php?t=i0″ width=”52″ height=”70″ />
<img src=”image.php?t=i1″ width=”52″ height=”70″ />
</td>
<td valign=”bottom”>
<img src=”images/col.gif” />
</td>
<td valign=”bottom”>
<img src=”image.php?t=s0″ width=”52″ height=”70″ />
<img src=”image.php?t=s1″ width=”52″ height=”70″ />
</td>
</tr>
<tr>
<td>Days</td>
<td></td>
<td>Hours</td>
<td></td>
<td>Minutes</td>
<td></td>
<td>Seconds</td>
</tr>
<table>
</div>
</body>
</html>

—-

My Parsing page looks like:

<?php
if (isset($_GET[‘t’]))
{
$timeDefinition = $_GET[‘t’]; //what time to display from the refering url d0, d1 …
$displayTime = $timeDefinition[0];//Grab the first character from the url
$column = $timeDefinition[1];//Grab the second character from the url
//time differential
$target = mktime(12, 0, 0, 7, 01, 2009);//what time to which to countdown
$today = time ();
$difference =($target-$today);//howmuch time is left

$ref = date($displayTime, $difference);
$image = $ref[$column];

header(“Location: images/$image.gif”);
}
else
{
header(“Location: images/0.gif”);
}
?>

Result days to my BDAY:

Months Days Hours Minutes Seconds
Depending how your browser cashes the images you may be able to reload the page and see the seconds go. I imagine this could be handled in the browser with Javascript or the like but remember this is being emailed out to prospects nothing but plain images would work. Comments welcome.

Leave a Reply

Your email address will not be published. Required fields are marked *