Skip to content

Commit 69ba8fe

Browse files
avitalavital
committed
Minor stylistic changes to the clock example.
1 parent f21e63b commit 69ba8fe

5 files changed

Lines changed: 70 additions & 70 deletions

File tree

‎examples/clock/client/clock.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<head>
2+
<title>SVG Clock Demo</title>
3+
</head>
4+
5+
<body>
6+
<svg xmlns="http://www.w3.org/2000/svg"
7+
width="400" height="400"
8+
viewBox="-110 -110 220 220">
9+
10+
<!-- bounding circle -->
11+
<circle style="stroke: black; fill: #eee;"
12+
cx="0" cy="0" r="100"/>
13+
14+
<!-- hour, minute and second hands -->
15+
{{#with handData}}
16+
<line {{radial hourDegrees 0 .55}}
17+
style="stroke-width: 6px;
18+
stroke: green;" />
19+
<line {{radial minuteDegrees 0 .85}}
20+
style="stroke-width: 4px;
21+
stroke: blue;" />
22+
<line {{radial secondDegrees 0 .95}}
23+
style="stroke-width: 2px;
24+
stroke: red;" />
25+
{{/with}}
26+
27+
<!-- tick marks -->
28+
{{#each hours}}
29+
<line {{radial degrees 0.9 1}}
30+
style="stroke-width: 3px;
31+
stroke: black;" />
32+
{{/each}}
33+
</svg>
34+
</body>
35+
36+
<!-- Adapted from David Basoko's SVG clock demo -->
37+

‎examples/clock/client/clock.js‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
Meteor.setInterval(function () {
2+
Session.set('time', new Date);
3+
}, 1000);
4+
5+
UI.body.helpers({
6+
7+
hours: _.range(0, 12),
8+
9+
degrees: function () {
10+
return 30 * this;
11+
},
12+
13+
handData: function () {
14+
var time = Session.get('time') || new Date;
15+
return { hourDegrees: time.getHours() * 30,
16+
minuteDegrees: time.getMinutes() * 6,
17+
secondDegrees: time.getSeconds() * 6 };
18+
},
19+
20+
radial: function (angleDegrees,
21+
startFraction,
22+
endFraction) {
23+
var r = 100;
24+
var radians = (angleDegrees-90) / 180 * Math.PI;
25+
26+
return {
27+
x1: r * startFraction * Math.cos(radians),
28+
y1: r * startFraction * Math.sin(radians),
29+
x2: r * endFraction * Math.cos(radians),
30+
y2: r * endFraction * Math.sin(radians)
31+
};
32+
}
33+
});

‎examples/clock/clock.css‎

Lines changed: 0 additions & 6 deletions
This file was deleted.

‎examples/clock/clock.html‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

‎examples/clock/clock.js‎

Lines changed: 0 additions & 34 deletions
This file was deleted.

0 commit comments

Comments
 (0)