Digital Clock

clock-face.svg

clock.js

var Clock = Clock || {};

Clock.digitPattern = [
	[ 1, 0, 1, 1, 0, 1, 1, 1, 1, 1 ], 
	[ 1, 0, 0, 0, 1, 1, 1, 0, 1, 1 ], 
	[ 1, 1, 1, 1, 1, 0, 0, 1, 1, 1 ], 
	[ 0, 0, 1, 1, 1, 1, 1, 0, 1, 1 ], 
	[ 1, 0, 1, 0, 0, 0, 1, 0, 1, 0 ], 
	[ 1, 1, 0, 1, 1, 1, 1, 1, 1, 1 ], 
	[ 1, 0, 1, 1, 0, 1, 1, 0, 1, 1 ]
];

Clock.load = function(clockFaceSvg) {
	Clock.xhr.sendRequest({
		url : clockFaceSvg,
		headers : {
			'Content-Type' : 'image/svg+xml'
		}
	}, function(request) {
		Clock.inject(request.responseXML.documentElement);
		Clock.setup();
		Clock.run();
	});
}

Clock.inject = function(xml) {
	var svg = Clock.svg.cloneToDoc(xml);
	svg = document.importNode(svg, true);
	document.body.appendChild(svg);
}

Clock.setup = function() {
	var svgUnderlay = d3.select('svg'),
		svgOverlay = d3.select('body').append(function() {
			return svgUnderlay.node().cloneNode(true);
		}),
		svg = d3.selectAll('svg');

	svgUnderlay.attr('id', 'underlay');
	svgOverlay.attr('id', 'overlay');

	Clock.digit = svg.selectAll('.digit');
	Clock.separator = svg.selectAll('.separator circle');
	Clock.digitCount = Clock.countChildren(svgUnderlay, '.digit');
}

Clock.run = function() {
	(function tick() {
		var now = new Date,
			hours = now.getHours(),
			minutes = now.getMinutes(),
			seconds = now.getSeconds();

		var digit = Clock.digit.data([
			hours   / 10 | 0, hours   % 10,
			minutes / 10 | 0, minutes % 10,
			seconds / 10 | 0, seconds % 10
		]);

		for (var i = 0; i <= Clock.digitCount; i++) {
			digit.select('path:nth-child(' + (i + 1) + ')').classed('lit', function(d) {
				return Clock.digitPattern[i][d];
			});
		}

		Clock.separator.classed('lit', seconds & 1);

		setTimeout(tick, 1000 - now % 1000);
	})();
}

Clock.countChildren = function(node, selector) {
	return node.selectAll(selector)[0].length;
}

Clock.xhr = Clock.xhr || {};

Clock.xhr.XMLHttpFactories = [
    function () { return new XMLHttpRequest(); },
	function () { return new ActiveXObject('Msxml3.XMLHTTP'); },
	function () { return new ActiveXObject('Msxml2.XMLHTTP.6.0'); },
	function () { return new ActiveXObject('Msxml2.XMLHTTP.3.0'); },
	function () { return new ActiveXObject('Msxml2.XMLHTTP'); },
	function () { return new ActiveXObject('Microsoft.XMLHTTP'); },
];

// http://stackoverflow.com/a/2557268
Clock.xhr.sendRequest = function(config, callback) {
	config = config || {};
	
	var url = config.url;
	var jsonData = config.data;
	var headers = config.headers;

	var xhr = Clock.xhr.createXMLHTTPObject();
	
	if (!xhr) {
		return;
	}
	
	var method = jsonData != null ? 'POST' : 'GET';
	xhr.open(method, url, true);

	if (jsonData != null) {
		xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
	}
	
	if (headers != null) {
		for (var header in headers) {
			xhr.setRequestHeader(header, headers[header]);
		}
	}
	
	xhr.onreadystatechange = function () {
		if (xhr.readyState != 4) {
			return;
		}
		if (xhr.status != 200 && xhr.status != 304) {
			return;
		}
		callback(xhr);
	}
	
	if (xhr.readyState == 4) {
		return;
	}
	
	xhr.send(jsonData);
}

Clock.xhr.createXMLHTTPObject = function() {
    for (var i = 0; i < Clock.xhr.XMLHttpFactories.length; i++) {
        try {
            return Clock.xhr.XMLHttpFactories[i]();
        } catch (e) {
            continue;
        }
    }
    return null;
}

Clock.svg = Clock.svg || {};

// http://stackoverflow.com/a/7986519
Clock.svg.cloneToDoc = function(node, doc) {
	if (!doc) {
		doc = document;
	}

	var clone = doc.createElementNS(node.namespaceURI, node.nodeName);

	for (var i = 0, len = node.attributes.length; i < len; ++i) {
		var attr = node.attributes[i];

		if (/^xmlns\b/.test(attr.nodeName)) {
			continue; // IE can't create these
		}

		clone.setAttributeNS(attr.namespaceURI, attr.nodeName, attr.nodeValue);
	}

	for (var i = 0, len = node.childNodes.length; i < len; ++i) {
		var child = node.childNodes[i];

		clone.insertBefore(
			child.nodeType == 1
				? Clock.svg.cloneToDoc(child, doc)
				: doc.createTextNode(child.nodeValue),
			null
		);
	}

	return clone;
}

index.html

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="application/xhtml+xml;charset=utf-8"/>
		<link rel="stylesheet" href="style.css" />
		<!-- link rel="stylesheet" href="theme-green.css" / -->
		<link rel="stylesheet" href="theme-blue.css" />
		<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
		<script src="clock.js"></script>
		<script type="text/javascript">	
			Clock.load('clock-face.svg');
		</script>
	</head>
	<body></body>
</html>

style.css

body {
  position: relative;
}

svg {
  position: absolute;
  top: 0;
  left: 50px;
  width: 860px;
  height: 500px;
}

#underlay {
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -ms-filter: blur(4px);
  -o-filter: blur(4px);
  filter: blur(4px);
}

theme-blue.css

body {
  background: #411;
}

#underlay path,
#underlay circle {
  fill: none;
  stroke: #301;
}

#underlay .lit {
  fill: #28e;
  stroke: #28e;
}

#overlay path,
#overlay circle {
  fill: #613;
  stroke: #05f;
  stroke-opacity: 0;
}

#overlay .lit {
  fill: #27e;
  stroke-opacity: 1;
}

theme-green.css

body {
  background: #111;
}

#underlay path,
#underlay circle {
  fill: none;
}

#underlay .lit {
  fill: #0e0;
  stroke: #0e0;
}

#overlay path,
#overlay circle {
  fill: #222;
  stroke: #5f0;
  stroke-opacity: 0;
}

#overlay .lit {
  fill: #0e0;
  stroke-opacity: 1;
}

thumbnail.png