BBC 1990s "Octagonal" Clocks

You may remember in the 1990s (and maybe late 1980s) a lot of TV shows on the BBC where they used countdown clocks/timers/call them what you like in the corner of the screen, they all looked the same (maybe different colours on occasion but it was basically the same software). Noel's House Party used them (primarily on Grab a Grand), Bruce Forsyth's Generation Game used them (for the memory recall after the conveyor belt), even Record Breakers used them, and no doubt copious other programmes in the decade used them as well, they did look pretty standard.

Its no secret that they were almost certainly generated (or at least controlled) by BBC Micro computers (totally custom font, apparently), and YouTuber Tom Scott has been on the trail of looking for the source code for the clocks for some project for a while now, no joy.

However this video was posted which features footage of the time Grab a Grand went wrong once on the House Party (where the player literally grabbed it straight from Noel's hands!) and whoever was in control of the software for the clock ended up accidentally bringing the clock's control software to air revealing its sources:

(from 16:32 if it doesn't go straight there)

That led to this tweet:

I got an email from @elocemearg, who's made a full simulation of the early-90s BBC countdown clock! It's exactly the HD upscale I hoped for. Lots of options, easy to key or screen-record.

The next time I need a countdown for a video, I'm using this.https://t.co/tOpZusrpSB

— Tom Scott (@tomscott) August 16, 2020

And we now have a 90s style BBC countdown clock generator if there was ever a need for one.

In March the BBC streamed a recording of a 1991 football match with that clock. The character edges weren't perfectly clean but sort-of good enough. I took some screenshots then and basically forgot I had them for five months until Tom's video a few days ago reminded me. pic.twitter.com/uQXy0TdxA2

— Graeme Cole (@elocemearg) August 16, 2020

I get the impression looking at the follow-up YouTube comments that these may have have actually been generated by Archimedes but maybe controlled by a Micro? I don't know much about the BBC Micro hardware as to what it could do as I was an Amstrad kid at home but we had them at school (for funding reasons our school was stuck with them until 1996 when they all vanished and were replaced by Acorns!) I know they were used for the Domesday Project back in the 1980s, both running it and building the videodisks for it (indeed they were instrumental in extracting the content back out years later).

I would have thought that the Archimedies could have done something smaller, more discrete and less ugly than that tbh. Although it could have just been used to run old BBC code.

Playing with the octasimulator has made me more happy, than it really should have!

Someone should do a Crystal Maze clock.

Tom Scott? Old quiz shows? BBC Computers? And a great end pay-off?

What a thread.

Just had a quick offline play and I reckon it is possible to make this look like the Crystal Maze clock as I've figured out how to replace the numbers on the clock (they're not image files). So in theory using the octosimulator as a base we should be able to regenerate the first three series clocks and the revival format clock at least as the numeric characters were monospaced in those series. I will come back to this later. Or when I'm bored, which will probably be later.

How are the characters stored, Neil? I may have a shufti tomorrow too.

(boring technical Maurice Moss style post follows - for those who are interested, read on. For everybody else, we hope to return to the thread shortly but in the meantime here's some music.)


(click for bigger)

The image files for the numbers are in encoded Base 64.

Easiest way to make these is to make a series of small PNG files (I did 31x49 pixels, width 31, height 49) each with a number 0-9 in the appropriate font (For Crystal Maze Series 1 and 2 Bank Gothic is the font you want for the clock, for the monospaced Series 3 clock font is Ar Essence. Series 4 onwards used the same font but it wasn't monospaced so it'll be difficult with this base to replicate that properly. The revival used a slightly squashed and slightly taller version of Bank Gothic which is probably too condensed to recreate accurately). You may want to layer your files together temporarily to ensure height and positions of the numbers are all the same, you can see in my screenshot the number 5 is a bit too high. Remember the colon as well. Afterwards you should have eleven tiny PNG files when you're done, suggest naming them 0.png, 1.png, etc so you can refer to them later if you need to.

The images can be converted to a Base 64 string using Powershell (on Windows) or Base on Linux/Mac:
https://www.igorkromin.net/index.php/2017/04/26/base64-encode-or-decode-on-the-command-line-without-installing-extra-tools-on-linux-windows-or-macos/

Then if you look at the font.js file, you just need to replace the various long codes with the new ones that Powershell has generated. If you follow the Powershell output it will output onto separate lines, the stream of characters need to be one continuous line per number in the js file (Notepad will word wrap in odd places with these). Only one character has to be wrong (or a line breaks in the wrong place) and you won't see a clock at all. Strongly suggest using an editor like Notepad++ or similar with colour highlighting, only doing one number at a time and doing a test run each each time, and then if the clock stops working, the last one you've pasted is wrong somehow.

The white border from the original clock is easy enough to remove, by editing draw.js and commenting out four lines (they're all marked as "draw border" in the source code) and if you set the options as I've set them you get a clock that is borderless and looks something like the original, if probably slightly too padded but its close enough. It may be possible to "tighten" the numbers up a bit but that's a cosmetic thing, and you get the idea.

The original border behind the clock on the original Maze programme requires manual implementation, its easy enough to do via some CSS that you can tack onto the HTML file and/or the spreadsheet, but a) it doesn't scale with the rest of the clock when you fiddle with the options, and b) it breaks position if you resize the browser, and c) it doesn't disappear with the clock either. These may not be "problems" but would require code additions.

The original white border is an image file as well (you can decode it back to an image with Powershell as per the above link) and the other idea I had was a blank file to double up as the border, but that didn't work so I thought sod it, I'll just turn it off. If you don't use the default image files (IIRC 21x29?) and go bigger the original white border will look broken up anyway.

(end of boring technical Maurice Moss style post - we now return you to your regularly scheduled thread)

Fantastic detail, thanks very much, and from that screenshot it looks like you've had great success. Get that shared back on Twitter!

Base64 *shudder*

Actually it was far easier than I thought to change the character spacing - change the number 18 in very first line of draw.js to 0. Problem solved.

The border around the clock I decided rather than reinvent the wheel just use the controls already there. So if the clock's in in the wrong place and doesn't fit the border, I can just move it myself (if the mountain won't come to you, you go to the mountain). The background is just a floating CSS box using code from here and just adapted it slightly.

Not sure if you have a Github account, but setting this up as a 'fork' of the existing one might help with the paper trail. I have to confess that I've been thinking about how many similar keyed clocks that could be done with this basis if the fonts were available and making some sort of dropdown to switch between them all but probably separate apps are easier.
Also, probably not something you need, but for the benefit of others: the Python script in that package when run will do the base64 encoding and generation of font.js directly provided the images are PNGs in the pngs folder. It just replaces the Powershell or similar.

I do have a Github account and yes I could fork this but in all honesty what I've done in this thread was more of a proof of concept thing building off the base of the original project than anything serious. I probably could do the whole "pick a programme" and format the clock appropriately based on the selection. There are probably floating around on the internet somewhere all the Base64 strings for every font character in every size known to man or beast so I don't have to generate them all manually.

But realistically if you need a modern looking countdown clock you can probably generate them in After Effects or similar. The original project was designed for the Octagonal clocks seen on the BBC in the early 90s. That it does very well. It can do other clock designs if you a) bodge the code and rebuild the strings, b) you give a monkeys about it looking relatively authentic and c) you have the time to do all that. Fine for a bit of fun, but realistically if you start tacking other functionality onto it, there's more to break.