Analog Clock


When I was about six, I wanted a digital watch.  I still thought they were, as Douglas Adams would phrase it, “a pretty neat idea”.  I actually wasn’t that interested in having ready access to a time device, but rather I wanted a watch with a game on it.  Many kids my age desired a watch with Pac-Man, but I wanted a watch with a top-down shooter like Space Invaders.  Of course, like many childhood desires for immediate gratification, I was thwarted by my mother.

My father liked to build things with electronics and over the years he had produced various digital clocks packaged in Radio Shack plastic cases.  Thus I managed to be sufficiently informed of the time without having learned to read a traditional, analog clock.  I saw no problem with the status quo, but my mother saw this deficiency as a flaw in my education.  After various whining, complaining, and fussing on my part and unyielding patience on the part of my mother, an agreement was reached.  Once I mastered reading an analog clock (and my mother was clear I couldn’t just have a general idea about the process), I would be permitted to purchase the desired digital device.

I learned.  I got the watch.  I owned a few digital watches during the subsequent years.  Then Swatches became en vogue and so of course I jumped on that bandwagon.  Here I benefited from my mother’s insistence of mastery because most Swatches didn’t have tick marks or numbers.  I soon discovered that I preferred the analog face to a digital readout–to me the progression 60 minutes makes more sense when displayed in a circular fashion.  Since then, I have generally not worn digital watches.

Last night as I was going to sleep, I was thinking about how in the web world that digital displays are much more prevalent on web pages than analog.  So for fun, this morning I created a very simple, analog clock that can be displayed on a web page.

There are three basic technologies involved in my primitive clock:  HTML, JavaScript, and SVG (Scalable Vector Graphics).  Here’s what an HTML file looks like that displays the clock (with the important parts in bold):

<html>
    <head>
        <!-- I downloaded jQuery from http://code.jquery.com/jquery-2.2.0.min.js-->
        <script src="jquery-2.2.0.min.js"></script>
        <script src="clock.js"></script>
        <title>Analog Clock</title>
    </head>

    <body>

        <div class="clock"></div>

        <script>
            clock();
        </script>

    </body>
</html>

All the HTML really does is pull in the JavaScript goodness and kick off the clock() function that puts the clock into the “div” element.  I used jQuery to make it easier to find and modify various elements.

Below is the clock.js content.  There are some “magic” numbers:  300 is both the height and width and 150 is the midpoint (both vertical and horizontal).  The 1000 the 1000 milliseconds (one second) interval to wait between updates.

function clock() {
    setupClock();
    updateClock();
    window.setInterval(function(){ updateClock(); }, 1000);
}

var radius = 120;

function setupClock() {
    var svg = "<svg class='clockSvg' viewBox='0 0 300 300' width='300' height='300' >" +
        "<circle class='circle' cx='150' cy='150' r='50' stroke='black' stroke-width='2' fill='none' />" + 
        "<line class='hourHand' x1='150' y1='150' x2='0' y2='150' style='stroke:rgb(0,0,0);stroke-width:2;' />" +
        "<line class='minuteHand' x1='150' y1='150' x2='150' y2='0' style='stroke:rgb(0,0,0);stroke-width:2;' />" +
        "<line class='secondHand' x1='150' y1='150' x2='150' y2='0' style='stroke:rgb(0,0,0);stroke-width:1;' />" +
        "</svg>";
    $('.clock').html(svg);
    
    $('.circle').attr('r', radius);
    
    var now = new Date();
    updateSecondHand(now.getSeconds());
    updateMinuteHand(now.getMinutes());
    updateHourHand(now.getHours(), now.getMinutes());
}

function updateClock() {
    var now = new Date();
    var seconds = now.getSeconds();
    
    updateSecondHand(seconds);
    
    if (seconds == 0) {
        updateMinuteHand(now.getMinutes());
        updateHourHand(now.getHours(), now.getMinutes());
    }
};

function updateSecondHand(seconds) {
    var degrees = 6 * seconds - 90;
    updateHand('secondHand', degrees, .9 * radius);
}

function updateMinuteHand(minutes) {
    var degrees = 6 * minutes - 90;
    updateHand('minuteHand', degrees, .9 * radius);
}

function updateHourHand(hours, minutes) {
    hours %= 12;
    hours += minutes/60;
    var degrees = 30 * hours - 90;
    updateHand('hourHand', degrees, .7 * radius);
}

function updateHand(hand, degrees, length) {
    var rads = degrees / 180 * Math.PI;

    x2 = parseInt(150 + length * Math.cos(rads));
    y2 = parseInt(150 + length * Math.sin(rads));                
    
    $('.' + hand).attr('x2', x2);
    $('.' + hand).attr('y2', y2);
}

Drawing a clock face with SVG is simple–it is just a circle and some  lines and that is what the setupClock() function does.  All the various “update” functions do is move one of the ends of each of the lines.

After I put this together, I did a quick search for “svg clock” and of course found many fancier, more complicated implementations.  But I made this one and I don’t need numbers or tick marks or anything else–thanks to my mother . . .

Author: Nathan

I like to do stuff.

Leave a Reply

Your email address will not be published. Required fields are marked *