« Previous Main Next »

BBC Homepage: Clock

Profile picture for Claire Roberts Claire Roberts

Post categories:

15:40 UK time, Thursday, 29 April 2010

Good news! The clock has returned to the BBC Homepage.

When we launched the Beta Homepage we received feedback from a number of you who missed the clock, so we've turned it into a module allowing you to position the clock where you want it on the page (or shrink it or remove it altogether). It continues as before to show your computer's local time and date.


As part of moving the clock to its own module, it now makes use of upcoming HTML standards. Flash is no longer a necessity as the module uses HTML5 Canvas to draw and animate the clock face. This means users of newer browsers (and iPhones) will see the clock ticking on the page even if they don't have Flash. Of course, if you're using an older browser the Flash version will continue to load as usual.

If you're interested in how our Canvas code works, here's a snippet showing how to draw the clock face:

drawDisplay: function(pos){
    this.context.clearRect(0,0,49,49); // clear canvas
    this.context.save(); // save state before translation
    this.context.translate(24.5, 24.5); // move 0,0 to center
    this.context.strokeStyle = "#fff";
    for (var i = 0; i<12 ; i++){ // draw numerals
        var lineWidth = 1.2+(i*0.1), rotation = 30*(i+1),
            startX1 = -0.5 - lineWidth/2,
            startX2 = 0.5 + lineWidth/2,
            startY = -26, endY = -18;
        this.drawLine(lineWidth, rotation, startX1, startY, startX1, endY);
        this.drawLine(lineWidth, rotation, startX2, startY, startX2, endY);
    this.drawCircle(2, 0, 0, 5, 0, Math.PI*2, true); // draw centre circle
    this.drawLine(3, pos.hrsPos, 0, -6, 0, -17); // draw hour hand
    this.drawLine(2, pos.minPos, 0, -6, 0, -24); //draw minute hand
    this.drawLine(1, pos.secPos, 0, -6, 0, -26); //draw second hand
    this.drawLine(1, pos.secPos, 0, 5, 0, 10);	
    this.context.restore(); // go back to the state before translation
    this.drawnPos = pos;

The display is then redrawn every second to move the hands to the current time using Glow Animations.

The clock has come a long way since it first appeared in our idents and continues to live on in new technologies.


  • Comment number 1.

    Thanks for an interesting post - was begining to think I should delete this feed from my bookmarks as the blog had went dead!

    Any word on when the new style News and Sports pages will roll out???



  • Comment number 2.

    Nice! Good to see the BBC getting involved in HTML5.

    Is it just me or does it sometimes fail to render correctly in Chrome - the background gradient sometimes gets flattened. Chrome bug?

  • Comment number 3.

    I don't know if it's just me, but the clock module doesn't seem to stay where I put it (at the top of the left column; it keeps falling to the bottom).

  • Comment number 4.

    Yes I had noticed the new clock module and added it already. I also note that there is a new module 'Topic Tracker'.

    What surprised me, and I have already commented on is that there is not yet a blogs module on the new Homepage Beta.

    Paul Murphy did reply that the blogs are safe, but are the links disappearing from the homepage.

  • Comment number 5.

    This comment has been referred for further consideration. Explain.

  • Comment number 6.

    Hurrah for HTML5 — glad to see it degrades back to Flash (rather than the other way around).

    I might be imagining it, but does the second hand in the Flash version not bounce (which the Canvas/JS version seems not to)? Planned future enhancement? :)

    I’ll second the raised eyebrow at the lack of a blogs module.

  • Comment number 7.

    Congrats on the updated (surely not new) design. As for the clock, as it's not default how many will use it? 10 percent? I guess that would still be a large number.
    The strange one is the banner, not makng the rollovers to the right clickable! Who sneaked that one past usability testing? It must be the first thing everyone picks up on??

  • Comment number 8.

    Love the clock. Quick look throught the code and I can't decide whether it uses an internal 'clock' or not. An external clock would be very helpful and many PC clocks are well out of sync with the real world.
    Is there a similar place for comment on regional variations? If so, please let me know.

  • Comment number 9.

    The BBC is a trusted source for many - I would have thought this extends to telling the correct time. Working in IT I often see computer clocks set wrongly. I would have thought the BBC clock - the one that appears on the homepage - tells the correct time, not whatever is wrongly set on the user's computer. Perhaps at least an option to choose between "Use Internet time server" and "Use this computer's time".


BBC © 2014 The BBC is not responsible for the content of external sites. Read more.

This page is best viewed in an up-to-date web browser with style sheets (CSS) enabled. While you will be able to view the content of this page in your current browser, you will not be able to get the full visual experience. Please consider upgrading your browser software or enabling style sheets (CSS) if you are able to do so.