From 09cc9f2fd58aec8314d1fc963d7f9eb7cba501d0 Mon Sep 17 00:00:00 2001 From: Erik Andresen Date: Tue, 25 Jul 2023 16:30:17 +0200 Subject: [PATCH] miclock2 maintenance - Register as clock - Implement fast loading --- apps/miclock2/ChangeLog | 1 + apps/miclock2/clock-mixed.js | 157 +++++++++++++++++++---------------- apps/miclock2/metadata.json | 2 +- 3 files changed, 88 insertions(+), 72 deletions(-) diff --git a/apps/miclock2/ChangeLog b/apps/miclock2/ChangeLog index 534332e63..c34ba135c 100644 --- a/apps/miclock2/ChangeLog +++ b/apps/miclock2/ChangeLog @@ -1,3 +1,4 @@ 0.01: New App! 0.02: Redraw only when seconds change 0.03: Fix typo in redraw check +0.04: Register as clock and implement fast loading diff --git a/apps/miclock2/clock-mixed.js b/apps/miclock2/clock-mixed.js index bb1537313..4d533b63a 100644 --- a/apps/miclock2/clock-mixed.js +++ b/apps/miclock2/clock-mixed.js @@ -1,29 +1,30 @@ // Code based on the original Mixed Clock +{ /* jshint esversion: 6 */ -var locale = require("locale"); +const locale = require("locale"); const Radius = { "center": 7, "hour": 60, "min": 80, "dots": 88 }; const Center = { "x": 120, "y": 96 }; const Widths = { hour: 2, minute: 2 }; -var buf = Graphics.createArrayBuffer(240,192,1,{msb:true}); -var lastDate = new Date(); +const buf = Graphics.createArrayBuffer(240,192,1,{msb:true}); +let timeoutId; -function rotatePoint(x, y, d) { - rad = -1 * d / 180 * Math.PI; - var sin = Math.sin(rad); - var cos = Math.cos(rad); - xn = ((Center.x + x * cos - y * sin) + 0.5) | 0; - yn = ((Center.y + x * sin - y * cos) + 0.5) | 0; - p = [xn, yn]; - return p; -} +const rotatePoint = function(x, y, d, center, res) { + "jit"; + const rad = -1 * d / 180 * Math.PI; + const sin = Math.sin(rad); + const cos = Math.cos(rad); + res[0] = ((center.x + x * cos - y * sin) + 0.5) | 0; + res[1] = ((center.y + x * sin - y * cos) + 0.5) | 0; +}; // from https://github.com/espruino/Espruino/issues/1702 -function setLineWidth(x1, y1, x2, y2, lw) { - var dx = x2 - x1; - var dy = y2 - y1; - var d = Math.sqrt(dx * dx + dy * dy); +const setLineWidth = function(x1, y1, x2, y2, lw) { + "ram"; + let dx = x2 - x1; + let dy = y2 - y1; + let d = Math.sqrt(dx * dx + dy * dy); dx = dx * lw / d; dy = dy * lw / d; @@ -44,71 +45,85 @@ function setLineWidth(x1, y1, x2, y2, lw) { x2 - dy, y2 + dx, x1 - dy, y1 + dx ]; -} +}; -function drawMixedClock(force) { - var date = new Date(); - if ((force || Bangle.isLCDOn()) && buf.buffer && date.getSeconds() !== lastDate.getSeconds()) { - lastDate = date; - var dateArray = date.toString().split(" "); - var isEn = locale.name.startsWith("en"); - var point = []; - var minute = date.getMinutes(); - var hour = date.getHours(); - var radius; - - g.reset(); - buf.clear(); - - // draw date - buf.setFont("6x8", 2); - buf.setFontAlign(-1, 0); - buf.drawString(locale.dow(date,true) + ' ', 4, 16, true); - buf.drawString(isEn?(' ' + dateArray[2]):locale.month(date,true), 4, 176, true); - buf.setFontAlign(1, 0); - buf.drawString(isEn?locale.month(date,true):(' ' + dateArray[2]), 237, 16, true); - buf.drawString(dateArray[3], 237, 176, true); +const drawMixedClock = function() { + "ram"; + const date = new Date(); + const dateArray = date.toString().split(" "); + const isEn = locale.name.startsWith("en"); + let point = [0, 0]; + const minute = date.getMinutes(); + const hour = date.getHours(); + let radius; - // draw hour and minute dots - for (i = 0; i < 60; i++) { - radius = (i % 5) ? 2 : 4; - point = rotatePoint(0, Radius.dots, i * 6); - buf.fillCircle(point[0], point[1], radius); - } + g.reset(); + buf.clear(); - // draw digital time - buf.setFont("6x8", 3); - buf.setFontAlign(0, 0); - buf.drawString(dateArray[4], 120, 120, true); + // draw date + buf.setFont("6x8", 2); + buf.setFontAlign(-1, 0); + buf.drawString(locale.dow(date,true) + ' ', 4, 16, true); + buf.drawString(isEn?(' ' + dateArray[2]):locale.month(date,true), 4, 176, true); + buf.setFontAlign(1, 0); + buf.drawString(isEn?locale.month(date,true):(' ' + dateArray[2]), 237, 16, true); + buf.drawString(dateArray[3], 237, 176, true); - // draw new minute hand - point = rotatePoint(0, Radius.min, minute * 6); - buf.drawLine(Center.x, Center.y, point[0], point[1]); - buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.minute)); - // draw new hour hand - point = rotatePoint(0, Radius.hour, hour % 12 * 30 + date.getMinutes() / 2 | 0); - buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.hour)); - - // draw center - buf.fillCircle(Center.x, Center.y, Radius.center); - - g.drawImage({width:buf.getWidth(),height:buf.getHeight(),bpp:1,buffer:buf.buffer},0,24); + // draw hour and minute dots + for (i = 0; i < 60; i++) { + radius = (i % 5) ? 2 : 4; + rotatePoint(0, Radius.dots, i * 6, Center, point); + buf.fillCircle(point[0], point[1], radius); } -} -Bangle.on('lcdPower', function(on) { - if (on) - drawMixedClock(true); - Bangle.drawWidgets(); -}); + // draw digital time + buf.setFont("6x8", 3); + buf.setFontAlign(0, 0); + buf.drawString(dateArray[4], 120, 120, true); -setInterval(() => drawMixedClock(true), 30000); // force an update every 30s even screen is off + // draw new minute hand + rotatePoint(0, Radius.min, minute * 6, Center, point); + buf.drawLine(Center.x, Center.y, point[0], point[1]); + buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.minute)); + // draw new hour hand + rotatePoint(0, Radius.hour, hour % 12 * 30 + date.getMinutes() / 2 | 0, Center, point); + buf.fillPoly(setLineWidth(Center.x, Center.y, point[0], point[1], Widths.hour)); + + // draw center + buf.fillCircle(Center.x, Center.y, Radius.center); + + g.drawImage({width:buf.getWidth(),height:buf.getHeight(),bpp:1,buffer:buf.buffer},0,24); + + if (timeoutId !== undefined) { + clearTimeout(timeoutId); + } + const period = (Bangle.isLCDOn() ? 1000 : 60000); // Update every second if display is on else every minute + let timeout = period - (Date.now() % period); + timeoutId = setTimeout(()=>{ + timeoutId = undefined; + drawMixedClock(); + }, timeout); +}; + +const onLCDPower = function(on) { + if (on) { + drawMixedClock(); + Bangle.drawWidgets(); + } +}; +Bangle.on('lcdPower', onLCDPower); g.clear(); Bangle.loadWidgets(); Bangle.drawWidgets(); drawMixedClock(); // immediately draw -setInterval(drawMixedClock, 500); // update twice a second -// Show launcher when middle button pressed after freeing memory first -setWatch(() => {delete buf.buffer; Bangle.showLauncher()}, BTN2, {repeat:false,edge:"falling"}); +Bangle.setUI({mode:"clock", remove:function() { + if (timeoutId !== undefined) { + delete buf.buffer; + clearTimeout(timeoutId); + timeoutId = undefined; + Bangle.removeListener('lcdPower',onLCDPower); + } +}}); +} diff --git a/apps/miclock2/metadata.json b/apps/miclock2/metadata.json index 094d0995a..f177ab4c1 100644 --- a/apps/miclock2/metadata.json +++ b/apps/miclock2/metadata.json @@ -1,7 +1,7 @@ { "id": "miclock2", "name": "Mixed Clock 2", - "version": "0.03", + "version": "0.04", "description": "White color variant of the Mixed Clock with thicker clock hands for better readability in the bright sunlight, extra space under the clock for widgets and seconds in the digital clock.", "icon": "clock-mixed.png", "type": "clock",