| rev |
line source |
|
paulo@62
|
1 <!DOCTYPE html>
|
|
paulo@62
|
2 <meta charset="utf-8">
|
|
paulo@62
|
3
|
|
paulo@62
|
4
|
|
paulo@62
|
5 <style>
|
|
paulo@62
|
6
|
|
paulo@62
|
7 body {
|
|
paulo@62
|
8 background-color: #FFF;
|
|
paulo@62
|
9 }
|
|
paulo@62
|
10
|
|
paulo@62
|
11 text.digital {
|
|
paulo@62
|
12 font-family: sans-serif;
|
|
paulo@62
|
13 fill: #777;
|
|
paulo@62
|
14 }
|
|
paulo@62
|
15
|
|
paulo@62
|
16 .analog.seconds {
|
|
paulo@62
|
17 fill: #CCC;
|
|
paulo@62
|
18 }
|
|
paulo@62
|
19
|
|
paulo@62
|
20 .analog.minutes {
|
|
paulo@62
|
21 fill: #AAA;
|
|
paulo@62
|
22 }
|
|
paulo@62
|
23
|
|
paulo@62
|
24 .analog.hours {
|
|
paulo@62
|
25 fill: #999;
|
|
paulo@62
|
26 }
|
|
paulo@62
|
27
|
|
paulo@62
|
28 .analog.past {
|
|
paulo@62
|
29 fill: #EEE;
|
|
paulo@62
|
30 }
|
|
paulo@62
|
31
|
|
paulo@62
|
32 </style>
|
|
paulo@62
|
33
|
|
paulo@62
|
34
|
|
paulo@62
|
35 <script src="d3.min.js"></script>
|
|
paulo@62
|
36
|
|
paulo@62
|
37
|
|
paulo@62
|
38 <svg></svg>
|
|
paulo@62
|
39
|
|
paulo@62
|
40
|
|
paulo@62
|
41 <script>
|
|
paulo@62
|
42
|
|
paulo@62
|
43 var TAU = 2*Math.PI;
|
|
paulo@63
|
44 var margin = {top: 10, right: 5, bottom: 5, left: 10};
|
|
paulo@62
|
45
|
|
paulo@62
|
46 var minutes_seconds_scale = d3.scale.linear()
|
|
paulo@62
|
47 .domain([0, 60])
|
|
paulo@62
|
48 .range([0, TAU]);
|
|
paulo@62
|
49
|
|
paulo@62
|
50 var hours_scale = d3.scale.linear()
|
|
paulo@62
|
51 .domain([0, 24])
|
|
paulo@62
|
52 .range([0, TAU]);
|
|
paulo@62
|
53
|
|
paulo@62
|
54 var tf = function(x) { return d3.format("02d")(Math.floor(x)) };
|
|
paulo@62
|
55
|
|
paulo@62
|
56 var render = function() {
|
|
paulo@62
|
57 var ct = new Date();
|
|
paulo@62
|
58 var milliseconds = ct.getMilliseconds();
|
|
paulo@62
|
59 var seconds = ct.getSeconds() + (milliseconds/1000.0);
|
|
paulo@62
|
60 var minutes = ct.getMinutes() + (seconds/60.0);
|
|
paulo@62
|
61 var hours = ct.getHours() + (minutes/60.0);
|
|
paulo@62
|
62
|
|
paulo@63
|
63 var svg_width = window.innerWidth - 20;
|
|
paulo@63
|
64 var svg_height = window.innerHeight - 20;
|
|
paulo@63
|
65 var c_x = (svg_width - margin.left - margin.right)/2;
|
|
paulo@63
|
66 var c_y = (svg_height - margin.top - margin.bottom)/2;
|
|
paulo@63
|
67 var r = Math.min(c_x, c_y);
|
|
paulo@62
|
68
|
|
paulo@62
|
69 var or_seconds = r;
|
|
paulo@62
|
70 var ir_seconds = r*0.75;
|
|
paulo@62
|
71
|
|
paulo@62
|
72 var or_minutes = r*0.7;
|
|
paulo@62
|
73 var ir_minutes = r*0.45;
|
|
paulo@62
|
74
|
|
paulo@62
|
75 var or_hours = r*0.4;
|
|
paulo@62
|
76 var ir_hours = r*0.15;
|
|
paulo@62
|
77
|
|
paulo@62
|
78 var digital_text_scale = 0.75;
|
|
paulo@62
|
79
|
|
paulo@62
|
80 var svg = d3.select("svg")
|
|
paulo@63
|
81 .attr("width", svg_width)
|
|
paulo@63
|
82 .attr("height", svg_height);
|
|
paulo@62
|
83
|
|
paulo@65
|
84 svg = svg.selectAll("g").data([[margin.left, margin.top]]);
|
|
paulo@65
|
85 svg.enter().append("g");
|
|
paulo@65
|
86 svg.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
|
|
paulo@62
|
87
|
|
paulo@65
|
88 // DEBUG
|
|
paulo@65
|
89 //var ts = svg.selectAll("text").data([ct]);
|
|
paulo@65
|
90 //ts.enter().append("text")
|
|
paulo@65
|
91 //ts.text(function(d) { return d3.time.format("%X")(d); });
|
|
paulo@62
|
92
|
|
paulo@65
|
93 var c = svg.selectAll("g").data([[c_x, c_y]]);
|
|
paulo@65
|
94 c.enter().append("g");
|
|
paulo@65
|
95 c.attr("transform", function(d) { return "translate(" + d[0] + "," + d[1] + ")"; });
|
|
paulo@62
|
96
|
|
paulo@65
|
97 var cp = c.selectAll("path").data([
|
|
paulo@65
|
98 // class, outer radius, inner radius, start angle, end angle
|
|
paulo@65
|
99 [ "analog seconds", or_seconds, ir_seconds, 0, minutes_seconds_scale(seconds) ],
|
|
paulo@65
|
100 [ "analog seconds past", or_seconds, ir_seconds, minutes_seconds_scale(seconds), TAU ],
|
|
paulo@65
|
101 [ "analog minutes", or_minutes, ir_minutes, 0, minutes_seconds_scale(minutes) ],
|
|
paulo@65
|
102 [ "analog minutes past", or_minutes, ir_minutes, minutes_seconds_scale(minutes), TAU ],
|
|
paulo@65
|
103 [ "analog hours", or_hours, ir_hours, 0, hours_scale(hours) ],
|
|
paulo@65
|
104 [ "analog hours past", or_hours, ir_hours, hours_scale(hours), TAU ],
|
|
paulo@65
|
105 ]);
|
|
paulo@65
|
106 cp.enter().append("path")
|
|
paulo@65
|
107 .attr("class", function(d) { return d[0]; });
|
|
paulo@65
|
108 cp
|
|
paulo@65
|
109 .attr("d", d3.svg.arc()
|
|
paulo@65
|
110 .outerRadius(function(d) { return d[1]; })
|
|
paulo@65
|
111 .innerRadius(function(d) { return d[2]; })
|
|
paulo@65
|
112 .startAngle(function(d) { return d[3]; })
|
|
paulo@65
|
113 .endAngle(function(d) { return d[4]; })
|
|
paulo@65
|
114 );
|
|
paulo@62
|
115
|
|
paulo@65
|
116 var ctxt = c.selectAll("text").data([
|
|
paulo@65
|
117 // class, x, size, val
|
|
paulo@65
|
118 [ "digital seconds", ir_seconds, or_seconds - ir_seconds, seconds ],
|
|
paulo@65
|
119 [ "digital minutes", ir_minutes, or_minutes - ir_minutes, minutes ],
|
|
paulo@65
|
120 [ "digital hours", ir_hours, or_hours - ir_hours, hours ],
|
|
paulo@65
|
121 ]);
|
|
paulo@65
|
122 ctxt.enter().append("text")
|
|
paulo@65
|
123 .attr("class", function(d) { return d[0]; })
|
|
paulo@65
|
124 ctxt
|
|
paulo@65
|
125 .attr("x", function(d) { return d[1]; })
|
|
paulo@65
|
126 .attr("y", function(d) { return d[2]*digital_text_scale/3.0; })
|
|
paulo@65
|
127 .attr("font-size", function(d) { return d[2]*digital_text_scale + "px"; })
|
|
paulo@65
|
128 .text(function(d) { return tf(d[3]); });
|
|
paulo@62
|
129
|
|
paulo@62
|
130 }
|
|
paulo@62
|
131
|
|
paulo@62
|
132 window.setInterval(render, 1000);
|
|
paulo@62
|
133
|
|
paulo@62
|
134
|
|
paulo@62
|
135 </script>
|
