5 ms·
Show HN: SVG Clocks
- flaxin 13y agothe clocks are great BUT am getting 403 responses NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/clock#{i}.svg?w=3&h=3 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_e6e6e6_1x400.png https://s3.amazonaws.com/macslow/images/ui-bg_glass_75_e6e6e... NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/images/ui-icons_888888_256x240.png https://s3.amazonaws.com/macslow/images/ui-icons_888888_256x... NetworkError: 403 Forbidden - https://s3.amazonaws.com/macslow/images/ui-bg_flat_75_ffffff_40x100.png https://s3.amazonaws.com/macslow/images/ui-bg_flat_75_ffffff...
- Edmond 13y agoyea those are due to JQuery UI icons for the spinner control not being accessible...I'll fix it.
- kendalk 13y agoWow, beautiful! I'm wondering if there are some uses for this, apart from just having a clock in your browser which is cool enough.
- ccurtsinger 13y agoLooks nice, but the hour hand is wrong on all the 24 hour clocks.
- blueblob 13y agoIs it just that you are in a different timezone than the author?
- ccurtsinger 13y agoNo. 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.
- rplnt 13y agoAnother 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.
- cormullion 13y agoHere are some more for you to see... http://24hourtime.info http://24hourtime.info
- blueblob 13y agoThe purple animal thing has the hands render at the wrong place (not the center) on my machine, cool idea though.
- onion2k 13y agoVery 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 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.
- Edmond 13y agoyeah you'll need some code to animate the handles.
- onion2k 13y agoIf 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.
- Edmond 13y agoapparently a firefox issue, it doesn't animate in FF but does in Chrome.
- onion2k 13y agoThat'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.
- schiffern 13y ago> 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().
- valarauca1 13y agoNicely 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).
- Edmond 13y agoIt 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.
- erbbysam 13y agoNice 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-roman-iiii-vs-iv-on-clock-dials.aspx http://www.ubr.com/clocks/frequently-asked-questions-faq/faq... ( via https://en.wikipedia.org/wiki/Roman_numerals https://en.wikipedia.org/wiki/Roman_numerals )
- agwa 13y agoVery cool! What's the copyright/license on these?
- Edmond 13y agoconsider 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.
- njx 13y agoHere is a D3 based SVG analog clock dashboard https://my.infocaptor.com/dash/mt.php?pa=world_clocks_using_d3_part2_511031bc87e14 https://my.infocaptor.com/dash/mt.php?pa=world_clocks_using_...
- scoot 13y agoReminds 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.
- hankScorpi0 13y agoSlick stuff. Clock 8, 15 seem to be applying incorrect transformations to the hands (although I have seen some very odd clocks out there).
- slowmover 13y agoTIL 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?)
- eitland 13y agoI made GPS navigation in SVG back in 2005: http://techinorg.blogspot.no/p/erik-itland.html http://techinorg.blogspot.no/p/erik-itland.html
- farnulfo 13y agoNice but can't beat the original QClockTwo http://www.qlocktwo.com/info.php?lang=en http://www.qlocktwo.com/info.php?lang=en !
- bradleyland 13y agoClock 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("transform", "rotate("+hour_rotate_angle+",50,50)"); hour_hand_shadow.setAttribute("transform", "rotate("+hour_rotate_angle+",50,50)"); 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.
- bradleyland 13y agoYeah, that didn't do the trick. I'm not giving up though!
- Edmond 13y agoYou 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/ 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:)
- bradleyland 13y agoI posted a reply above before refreshing the page, so I hadn't seen your reply. Hope this helps your project :)
- Edmond 13y ago
- Eleutheria 13y agoOh 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.
- thoughtmonster 13y agoPretty cool! Reminds me of wrist.im (http://wrist.im http://wrist.im), which is an attempt to faithfully recreate several iconic (new and old) wrist-watches in SVG.