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

view clock/index.html @ 63:1913f36338b4

find changesets by author, revision, files, or words in the commit message
center clock circle and digital text
author paulo
date Thu, 21 Aug 2014 01:33:14 -0700
parents a1b1713cbda2
children e3bbdec7e12a
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 = {top: 10, right: 5, bottom: 5, left: 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 svg_width = window.innerWidth - 20;
64 var svg_height = window.innerHeight - 20;
65 var c_x = (svg_width - margin.left - margin.right)/2;
66 var c_y = (svg_height - margin.top - margin.bottom)/2;
67 var r = Math.min(c_x, c_y);
68
69 var or_seconds = r;
70 var ir_seconds = r*0.75;
71
72 var or_minutes = r*0.7;
73 var ir_minutes = r*0.45;
74
75 var or_hours = r*0.4;
76 var ir_hours = r*0.15;
77
78 var digital_text_scale = 0.75;
79
80 var svg = d3.select("svg")
81 .attr("width", svg_width)
82 .attr("height", svg_height);
83
84 svg.selectAll("g").remove();
85
86 svg = svg.append("g")
87 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
88
89 //svg.append("text")
90 // .text(d3.time.format("%X")(ct));
91
92 var c = svg.append("g")
93 .attr("transform", "translate(" + c_x + "," + c_y + ")");
94
95 c.append("path")
96 .attr("class", "analog seconds")
97 .attr("d", d3.svg.arc()
98 .outerRadius(or_seconds)
99 .innerRadius(ir_seconds)
100 .startAngle(0)
101 .endAngle(minutes_seconds_scale(seconds))
102 );
103 c.append("path")
104 .attr("class", "analog seconds past")
105 .attr("d", d3.svg.arc()
106 .outerRadius(or_seconds)
107 .innerRadius(ir_seconds)
108 .startAngle(minutes_seconds_scale(seconds))
109 .endAngle(TAU)
110 );
111 var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
112 var dt_y_seconds = dt_sz_seconds/3;
113 c.append("text")
114 .attr("class", "digital seconds")
115 .attr("x", ir_seconds)
116 .attr("y", dt_y_seconds)
117 .attr("font-size", dt_sz_seconds + "px")
118 .text(tf(seconds));
119
120 c.append("path")
121 .attr("class", "analog minutes")
122 .attr("d", d3.svg.arc()
123 .outerRadius(or_minutes)
124 .innerRadius(ir_minutes)
125 .startAngle(0)
126 .endAngle(minutes_seconds_scale(minutes))
127 );
128 c.append("path")
129 .attr("class", "analog minutes past")
130 .attr("d", d3.svg.arc()
131 .outerRadius(or_minutes)
132 .innerRadius(ir_minutes)
133 .startAngle(minutes_seconds_scale(minutes))
134 .endAngle(TAU)
135 );
136 var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
137 var dt_y_minutes = dt_sz_minutes/3;
138 c.append("text")
139 .attr("class", "digital hours")
140 .attr("x", ir_minutes)
141 .attr("y", dt_y_minutes)
142 .attr("font-size", dt_sz_minutes + "px")
143 .text(tf(minutes));
144
145 c.append("path")
146 .attr("class", "analog hours")
147 .attr("d", d3.svg.arc()
148 .outerRadius(or_hours)
149 .innerRadius(ir_hours)
150 .startAngle(0)
151 .endAngle(hours_scale(hours))
152 );
153 c.append("path")
154 .attr("class", "analog hours past")
155 .attr("d", d3.svg.arc()
156 .outerRadius(or_hours)
157 .innerRadius(ir_hours)
158 .startAngle(hours_scale(hours))
159 .endAngle(TAU)
160 );
161 var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
162 var dt_y_hours = dt_sz_hours/3;
163 c.append("text")
164 .attr("class", "digital hours")
165 .attr("x", ir_hours)
166 .attr("y", dt_y_hours)
167 .attr("font-size", dt_sz_hours + "px")
168 .text(tf(hours));
169
170
171 }
172
173 window.setInterval(render, 1000);
174
175
176 </script>