diff --git a/apps.json b/apps.json index 5c88edb9c..9bef19fef 100644 --- a/apps.json +++ b/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", diff --git a/apps/aclock/ChangeLog b/apps/aclock/ChangeLog index 7819dbe2a..a179800be 100644 --- a/apps/aclock/ChangeLog +++ b/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 diff --git a/apps/aclock/clock-analog.js b/apps/aclock/clock-analog.js index 67061af52..419ed0933 100644 --- a/apps/aclock/clock-analog.js +++ b/apps/aclock/clock-analog.js @@ -1,94 +1,146 @@ -const p = Math.PI/2; -const PRad = Math.PI/180; +let g; +let Bangle; -let intervalRefMin = null; -let intervalRefSec = null; +// 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; -let minuteDate = new Date(); -let secondDate = new Date(); +const seconds = (angle) => { + const a = angle * pRad; + const x = centerPx + Math.sin(a) * faceWidth; + const y = centerPx - Math.cos(a) * faceWidth; -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; + // 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() { + g.fillPoly([ + 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); +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); +}; -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 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(); } -} + drawDate(); +}; -function clearTimers() { - if(intervalRefMin) {clearInterval(intervalRefMin);} - if(intervalRefSec) {clearInterval(intervalRefSec);} -} +const startTimers = () => { + timer = setInterval(onSecond, 1000); +}; -function startTimers() { - minuteDate = new Date(); - secondDate = new Date(); - intervalRefSec = setInterval(onSecond,1000); - intervalRefMin = setInterval(onMinute,60*1000); - drawAll(); -} - -Bangle.on('lcdPower',function(on) { +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" });