±«Óãtv ±«Óãtvpage: Clock
Good news! The has returned to the ±«Óãtv ±«Óãtvpage.
When we launched the 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 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 and continues to live on in new technologies.
Comment number 1.
At 29th Apr 2010, tip2tail wrote: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???
Thanks,
tip2tail
Complain about this comment (Comment number 1)
Comment number 2.
At 30th Apr 2010, Purple Floyd wrote:Nice! Good to see the ±«Óãtv 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?
Complain about this comment (Comment number 2)
Comment number 3.
At 30th Apr 2010, Paul Taylor wrote: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).
Complain about this comment (Comment number 3)
Comment number 4.
At 30th Apr 2010, John99 wrote: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 ±«Óãtvpage Beta.
Paul Murphy did reply that the blogs are safe, but are the links disappearing from the homepage.
Complain about this comment (Comment number 4)
Comment number 5.
At 2nd May 2010, brendan wrote:This comment has been referred for further consideration. Explain.
Complain about this comment (Comment number 5)
Comment number 6.
At 2nd May 2010, Mo McRoberts wrote: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.
Complain about this comment (Comment number 6)
Comment number 7.
At 12th May 2010, Richard wrote: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??
Complain about this comment (Comment number 7)
Comment number 8.
At 14th May 2010, AndrewPB wrote: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.
Complain about this comment (Comment number 8)
Comment number 9.
At 17th May 2010, M Shiels wrote:The ±«Óãtv 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 ±«Óãtv 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".
Complain about this comment (Comment number 9)