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

annotate 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
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@62 84 svg.selectAll("g").remove();
paulo@62 85
paulo@62 86 svg = svg.append("g")
paulo@63 87 .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
paulo@62 88
paulo@62 89 //svg.append("text")
paulo@62 90 // .text(d3.time.format("%X")(ct));
paulo@62 91
paulo@62 92 var c = svg.append("g")
paulo@63 93 .attr("transform", "translate(" + c_x + "," + c_y + ")");
paulo@62 94
paulo@62 95 c.append("path")
paulo@62 96 .attr("class", "analog seconds")
paulo@62 97 .attr("d", d3.svg.arc()
paulo@62 98 .outerRadius(or_seconds)
paulo@62 99 .innerRadius(ir_seconds)
paulo@62 100 .startAngle(0)
paulo@62 101 .endAngle(minutes_seconds_scale(seconds))
paulo@62 102 );
paulo@62 103 c.append("path")
paulo@62 104 .attr("class", "analog seconds past")
paulo@62 105 .attr("d", d3.svg.arc()
paulo@62 106 .outerRadius(or_seconds)
paulo@62 107 .innerRadius(ir_seconds)
paulo@62 108 .startAngle(minutes_seconds_scale(seconds))
paulo@62 109 .endAngle(TAU)
paulo@62 110 );
paulo@63 111 var dt_sz_seconds = (or_seconds - ir_seconds)*digital_text_scale;
paulo@63 112 var dt_y_seconds = dt_sz_seconds/3;
paulo@62 113 c.append("text")
paulo@63 114 .attr("class", "digital seconds")
paulo@62 115 .attr("x", ir_seconds)
paulo@63 116 .attr("y", dt_y_seconds)
paulo@63 117 .attr("font-size", dt_sz_seconds + "px")
paulo@62 118 .text(tf(seconds));
paulo@62 119
paulo@62 120 c.append("path")
paulo@62 121 .attr("class", "analog minutes")
paulo@62 122 .attr("d", d3.svg.arc()
paulo@62 123 .outerRadius(or_minutes)
paulo@62 124 .innerRadius(ir_minutes)
paulo@62 125 .startAngle(0)
paulo@62 126 .endAngle(minutes_seconds_scale(minutes))
paulo@62 127 );
paulo@62 128 c.append("path")
paulo@62 129 .attr("class", "analog minutes past")
paulo@62 130 .attr("d", d3.svg.arc()
paulo@62 131 .outerRadius(or_minutes)
paulo@62 132 .innerRadius(ir_minutes)
paulo@62 133 .startAngle(minutes_seconds_scale(minutes))
paulo@62 134 .endAngle(TAU)
paulo@62 135 );
paulo@63 136 var dt_sz_minutes = (or_minutes - ir_minutes)*digital_text_scale;
paulo@63 137 var dt_y_minutes = dt_sz_minutes/3;
paulo@62 138 c.append("text")
paulo@63 139 .attr("class", "digital hours")
paulo@62 140 .attr("x", ir_minutes)
paulo@63 141 .attr("y", dt_y_minutes)
paulo@63 142 .attr("font-size", dt_sz_minutes + "px")
paulo@62 143 .text(tf(minutes));
paulo@62 144
paulo@62 145 c.append("path")
paulo@62 146 .attr("class", "analog hours")
paulo@62 147 .attr("d", d3.svg.arc()
paulo@62 148 .outerRadius(or_hours)
paulo@62 149 .innerRadius(ir_hours)
paulo@62 150 .startAngle(0)
paulo@62 151 .endAngle(hours_scale(hours))
paulo@62 152 );
paulo@62 153 c.append("path")
paulo@62 154 .attr("class", "analog hours past")
paulo@62 155 .attr("d", d3.svg.arc()
paulo@62 156 .outerRadius(or_hours)
paulo@62 157 .innerRadius(ir_hours)
paulo@62 158 .startAngle(hours_scale(hours))
paulo@62 159 .endAngle(TAU)
paulo@62 160 );
paulo@63 161 var dt_sz_hours = (or_hours - ir_hours)*digital_text_scale;
paulo@63 162 var dt_y_hours = dt_sz_hours/3;
paulo@62 163 c.append("text")
paulo@63 164 .attr("class", "digital hours")
paulo@62 165 .attr("x", ir_hours)
paulo@63 166 .attr("y", dt_y_hours)
paulo@63 167 .attr("font-size", dt_sz_hours + "px")
paulo@62 168 .text(tf(hours));
paulo@62 169
paulo@62 170
paulo@62 171 }
paulo@62 172
paulo@62 173 window.setInterval(render, 1000);
paulo@62 174
paulo@62 175
paulo@62 176 </script>