HexaClock

A little while back a friend of mine Anthony Casey decided to make an iOS friendly HTML5/CSS3 based clock similar to the Flash based The Colour Clock. This is a digital clock where the background colour changes with every second of the day. You can view the completed HexaClock here, though you will need a HTML5 browser (no Internet Explorer 8 or below I’m afraid).

Anthony is a whizz with all things HTML/CSS, and asked me if I could help out by coming up with some JavaScript to make the clock change colour and tell the time.

Figuring out which colour to show

First things first, how do I make every second of the day a different colour? As we know the current time of day is made up of three parts, hours (0-23), minutes (0-59) and seconds (0-59). Luckily for us colours on the web are also made up of three parts, combinations of red, green and blue (known as RGB). The amount of each colour to use is a value between 0 and 255, e.g. 255 red is solid red, 0 red is no red at all, and 128 red is a dark maroon type colour. Using this knowledge we can create colours and shades, for example:

Red – R:255 G:0 B:0
White – R:255 G:255 B:255
Black – R:0 G:0 B:0
Yellow – R:255 G:255 B:0
Purple – R:195 G:48 B:255

It’s kind of like the opposite of mixing paint – here mix lots of each colour and you end up with white instead of a mucky browny black colour. There are plenty of sites out there that explain RGB colours in more detail.

How much of each colour to use

The amount of red to use maps to the hour of the day, green to the minute in the hour, and blue to the second in the minute. Using the actual value of hour, minute and second would result in lots of dark colours as we would never get a number higher than 59, so instead we will figure it out as a proportion of 255:

Red = (hour / 24) * 255
Green = (minute / 60) * 255
Blue = (second / 60) * 255

Making it tick

With the colour problem sorted the next step is to make the clock update every second. I created a “tick” function to show the current time and the appropriate background colour. To make it update once a second the JavaScript setTimeout function was used to call “tick” again after 1000 milliseconds.

Web browsers prefer their colour values represented in hexadecimal so the numbers need converting first. After first looking at writing a small decimal to hex conversion function I realised there was no need as I could use a nice feature of JavaScript to specify which number base to use when converting a number to a string, e.g. 15.toString(16) = “f”. This should actually be “0f” so the fix2 function tidies up any one digit hex values.

Here is the full code:

function hexClock(bodyId, clockId) {
	this.body = document.getElementById(bodyId);
	this.clock = document.getElementById(clockId);
	this.running = false;
	this.fix2 = function (n) {
		return (n < 10) ? "0" + n : "" + n;
	}
	this.tick = function () {
		if (!this.running) return;
		var now = new Date();
		var h = now.getHours();
		var m = now.getMinutes();
		var s = now.getSeconds();
		var hexH = Math.round((h/24) * 255).toString(16);
		var hexM = Math.round((m/60) * 255).toString(16);
		var hexS = Math.round((s/60) * 255).toString(16);
		this.body.style.backgroundColor = "#" + this.fix2(hexH) + this.fix2(hexM) + this.fix2(hexS);
		this.clock.innerHTML = this.fix2(h) + ":" + this.fix2(m) + ":" + this.fix2(s);
		setTimeout(function(me) { me.tick(); }, 1000, this);
	}
	this.start = function () {
		this.running = true;
		this.tick();
	}
	this.stop = function () {
		this.running = false;
	}
}

// this bit runs when the page loads
function init() {
	var clock = new hexClock("body", "clock");
	clock.start();
}

Probably not the best bit of JavaScript that you will ever see but it does the job. At some point I might rewrite it using the Prototype approach.

Advertisement