About our HTML5 Network SouthEast Clock

We recreated a classic Network SouthEast clock with JavaScript. Here's all about it. (January 2012)

Click here to go to the Network SouthEast Clock!

The HTML Network SouthEast Clock is intended to be a reasonably-faithful rendition of the iconic mechanical-digital railway clocks used in the South East region of British Rail, which have almost entirely disappeared from the network since privatisation.

If you're too young to have ever seen one of these in action, or you come from the wrong part of the country or world, here's a video!

These are fondly remembered because they were huge; 1.5 metres wide and visible from enormous distances. If you have £750, you can actually buy one over here [link dead as of 2021]. Failing that, please enjoy our Javascript re-creation for free!

Faithfulness

We've tried to keep this relatively faithful to the size, dimensions, and colours of the Network SouthEast clocks. True historical accuracy is made more difficult (and sometimes undesirable) by a couple of factors:

  • We've been working from photographs as references; schematics were not available in the early hours of the morning when we first started work on this. :)
  • There was no single Network SouthEast clock. There are many variants; we've just picked elements we like from the variants.

Implementation

This uses nothing but Javascript, CSS, plus one very small embedded SVG image. The embedded image gives the NSE colour stripes at the bottom of the clock; it was just the easiest way to do it.

Audio is compressed in Ogg Theora and MP3 for browsers with native HTML5 <audio> support.

Bugs

The iOS (iPhone, iPad) browser won't allow sounds to play except in response to (further down the call stack than) a user-generated event. This stops audio from playing uninvited, which is good, but it also means you cannot have a sound play every second, as we do here. So the clicking sound is disabled on iOS devices.

Credits

The clicking sound was recorded by John Piper from a real Network SouthEast clock, rescued from London Bridge railway station by the Network SouthEast Railway Society.

The ambient sound is a combination of this (which was recorded, appropriately, at Liverpool Street Station) and this (which was not).

The train horn sound is this.

Copyright

Copyright © 2012 AJ Computing and others.

Permission is granted to copy and/or modify this code for any purpose, provided a link is given back to this page where possible.

Comments or questions

Do email us; we'd love to hear your comments and questions.

Plug

We do a lot of other things, most of them more serious than this, such as web development and computer hardware diagnostics & repairs. Do contact us for more information.