Merge pull request espruino#165 from nikmartin/patch-1

Analog clock updates

apps.json

@@ -133,7 +133,7 @@
   { "id": "aclock",
     "name": "Analog Clock",
     "icon": "clock-analog.png",
-    "version":"0.02",
+    "version":"0.10",
     "description": "An Analog Clock",
     "tags": "clock",
     "type":"clock",

apps/aclock/ChangeLog

@@ -1 +1,7 @@
 0.02: Modified for use with new bootloader and firmware
+0.03: add hour ticks, remove timers
+0.04: add day-date display
+0.07: make date and face bigger
+0.08: make dots bigger and date more readable
+0.09: center date, remove box around it, internal refactor to remove redundant code.
+0.10: remove debug, refactor seconds to show elapsed secs each time app is displayed

apps/aclock/clock-analog.js

@@ -1,94 +1,146 @@
-const p = Math.PI/2;
-const PRad = Math.PI/180;
-
-let intervalRefMin = null;
-let intervalRefSec = null;
-
-let minuteDate = new Date();
-let secondDate = new Date();
-
-function seconds(angle, r) {
-  const a = angle*PRad;
-  const x = 120+Math.sin(a)*r;
-  const y = 120-Math.cos(a)*r;
-  g.fillRect(x-1,y-1,x+1,y+1);
-}
-function hand(angle, r1,r2) {
-  const a = angle*PRad;
+let g;
+let Bangle;
+
+// http://forum.espruino.com/conversations/345155/#comment15172813
+const locale = require('locale');
+const p = Math.PI / 2;
+const pRad = Math.PI / 180;
+const faceWidth = 100; // watch face radius
+let timer = null;
+let currentDate = new Date();
+const centerPx = g.getWidth() / 2;
+
+const seconds = (angle) => {
+  const a = angle * pRad;
+  const x = centerPx + Math.sin(a) * faceWidth;
+  const y = centerPx - Math.cos(a) * faceWidth;
+
+  // if 15 degrees, make hour marker larger
+  const radius = (angle % 15) ? 2 : 4;
+  g.fillCircle(x, y, radius);
+};
+
+const hand = (angle, r1, r2) => {
+  const a = angle * pRad;
   const r3 = 3;
+
   g.fillPoly([
-    120+Math.sin(a)*r1,
-    120-Math.cos(a)*r1,
-    120+Math.sin(a+p)*r3,
-    120-Math.cos(a+p)*r3,
-    120+Math.sin(a)*r2,
-    120-Math.cos(a)*r2,
-    120+Math.sin(a-p)*r3,
-    120-Math.cos(a-p)*r3]);
-}
-
-function drawAll() {
+    Math.round(centerPx + Math.sin(a) * r1),
+    Math.round(centerPx - Math.cos(a) * r1),
+    Math.round(centerPx + Math.sin(a + p) * r3),
+    Math.round(centerPx - Math.cos(a + p) * r3),
+    Math.round(centerPx + Math.sin(a) * r2),
+    Math.round(centerPx - Math.cos(a) * r2),
+    Math.round(centerPx + Math.sin(a - p) * r3),
+    Math.round(centerPx - Math.cos(a - p) * r3)
+  ]);
+};
+
+const drawAll = () => {
   g.clear();
-  secondDate = minuteDate = new Date();
+  currentDate = new Date();
   // draw hands first
   onMinute();
   // draw seconds
-  g.setColor(0,0,0.6);
-  for (let i=0;i<60;i++)
-    seconds(360*i/60, 90);
+  const currentSec = currentDate.getSeconds();
+  // draw all secs
+
+  for (let i = 0; i < 60; i++) {
+    if (i > currentSec) {
+      g.setColor(0, 0, 0.6);
+    } else {
+      g.setColor(0.3, 0.3, 1);
+    }
+    seconds((360 * i) / 60);
+  }
   onSecond();
-}
-
-function onSecond() {
-  g.setColor(0,0,0.6);
-  seconds(360*secondDate.getSeconds()/60, 90);
-  g.setColor(1,0,0);
-  secondDate = new Date();
-  seconds(360*secondDate.getSeconds()/60, 90);
-  g.setColor(1,1,1);
-
-}
-
-function onMinute() {
-  g.setColor(0,0,0);
-  hand(360*(minuteDate.getHours() + (minuteDate.getMinutes()/60))/12, -10, 50);
-  hand(360*minuteDate.getMinutes()/60, -10, 82);
-  minuteDate = new Date();
-  g.setColor(1,1,1);
-  hand(360*(minuteDate.getHours() + (minuteDate.getMinutes()/60))/12, -10, 50);
-  hand(360*minuteDate.getMinutes()/60, -10, 82);
-  if(minuteDate.getHours() >= 0 && minuteDate.getMinutes() === 0) {
+};
+
+const resetSeconds = () => {
+  g.setColor(0, 0, 0.6);
+  for (let i = 0; i < 60; i++) {
+    seconds((360 * i) / 60);
+  }
+};
+
+const onSecond = () => {
+  g.setColor(0.3, 0.3, 1);
+  seconds((360 * currentDate.getSeconds()) / 60);
+  if (currentDate.getSeconds() === 59) {
+    resetSeconds();
+    onMinute();
+  }
+  g.setColor(1, 0.7, 0.2);
+  currentDate = new Date();
+  seconds((360 * currentDate.getSeconds()) / 60);
+  g.setColor(1, 1, 1);
+};
+
+const drawDate = () => {
+  g.reset();
+  g.setColor(1, 0, 0);
+  g.setFont('6x8', 2);
+
+  const dayString = locale.dow(currentDate, true);
+  // pad left date
+  const dateString = (currentDate.getDate() < 10) ? '0' : '' + currentDate.getDate().toString();
+  const dateDisplay = `${dayString}-${dateString}`;
+  // console.log(`${dayString}|${dateString}`);
+  // center date
+  const l = (g.getWidth() - g.stringWidth(dateDisplay)) / 2;
+  const t = centerPx + 37;
+  g.drawString(dateDisplay, l, t);
+  // console.log(l, t);
+};
+const onMinute = () => {
+  if (currentDate.getHours() === 0 && currentDate.getMinutes() === 0) {
+    g.clear();
+    resetSeconds();
+  }
+  // clear existing hands
+  g.setColor(0, 0, 0);
+  // Hour
+  hand((360 * (currentDate.getHours() + currentDate.getMinutes() / 60)) / 12, -8, faceWidth - 35);
+  // Minute
+  hand((360 * currentDate.getMinutes()) / 60, -8, faceWidth - 10);
+
+  // get new date, then draw new hands
+  currentDate = new Date();
+  g.setColor(1, 0.9, 0.9);
+  // Hour
+  hand((360 * (currentDate.getHours() + currentDate.getMinutes() / 60)) / 12, -8, faceWidth - 35);
+  g.setColor(1, 1, 0.9);
+  // Minute
+  hand((360 * currentDate.getMinutes()) / 60, -8, faceWidth - 10);
+  if (currentDate.getHours() >= 0 && currentDate.getMinutes() === 0) {
     Bangle.buzz();
   }
-}
-
-function clearTimers() {
-  if(intervalRefMin) {clearInterval(intervalRefMin);}
-  if(intervalRefSec) {clearInterval(intervalRefSec);}
-}
-
-function startTimers() {
-  minuteDate = new Date();
-  secondDate = new Date();
-  intervalRefSec = setInterval(onSecond,1000);
-  intervalRefMin = setInterval(onMinute,60*1000);
-  drawAll();
-}
-
-Bangle.on('lcdPower',function(on) {
+  drawDate();
+};
+
+const startTimers = () => {
+  timer = setInterval(onSecond, 1000);
+};
+
+Bangle.on('lcdPower', (on) => {
   if (on) {
-    g.clear();
-    Bangle.drawWidgets();
+    // g.clear();
+    drawAll();
     startTimers();
-  }else {
-    clearTimers();
+    Bangle.drawWidgets();
+  } else {
+    if (timer) {
+      clearInterval(timer);
+    }
   }
 });
 
 g.clear();
+resetSeconds();
+startTimers();
+drawAll();
 Bangle.loadWidgets();
 Bangle.drawWidgets();
-drawAll();
-startTimers();
+
 // Show launcher when middle button pressed
-setWatch(Bangle.showLauncher, BTN2, {repeat:false,edge:"falling"});
+setWatch(Bangle.showLauncher, BTN2, { repeat: false, edge: "falling" });