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 . . .
Screens provide “cheap” entertainment. By “cheap” I’m not referring to the cost in terms of money, but rather effort to participate. It’s much easier to turn on the TV and vegetate than to go on a hike and easier to hop on social media than call up a friend and go see a movie. Because of the ease, screens are often the go-to entertainment choice.
