I factored out the Javascript from the Palm Pre port of Dali Clock, so now it works as a web page too, including all the display options.
If any of you browser-internals types have suggestions on how to get better performance out of the <canvas> tag (specifically in the Palm Pre version of Webkit) I'd love to hear them.
Awesome, thanks.
The canvas is misplaced when rendered in Firefox 3.0, btw. Looks right in Safari 4.
Bleh. Hopefully someone will send me a patch.
set #clockbg to position:relative and you're most of the way there.
I suppose I can make that a diff if you want.
Most?
Pretend I didn't say that part. I thought it made the clock off-center but I'm too stupid to see that there's space reserved for a two-digit hour.
Looks like there is a way to support <canvas> for IE7/IE8 with a javascript include. Adding it in got me as far as a green canvas and this error:
Message: 'char_width' is null or not an object
Line: 352
Char: 5
Code: 0
URI: http://www.jwz.org/xdaliclock/javascript/daliclock.js
That's about as far as my limited abilities get me, in case anyone else is industrious enough to try and take it further.
It's possible to plow through a few annoying IEisms to reveal that the js canvas won't sustain a framerate that is remotely interesting.
Plus you'll never get me to submit a patch to Jamie titled "Internet Explorer Support".
Nifty!
I loaded that page into the Pre's web browser. I giggled.
It also appears to work in the Android browser. At least on the emulator.
Works in Safari on iPhone OS 3.0, too.
Cool, I can now run Dali Clock on Windows (well, in a browser on Windows but that's close enough)!
I've spotted a couple of bugs/glitches with it:
Glitch 1: the Orientation setting doesn't work properly. The only visible effect is that the font is larger with "Left" and "Right" than it is with "Up" and "Down" - in all cases, the numbers are not rotated. Tried with Opera 9.64 and Firefox 2.0.0.18.
Glitch 2: with anti-aliasing off, picking "Left" or "Right" for Orientation makes the numbers go off the sides of the background.
I guess it's not too surprising that
this.canvas.style.webkitTransform = 'rotate(90deg)';
doesn't do much in browsers not based on Webkit.
Firefox 3.5 added CSS transform support, you can set it in CSS using -moz-transform, or via the DOM using element.style.MozTransform.
https://developer.mozilla.org/En/CSS/Using_CSS_transforms
Thanks. Fixed. I assume someday it will be just 'transform', so I set all three.
I love that in the shiny friendly web standards world of Gecko and WebKit we don't have any more competing proprietary html extensions.
I love that this chews up sixty percent of an entire processor core, go javascript go!
7% of a core with Safari 4 beta on my 2.4GHz MacBook. I can't tell how much of my iPod it uses :-)
It's pretty low (< 5%) on my Firefox trunk nightly on Windows.
Seeing as people are comparing, 10% of a six-year-old Athlon box under Opera 9/Win.
It should show the time in hexadecimal. I want to see the clock strike C:00:00.
that's so hypnotically addictive to just... watch!
that's just fantastic.
One bug: if you set date to YMD, it shows as 09106130 (with the spacer 1s overlapping the following digit), instead of 09-06-30.