This seems to force quirks mode in IE9, which prevents the pixel clock from displaying. Perhaps the missing DOCTYPE.
Lots of things like this don't seem to have even been tested in IE9, despite the fact it's (subjectively, to me at least) a decent browser that finally supports Canvas.
There's a good chance that someone having fun with canvas does not run a system which supports any version of IE... which might explain the lack of testing.
A missing doctype shouldn't have anything to do with the system, though, assuming that's what the problem is. Clearly other browsers are more forgiving.
I didn't mean it from the code standard perspective. In a live product, invalid html is bad regardless of a system and it should be tested in all browsers.
But for one-off interesting thing, you'll probably check it in browser(s) you have installed only, or maybe even only your favourite one... and it's unlikely that IE will be that browser. Just a reflection on the setup of an average webdev interested in canvas.
Not having a doctype does indeed cause IE to go into quirks mode. This is still true even in IE9. Thankfully, <!DOCTYPE html> is recognized correctly, even by IE6.
I don't test "personal" code on IE9. I couldn't if I wanted to: the only Windows license I have is for XP which I have running on my main desktop. At some point I might upgrade to 7 (unless before then I decide to live without games and switch to Linux on the desktop instead of moving to another Windows version) but that won't be until I next rebuild that machine. All my other computing resources run Linux in some form or another.
Perhaps the author of this code is in a similar position, and has no Windows Vista/7 installs to test via IE9 with? It doesn't matter how decent IE9 is, if it won't run on your current platforms.
Testing on Chrome, Firefox and Opera is more universally easy as their latest desktop releases will run on Linux, OSX and XP+.
If a missing or malformed DOCTYPE is an issue then that is not IE9's fault, but you can't criticise the author for not explicitly testing on IE9 if he/she can't do so.
If you read my post again, you'll see I said "lots of things like this" haven't been tested in IE9. It wasn't a personal attack on the author. Just a remark that it's unfortunate that despite the canvas support in IE9, a large amount of these sorts of things that get linked from HN don't work in the browser.
The reasons behind that I'm sure are numerous and valid for a lot of people, but they don't make it any less annoying for me as a regular IE9 user.
For me personally the 4000 weekends has more of an impact, because I can realistically picture what I would get done in any given couple of days.. 76 years seems a bit too much of a 'big picture' to really comprehend.
Equivalently, a few months ago someone online pointed out that you get about 1000 months to live. For some reason that gives me a huge sense of urgency.
Not to get too analytical or philosophical, but I think it's because clocks normally represent time cyclically, as a repetitive process counting and displaying a sub-set of an ethereal infinite time set. Whereas this clock visualizes time spatially in known, limited, diminishing quantities.
The depressing part is either that this forces you to realize or reminds you that time is, in fact, limited -- or that it tricks you into thinking time isn't infinite, depending on your philosophy.
Can someone please explain what makes this particular canvas experiment so interesting, especially because there are more interesting, complex and beautiful demos available showing the power of canvas with JS?
Nice. I've got a minor obsession with alternative ways of displaying the time of day. I've made a canvas clock or two of my own, and I used http://www.let.rug.nl/kleiweg/abclock/ glued to my root window for the longest time.
I like that your clock simply displays the time of day as a visual ratio of time elapsed to time remaining. Of course, at the one-second-per-pixel scale, getting the precise time of day at a glance is a little tough.
Have you considered using color to earmark blocks of time? If it's 300 pixels wide, then a row is 5 minutes. Have you tried maybe some pinstriping on each sixth row to show hour marks? Maybe wider, like 2-hour blocks? I think it would give a lot more information in a single glance.
Do you think turning it 90 degrees and having it progress left to right would be easier or more intuitive?
And what about the size? 300x288 has its advantages, but have you played with other aspect ratios?
I'm not trying to pick apart your work, I'm trying to suggest different ways to take it because I like what you've done.
If you want to return fire, I made http://slumberheart.com/things/clock.html earlier this year and would love to hear some suggestions.
it draws little notches along the right side of the screen, one for every hour, with green ones for special times (lunch, or time to leave). a yellow square just moves down the side of the screen as the day progresses.
Thanks for the offer. I really don't have any plans to pursue this idea, for various reasons. I did this quite a while ago. It ended up being more an experiment in landing pages and google ads.
colours could be used to mean different things! day, night, summer, winter, full moons etc... cant think of a use for it right now, but I'm sure one will 'spring' to mind! ;-)
It would be cool if you could change the start and end times. So instead of 00:00:00 and 23:59:59 I could do something like 09:00 - 16:59:59. Just another tool to get through the day!
cool but might be more useful if it's used as a timer rather than a clock or maybe with custom checkpoints. i don't particularly care about 12am-12am. i DO care how much time i have left at the office. or how much time i have till my bedtime. how far along i am in a task or in my own day, say there's a 9p-5p block, and 5p-11p block and a 11p-2am block. when i'm asleep i cant watch it and it could be excluded.
<!DOCTYPE HTML> is necessary to let IE9 work without whining
imageData is slow and I'd avoid using it. In this instance you can accomplish the same effect with calls to fillRect.
As it stands right now, you are setting the fillStyle of the arc each time but only need to set it once since the fillStyle never changes. In fact, you probably don't even have to recreate the path each time, since the last path ought to still be there, so the only thing that needs to be in the loop for the arc is `ctx.fill();`! (Haven't tested, but that ought to be the case)
33 comments
[ 3.0 ms ] story [ 86.8 ms ] threadLots of things like this don't seem to have even been tested in IE9, despite the fact it's (subjectively, to me at least) a decent browser that finally supports Canvas.
But for one-off interesting thing, you'll probably check it in browser(s) you have installed only, or maybe even only your favourite one... and it's unlikely that IE will be that browser. Just a reflection on the setup of an average webdev interested in canvas.
Perhaps the author of this code is in a similar position, and has no Windows Vista/7 installs to test via IE9 with? It doesn't matter how decent IE9 is, if it won't run on your current platforms.
Testing on Chrome, Firefox and Opera is more universally easy as their latest desktop releases will run on Linux, OSX and XP+.
If a missing or malformed DOCTYPE is an issue then that is not IE9's fault, but you can't criticise the author for not explicitly testing on IE9 if he/she can't do so.
The reasons behind that I'm sure are numerous and valid for a lot of people, but they don't make it any less annoying for me as a regular IE9 user.
The depressing part is either that this forces you to realize or reminds you that time is, in fact, limited -- or that it tricks you into thinking time isn't infinite, depending on your philosophy.
I like that your clock simply displays the time of day as a visual ratio of time elapsed to time remaining. Of course, at the one-second-per-pixel scale, getting the precise time of day at a glance is a little tough.
Have you considered using color to earmark blocks of time? If it's 300 pixels wide, then a row is 5 minutes. Have you tried maybe some pinstriping on each sixth row to show hour marks? Maybe wider, like 2-hour blocks? I think it would give a lot more information in a single glance.
Do you think turning it 90 degrees and having it progress left to right would be easier or more intuitive? And what about the size? 300x288 has its advantages, but have you played with other aspect ratios?
I'm not trying to pick apart your work, I'm trying to suggest different ways to take it because I like what you've done. If you want to return fire, I made http://slumberheart.com/things/clock.html earlier this year and would love to hear some suggestions.
http://dl.dropbox.com/u/136288/pixelclock.html
http://jcs.org/notaweblog/2005/06/28/pixelclock/
it draws little notches along the right side of the screen, one for every hour, with green ones for special times (lunch, or time to leave). a yellow square just moves down the side of the screen as the day progresses.
Picturing it shading hours in the office, after-hours appointments, approximate lunch times, reminders to move cars or do other things.
Though that would require geoip location and a sun rise/set calculator.
link: http://morrow.github.com/Life-Clock/
code: https://github.com/morrow/Life-Clock/
I'll leave it up to you to figure out what that will represent.
... I hate you.
colours could be used to mean different things! day, night, summer, winter, full moons etc... cant think of a use for it right now, but I'm sure one will 'spring' to mind! ;-)
<!DOCTYPE HTML> is necessary to let IE9 work without whining
imageData is slow and I'd avoid using it. In this instance you can accomplish the same effect with calls to fillRect.
As it stands right now, you are setting the fillStyle of the arc each time but only need to set it once since the fillStyle never changes. In fact, you probably don't even have to recreate the path each time, since the last path ought to still be there, so the only thing that needs to be in the loop for the arc is `ctx.fill();`! (Haven't tested, but that ought to be the case)