Retro TV Clock Google Gadget

This clock gadget looks very similiar to a BBC TV clock that used to be seen on British TV in the 1980s. I wanted to have a go at designing a clock Google gadget, and was inspired by some flash remakes the BBC commissioned themselves.

I had to jump through a few hoops to make this! I'm not going to get technical here, just show you how I hacked it together graphically. I didn't have the resources to make my own flash clock, so opted to make use of this free flash analogue clock widget and design my own skin for use in the Google gadget. (I could have chosen a javascript clock, but the flash-based clock looked a bit smarter.) The main ingredients were the flash clock widget, the Google gagdets api, and some graphics I created in photoshop. That's along with some regular "today's day and date" javascript, a little HTML and CSS.

To work with the clock widget the skin had to be a square graphic containing the clock face. TV's are not normally square, they are rectangle. I had hoped to use a background image of a TV frame into which I would "seamlessly blend" the square clock widget.

However, there were a couple of problems when it came to simulating the 1980's BBC1 TV clock. I found the second hand was too long, and could not be shortened by editing the clock widget code. Secondly, the centre of the clock didn't quite look much like the old TV clock.

The solution? Not very elegant, I forced the second hand shorter and achieved the clock centre by creating a transparent TV frame image I "placed over" the clock widget. A bit of a rough and ready way to create this gadget, but seems to work!

Add this gadget to a website. For more info on adding gadgets to Blogger, and other places check out my Gadget FAQ and tips.

The URL for adding this gadget:

http://widgetweb.co.uk/gadgets/date-time.xml