From 844b01c54dcbd29d0ddca65f1a94346ab9dc47b3 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sat, 7 Oct 2023 15:37:00 +0000 Subject: [PATCH 1/7] Bugs fixed and simplified Fixed bug in function drawClock: displayed time jumps from 11:50 to 12:59 to 12:07 Fixed bug in function drawClock: skipping 23 o'clock Simplified various parts & removed unreachable checks --- apps/sunrise/app.js | 45 +++++++++++---------------------------------- 1 file changed, 11 insertions(+), 34 deletions(-) diff --git a/apps/sunrise/app.js b/apps/sunrise/app.js index 3feb4dfd4..e1f4c76b5 100644 --- a/apps/sunrise/app.js +++ b/apps/sunrise/app.js @@ -162,7 +162,6 @@ Math.mod = function (a, b) { return result; }; -const delta = 2; const sunrise = new Date().sunrise(lat, lon); const sr = sunrise.getHours() + ':' + sunrise.getMinutes(); console.log('sunrise', sunrise); @@ -176,25 +175,18 @@ const oy = h / 1.7; let sunRiseX = 0; let sunSetX = 0; -const sinStep = 12; +const sinStep = 13; function drawSinuses () { let x = 0; - g.setColor(0, 0, 0); - // g.fillRect(0,oy,w, h); g.setColor(1, 1, 1); - let y = oy; - for (i = 0; i < w; i++) { - x = i; - x2 = x + sinStep + 1; - y2 = ypos(i); - if (x == 0) { - y = y2; - } - g.drawLine(x, y, x2, y2); + let y = ypos(x); + while (x < w) { + y2 = ypos(x); + g.drawLine(x, y, x + sinStep, y2); y = y2; - i += sinStep; // no need to draw all steps + x += sinStep; // no need to draw all steps } // sea level line @@ -206,7 +198,6 @@ function drawSinuses () { sunSetX = xfromTime(hh1) + (r / 2); g.setColor(0, 0.5, 1); g.drawLine(0, sl0, w, sl1); - g.setColor(0, 0.5, 1); g.drawLine(0, sl0 + 1, w, sl1 + 1); /* g.setColor(0, 0, 1); @@ -295,27 +286,19 @@ function drawClock () { } else { ypos = 32; fhours = 24 * (pos / w); - if (fhours > 23) { - fhours = 0; - } const nexth = 24 * 60 * (pos / w); fmins = 59 - ((24 * 60) - nexth) % 60; - if (fmins < 0) { - fmins = 0; + + // this prevents the displayed time to jump from 11:50 to 12:59 to 12:07 + if (fmins == 59) { + fhours--; } } - if (fmins > 59) { - fmins = 59; - } const hours = ((fhours < 10) ? '0' : '') + (0 | fhours); const mins = ((fmins < 10) ? '0' : '') + (0 | fmins); curTime = hours + ':' + mins; g.setFont('Vector', 30); - if (realTime) { - g.setColor(1, 1, 1); - } else { - g.setColor(0, 1, 1); - } + g.setColor(realTime, 1, 1); g.drawString(curTime, w / 1.9, ypos); // day-month if (realTime) { @@ -361,8 +344,6 @@ Bangle.on('lock', () => { renderScreen(); -realPos = xfromTime((new Date()).getHours()); - function initialAnimationFrame () { let distance = (realPos - curPos) / 4; if (distance > 20) { @@ -371,10 +352,6 @@ function initialAnimationFrame () { curPos += distance; pos = curPos; renderScreen(); - if (curPos >= realPos) { - frame = 0; - } - frames--; if (frames-- > 0) { setTimeout(initialAnimationFrame, 50); } else { From d64ed09c537c30918536a4db119bff76aee7be11 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sat, 7 Oct 2023 15:47:11 +0000 Subject: [PATCH 2/7] Update to 0.05 --- apps/sunrise/metadata.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/sunrise/metadata.json b/apps/sunrise/metadata.json index 051ff99bd..8b263e16c 100644 --- a/apps/sunrise/metadata.json +++ b/apps/sunrise/metadata.json @@ -2,7 +2,7 @@ "id": "sunrise", "name": "Sunrise", "shortName": "Sunrise", - "version": "0.04", + "version": "0.05", "type": "clock", "description": "Show sunrise and sunset times", "icon": "app.png", From 2993d391d572523629a80571409dfde32b4b4ea8 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sat, 7 Oct 2023 15:54:49 +0000 Subject: [PATCH 3/7] Updated to 0.05 --- apps/sunrise/ChangeLog | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/sunrise/ChangeLog b/apps/sunrise/ChangeLog index 490992812..1f1c7e8df 100644 --- a/apps/sunrise/ChangeLog +++ b/apps/sunrise/ChangeLog @@ -2,3 +2,4 @@ 0.02: Faster sinus line and fix button to open menu 0.03: Show day/month, add animations, fix !mylocation and text glitch 0.04: Always show the widgets, swifter animations and lighter sea line +0.05: Fixed hours increasing too early, added missing 23 o'clock, simplified code From 5a546819540d1a1a9ca9ddc0ba239e13370ddc84 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sat, 7 Oct 2023 22:30:37 +0000 Subject: [PATCH 4/7] sine line fix & simplification Corrected first sine line section. Removed radius offset from sine line x values. & Simplified --- apps/sunrise/app.js | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/apps/sunrise/app.js b/apps/sunrise/app.js index e1f4c76b5..13f77fe00 100644 --- a/apps/sunrise/app.js +++ b/apps/sunrise/app.js @@ -183,7 +183,7 @@ function drawSinuses () { g.setColor(1, 1, 1); let y = ypos(x); while (x < w) { - y2 = ypos(x); + y2 = ypos(x + sinStep); g.drawLine(x, y, x + sinStep, y2); y = y2; x += sinStep; // no need to draw all steps @@ -225,7 +225,7 @@ function drawGlow () { } const rh = r / 2; const x = pos; - const y = ypos(x - r); + const y = ypos(x); const r2 = 0; if (x > sunRiseX && x < sunSetX) { g.setColor(0.2, 0.2, 0); @@ -246,8 +246,7 @@ function seaLevel (hour) { } function ypos (x) { - const pc = (x * 100 / w); - return oy + (32 * Math.sin(1.7 + (pc / 16))); + return oy + (32 * Math.sin(1.7 + (x * 100 / (16 * w)))); } function xfromTime (t) { @@ -260,7 +259,7 @@ function drawBall () { if (frames < 1 && realTime) { x = xfromTime(now.getHours()); } - const y = ypos(x - r); + const y = ypos(x); // glow if (x < sunRiseX || x > sunSetX) { From a9cfd8946651b0c4968b613440177ffd69e1d6b5 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sun, 8 Oct 2023 10:09:06 +0000 Subject: [PATCH 5/7] Bug fixes Increased sun position resolution. Fixed various wrong offsets. Fixed sun positions for sun rise & set. Fixed sine line not drawing until the right screen edge. Simplified --- apps/sunrise/app.js | 78 ++++++++++++++++++++------------------------- 1 file changed, 35 insertions(+), 43 deletions(-) diff --git a/apps/sunrise/app.js b/apps/sunrise/app.js index 13f77fe00..f58fc5d8f 100644 --- a/apps/sunrise/app.js +++ b/apps/sunrise/app.js @@ -182,20 +182,20 @@ function drawSinuses () { g.setColor(1, 1, 1); let y = ypos(x); - while (x < w) { + // until drawn line touches right side of the screen + while ((x - sinStep / 2) < w) { y2 = ypos(x + sinStep); - g.drawLine(x, y, x + sinStep, y2); + // both x are offset by -sinStep/2 + g.drawLine(x - sinStep / 2, y, x + sinStep / 2, y2); y = y2; x += sinStep; // no need to draw all steps } // sea level line - const hh0 = sunrise.getHours(); - const hh1 = sunset.getHours(); - const sl0 = seaLevel(hh0); - const sl1 = seaLevel(hh1); - sunRiseX = xfromTime(hh0) + (r / 2); - sunSetX = xfromTime(hh1) + (r / 2); + const sl0 = seaLevel(sunrise.getHours()); + const sl1 = seaLevel(sunset.getHours()); + sunRiseX = xfromTime(sunrise.getHours() + sunrise.getMinutes() / 60); + sunSetX = xfromTime(sunset.getHours() + sunset.getMinutes() / 60); g.setColor(0, 0.5, 1); g.drawLine(0, sl0, w, sl1); g.drawLine(0, sl0 + 1, w, sl1 + 1); @@ -221,19 +221,16 @@ const r = 10; function drawGlow () { const now = new Date(); if (frames < 1 && realTime) { - pos = xfromTime(now.getHours()); + pos = xfromTime(now.getHours() + now.getMinutes() / 60); } - const rh = r / 2; const x = pos; - const y = ypos(x); - const r2 = 0; + const y = ypos(x + sinStep / 2); + + g.setColor(0.2, 0.2, 0); + // wide glow if (x > sunRiseX && x < sunSetX) { - g.setColor(0.2, 0.2, 0); g.fillCircle(x, y, r + 20); g.setColor(0.5, 0.5, 0); - // wide glow - } else { - g.setColor(0.2, 0.2, 0); } // smol glow g.fillCircle(x, y, r + 8); @@ -254,20 +251,18 @@ function xfromTime (t) { } function drawBall () { - let x = pos; const now = new Date(); if (frames < 1 && realTime) { - x = xfromTime(now.getHours()); + pos = xfromTime(now.getHours() + now.getMinutes() / 60); } - const y = ypos(x); - + const x = pos; + const y = ypos(x + sinStep / 2); // glow - if (x < sunRiseX || x > sunSetX) { - g.setColor(0.5, 0.5, 0); - } else { + if (x > sunRiseX && x < sunSetX) { g.setColor(1, 1, 1); + } else { + g.setColor(0.5, 0.5, 0); } - const rh = r / 2; g.fillCircle(x, y, r); g.setColor(1, 1, 0); g.drawCircle(x, y, r); @@ -275,44 +270,41 @@ function drawBall () { function drawClock () { const now = new Date(); - let curTime = ''; - let fhours = 0.0; - let fmins = 0.0; - let ypos = 32; + let hours = 0.0; + let mins = 0.0; if (realTime) { - fhours = now.getHours(); - fmins = now.getMinutes(); + hours = now.getHours(); + mins = now.getMinutes(); } else { - ypos = 32; - fhours = 24 * (pos / w); + hours = 24 * (pos / w); const nexth = 24 * 60 * (pos / w); - fmins = 59 - ((24 * 60) - nexth) % 60; + mins = 59 - ((24 * 60) - nexth) % 60; // this prevents the displayed time to jump from 11:50 to 12:59 to 12:07 - if (fmins == 59) { - fhours--; + if (mins == 59) { + hours--; } } - const hours = ((fhours < 10) ? '0' : '') + (0 | fhours); - const mins = ((fmins < 10) ? '0' : '') + (0 | fmins); - curTime = hours + ':' + mins; + + hours = ((hours < 10) ? '0' : '') + (0 | hours); + mins = ((mins < 10) ? '0' : '') + (0 | mins); g.setFont('Vector', 30); g.setColor(realTime, 1, 1); - g.drawString(curTime, w / 1.9, ypos); + g.drawString('' + hours + ':' + mins, w / 1.9, 32); // day-month if (realTime) { const mo = now.getMonth() + 1; const da = now.getDate(); - const daymonth = '' + da + '/' + mo; g.setFont('6x8', 2); - g.drawString(daymonth, 5, 30); + g.drawString('' + da + '/' + mo, 5, 30); } } function renderScreen () { + const now = new Date(); g.setColor(0, 0, 0); g.fillRect(0, 30, w, h); - realPos = xfromTime((new Date()).getHours()); + realPos = xfromTime(now.getHours() + now.getMinutes() / 60); g.setFontAlign(-1, -1, 0); Bangle.drawWidgets(); @@ -329,7 +321,7 @@ Bangle.on('drag', function (tap, top) { curPos = pos; initialAnimation(); } else { - pos = tap.x - 5; + pos = tap.x; realTime = false; } renderScreen(); From 27ed85d6770e5768030515d4378273f6ce8cf590 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sun, 8 Oct 2023 10:53:27 +0000 Subject: [PATCH 6/7] Fix sine and sun pos offset --- apps/sunrise/app.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/sunrise/app.js b/apps/sunrise/app.js index f58fc5d8f..ce6fc3a1b 100644 --- a/apps/sunrise/app.js +++ b/apps/sunrise/app.js @@ -182,11 +182,10 @@ function drawSinuses () { g.setColor(1, 1, 1); let y = ypos(x); - // until drawn line touches right side of the screen - while ((x - sinStep / 2) < w) { + while (x < w) { y2 = ypos(x + sinStep); // both x are offset by -sinStep/2 - g.drawLine(x - sinStep / 2, y, x + sinStep / 2, y2); + g.drawLine(x, y, x + sinStep, y2); y = y2; x += sinStep; // no need to draw all steps } @@ -224,7 +223,7 @@ function drawGlow () { pos = xfromTime(now.getHours() + now.getMinutes() / 60); } const x = pos; - const y = ypos(x + sinStep / 2); + const y = ypos(x); g.setColor(0.2, 0.2, 0); // wide glow @@ -256,7 +255,8 @@ function drawBall () { pos = xfromTime(now.getHours() + now.getMinutes() / 60); } const x = pos; - const y = ypos(x + sinStep / 2); + const y = ypos(x); + // glow if (x > sunRiseX && x < sunSetX) { g.setColor(1, 1, 1); From d34da4356e5466a565efb40ede4ee14e4ba7bfc1 Mon Sep 17 00:00:00 2001 From: g-rden <94605617+g-rden@users.noreply.github.com> Date: Sun, 8 Oct 2023 17:24:54 +0000 Subject: [PATCH 7/7] Fixed zenith position, time formatting & misc Offset ypos function. Use float in sine function instead of fraction to represent 2*pi. Added function to format time, which makes times draw correct. Moved global variables. Made animations more consistent --- apps/sunrise/app.js | 62 +++++++++++++++++++++++---------------------- 1 file changed, 32 insertions(+), 30 deletions(-) diff --git a/apps/sunrise/app.js b/apps/sunrise/app.js index ce6fc3a1b..4c52020bb 100644 --- a/apps/sunrise/app.js +++ b/apps/sunrise/app.js @@ -14,9 +14,6 @@ function loadLocation () { return { lat: 41.38, lon: 2.168 }; } } -let frames = 0; // amount of pending frames to render (0 if none) -let curPos = 0; // x position of the sun -let realPos = 0; // x position of the sun depending on currentime const latlon = loadLocation() || {}; const lat = latlon.lat || 41.38; const lon = latlon.lon || 2.168; @@ -163,11 +160,7 @@ Math.mod = function (a, b) { }; const sunrise = new Date().sunrise(lat, lon); -const sr = sunrise.getHours() + ':' + sunrise.getMinutes(); -console.log('sunrise', sunrise); const sunset = new Date().sunset(lat, lon); -const ss = sunset.getHours() + ':' + sunset.getMinutes(); -console.log('sunset', sunset); const w = g.getWidth(); const h = g.getHeight(); @@ -177,6 +170,21 @@ let sunRiseX = 0; let sunSetX = 0; const sinStep = 13; +let pos = 0; +let realTime = true; +const r = 10; + +let frames = 0; // amount of pending frames to render (0 if none) +// set to 1 because pos 0 is displayed as 0-1:59 +let curPos = 1; // x position of the sun +let realPos = 0; // x position of the sun depending on currentime + + +function formatAsTime (hour, minute) { + return '' + ((hour < 10) ? '0' : '') + (0 | hour) + + ':' + ((minute < 10) ? '0' : '') + (0 | minute); +} + function drawSinuses () { let x = 0; @@ -184,7 +192,6 @@ function drawSinuses () { let y = ypos(x); while (x < w) { y2 = ypos(x + sinStep); - // both x are offset by -sinStep/2 g.drawLine(x, y, x + sinStep, y2); y = y2; x += sinStep; // no need to draw all steps @@ -209,14 +216,10 @@ function drawSinuses () { function drawTimes () { g.setColor(1, 1, 1); g.setFont('6x8', 2); - g.drawString(sr, 10, h - 20); - g.drawString(ss, w - 60, h - 20); + g.drawString(formatAsTime(sunrise.getHours(), sunrise.getMinutes()), 10, h - 20); + g.drawString(formatAsTime(sunset.getHours(), sunset.getMinutes()), w - 60, h - 20); } -let pos = 0; -let realTime = true; -const r = 10; - function drawGlow () { const now = new Date(); if (frames < 1 && realTime) { @@ -242,7 +245,8 @@ function seaLevel (hour) { } function ypos (x) { - return oy + (32 * Math.sin(1.7 + (x * 100 / (16 * w)))); + // offset, resulting in zenith being at the correct time + return oy + (32 * Math.sin(((x + sunRiseX - 12) / w) * 6.28 )); } function xfromTime (t) { @@ -286,11 +290,9 @@ function drawClock () { } } - hours = ((hours < 10) ? '0' : '') + (0 | hours); - mins = ((mins < 10) ? '0' : '') + (0 | mins); g.setFont('Vector', 30); g.setColor(realTime, 1, 1); - g.drawString('' + hours + ':' + mins, w / 1.9, 32); + g.drawString(formatAsTime(hours, mins), w / 1.9, 32); // day-month if (realTime) { const mo = now.getMonth() + 1; @@ -333,17 +335,13 @@ Bangle.on('lock', () => { renderScreen(); }); -renderScreen(); - function initialAnimationFrame () { - let distance = (realPos - curPos) / 4; - if (distance > 20) { - distance = 20; - } - curPos += distance; - pos = curPos; - renderScreen(); - if (frames-- > 0) { + if (frames > 0) { + let distance = (realPos - curPos) / frames; + pos = curPos; + curPos += distance; + renderScreen(); + frames--; setTimeout(initialAnimationFrame, 50); } else { realTime = true; @@ -352,17 +350,21 @@ function initialAnimationFrame () { } function initialAnimation () { + const now = new Date(); + realPos = xfromTime(now.getHours() + now.getMinutes() / 60); const distance = Math.abs(realPos - pos); - frames = distance / 4; + frames = distance / 16; realTime = false; initialAnimationFrame(); } function main () { + sunRiseX = xfromTime(sunrise.getHours() + sunrise.getMinutes() / 60); + sunSetX = xfromTime(sunset.getHours() + sunset.getMinutes() / 60); + g.setBgColor(0, 0, 0); g.clear(); setInterval(renderScreen, 60 * 1000); - pos = 0; initialAnimation(); }