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 diff --git a/apps/sunrise/app.js b/apps/sunrise/app.js index 3feb4dfd4..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; @@ -162,13 +159,8 @@ 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); 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(); @@ -176,37 +168,42 @@ const oy = h / 1.7; let sunRiseX = 0; let sunSetX = 0; -const sinStep = 12; +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; - 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 + sinStep); + 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 - 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.setColor(0, 0.5, 1); g.drawLine(0, sl0 + 1, w, sl1 + 1); /* g.setColor(0, 0, 1); @@ -219,30 +216,23 @@ 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) { - pos = xfromTime(now.getHours()); + pos = xfromTime(now.getHours() + now.getMinutes() / 60); } - const rh = r / 2; const x = pos; - const y = ypos(x - r); - const r2 = 0; + const y = ypos(x); + + 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); @@ -255,8 +245,8 @@ function seaLevel (hour) { } function ypos (x) { - const pc = (x * 100 / w); - return oy + (32 * Math.sin(1.7 + (pc / 16))); + // offset, resulting in zenith being at the correct time + return oy + (32 * Math.sin(((x + sunRiseX - 12) / w) * 6.28 )); } function xfromTime (t) { @@ -264,20 +254,19 @@ 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 - r); + const x = pos; + const y = ypos(x); // 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); @@ -285,52 +274,39 @@ 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); - if (fhours > 23) { - fhours = 0; - } + hours = 24 * (pos / w); const nexth = 24 * 60 * (pos / w); - fmins = 59 - ((24 * 60) - nexth) % 60; - if (fmins < 0) { - fmins = 0; + mins = 59 - ((24 * 60) - nexth) % 60; + + // this prevents the displayed time to jump from 11:50 to 12:59 to 12:07 + if (mins == 59) { + hours--; } } - 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.drawString(curTime, w / 1.9, ypos); + g.setColor(realTime, 1, 1); + g.drawString(formatAsTime(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(); @@ -347,7 +323,7 @@ Bangle.on('drag', function (tap, top) { curPos = pos; initialAnimation(); } else { - pos = tap.x - 5; + pos = tap.x; realTime = false; } renderScreen(); @@ -359,23 +335,13 @@ Bangle.on('lock', () => { renderScreen(); }); -renderScreen(); - -realPos = xfromTime((new Date()).getHours()); - function initialAnimationFrame () { - let distance = (realPos - curPos) / 4; - if (distance > 20) { - distance = 20; - } - curPos += distance; - pos = curPos; - renderScreen(); - if (curPos >= realPos) { - frame = 0; - } - frames--; - if (frames-- > 0) { + if (frames > 0) { + let distance = (realPos - curPos) / frames; + pos = curPos; + curPos += distance; + renderScreen(); + frames--; setTimeout(initialAnimationFrame, 50); } else { realTime = true; @@ -384,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(); } 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",