New WordPress theme shocker

ESTABLISHED readers of my blog through the years will no doubt be thrilled to note that I have reverted to a modern implementation of a previous design as part of teaching myself how to create WordPress themes.

Should you wish to use this WordPress theme please let me know by adding a comment to this post and if there is enough interest I’ll bung it up on Google Code.

Cadburys Olympic Podium Clock

I worked on a couple of extra-curricular projects over Christmas, one being a a project for Cadburys, who are touring the country over the next six months before the Olympic Games with three podium-style stands on which punters can attempt to win one of ten pairs of tickets to the opening ceremony by estimating how long exactly 20.12 seconds is. These will appear in various shopping centres and exhibitions over the months.

Punters press the big red comedy button to start and press it again to stop, and no, they don’t have view of the screen while they’re playing. If they win there’s a winning sequence of sounds and words on the display and the operator also activates four flashing purple police lights. It’s pretty much impossible to estimate correctly, however, even if you do have sight of the screen.

My job was to create the software for this including all the graphics, which I did using my normal skill-set of HTML, CSS and Javascript/jQuery (no server-side stuff required, runs on a laptop without an Internet connection). I’m also able to push out software updates to each of the three stands over the next six months should they for some reason become necessary.

The screens in the photo below will be installed within the podium-style stands themselves and only the clock digits themselves will be visible through the aperture in the front (simulated by the crude paper surround on the screen on the right). The purple bar at the top of the screens is only visible on the operator’s laptop and contains some basic options and settings which aren’t publicly visible. The red button is custom built and contains a USB numeric keypad with a mechanism that presses the “5″ key. This then simply plugs into the laptop as a USB keyboard.

It was a nice bit of fun. It’s not a million miles away from the sort of things I used to do when I worked for 2Heads back in 2000/2001, so almost a little nostalgic. No plugins or flash either, all HTML5, CSS3 and jQuery, as it should be.

Testing the displays and the comedy red button

Gracefully degrade HTML5 “number” form elements

Use Modernizr to replace the a “number” INPUT element with an normal text box and two control buttons in older browsers:

if (!Modernizr.inputtypes.number) {
	document.write("<button type='button' onclick='number_field.value = parseInt(number_field.value) - 1'>-</button>");
	document.write(" <input type='text' size='10' id='number_field' value='0' /> ");
	document.write("<button type='button' onclick='number_field.value = parseInt(number_field.value) + 1'>+</button>");
} else {
	document.write("<input type='number' size='10' id='number_field' value='0' />");
}

Social Widgets powered by AB-WebLog.com.