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 . . .
