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

comparison 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
comparison
equal deleted inserted replaced
0:bf15b89851e1 1:cd27b79952e2
39 39
40 40
41 <script> 41 <script>
42 42
43 var TAU = 2*Math.PI; 43 var TAU = 2*Math.PI;
44 var margin = 10; 44 var margin = {top: 10, right: 5, bottom: 5, left: 10};
45 45
46 var minutes_seconds_scale = d3.scale.linear() 46 var minutes_seconds_scale = d3.scale.linear()
47 .domain([0, 60]) 47 .domain([0, 60])
48 .range([0, TAU]); 48 .range([0, TAU]);
49 49
58 var milliseconds = ct.getMilliseconds(); 58 var milliseconds = ct.getMilliseconds();
59 var seconds = ct.getSeconds() + (milliseconds/1000.0); 59 var seconds = ct.getSeconds() + (milliseconds/1000.0);
60 var minutes = ct.getMinutes() + (seconds/60.0); 60 var minutes = ct.getMinutes() + (seconds/60.0);
61 var hours = ct.getHours() + (minutes/60.0); 61 var hours = ct.getHours() + (minutes/60.0);
62 62
63 var r = (Math.min(window.innerWidth, window.innerHeight)/2) - margin; 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);
64 68
65 var or_seconds = r; 69 var or_seconds = r;
66 var ir_seconds = r*0.75; 70 var ir_seconds = r*0.75;
67 71
68 var or_minutes = r*0.7; 72 var or_minutes = r*0.7;
72 var ir_hours = r*0.15; 76 var ir_hours = r*0.15;
73 77
74 var digital_text_scale = 0.75; 78 var digital_text_scale = 0.75;
75 79
76 var svg = d3.select("svg") 80 var svg = d3.select("svg")
77 .attr("width", 2*(r + margin)) 81 .attr("width", svg_width)
78 .attr("height", 2*(r + margin)); 82 .attr("height", svg_height);
79 83
80 svg.selectAll("g").remove(); 84 svg.selectAll("g").remove();
81 85
82 svg = svg.append("g") 86 svg = svg.append("g")
83 .attr("transform", "translate(" + margin + "," + margin + ")"); 87 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
84 88
85 //svg.append("text") 89 //svg.append("text")
86 // .text(d3.time.format("%X")(ct)); 90 // .text(d3.time.format("%X")(ct));
87 91
88 var c = svg.append("g") 92 var c = svg.append("g")
89 .attr("transform", "translate(" + r + "," + r + ")"); 93 .attr("transform", "translate(" + c_x + "," + c_y + ")");
90 94
91 c.append("path") 95 c.append("path")
92 .attr("class", "analog seconds") 96 .attr("class", "analog seconds")
93 .attr("d", d3.svg.arc() 97 .attr("d", d3.svg.arc()
94 .outerRadius(or_seconds) 98 .outerRadius(or_seconds)
102 .outerRadius(or_seconds) 106 .outerRadius(or_seconds)
103 .innerRadius(ir_seconds) 107 .innerRadius(ir_seconds)
104 .startAngle(minutes_seconds_scale(seconds)) 108 .startAngle(minutes_seconds_scale(seconds))
105 .endAngle(TAU) 109 .endAngle(TAU)
106 ); 110 );
111 var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
112 var dt_y_seconds = dt_sz_seconds/3;
107 c.append("text") 113 c.append("text")
108 .attr("class", "digital") 114 .attr("class", "digital seconds")
109 .attr("x", ir_seconds) 115 .attr("x", ir_seconds)
110 .attr("font-size", (or_seconds - ir_seconds)*digital_text_scale + "px") 116 .attr("y", dt_y_seconds)
117 .attr("font-size", dt_sz_seconds + "px")
111 .text(tf(seconds)); 118 .text(tf(seconds));
112 119
113 c.append("path") 120 c.append("path")
114 .attr("class", "analog minutes") 121 .attr("class", "analog minutes")
115 .attr("d", d3.svg.arc() 122 .attr("d", d3.svg.arc()
124 .outerRadius(or_minutes) 131 .outerRadius(or_minutes)
125 .innerRadius(ir_minutes) 132 .innerRadius(ir_minutes)
126 .startAngle(minutes_seconds_scale(minutes)) 133 .startAngle(minutes_seconds_scale(minutes))
127 .endAngle(TAU) 134 .endAngle(TAU)
128 ); 135 );
136 var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
137 var dt_y_minutes = dt_sz_minutes/3;
129 c.append("text") 138 c.append("text")
130 .attr("class", "digital") 139 .attr("class", "digital hours")
131 .attr("x", ir_minutes) 140 .attr("x", ir_minutes)
132 .attr("font-size", (or_minutes - ir_minutes)*digital_text_scale + "px") 141 .attr("y", dt_y_minutes)
142 .attr("font-size", dt_sz_minutes + "px")
133 .text(tf(minutes)); 143 .text(tf(minutes));
134 144
135 c.append("path") 145 c.append("path")
136 .attr("class", "analog hours") 146 .attr("class", "analog hours")
137 .attr("d", d3.svg.arc() 147 .attr("d", d3.svg.arc()
146 .outerRadius(or_hours) 156 .outerRadius(or_hours)
147 .innerRadius(ir_hours) 157 .innerRadius(ir_hours)
148 .startAngle(hours_scale(hours)) 158 .startAngle(hours_scale(hours))
149 .endAngle(TAU) 159 .endAngle(TAU)
150 ); 160 );
161 var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
162 var dt_y_hours = dt_sz_hours/3;
151 c.append("text") 163 c.append("text")
152 .attr("class", "digital") 164 .attr("class", "digital hours")
153 .attr("x", ir_hours) 165 .attr("x", ir_hours)
154 .attr("font-size", (or_hours - ir_hours)*digital_text_scale + "px") 166 .attr("y", dt_y_hours)
167 .attr("font-size", dt_sz_hours + "px")
155 .text(tf(hours)); 168 .text(tf(hours));
156 169
157 170
158 } 171 }
159 172