Fig. 1 - HTML5 Canvas Clock Original
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
[Back] [Bottom] [Index]
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
Analog clock faces provide an easier means for timing events when compared to digital clocks. You can easily see the amount of time elapsed, or at least I can since I work visually. The analog clock face is like a circular number line that you can use to work out the elapsed time between two times, like the ones at the start of a measurement, and the current time when you stop measuring. There is no need to deal with "bare numbers" like you do when using a digital clock.
I frequently need to time events like the duration of time spent exercising, or measuring my heart rate. With that in mind, I wanted to get an analog clock for my computer, back in 2005, when I saw an analog clock embedded on a web page. I discovered that it was done using Adobe Flash. So I went looking for a Flash clock that looked like the style I desired. I finally found what I wanted and used it...
...up until August 8, 2017. I stopped using my Flash clock since on July 25, 2017 Adobe announced the end-of-life of Flash. This problem of not having Flash meant that I had to find an alternative means...
...HTML5 with JavaScript provides a functionally comparable system to Flash, capable of producing an analog clock on a web page. After learning this, I went looking for an analog clock written in HTML5 and JavaScript.
After scouring the web for a good replacement I came up with the "HTML5 Canvas Clock" written by Swapnil Raja. I was happy with the functionality of this new clock but was not pleased with the somewhat garish color scheme and excessive clutter on the face of the clock. Have a look below at the default style of the clock face.
This default style makes using the clock less easy than it could be with a clean and high contrast color scheme. So I set about making a revised version of the HTML5 Canvas Clock that met my standards of readability. After making my alterations, here is the final result.
You might say that it is a bit plain, but I think it is nearly the best possible.
Here is a summary of the changes I made:
There are currently many HTML5 clocks available for download on the Internet, so why a big to-do over this one? At the time when I acquired this one back in 2017 there were not many to choose from. The other clocks available have source code that is smaller than this one, so why should I use one with larger code? The clocks that have smaller source code also tend to have an even simpler clock face with less details on the elements that make up the clock. You might say that this clock is a bit over engineered having too much detail. While that may be true, I still want to preserve this early example HTML5 clock for historical reasons. It has a design that looks a lot like a wristwatch, and I like that. This one has served me well and I will continue to use it. Possibly other people may see the value in this one and use it too.
Unfortunately, the original author's web site has gone off-line, so I am providing his original versions (one with and one without remarks) as well as my clean version here for you to view and download.
If you would like to view the original version in action, click here.
© 2023 Michael Walden
(This document was originally published here: https://MW.Rat.bz/HTML5-Clock)
Counter: 2858 (Since 2023-11-19)
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
[Back] [Top] [Index]
[Contact Michael Walden]
[Validates as HTML 4.01 Transitional]
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-==-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-
[EOF]