Show HN: SVG Clocks | Hacker News Reader

Show HN: SVG Clocks

s3.amazonaws.com

107 pointsEdmond42 comments

Very nice indeed. Technically you should be able to do the same thing in CSS... I knocked this together in 20 minutes as a proof of concept: http://codepen.io/onion2k/details/kmouK

Sadly you'd need some JS to set them to the right time though, which rather ruins the beauty of it. I think. If anyone knows a way to do it without JS I'd love to hear how.

yeah you'll need some code to animate the handles.

If by 'handles' you mean hands, what I built does that with CSS3's animation and transformations. No JS necessary. It's setting the initial positions that's the problem - CSS has no clock functionality.

The only non-JS solution is to tell people to only load the page at exactly 12:00:00, but that's a bit impractical.

apparently a firefox issue, it doesn't animate in FF but does in Chrome.

That's actually a lazy-developer-only-bothered-with-the-webkit-animation-class issue rather than a Firefox issue. Adding keyframes, moz-keyframes, and o-keyframes would make it cross-browser.

> The only non-JS solution is to tell people to only load the page at exactly 12:00:00

If it's just a problem of initialization, couldn't you include a continuously-updated current_time.css file served with cache-control: no-cache?

You could estimate timezone from IP. It's not perfect, but it's the best you're gonna get without getTimezoneOffset().

For extreme impracticality, you could have server-side generated CSS which outputs the right CSS values depending on what time it's requested. Then no JS is required.

I made a star chart, which is kind of like a clock in the form of a map of the sky, in pure HTML/CSS, that starts at the correct current time without resorting to JS:

http://lee-phillips.org/skymap/

You might consider my solution cheating, however.

EDIT: The trick I used is basically what jwarren describes below.

Interesting article and a great app. But yeah, that's "cheating". :)

The purple animal thing has the hands render at the wrong place (not the center) on my machine, cool idea though.

Same here.

will fix it.

Oh I thought that was an abstract clock design

lol, you could interpret it that way...a work of art :)

Reminds me of something an early web-server software development company Roxen did for one of their clients, a watch manufacturer, circa 1995/6.

Basically they were rendering an animated gif on the server and streaming to the browser, so that the watch told the correct time, but the hands appeared behind the glass of the photo-realistic watch.

This was when most sites (not that there were many!) only had rudimentary static graphics, with the odd flashing "under construction' sign.

I googled, but couldn't find any reference to it, although Roxen the company still seems to be going, with the Roxen Web Server having become a CMS platform.

Clock 19 shows the incorrect time for me, but it's the one I'm most interested in using. I'm diving in to the code right now, but I'm struggling to understand the math on lines 57-60 of the SVG:

    //smooth-out the rotation of the hour hand: rotate 0.008333333 of a degree every second
    hour_rotate_angle = ((30*tDate.getHours())-90)+(0.008333333*((tDate.getMinutes()*60)+tDate.getSeconds()));
    hour_hand.setAttribute(&quot;transform&quot;, &quot;rotate(&quot;+hour_rotate_angle+&quot;,50,50)&quot;);
    hour_hand_shadow.setAttribute(&quot;transform&quot;, &quot;rotate(&quot;+hour_rotate_angle+&quot;,50,50)&quot;);

360/0.008333333 is 43,200.

43,200 seconds equates to only 12 hours, so I'm wondering if this clock is off because it's missing 12 hours out of the day. If I half the coefficient 0.008333333 to 0.004166666, does that make it correct...

I think I just ironed out my struggle. I'm posting this before I know the result... I hope the suspense is killing you all.

Yeah, that didn't do the trick. I'm not giving up though!

You are going to be disappointed in my answer: I can't remember what I was thinking :)

I only dug out these clocks over the weekend and tweaked the home page a bit before posting it here. I haven't touched the actual Javascript or svg in over 5 yrs!

I initially posted them so they could be used with iGoogle gadgets (remember those?) The original clocks where hosted on Google sites (just to show their age :)) https://sites.google.com/site/clockamatics/

If I had to guess, that magic number is some sort of compensator to smooth out the animation, but I honestly don't remember...should be a lesson for why code should be well documented:)

I posted a reply above before refreshing the page, so I hadn't seen your reply. Hope this helps your project :)

thank you! I'll update it.

updated it:)

Figured it out. This particular clock only uses the hour hand, but because it's a 24-hour clock, the math required is different. It looks like this snippet of code was reused from the others (12-hour clocks). The design was updated to 24-hour, but the math for the hour hand wasn't. Fortunately, the math for a 24-hour clock is simple:

360 degrees divided by the number of seconds in 24-hours (86400) gives you your rotation value: 0.004166666 degrees of rotation per second.

Now all you need to know is the number of seconds that have elapsed for the current time:

    hour_rotate_angle = (0.004166666*((tDate.getHours()*3600)+(tDate.getMinutes()*60)+tDate.getSeconds()));

If you replace lines 58 and 92 with this code, the 24-hour clock works.

Nice work, sorry to be that guy, but it should IIII, not IV on the second clock face - http://www.ubr.com/clocks/frequently-asked-questions-faq/faq... ( via https://en.wikipedia.org/wiki/Roman_numerals )

Looks nice, but the hour hand is wrong on all the 24 hour clocks.

Is it just that you are in a different timezone than the author?

No. The clocks use the local Date object, but the rotation calculations for hour hand were copied over from a 12 hour clock.

One downside of 24 hour clocks: a broken one is only right once a day.

Another downside is that it's confusing all day long. I have yet to see such clock somewhere else than US television. And to be honest, I don't see a point of such clock-face.

Here are some more for you to see...

http://24hourtime.info

TIL one can embed javascript in SVG. Can it be used to do more than just changing the positions and rotations of objects already defined in the file? (In other words, could someone write Space Invaders entirely in SVG?)

I made GPS navigation in SVG back in 2005: http://techinorg.blogspot.no/p/erik-itland.html

Here is a D3 based SVG analog clock dashboard https://my.infocaptor.com/dash/mt.php?pa=world_clocks_using_...

Pretty cool! Reminds me of wrist.im (http://wrist.im), which is an attempt to faithfully recreate several iconic (new and old) wrist-watches in SVG.

Wow, beautiful!

I'm wondering if there are some uses for this, apart from just having a clock in your browser which is cool enough.

Nicely Done.

I noticed when it updates the second hand (this is present on most clocks). The hand moves and appears very blocking for several frames until anti-aliasing kicks in.

Is this a web browser issue?

(FF27, windows 7 x86_64).

It appears to happen on FF only. I have Chrome and it is smooth....might reflect a regression on the part of FF because I actually did these ports about 5 yrs ago and don't remember the lagging in the past.

Nice but can't beat the original QClockTwo http://www.qlocktwo.com/info.php?lang=en !

Slick stuff. Clock 8, 15 seem to be applying incorrect transformations to the hands (although I have seen some very odd clocks out there).

Very cool!

What's the copyright/license on these?

consider it creative commons...in other words do with it as you please...The original SVGs were created for linux desktop and I believe they were GPL, I only added Javascript to make it browser friendly.

Oh god, I coded my first xml clock in 2002 very similar to #1. I even had the first web page completely done in SVG. The whole index.html was a nicely done svg tag with a sidebar and links with plenty of transparencies and rounded corners.

Those were the days. Phoenix was the browser.

the clocks are great BUT am getting 403 responses

NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/clock#{i}.svg?w=3&h=3

NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/images/ui-bg_glass_75_e6e6e...

NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/images/ui-icons_888888_256x...

NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/images/ui-bg_flat_75_ffffff...

yea those are due to JQuery UI icons for the spinner control not being accessible...I'll fix it.

Reply on news.ycombinator.com