Friday, August 11, 2006
CoolClock
I made this totally sweet javascript analog clock. Geeky types like me can design their own clock just by editing a little bit of javascript. Works best in FireFox. To use in your blogspot blog you can add this to your template in the <head> section:
<!--[if IE]> <script type="text/javascript" src="http://simonbaird.com/coolclock/excanvas.js"></script> <![endif]-->
<script src="http://simonbaird.com/coolclock/coolclock.js" type="text/javascript"></script>
Then do something like this to make a clock:
<canvas id="c2" class="CoolClock:chunkySwiss:65"></canvas>
Also available as a TiddlyWiki plugin. For more information go to CoolClock.
Subscribe to:
Post Comments (Atom)
57 comments:
I notice that the current Google ad (which is supposed to be relevent to site content) is for a job seeking website. Does this mean the all knowing Google machine reads your site and thinks "Only an unemployed person would spend their time reading this."?
Yeah, I think that's it.. :)
Hi,
great job, it's a wonderful script. I'm trying to modify it to allow setting hours and minutes to, for example, show time from diferent countries. I'm trying also to create a button on the html page to change hours and minutes, so i created setHours() and setMinutes() methods, but i don't know how to call this methods from a html button, for example. Can anybody help me?, thanks.
This script is by far the best I have seen out there yet. The only flaw is that it doesn't work a 100% in M$-IE.
I was wondering: mayby if you put only one clock on a webpage, IE could handle it. On every page I have seen so far there were multiple clocks (messing up each other ?)
Greetings
Dennis,
The Netherlands
1. Good idea. I added a parameter that you can use to display a timezone specified as relative to GMT. Grab version 1.0.3 if you want to use that. To set a specific time you could comment out the "setTimeout" in the "nextTick" method and use "render" to draw the clock at whatever time you want.
2. Dennis, did you try IE with just one clock? Perhaps it is fast enough if you have a reasonable CPU. Also you can try with the second hand disabled.
Hi,
thanks for the modifications. Here is your script in use, a little bit modified:
Clock test
Alex.
Hi Simon,
I tested it in IE6 with only one clock. It just keeps on "hicking up". I think there is something one the code that isn't IE fiendly.
Would love to helpyou out, because I think this is a very nice user-friendly script, but your capabilities in the field of Javascript exceed mine (far ;))
I really hope you can solve the IE bug in time. This truly a nice script which I think can set a new standard! If you look in google you find most scripts 'bit crappy', not flexible (positioning in XHTML->CSS), not 'skinnable' etc.
More Greeting from Holland!
Dennis
By the way,
sorry for my typing-errors. Enjoying a bit of beers now ;)
Greetz,
Dennis
Alex, thanks for sharing that. It's pretty cool. I might use your ideas, especially for having an option for creating a stopped clock. Maybe draggable hands would be fun.
Dennis, maybe IE7 will either support canvas or run excanvas faster. Also I recently learned there is another version of canvas support in IE that I can try to see if it's faster. Finally maybe I can render more efficiently but not redrawing the whole clock each tick. Ps, upgrade to Firefox! ;)
would be great if the clock could
sync to server time (i.e. by doing an ajax request once a minute).
i'd like to display the "company time" on our intranet but the local windows clocks are off all the time which makes it kinda pointless...
Simon, great work!
Just two questions: how do you know in which timezone the clock is called from? In other words: what is the locale of the browser/PC?
You need that in order to be able to handle the GMTOffset. Otherwise the clock for New York would show a different time for me (in Holland) as it does for you in Australia.
Besides this a minor issue: I guess you didn't take daylight savind into account did you. Your clocks for New York and London are 1 hour off.
Thanks!
Marcel.
Marcel, the javascript Date method getUTCHours() knows about your local timezone. So the GMT offset should be okay no matter where you are. It's hours from GMT, not from local. Thanks for the daylight savings tip! I should change the examples to cities without daylight savings. :)
Anon, I agree, ajax fetch of the time would be cool and not too hard I don't think.
Thanks for your response Simon! Clears things up for me. Should you at anytime decide to take daylight savings into account, do let me know. Not sure if there are easy-to-follow guidelines to determine this, though http://www.timeanddate.com/ would suggest so.
Regards,
Marcel.
Have you looked into Opera support. It seems to almost work. There is just a minor display issue.
Also have you considered adding the ability to also display a digital clock (24h style and pm/am style)?
This is so sweet! ...but, I of course where I want to use it has several onload events already.
I moved them out of the body tag into a javascript in the head. The code inside the javascript was
function runIt(){
myfunction1()
myfunction2()
myfunction3(11,1)
}
onload=runIt;
But CoolClock still interferes with it. I know nothing about javascript. Do you see anything I could call from your script to have it work with the above -- or better yet, have a fix for the addLoadEvent yet.
I do so want to use this for a site that was due, like, a few weeks ago...
Jes
Hi, top marks for mr analog himself, this is by far the best analog clock I've seen. I have just created a new skin called 'clean' which is just what I wanted and its so easy to do.
I do however have a slight problem with pluginlabs horizontal menus and the:
body onload="PLHFO_onload()" tag
When this is present it stops the clock showing. any tips for a work-around or a better way to make it work would be appreciated. I can understand a bit, but, I'm not a programmer; I'm a designer, so scripts are difficult for me; I just don't have a logical mind so i struggle with all this code.
best regrads Lee
PS: maybe we ought to have a section for skin code here, what do you think?
How hard would it be to change it up just a bit so the largeIndicator is a number instead of a bar?
I am trying to have drop menu besides this Clock, which would have different time Zones and on clicking that it would render it.
Well I get the GMTOffset part. I am changing the css class on click on the drop down. I am not being able to call render method to refresh the display.
How do i change offset on runtime and not doing a browser reload and still refresh the time on analog clock.
Alex has an example of it but its just tht there is lot gng on there which is kidna hard to figure out.
thanks
bazztrap
Simon I must say great job.
I'm going to use the clock on an upcoming commercial website and it's perfect for what we have in mind. There was one bug we found during testing, though... a weird line across the clockface when viewed in Opera 9.10. I don't know if you are aware of this rendering bug and its cause but I thought I draw it to your attention.
To assist here is the info from the test system where the bug was spotted:
[Opera data]
Version: 9.10
Build: 8679
Platform: Win32
System: Windows XP
Java: Sun Java Runtime Environment version 1.6
XHTML+Voice: Plug-in not loaded
[/Opera data]
Cheers,
diJenerate
This looks wonderful. I saw the comment about draggable hands, that might make a great timepicker control.
Great job! Still a little slow updating in IE (jumps a couple of seconds every so often), but the bigger problem is in Safari - the clock diameter doesn't seem to scale. The clock over the PrizeByte logo in the banner here shows the problem:
www.prizebyte.com
Hey, fantastic work! Works perfectly in my Firefox :)
Is there a way to determine daylight savings change?
Hey Simon, This is a really cool script I must say. I am building a small little app that could potentially use this. I am using a browser control to show the clock. But the clock like others have mentioned, ticks every 3 - 5 seconds only. Its the same issue as the one on IE. did you manage to find a fix for that? Or is it try not to use the seconds hand, and use one clock only?
Cheers,
Umar
Great script, thanks a lot! I used it to create a really huge Dashboard Clock Widget for my wife. I made a "Transparent" skin and set it over a clock face I created with Adobe PS and it works great.
Works great, but I get a large padding around the clock when I try and make it smaller. I placed it in a HTML page and I have been able to make the clock the smaller size I want, but there's still space around the clock. Any suggestions on how to get rid of it? Thanks!
Molly
hi,it's a great script.but there's a problem.when i use onload at body section, the script doesn't work.can you help me?i can not erase onload at body section, because i need it for other javascript.thx
There's a simple fix for this "onload" problem for those of you interested:
In the coolclock.js file you need to go to the following line:
CoolClock.addLoadEvent( CoolClock.findAndCreateClocks);
and comment that out/replace it with
CoolClock.findAndCreateClocks()
Of course with this, that means your javascript must be called at the end of the file, so that the Canvas elements are already created.
Greetings... Thank you so much for creating this and allowing others like me to use this.
I only have one question, and that is, how to adjust the layers of the elements. I want to use the outterborder as a center circle over the Hour, Minute and Second hands elements. Basically, haveing it as the same color as the Seconds hand, so that it all rotates around this center piece, which makes it look like it's part of the seconds hand.
With regards to the annoying onLoad issue....
UMANG said...
There's a simple fix for this "onload" problem for those of you interested:
In the coolclock.js file you need to go to the following line:
CoolClock.addLoadEvent( CoolClock.findandCreateClocks);
and comment that out/replace it with
CoolClock.findAndCreateClocks()
The Real Solution
I tried UMANGS solution and it didn'nt work. So I commented out line: CoolClock.addLoadEvent( CoolClock.findandCreateClocks);
I then added the extrnal script calls to the bottom of my HTML document.
Finally... I added: < script type=" text/ javascript" >CoolClock.findAndCreateClocks();< / script > as the last line of my HTML page, CoolClock is now cool again!!!
:D
--Doctor Filter
Hi,
I like your clock, thanks for your work.
But currently I'm having some display errors when using Firefox 3:
CoolClock draws a line connecting the 3 o'clock tick and the hand.
I also observe this behavior when accessing your web page http://randomibis.com/coolclock/
Do you have a solution for this?
Best Regards,
Christoph
At this point in time I'm not really maintaining CoolClock any more. It's possible that I will give it some attention when Firefox 3.0 comes out of beta but I can't promise anything. Processing.js is far more interesting at the moment. See here and here.
Please, don't go! :)
Safari 4 Developer Preview (5526.11.2) does not render your clock right!
Is it Apple to blame, or?
There seem to be a few rendering issues with some of the designs on the demo page when running in Firefox 3 (at least on my Vista PC).
Still, an excellent application.
If cross-browser compatibility is an issue, it would probably be best to go for a pure JavaScript solution. See the analog clock demo at www.gapjumper.com
I think I found the bug, but I dont know anything about this stuff. I'm just a C++ programmer that was sufficient;y annoyed by this. :)
It looks like the function "fullCircleAt" is missing a beginPath(). If I slip one of those in there, the rendering seems to work much better.
I've put a fixed version up at www.bunkmonkey.com/coolclock.js
Thanks Joe,
Adding 'beginPath();' after 'lineWidth = skin.lineWidth;' in the 'fullCircleAt' method fixed the issue indeed.
thanks guys. i've added your fix in version 1.0.5.
This is great! so nice! I like it! But it will not display on IE.
Thanks anonymous. The beginPath fix for Firefox 3.0 in version 1.0.5 broke IE. Please update to version 1.0.6 which works in both Firefox and IE.
I also updated the TiddlyWiki plugin in case anyone is using that.
Can it have a background image instead? I'd like to create a neat bg image for the clock and just have the hands...
What a great looking clock, and it even seems to work as it should. It would be perfect if it was possible to add numbers to the clock, and I do know this is on your TODO-list.
I just want to say thank you for all the work. This clock will probably find its way into one of my commercial projects :)
Thanks!
Cool indeed!!!
And I would also love to have a background-image, especially one that scales with the radius ;-)
Keep it up!
Hey, Simon;
THanks for a handy nd tasteful clock! - It works just fine and looks really nice. I did want to let you know that you might consider using IBM Notation for the description of the syntax - I found that if you follow your directions 'to the letter', and leave '::' on the ned of the message to the CoolClock class to instantiate itself, rather than specifying a GMT offset for the server & a declaration for no Seconds, it paints the bezel (border) and bails out. The tricky little optional brackets might elucidate that the colon placeholders are still necessary.
Still, & once again - thanks for a clean and tasteful analog clock. It really spruces up my fallow site.
Happy holidays.
Hi Simon,
I would like to add your clock into my widget. Now. everything works fine with firefox. But, there is a problem with IE.
Regarding my widget, users can refresh or config each widget individually. I found that when I click refresh or config and then go back to the widget, the clock doesnot dis play in IE, and there is this error pop up "CoolClock.config.clockTracker.myClock is null or not an object."
Note that this problem did not happen with firefox.
Any ideas? I stuck with this issue for a while.
Thanks
Andy
Sweet goody gum drops it's cute. I modified it adding two features and fixing a bug:
1. Read time from variable
2. Animate changes between time
3. Fixed bug in blank GMT parameter handling
Code and example on my site: http://lonbinder.com/coolclock/
Thank you for the script!
I fixed up the initialization piece so that it uses Dean Edwards' elegant cross-browser "DOM ready" solution. I verified that it works with IE7, FF3, and Safari 3. I also added a check in the findAndCreateClocks function which calls excanvas' initElement function, if the canvas element hasn't been initialized yet. This can happen when excanvas' initialization (handled via DOM loading events) occurs AFTER CoolClock's initialization.
For anyone interested, it's here
I've been using a VML analog clock on my site, but it didn't work in Firefox.
I put the
-[if IE] ... all the VML code ...
![endif]-for Internet Explorer and
[if ! IE] ... coolclock code[endif]
for Firefox.
They don't look the same, but probably could with work. I just put in enough time to get it to work.
This is really a cool work. But I've noticed that it does not work on IE8. Is there a way make it work on it?
Nice! I'm using it with latest exCanvas and it works well (but no second hand decoration on IE6..8)
please remove me from this listing!!!
hi...i realy like your clock...i want to use it on my iphone theme but i need to resize it...its to big :(
i made smaller image and that is all ok but can you please tell me how to make hour Hand minute Hand and second Hand smaller...
Sorry for my stupidity. Where is the html file that was mentioned in your instruction how to add those three javascripts file? under \Program Files\Mozilla Firefox ? I have firefox 3.10
Thanks for the clock.
I've put a wrapper round it so that it can be run in Songbird - the open source media player.
You can see/download it here: http://addons.songbirdnest.com/addon/1633
Works Great on Opera 9.63
Check others on browsershots.org
Thank
Kapil
Hi, Pick, and others,
I finally got background working! And it scales with the radius! :-)
Please have a look here:
http://www.debrouwer.org/dayclock/
Cheers,
Steven
Post a Comment