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

view clock/index.html @ 65:e3bbdec7e12a

find changesets by author, revision, files, or words in the commit message
refactor clock to use d3 style routines
author paulo
date Wed, 01 Oct 2014 00:30:36 -0700
parents 1913f36338b4
children
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 = svg.selectAll("g").data([[margin.left, margin.top]]);
85 svg.enter().append("g");
86 svg.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
87
88 // DEBUG
89 //var ts = svg.selectAll("text").data([ct]);
90 //ts.enter().append("text")
91 //ts.text(function(d) { return d3.time.format("%X")(d); });
92
93 var c = svg.selectAll("g").data([[c_x, c_y]]);
94 c.enter().append("g");
95 c.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
96
97 var cp = c.selectAll("path").data([
98 // class, outer radius, inner radius, start angle, end angle
99 [ "analog seconds", or_seconds, ir_seconds, 0, minutes_seconds_scale(seconds) ],
100 [ "analog seconds past", or_seconds, ir_seconds, minutes_seconds_scale(seconds), TAU ],
101 [ "analog minutes", or_minutes, ir_minutes, 0, minutes_seconds_scale(minutes) ],
102 [ "analog minutes past", or_minutes, ir_minutes, minutes_seconds_scale(minutes), TAU ],
103 [ "analog hours", or_hours, ir_hours, 0, hours_scale(hours) ],
104 [ "analog hours past", or_hours, ir_hours, hours_scale(hours), TAU ],
105 ]);
106 cp.enter().append("path")
107 .attr("class", function(d) { return d[0]; });
108 cp
109 .attr("d", d3.svg.arc()
110 .outerRadius(function(d) { return d[1]; })
111 .innerRadius(function(d) { return d[2]; })
112 .startAngle(function(d) { return d[3]; })
113 .endAngle(function(d) { return d[4]; })
114 );
115
116 var ctxt = c.selectAll("text").data([
117 // class, x, size, val
118 [ "digital seconds", ir_seconds, or_seconds - ir_seconds, seconds ],
119 [ "digital minutes", ir_minutes, or_minutes - ir_minutes, minutes ],
120 [ "digital hours", ir_hours, or_hours - ir_hours, hours ],
121 ]);
122 ctxt.enter().append("text")
123 .attr("class", function(d) { return d[0]; })
124 ctxt
125 .attr("x", function(d) { return d[1]; })
126 .attr("y", function(d) { return d[2]*digital_text_scale/3.0; })
127 .attr("font-size", function(d) { return d[2]*digital_text_scale + "px"; })
128 .text(function(d) { return tf(d[3]); });
129
130 }
131
132 window.setInterval(render, 1000);
133
134
135 </script>