Last active
October 9, 2015 16:11
-
-
Save rmkane/bfb0617187e6f599550a to your computer and use it in GitHub Desktop.
Digital Clock 2
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
var Clock = function(clockFaceSvg, id) { | |
var self = this; | |
this.id = id || 'clock-' + Clock.count++; | |
Clock.xhr.sendRequest({ | |
url : clockFaceSvg, | |
headers : { | |
'Content-Type' : 'image/svg+xml' | |
} | |
}, function(request) { | |
return self.onLoad.apply(self, arguments); | |
}); | |
} | |
Clock.count = 0; | |
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.prototype.onLoad = function(request) { | |
this.load(request.responseXML.documentElement); | |
this.setup(); | |
this.run(); | |
}; | |
Clock.prototype.load = function(xml) { | |
var svg = Clock.svg.cloneToDoc(xml); | |
svg = document.importNode(svg, true); | |
svg.id = this.id; | |
document.body.appendChild(svg); | |
} | |
Clock.prototype.setup = function() { | |
var svgUnderlay = d3.select('svg#' + this.id), | |
svgOverlay = d3.select('body').append(function() { | |
return svgUnderlay.node().cloneNode(true); | |
}), | |
svg = d3.selectAll('svg#' + this.id); | |
svgUnderlay.attr('class', 'underlay'); | |
svgOverlay.attr('class', 'overlay'); | |
this.digit = svg.selectAll('.digit'); | |
this.separator = svg.selectAll('.separator circle'); | |
this.digitCount = Clock.countChildren(svgUnderlay, '.digit'); | |
} | |
Clock.prototype.run = function() { | |
var me = this; | |
(function tick() { | |
var now = new Date, | |
hours = now.getHours(), | |
minutes = now.getMinutes(), | |
seconds = now.getSeconds(); | |
var digit = me.digit.data([ | |
hours / 10 | 0, hours % 10, | |
minutes / 10 | 0, minutes % 10, | |
seconds / 10 | 0, seconds % 10 | |
]); | |
for (var i = 0; i <= me.digitCount; i++) { | |
digit.select('path:nth-child(' + (i + 1) + ')').classed('lit', function(d) { | |
return Clock.digitPattern[i][d]; | |
}); | |
} | |
me.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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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"> | |
new Clock('clock-face.svg'); | |
new Clock('clock-face-alt.svg'); | |
</script> | |
<style type="text/css"> | |
#clock-1 { | |
top: 400px; | |
} | |
</style> | |
</head> | |
<body></body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment