{"id":5615,"date":"2012-06-12T18:07:45","date_gmt":"2012-06-12T17:07:45","guid":{"rendered":"http:\/\/blog.widmann.org.uk\/?p=5615"},"modified":"2012-06-12T18:07:45","modified_gmt":"2012-06-12T17:07:45","slug":"html5-metric-clock","status":"publish","type":"post","link":"https:\/\/widmanniana.org\/blog\/html5-metric-clock\/","title":{"rendered":"HTML5 metric clock"},"content":{"rendered":"<p>Three years ago, I <a href=\"https:\/\/widmanniana.org\/blog\/2009\/05\/22\/1281\/\">added a metric clock<\/a> to this blog, but I later redesigned the whole site and the clock got lost.<\/p>\n<p>In the meantime, HTML5 has been getting more and more widespread, so I think it&#8217;s now time for an HTML5 metric (or decimal) clock:<\/p>\n<div style=\"margin:0px auto;width:300px\"><canvas id=\"metricclock\" width=\"300\" height=\"350\">Your browser is not capable of displaying an HTML canvas. \ud83d\ude41<\/canvas><\/div>\n<p><script type=\"application\/x-javascript\">\ndraw();\nfunction draw(){var a=document.getElementById(\"metricclock\");if(a.getContext){a=a.getContext(\"2d\");a.clearRect(0,0,300,300);var b=a.createLinearGradient(0,0,300,300);b.addColorStop(0,\"#30D840\");b.addColorStop(1,\"#108020\");var d=a.createLinearGradient(0,0,300,300);d.addColorStop(0,\"#108020\");d.addColorStop(1,\"#30D840\");a.font=\"Bold 20px Arial\";a.textBaseline=\"middle\";a.textAlign=\"center\";a.lineWidth=1;a.save();a.strokeStyle=b;a.lineWidth=10;a.beginPath();a.arc(150,150,138,0,2*Math.PI,!0);a.shadowOffsetX=\n4;a.shadowOffsetY=4;a.shadowColor=\"rgba(0,0,0,0.6)\";a.shadowBlur=6;a.stroke();a.restore();a.strokeStyle=d;a.lineWidth=10;a.beginPath();a.arc(150,150,129,0,2*Math.PI,!0);a.stroke();a.strokeStyle=\"#222\";a.save();a.translate(150,150);for(i=0;100>i;i++)ang=Math.PI\/50*i,sang=Math.sin(ang),cang=Math.cos(ang),0==i%10?(a.lineWidth=6,sx=95*sang,sy=-95*cang,ex=120*sang,ey=-120*cang,nx=80*sang,ny=-80*cang,a.fillText(i\/10,nx,ny)):(0==i%5?(a.lineWidth=4,sx=100*sang,sy=100*cang):(a.lineWidth=2,sx=110*sang,sy=110*\ncang),ex=120*sang,ey=120*cang),a.beginPath(),a.moveTo(sx,sy),a.lineTo(ex,ey),a.stroke();var b=new Date,d=b.getHours(),e=b.getMinutes(),f=b.getSeconds(),c=b.getMilliseconds(),f=60*(60*d+e)+f+c\/1E3,c=f\/86400,d=Math.floor(10*c),e=Math.floor(1E3*(c-d\/10)),c=Math.floor(1E5*(c-d\/10-e\/1E3)),b=Math.floor((Math.floor(b.getTime()\/1E3)-f)\/86400)+64749,b=b.toString(),b=b.substring(0,2)+\"'\"+b.substring(2,3)+\"'\"+b.substring(3);a.strokeStyle=\"#000\";a.lineWidth=1;a.clearRect(-80,150,160,27);a.strokeRect(-80,150,\n160,27);a.fillText(b+\".\"+d+\"'\"+(10>e?\"0\":\"\")+e+\"'\"+(10>c?\"0\":\"\")+c,0,165);a.lineWidth=6;a.save();a.rotate(Math.PI\/5*(d+e\/100+c\/1E4));a.beginPath();a.moveTo(0,10);a.lineTo(0,-60);a.stroke();a.restore();a.save();a.rotate(Math.PI\/50*(e+c\/100));a.beginPath();a.moveTo(0,20);a.lineTo(0,-110);a.stroke();a.restore();a.save();a.rotate(Math.PI\/50*c);a.strokeStyle=\"#E33\";a.beginPath();a.moveTo(0,20);a.lineTo(0,-110);a.stroke();a.restore();a.restore();setTimeout(draw,864)}};\n<\/script><\/p>\n<p>(Based on an <a href=\"http:\/\/www.neilwallis.com\/projects\/html5\/clock\/index.php\">ordinary HTML5 clock<\/a>.)<\/p>\n<p>Just in case any readers might have forgotten my definition of metric time and dates, here&#8217;s an edited version of <a href=\"https:\/\/widmanniana.org\/blog\/2007\/09\/20\/473\/\">what I wrote<\/a> nearly five years ago:<\/p>\n<p>I think the basic unit should be the day, so that we get some nice units such as deciday (slight less than 2.5 hours), centiday (almost 15 minutes) and milliday (almost a minute and a half). Just a shame there\u2019s no SI prefix for 1\/100,000, because this fraction of a day is the closest one would get to a second (0.864s, to be precise). I guess people would just say \u201csecond\u201d in everyday speech and mean 10\u00b5day, just as \u201cminute\u201d would be a sloppy way of saying milliday.<\/p>\n<p>Looking at longer time scales, the decaday could replace the week, the hectoday the month, and the kiloday the year. It would of course have the slight drawback that holidays wouldn\u2019t fall on the same point in each kiloday (because it wouldn\u2019t be aligned with the solar year), but moslems already have a similar problem with their calendar, so I\u2019m sure we\u2019d get used to that quickly. A ten-day week would lead to different working patterns, I guess \u2013 seven days at work and a three-day weekend, perhaps?<\/p>\n<p>To honour the people who introduced the metric system in the first place, I think kilodays should be counted from the start of the French revolution, that is, day 0 would be 22nd September 1792. That would make today (12\/06\/12) day 80,251 (kday 80, hectoday 2, decaday 5, day 1).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Three years ago, I added a metric clock to this blog, but I later redesigned the whole site and the clock got lost. In the meantime, HTML5 has been getting more and more widespread, so I think it&#8217;s now time for an HTML5 metric (or decimal) clock: Your browser is not capable of displaying an HTML canvas. \ud83d\ude41 (Based on an ordinary HTML5 clock.) Just in case any readers might have forgotten my definition of metric time and dates, here&#8217;s an edited version of what I wrote [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[159,114,137,152],"tags":[],"class_list":["post-5615","post","type-post","status-publish","format-standard","hentry","category-en","category-computing","category-science","category-work"],"_links":{"self":[{"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/posts\/5615","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/comments?post=5615"}],"version-history":[{"count":1,"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/posts\/5615\/revisions"}],"predecessor-version":[{"id":13761,"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/posts\/5615\/revisions\/13761"}],"wp:attachment":[{"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/media?parent=5615"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/categories?post=5615"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/widmanniana.org\/blog\/wp-json\/wp\/v2\/tags?post=5615"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}