nojhan/clockical
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

simpler clock templates based on single svg and thus simpler code

Browse source
This commit is contained in:
nojhan 2012-12-01 23:35:21 +01:00
commit fe99eb32f3
2 changed files with 2090 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

2063
www/img/themes/default.svg Normal file
View file

File diff suppressed because it is too large Load diff
Side by side

After

Width:  |  Height:  |  Size: 84 KiB

131
www/index.html
View file

@ -3,114 +3,37 @@
<html> <html>
<head> <head>
<meta charset="utf-8">
<title>Clockical</title> <title>Clockical</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
(function($) {
$(document).ready( function() {
var width = 100; <meta name="description" content="">
var scale = 1; <meta name="viewport" content="width=device-width">
var imgs = [ <link rel="stylesheet" href="css/app.css">
"clock-drop-shadow",
"clock-face-shadow",
"clock-face",
"clock-marks",
//"clock-hour-hand-shadow",
//"clock-minute-hand-shadow",
//"clock-second-hand-shadow",
"clock-hour-hand",
"clock-minute-hand",
"clock-second-hand",
"clock-glass",
"clock-frame",
];
function getSVG( id )
{
var svgTag = document.getElementById( id );
var svgDoc = svgTag.getSVGDocument();
return svgDoc;
}
function getLayers( id )
{
svgDoc = getSVG( id );
var layers = svgDoc.getElementsByTagName("g");
return layers;
}
function update( id, angle )
{
var offset = 0;
// if it is an hand image
if( id.indexOf("hand") != -1 ) {
offset = width / 2;
}
var layers = getLayers( id );
for(var i=0,len=layers.length; layer=layers[i], i<len; i++) {
layer.setAttribute('transform',
'scale('+scale+') translate('+offset+','+offset+') rotate('+ angle +')');
}
}
function scaleAll()
{
for(var i=0,len=imgs.length; img=imgs[i], i<len; i++) {
var layers = getLayers( img );
for(var i=0,len=layers.length; layer=layers[i], i<len; i++) {
if( img.indexOf("hand") == -1 ) {
layer.setAttribute('transform', 'scale('+scale+')');
}
} // for layer
} // for img
}
function clock( theme )
{
var offset = width * scale / 2;
for(var i=0,len=imgs.length; img=imgs[i], i<len; i++) {
var obj = '<object \
style="position:absolute;top:'+ offset +'px;left:'+ offset +'px;" \
width="'+ width * scale +'" \
id="'+ img +'" \
type="image/svg+xml" data="themes/'+ theme +'/'+ img +'.svg" \
><p>SVG not supported.</p></object>';
$("body").append(obj);
}
}
setInterval( function() {
var now = new Date();
var seconds = now.getSeconds();
var minutes = now.getMinutes();
var hours = now.getHours() + minutes / 60;
a0 = 90; // initial angle offset
tn = 12;
update("clock-second-hand", seconds * tn/2 - a0);
update("clock-minute-hand", minutes * tn/2 - a0);
update("clock-hour-hand", hours * 360/tn - a0);
scaleAll();
} , 1000 ); // every second
clock('default');
}); // document ready
})(jQuery);
</script>
</head> </head>
<body> <body>
</body> <!-- Use this installation button to install locally without going
through the marketpace (see app.js) -->
<button id="install-btn">Install</button>
<!-- Write your application here -->
<object
id="clockical"
data="img/themes/default.svg"
width="100"
style="position:absolute;top:0px;left:0px;"
type="image/svg+xml"
>
<p>SVG not supported.</p>
</object>
<!-- Using require.js, a module system for javascript, include the
js files. This loads "main.js", which in turn can load other
files, all handled by require.js:
http://requirejs.org/docs/api.html#jsfiles -->
<script type="text/javascript"
data-main="js/init.js"
src="js/lib/require.js"></script>
</body>
</html> </html>