Mercurial > hg > index.fcgi > www > www-1

view clock/index.html @ 62:a1b1713cbda2

find changesets by author, revision, files, or words in the commit message
add clock (initial version)
author paulo
date Thu, 21 Aug 2014 00:18:52 -0700
parents
children 1913f36338b4
line source
1 <!DOCTYPE html>
2 <meta charset="utf-8">
3
4
5 <style>
6
7 body {
8 background-color: #FFF;
9 }
10
11 text.digital {
12 font-family: sans-serif;
13 fill: #777;
14 }
15
16 .analog.seconds {
17 fill: #CCC;
18 }
19
20 .analog.minutes {
21 fill: #AAA;
22 }
23
24 .analog.hours {
25 fill: #999;
26 }
27
28 .analog.past {
29 fill: #EEE;
30 }
31
32 </style>
33
34
35 <script src="d3.min.js"></script>
36
37
38 <svg></svg>
39
40
41 <script>
42
43 var TAU = 2*Math.PI;
44 var margin = 10;
45
46 var minutes_seconds_scale = d3.scale.linear()
47 .domain([0, 60])
48 .range([0, TAU]);
49
50 var hours_scale = d3.scale.linear()
51 .domain([0, 24])
52 .range([0, TAU]);
53
54 var tf = function(x) { return d3.format("02d")(Math.floor(x)) };
55
56 var render = function() {
57 var ct = new Date();
58 var milliseconds = ct.getMilliseconds();
59 var seconds = ct.getSeconds() + (milliseconds/1000.0);
60 var minutes = ct.getMinutes() + (seconds/60.0);
61 var hours = ct.getHours() + (minutes/60.0);
62
63 var r = (Math.min(window.innerWidth, window.innerHeight)/2) - margin;
64
65 var or_seconds = r;
66 var ir_seconds = r*0.75;
67
68 var or_minutes = r*0.7;
69 var ir_minutes = r*0.45;
70
71 var or_hours = r*0.4;
72 var ir_hours = r*0.15;
73
74 var digital_text_scale = 0.75;
75
76 var svg = d3.select("svg")
77 .attr("width", 2*(r + margin))
78 .attr("height", 2*(r + margin));
79
80 svg.selectAll("g").remove();
81
82 svg = svg.append("g")
83 .attr("transform", "translate(" + margin + "," + margin + ")");
84
85 //svg.append("text")
86 // .text(d3.time.format("%X")(ct));
87
88 var c = svg.append("g")
89 .attr("transform", "translate(" + r + "," + r + ")");
90
91 c.append("path")
92 .attr("class", "analog seconds")
93 .attr("d", d3.svg.arc()
94 .outerRadius(or_seconds)
95 .innerRadius(ir_seconds)
96 .startAngle(0)
97 .endAngle(minutes_seconds_scale(seconds))
98 );
99 c.append("path")
100 .attr("class", "analog seconds past")
101 .attr("d", d3.svg.arc()
102 .outerRadius(or_seconds)
103 .innerRadius(ir_seconds)
104 .startAngle(minutes_seconds_scale(seconds))
105 .endAngle(TAU)
106 );
107 c.append("text")
108 .attr("class", "digital")
109 .attr("x", ir_seconds)
110 .attr("font-size", (or_seconds - ir_seconds)*digital_text_scale + "px")
111 .text(tf(seconds));
112
113 c.append("path")
114 .attr("class", "analog minutes")
115 .attr("d", d3.svg.arc()
116 .outerRadius(or_minutes)
117 .innerRadius(ir_minutes)
118 .startAngle(0)
119 .endAngle(minutes_seconds_scale(minutes))
120 );
121 c.append("path")
122 .attr("class", "analog minutes past")
123 .attr("d", d3.svg.arc()
124 .outerRadius(or_minutes)
125 .innerRadius(ir_minutes)
126 .startAngle(minutes_seconds_scale(minutes))
127 .endAngle(TAU)
128 );
129 c.append("text")
130 .attr("class", "digital")
131 .attr("x", ir_minutes)
132 .attr("font-size", (or_minutes - ir_minutes)*digital_text_scale + "px")
133 .text(tf(minutes));
134
135 c.append("path")
136 .attr("class", "analog hours")
137 .attr("d", d3.svg.arc()
138 .outerRadius(or_hours)
139 .innerRadius(ir_hours)
140 .startAngle(0)
141 .endAngle(hours_scale(hours))
142 );
143 c.append("path")
144 .attr("class", "analog hours past")
145 .attr("d", d3.svg.arc()
146 .outerRadius(or_hours)
147 .innerRadius(ir_hours)
148 .startAngle(hours_scale(hours))
149 .endAngle(TAU)
150 );
151 c.append("text")
152 .attr("class", "digital")
153 .attr("x", ir_hours)
154 .attr("font-size", (or_hours - ir_hours)*digital_text_scale + "px")
155 .text(tf(hours));
156
157
158 }
159
160 window.setInterval(render, 1000);
161
162
163 </script>