Time they say is the great healer…

I am currently in the states and as a result I have been communicating with my family using Skype. With the O’Connor clan spread across three time zones I have been confused by the time difference on more than a few occasions. Sure I could just check on google whenever I wanted to call but where’s the fun in that:)

In this post I will describe how I built a page that displays each family members time and locations in a clear, intuitive and fun way.

1. Raphaël and an updated Analog clock.

Raphaël is a JavaScript vector library. I used an existing example of an analog clock which i got from this cool site. Initially it didn’t work  with the current version of the Raphaël library and I had to update the code so it worked correctly. The issue was the rotate function, which appears to have changed in the more recent version of the Raphaël library. The new rotate function is relative to the vectors current position, whereas the old rotate function was relative to the initial vector position.

I like this clock as it works using only JavaScript as opposed to a Flash version.

2. OO in javascript

Next step was to read a couple of articles on OO in JS. I found the concept of no classes a bit unusual, http://www.javascriptkit.com/javatutors/oopjs.shtml was a very useful article. I also bookmarked an article for further reading about the fundamental differences between JS and class based languages.

3. Debugging in JS

While applying the principles learned in section 2  to make the code more object orientated I got my feet wet with the chrome JS console for debugging.

Firebug appears like it could be an option worth considering in the future.
4. Time out function issues

While writing the code I had issues with the setInterval() method. It appears that when using it with OO code the method passed in to set Interval would be called from a global scope and not the class instance scope . I used the work around at http://www.vonloesch.de/node/32 which allowed me to get  multiple clock instances displaying and updating correctly.

For more in depth understanding this article  was also very informative on this topic.
5. Float the divs

Being out of practice with css It took me 5 minutes(too long) to figure out to float the divs to get my clock displaying side by side. This article got me going in the right direction.

6. Time: it’s all relative baby.

Lifted the code from this script and adjusted to suit my needs eg: to get the clocks displaying times in different time zones.

7. Restructure

Did a bit of restructuring, based the layout on the webpage http://html5boilerplate.com/ .

8. Notes

  • There appears to be an issue with synchronisation at times. Possibly because the library is asynchronous.
  • It could be prettier, I’m happy that there is enough functionality and I will make it look good in the future if I can find the time.
  • I could also improve the code structure as this is only the minimum working version.
9. Code
The page is available at www.eoin.ie/tco.html.

10. Versioning

Raphaël 2.0.