github/meteor
1
1
Fork 0
mirror of https://github.com/meteor/meteor.git synced 2026-05-02 03:01:46 -04:00
Code Issues Packages Projects Releases Wiki Activity

Minor stylistic changes to the clock example.

Browse Source
This commit is contained in:
Avital Oliver
2014-02-01 10:10:47 -08:00
parent f21e63b495
commit 69ba8feabd
5 changed files with 70 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
examples/clock/client/clock.html Normal file
View File

@@ -0,0 +1,37 @@
<head>
<title>SVG Clock Demo</title>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg"
width="400" height="400"
viewBox="-110 -110 220 220">
<!-- bounding circle -->
<circle style="stroke: black; fill: #eee;"
cx="0" cy="0" r="100"/>
<!-- hour, minute and second hands -->
{{#with handData}}
<line {{radial hourDegrees 0 .55}}
style="stroke-width: 6px;
stroke: green;" />
<line {{radial minuteDegrees 0 .85}}
style="stroke-width: 4px;
stroke: blue;" />
<line {{radial secondDegrees 0 .95}}
style="stroke-width: 2px;
stroke: red;" />
{{/with}}
<!-- tick marks -->
{{#each hours}}
<line {{radial degrees 0.9 1}}
style="stroke-width: 3px;
stroke: black;" />
{{/each}}
</svg>
</body>
<!-- Adapted from David Basoko's SVG clock demo -->

33
examples/clock/client/clock.js Normal file
View File

@@ -0,0 +1,33 @@
Meteor.setInterval(function () {
Session.set('time', new Date);
}, 1000);
UI.body.helpers({
hours: _.range(0, 12),
degrees: function () {
return 30 * this;
},
handData: function () {
var time = Session.get('time') || new Date;
return { hourDegrees: time.getHours() * 30,
minuteDegrees: time.getMinutes() * 6,
secondDegrees: time.getSeconds() * 6 };
},
radial: function (angleDegrees,
startFraction,
endFraction) {
var r = 100;
var radians = (angleDegrees-90) / 180 * Math.PI;
return {
x1: r * startFraction * Math.cos(radians),
y1: r * startFraction * Math.sin(radians),
x2: r * endFraction * Math.cos(radians),
y2: r * endFraction * Math.sin(radians)
};
}
});

6
examples/clock/clock.css
View File

@@ -1,6 +0,0 @@
/* CSS declarations go here */
line {
stroke-width: 3px;
stroke: black;
}

30
examples/clock/clock.html
View File

@@ -1,30 +0,0 @@
<head>
<title>SVG Clock</title>
</head>
<body>
{{> clock}}
</body>
<template name="clock">
<div id="clock">
<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="-110 -110 220 220">
<g>
<circle id="circle" style="stroke: black; fill: #f8f8f8;" cx="0" cy="0" r="100"/>
{{#each hours}}
{{#with hourData}}
<line id="hour{{i}}" {{radial degrees 0.9 1}} />
{{/with}}
{{/each}}
</g>
<g>
{{#with handData}}
<line {{radial hourDegrees 0 0.55}} style="stroke-width: 6px; stroke: green;" id="hourhand"/>
<line {{radial minuteDegrees 0 0.85}} style="stroke-width: 4px; stroke: blue;" id="minutehand"/>
<line {{radial secondDegrees 0 0.95}} style="stroke-width: 2px; stroke: red;" id="secondhand"/>
{{/with}}
</g>
</svg>
</div>
<p>Adapted from David Basoko's <a href="https://github.com/remy/html5demos/blob/master/demos/svg-clock.html">SVG clock demo</a>.</p>
</template>

34
examples/clock/clock.js
View File

@@ -1,34 +0,0 @@
if (Meteor.isClient) {
Meteor.startup(function () {
Meteor.setInterval(function () {
Session.set('time', new Date);
}, 1000);
});
Template.clock.hours = _.range(0, 12);
Template.clock.hourData = function () {
return { i: +this,
degrees: 30*this };
};
Template.clock.handData = function () {
var time = Session.get('time') || new Date;
return { hourDegrees: time.getHours() * 30,
minuteDegrees: time.getMinutes() * 6,
secondDegrees: time.getSeconds() * 6 };
};
Template.clock.radial = function (angleDegrees, startFraction, endFraction) {
var radius = 100;
var radians = (angleDegrees - 90) / 180 * Math.PI;
return {
x1: radius * startFraction * Math.cos(radians),
y1: radius * startFraction * Math.sin(radians),
x2: radius * endFraction * Math.cos(radians),
y2: radius * endFraction * Math.sin(radians)
};
};
}