Site menu:

Tags

Archives

Recent Comments

Categories

Links:

Meta

Countdown Timers

Jessi asked me to help out a friend the other day by putting a countdown timer on her MSN group home page. I figured it would take me about five minutes. Well, it ended up taking me more than two days to come up with an approach I was satisfied with.

My first thought was that I would have to use javascript, since I knew I wouldn’t have access to do anything server-side on MSN groups. This lead me to a bunch of different scripts from around the web. I settled for this simple one, which looks like this:

<script LANGUAGE=”JavaScript”>
var now = new Date();
var then = new Date(”January 1, 2005″);
var gap = then.getTime() - now.getTime();
gap = Math.floor(gap / (1000 * 60 * 60 * 24));
document.write(”Only ” + gap + ” days until the year 2005!”);
</script>

It’s a pretty simple script, but it didn’t work with MSN groups. The problem? Whenever I would put the script into the page, MSN would mangle the script tags and ruin the script. It appeared I was going to have to find a different approach.

I still knew that a server side countdown was going to be the best approach, but that meant I was going to have to host it here, since there wasn’t any way to do it on MSN. So I did a search for a server side countdown and found this site: BizzarScripts.net. While I couldn’t make this particular script (and I still don’t understand why), I used it to write my own. The basic idea is to use PHP to create a dynamic image file. It’s done using the built in image libraries of PHP. Documentation can be found here. Here’s a list of the code that made it work:

//put this PHP code in a file, like countdown.php
< ?PHP
$month = 5; // Month of the countdown
$day = 6; // Day of the countdown
$year = 2005; // Year of the countdown

// mktime is the marked time, and time() is the current time.
$target = mktime(0,0,0,$month,$day,$year);
$diff = $target - time();

$days = ($diff - ($diff % 86400)) / 86400;
$diff = $diff - ($days * 86400);
$hours = ($diff - ($diff % 3600)) / 3600;

$diff = $diff - ($hours * 3600);
$minutes = ($diff - ($diff % 60)) / 60;
$diff = $diff - ($minutes * 60);
$seconds = ($diff - ($diff % 1)) / 1;

error_reporting(E_ALL ^ E_NOTICE);
/*
simplepng.php
Generates a 400 x 50 pixel png of the color passed in parameter 'color'
*/

// convert guaranteed valid hex value to array of integers
$imColor = hex2int(validHexColor($_REQUEST['color']));

// Step 1. Create a new blank image
$im = imageCreate(400,50);

// Step 2. Set background to 'color'
$background = imageColorAllocate($im, $imColor['r'], $imColor['g'], $imColor['b']);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);

// The text to draw
$text = "Only $days day(s) until Spring Event!";
// Replace path by your own font path
$font = '/usr/share/fonts/truetype/ttf-bitstream-vera/Vera.ttf';

// Add some shadow to the text
imagettftext($im, 15, 0, 28, 31, $grey, $font, $text);

// Add the text
imagettftext($im, 15, 0, 27, 30, $black, $font, $text);

// Step 3. Send the headers (at last possible time)
header('Content-type: image/png');

// Step 4. Output the image as a PNG
imagePNG($im);

// Step 5. Delete the image from memory
imageDestroy($im);

/**
* @param $hex string 6-digit hexadecimal color
* @return array 3 elements 'r', 'g', & 'b' = int color values
* @desc Converts a 6 digit hexadecimal number into an array of
* 3 integer values ('r' => red value, ‘g’ => green, ‘b’ => blue)
*/
function hex2int($hex) {
return array( ‘r’ => hexdec(substr($hex, 0, 2)), // 1st pair of digits
‘g’ => hexdec(substr($hex, 2, 2)), // 2nd pair
‘b’ => hexdec(substr($hex, 4, 2)) // 3rd pair
);
}

/**
* @param $input string 6-digit hexadecimal string to be validated
* @param $default string default color to be returned if $input isn’t valid
* @return string the validated 6-digit hexadecimal color
* @desc returns $input if it is a valid hexadecimal color,
* otherwise returns $default (which defaults to black)
*/
function validHexColor($input = ‘FF66CC’, $default = ‘FF66CC’) {
// A valid Hexadecimal color is exactly 6 characters long
// and eigher a digit or letter from a to f
return (eregi(’^[0-9a-f]{6}$’, $input)) ? $input : $default ;
}

?>

It works pretty darn well, and doesn’t seem to have lots of overhead.

Write a comment