| 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@62
|
44 var margin = 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@62
|
63 var r = (Math.min(window.innerWidth, window.innerHeight)/2) - margin;
|
|
paulo@62
|
64
|
|
paulo@62
|
65 var or_seconds = r;
|
|
paulo@62
|
66 var ir_seconds = r*0.75;
|
|
paulo@62
|
67
|
|
paulo@62
|
68 var or_minutes = r*0.7;
|
|
paulo@62
|
69 var ir_minutes = r*0.45;
|
|
paulo@62
|
70
|
|
paulo@62
|
71 var or_hours = r*0.4;
|
|
paulo@62
|
72 var ir_hours = r*0.15;
|
|
paulo@62
|
73
|
|
paulo@62
|
74 var digital_text_scale = 0.75;
|
|
paulo@62
|
75
|
|
paulo@62
|
76 var svg = d3.select("svg")
|
|
paulo@62
|
77 .attr("width", 2*(r + margin))
|
|
paulo@62
|
78 .attr("height", 2*(r + margin));
|
|
paulo@62
|
79
|
|
paulo@62
|
80 svg.selectAll("g").remove();
|
|
paulo@62
|
81
|
|
paulo@62
|
82 svg = svg.append("g")
|
|
paulo@62
|
83 .attr("transform", "translate(" + margin + "," + margin + ")");
|
|
paulo@62
|
84
|
|
paulo@62
|
85 //svg.append("text")
|
|
paulo@62
|
86 // .text(d3.time.format("%X")(ct));
|
|
paulo@62
|
87
|
|
paulo@62
|
88 var c = svg.append("g")
|
|
paulo@62
|
89 .attr("transform", "translate(" + r + "," + r + ")");
|
|
paulo@62
|
90
|
|
paulo@62
|
91 c.append("path")
|
|
paulo@62
|
92 .attr("class", "analog seconds")
|
|
paulo@62
|
93 .attr("d", d3.svg.arc()
|
|
paulo@62
|
94 .outerRadius(or_seconds)
|
|
paulo@62
|
95 .innerRadius(ir_seconds)
|
|
paulo@62
|
96 .startAngle(0)
|
|
paulo@62
|
97 .endAngle(minutes_seconds_scale(seconds))
|
|
paulo@62
|
98 );
|
|
paulo@62
|
99 c.append("path")
|
|
paulo@62
|
100 .attr("class", "analog seconds past")
|
|
paulo@62
|
101 .attr("d", d3.svg.arc()
|
|
paulo@62
|
102 .outerRadius(or_seconds)
|
|
paulo@62
|
103 .innerRadius(ir_seconds)
|
|
paulo@62
|
104 .startAngle(minutes_seconds_scale(seconds))
|
|
paulo@62
|
105 .endAngle(TAU)
|
|
paulo@62
|
106 );
|
|
paulo@62
|
107 c.append("text")
|
|
paulo@62
|
108 .attr("class", "digital")
|
|
paulo@62
|
109 .attr("x", ir_seconds)
|
|
paulo@62
|
110 .attr("font-size", (or_seconds - ir_seconds)*digital_text_scale + "px")
|
|
paulo@62
|
111 .text(tf(seconds));
|
|
paulo@62
|
112
|
|
paulo@62
|
113 c.append("path")
|
|
paulo@62
|
114 .attr("class", "analog minutes")
|
|
paulo@62
|
115 .attr("d", d3.svg.arc()
|
|
paulo@62
|
116 .outerRadius(or_minutes)
|
|
paulo@62
|
117 .innerRadius(ir_minutes)
|
|
paulo@62
|
118 .startAngle(0)
|
|
paulo@62
|
119 .endAngle(minutes_seconds_scale(minutes))
|
|
paulo@62
|
120 );
|
|
paulo@62
|
121 c.append("path")
|
|
paulo@62
|
122 .attr("class", "analog minutes past")
|
|
paulo@62
|
123 .attr("d", d3.svg.arc()
|
|
paulo@62
|
124 .outerRadius(or_minutes)
|
|
paulo@62
|
125 .innerRadius(ir_minutes)
|
|
paulo@62
|
126 .startAngle(minutes_seconds_scale(minutes))
|
|
paulo@62
|
127 .endAngle(TAU)
|
|
paulo@62
|
128 );
|
|
paulo@62
|
129 c.append("text")
|
|
paulo@62
|
130 .attr("class", "digital")
|
|
paulo@62
|
131 .attr("x", ir_minutes)
|
|
paulo@62
|
132 .attr("font-size", (or_minutes - ir_minutes)*digital_text_scale + "px")
|
|
paulo@62
|
133 .text(tf(minutes));
|
|
paulo@62
|
134
|
|
paulo@62
|
135 c.append("path")
|
|
paulo@62
|
136 .attr("class", "analog hours")
|
|
paulo@62
|
137 .attr("d", d3.svg.arc()
|
|
paulo@62
|
138 .outerRadius(or_hours)
|
|
paulo@62
|
139 .innerRadius(ir_hours)
|
|
paulo@62
|
140 .startAngle(0)
|
|
paulo@62
|
141 .endAngle(hours_scale(hours))
|
|
paulo@62
|
142 );
|
|
paulo@62
|
143 c.append("path")
|
|
paulo@62
|
144 .attr("class", "analog hours past")
|
|
paulo@62
|
145 .attr("d", d3.svg.arc()
|
|
paulo@62
|
146 .outerRadius(or_hours)
|
|
paulo@62
|
147 .innerRadius(ir_hours)
|
|
paulo@62
|
148 .startAngle(hours_scale(hours))
|
|
paulo@62
|
149 .endAngle(TAU)
|
|
paulo@62
|
150 );
|
|
paulo@62
|
151 c.append("text")
|
|
paulo@62
|
152 .attr("class", "digital")
|
|
paulo@62
|
153 .attr("x", ir_hours)
|
|
paulo@62
|
154 .attr("font-size", (or_hours - ir_hours)*digital_text_scale + "px")
|
|
paulo@62
|
155 .text(tf(hours));
|
|
paulo@62
|
156
|
|
paulo@62
|
157
|
|
paulo@62
|
158 }
|
|
paulo@62
|
159
|
|
paulo@62
|
160 window.setInterval(render, 1000);
|
|
paulo@62
|
161
|
|
paulo@62
|
162
|
|
paulo@62
|
163 </script>
|
