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

annotate clock/index.html @ 107:24a967efbf3e

find changesets by author, revision, files, or words in the commit message
add dmd
author paulo
date Fri, 03 Apr 2020 23:58:24 -0700
parents 1913f36338b4
children
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>