From 62e6551757c22fe285a804d7988b883933f4eaa6 Mon Sep 17 00:00:00 2001
From: David Basoko <basoko@gmail.com>
Date: Sun, 18 Nov 2012 17:45:04 +0100
Subject: [PATCH] Added a SVG clock animation demo.

---
 demos/svg-clock.html | 161 +++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 161 insertions(+)
 create mode 100644 demos/svg-clock.html

diff --git a/demos/svg-clock.html b/demos/svg-clock.html
new file mode 100644
index 0000000..fdc54ea
--- /dev/null
+++ b/demos/svg-clock.html
@@ -0,0 +1,161 @@
+<title>SVG clock animation</title>
+<style>
+  /* any custom styles live here */
+  line {
+  stroke-width: 3px;
+  stroke: black;
+  }      
+</style>
+<article>
+  <p>SVG clock animation by <a href="http://twitter.com/davidbasoko">David Basoko</a>.</p>
+    <div>
+      <label for="zoominput">Zoom</label>
+      <select id="rangeinput" onchange="CLOCK.zoom();">
+	<option value="1" selected="selected">1x</option>
+	<option value="2">2x</option>
+	<option value="3">3x</option>
+	<option value="4">4x</option>
+	<option value="5">5x</option>
+      </select>
+    </div>
+    <div>
+      <svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" >
+	<g>
+	  <circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="100" cy="100" r="100"/>
+	  <line id="hour0" x1="100" y1="10"  x2="100" y2="0"/>
+	  <line id="hour1" x1="150" y1="13"  x2="145" y2="22"/>
+	  <line id="hour2" x1="187" y1="50"  x2="178" y2="55"/>
+	  <line id="hour3" x1="190" y1="100" x2="200" y2="100"/>
+	  <line id="hour4" x1="187" y1="150" x2="178" y2="145"/>
+	  <line id="hour5" x1="150" y1="187" x2="145" y2="178"/>
+	  <line id="hour6" x1="100" y1="190" x2="100" y2="200"/>
+	  <line id="hour7" x1="50"  y1="187" x2="55"  y2="178"/>
+	  <line id="hour8" x1="13"  y1="150" x2="22"  y2="145"/>
+	  <line id="hour9" x1="0"   y1="100" x2="10"  y2="100"/>
+	  <line id="hour10" x1="13"  y1="50"  x2="22"  y2="55" />
+	  <line id="hour11" x1="50"  y1="13"  x2="55"  y2="22" />
+	</g>
+	<g>
+	  <line x1="100" y1="100" x2="100" y2="45" style="stroke-width: 6px; stroke: green;" id="hourhand"/>
+	  <line x1="100" y1="100" x2="100" y2="15" style="stroke-width: 4px; stroke: blue;"  id="minutehand"/>
+	  <line x1="100" y1="100" x2="100" y2="5"  style="stroke-width: 2px; stroke: red;"   id="secondhand"/>
+	</g>
+      </svg>
+    </div>
+
+</article>
+<script>
+var CLOCK = (function() {
+    var drawClock = function() {
+	var INITIAL_R = 100;
+
+	var zoom = document.getElementById("rangeinput").value;
+	
+	var r = INITIAL_R * zoom;
+
+	// Draw Circle
+	var circle = document.getElementById("circle");
+	circle.setAttribute('r', r);
+	circle.setAttribute('cx', r);
+	circle.setAttribute('cy', r);
+
+	// Draw Hours
+	for(var i = 0; i < 12; i++) {
+	    var hour = document.getElementById("hour"+i);
+	    var degrees = i * 30;
+	    hour.setAttribute('x1', getX(degrees, r, 0.9)); // 90% of radio's length.
+	    hour.setAttribute('y1', getY(degrees, r, 0.9)); // 90% of radio's length.
+	    hour.setAttribute('x2', getX(degrees, r));
+	    hour.setAttribute('y2', getY(degrees, r));
+	}
+
+	// Draw hands
+	drawHands();
+    };
+
+    var drawHands = function() {
+	// Constants for hand's sizes.
+	var SECONDS_HAND_SIZE = 0.95,
+	MINUTES_HAND_SIZE = 0.85,
+	HOURS_HAND_SIZE = 0.55;
+
+	var circle = document.getElementById("circle");
+
+	// Clock Circle's Properties
+	var r = circle.getAttribute('r'),
+	cx = parseInt(circle.getAttribute('cx')),
+	cy = parseInt(circle.getAttribute('cy'));
+
+	// Current time.
+	var currentTime = new Date();
+
+	// Draw Hands
+	drawHand(document.getElementById("secondhand"),
+		 currentTime.getSeconds(),
+		 SECONDS_HAND_SIZE,
+		 6);
+	drawHand(document.getElementById("minutehand"),
+		 currentTime.getMinutes(),
+		 MINUTES_HAND_SIZE,
+		 6);
+	drawHand(document.getElementById("hourhand"),
+		 currentTime.getHours(),
+		 HOURS_HAND_SIZE,
+		 30);
+	
+	function drawHand(hand, value, size, degrees) {
+	    var deg = degrees * value;
+	    x2 = getX(deg, r, size, cx),
+	    y2 = getY(deg, r, size, cy);
+	    
+	    hand.setAttribute('x1', cx);
+	    hand.setAttribute('y1', cy); 
+	    hand.setAttribute('x2', x2);
+	    hand.setAttribute('y2', y2); 
+	}
+    };
+
+    /*
+     * Get a Point X value.
+     * degress. Angle's degrees.
+     * r. Circle's radio.
+     * adjust. Percent of length.
+     * x. Start of X point.
+     */
+    function getX(degrees, r, adjust, x) {
+	var x = x || r, 
+	adj = adjust || 1;
+	return x + r * adj * Math.cos(getRad(degrees));
+    }
+
+    /*
+     * Get a Point Y value.
+     * degress. Angle's degrees.
+     * r. Circle's radio.
+     * adjust. Percent of length.
+     * x. Start of Y point.
+     */   
+    function getY(degrees, r, adjust, y) {
+	var y = y || r,
+	adj = adjust || 1;
+	return y + r * adj * Math.sin(getRad(degrees));
+    }
+
+    // Convert from degrees to radians.
+    function getRad(degrees) {
+	var adjust = Math.PI / 2;
+	return (degrees * Math.PI / 180) - adjust;
+    }
+        
+    return {
+	init: function() {
+	    drawClock();
+	    setInterval(drawHands, 1000);
+	},
+	zoom: function() {
+	    drawClock();
+	}
+    };
+})();
+CLOCK.init();
+</script>