From d063eaae217c4cc8f183502cf7e9a0d00dfdfa07 Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 14:30:33 +0200 Subject: [PATCH 1/9] Better lock animation. --- apps/neonx/ChangeLog | 3 +- apps/neonx/README.md | 2 +- apps/neonx/metadata.json | 2 +- apps/neonx/neonx.app.js | 70 ++++++++++++++++++++++++++++------------ 4 files changed, 54 insertions(+), 23 deletions(-) diff --git a/apps/neonx/ChangeLog b/apps/neonx/ChangeLog index 2e815a449..c1a50ecd7 100644 --- a/apps/neonx/ChangeLog +++ b/apps/neonx/ChangeLog @@ -1,4 +1,5 @@ 0.01: Initial release 0.02: Optional fullscreen mode 0.03: Optional show lock status via color -0.04: Ensure that widgets are always hidden in fullscreen mode \ No newline at end of file +0.04: Ensure that widgets are always hidden in fullscreen mode +0.05: Better lock/unlock animation \ No newline at end of file diff --git a/apps/neonx/README.md b/apps/neonx/README.md index ffb3c3f2c..4caa5e00f 100644 --- a/apps/neonx/README.md +++ b/apps/neonx/README.md @@ -24,4 +24,4 @@ Shows the watchface in fullscreen mode. Note: In fullscreen mode, widgets are hidden, but still loaded. ### Show lock status -If enabled, color changes when unlocked to detect the lock state easily. \ No newline at end of file +If enabled, the lock/unlock event is animated by changing the colors. \ No newline at end of file diff --git a/apps/neonx/metadata.json b/apps/neonx/metadata.json index 840e5b82e..ee99f98b8 100644 --- a/apps/neonx/metadata.json +++ b/apps/neonx/metadata.json @@ -2,7 +2,7 @@ "id": "neonx", "name": "Neon X & IO X Clock", "shortName": "Neon X Clock", - "version": "0.04", + "version": "0.05", "description": "Pebble Neon X & Neon IO X for Bangle.js", "icon": "neonx.png", "type": "clock", diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index 4b9231b0e..bcf4c874e 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -36,14 +36,8 @@ const digits = { const colors = { - x: [ - ["#FF00FF", "#00FFFF"], - ["#00FF00", "#FFFF00"] - ], - io: [ - ["#FF00FF", "#FFFF00"], - ["#00FF00", "#00FFFF"] - ] + x: ["#FF00FF", "#00FF00", "#00FFFF", "#FFFF00"], + io:["#FF00FF", "#00FF00", "#FFFF00", "#00FFFF"], }; const is12hour = (require("Storage").readJSON("setting.json",1)||{})["12hour"]||false; const screenWidth = g.getWidth(); @@ -71,7 +65,7 @@ function drawLine(poly, thickness){ } -function drawClock(num){ +function drawClock(num, xc){ let tx, ty; if(settings.fullscreen){ @@ -84,9 +78,8 @@ function drawClock(num){ for (let y = 0; y <= 1; y++) { const current = ((y + 1) * 2 + x - 1); let newScale = scale; - - let xc = settings.showLock && !Bangle.isLocked() ? Math.abs(x-1) : x; - let c = colors[settings.io ? 'io' : 'x'][y][xc]; + let colorArr = colors[settings.io ? 'io' : 'x']; + let c = colorArr[xc]; g.setColor(c); if (!settings.io) { @@ -104,14 +97,20 @@ function drawClock(num){ for (let i = 0; i < digits[num[y][x]].length; i++) { drawLine(g.transformVertices(digits[num[y][x]][i], { x: tx, y: ty, scale: newScale}), settings.thickness); } + + xc = (xc+1) % colorArr.length; } } } -function draw(date){ +function drawAndQueue(date){ queueDraw(); + draw(date, 0); +} + +function draw(date, xc){ // Depending on the settings, we clear all widgets or draw those. if(settings.fullscreen){ for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";} @@ -133,14 +132,14 @@ function draw(date){ drawTimeout = undefined; setTimeout(_ => { - draw(); + drawAndQueue(); }, 5000); } else { l1 = ('0' + (d.getHours() % (is12hour ? 12 : 24))).substr(-2); l2 = ('0' + d.getMinutes()).substr(-2); } - drawClock([l1, l2]); + drawClock([l1, l2], xc); } @@ -152,7 +151,7 @@ function queueDraw() { if (drawTimeout) clearTimeout(drawTimeout); drawTimeout = setTimeout(function() { drawTimeout = undefined; - draw(); + drawAndQueue(); }, 60000 - (Date.now() % 60000)); } @@ -161,7 +160,7 @@ function queueDraw() { * Event handlers */ if (settings.showDate) { - Bangle.on('touch', () => draw(!showingDate)); + Bangle.on('touch', () => drawAndQueue(!showingDate)); } Bangle.on('lcdPower', function(on){ @@ -169,12 +168,43 @@ Bangle.on('lcdPower', function(on){ drawTimeout = undefined; if (on) { - draw(); + drawAndQueue(); } }); + +function animateColor(speed, fun){ + // Animate lock + setTimeout(function() { + draw(false, 1); + setTimeout(function() { + draw(false, 2); + setTimeout(function() { + draw(false, 3); + setTimeout( + function(){ + draw(false, 0); + fun(); + } + ), speed+5; + }, speed+5); + }, speed+5); + }, speed); +} + + Bangle.on('lock', function(isLocked) { - draw(); + queueDraw(); + + if(!settings.showLock){ + draw(false, 0); + return; + } + + // Animate in case the use selected this setting. + animateColor(25, function(){ + animateColor(25, function(){}); + }); }); @@ -185,4 +215,4 @@ g.clear(1); Bangle.setUI("clock"); Bangle.loadWidgets(); -draw(); \ No newline at end of file +drawAndQueue(); \ No newline at end of file From d07124b74933431ed55bb27415de206dc091afd1 Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 16:35:16 +0200 Subject: [PATCH 2/9] Minor changes --- apps/neonx/neonx.app.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index bcf4c874e..b3fd4e86d 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -186,9 +186,9 @@ function animateColor(speed, fun){ draw(false, 0); fun(); } - ), speed+5; - }, speed+5); - }, speed+5); + ), speed; + }, speed); + }, speed); }, speed); } @@ -202,8 +202,8 @@ Bangle.on('lock', function(isLocked) { } // Animate in case the use selected this setting. - animateColor(25, function(){ - animateColor(25, function(){}); + animateColor(5, function(){ + animateColor(5, function(){}); }); }); From 6a9ca6f32a2ae773629205d0f058e95a409b2ab3 Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 17:12:53 +0200 Subject: [PATCH 3/9] Animate only once. --- apps/neonx/neonx.app.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index b3fd4e86d..bd78b525f 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -173,7 +173,10 @@ Bangle.on('lcdPower', function(on){ }); -function animateColor(speed, fun){ +function drawAnimated(){ + queueDraw(); + speed = 25; + // Animate lock setTimeout(function() { draw(false, 1); @@ -184,7 +187,6 @@ function animateColor(speed, fun){ setTimeout( function(){ draw(false, 0); - fun(); } ), speed; }, speed); @@ -194,7 +196,6 @@ function animateColor(speed, fun){ Bangle.on('lock', function(isLocked) { - queueDraw(); if(!settings.showLock){ draw(false, 0); @@ -202,9 +203,7 @@ Bangle.on('lock', function(isLocked) { } // Animate in case the use selected this setting. - animateColor(5, function(){ - animateColor(5, function(){}); - }); + drawAnimated(); }); From c1457857165450c5af2023008afb617d4852834a Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 17:13:51 +0200 Subject: [PATCH 4/9] Minor fix -- queue draw alo on lock --- apps/neonx/neonx.app.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index bd78b525f..76cf0c360 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -196,9 +196,8 @@ function drawAnimated(){ Bangle.on('lock', function(isLocked) { - if(!settings.showLock){ - draw(false, 0); + queueDraw(); return; } From f5900b5a17b4ca645ff6aa27758efc89af0e0d31 Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 17:14:39 +0200 Subject: [PATCH 5/9] Draw on lock only if lock settings are enabled. --- apps/neonx/neonx.app.js | 1 - 1 file changed, 1 deletion(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index 76cf0c360..7b7d904ea 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -197,7 +197,6 @@ function drawAnimated(){ Bangle.on('lock', function(isLocked) { if(!settings.showLock){ - queueDraw(); return; } From 521fd4cb8ff0da28b3d57fc7ae57197f3e5a694b Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 17:15:52 +0200 Subject: [PATCH 6/9] Minor refactoring. --- apps/neonx/neonx.app.js | 60 ++++++++++++++++++++--------------------- 1 file changed, 30 insertions(+), 30 deletions(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index 7b7d904ea..7af767fa2 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -104,13 +104,35 @@ function drawClock(num, xc){ } -function drawAndQueue(date){ +function draw(date){ queueDraw(); - draw(date, 0); + _draw(date, 0); } -function draw(date, xc){ +function drawAnimated(){ + queueDraw(); + + // Animate draw through different colors + speed = 25; + setTimeout(function() { + _draw(false, 1); + setTimeout(function() { + _draw(false, 2); + setTimeout(function() { + _draw(false, 3); + setTimeout( + function(){ + _draw(false, 0); + } + ), speed; + }, speed); + }, speed); + }, speed); +} + + +function _draw(date, xc){ // Depending on the settings, we clear all widgets or draw those. if(settings.fullscreen){ for (let wd of WIDGETS) {wd.draw=()=>{};wd.area="";} @@ -132,7 +154,7 @@ function draw(date, xc){ drawTimeout = undefined; setTimeout(_ => { - drawAndQueue(); + draw(); }, 5000); } else { l1 = ('0' + (d.getHours() % (is12hour ? 12 : 24))).substr(-2); @@ -151,7 +173,7 @@ function queueDraw() { if (drawTimeout) clearTimeout(drawTimeout); drawTimeout = setTimeout(function() { drawTimeout = undefined; - drawAndQueue(); + draw(); }, 60000 - (Date.now() % 60000)); } @@ -160,7 +182,7 @@ function queueDraw() { * Event handlers */ if (settings.showDate) { - Bangle.on('touch', () => drawAndQueue(!showingDate)); + Bangle.on('touch', () => draw(!showingDate)); } Bangle.on('lcdPower', function(on){ @@ -168,33 +190,11 @@ Bangle.on('lcdPower', function(on){ drawTimeout = undefined; if (on) { - drawAndQueue(); + draw(); } }); -function drawAnimated(){ - queueDraw(); - speed = 25; - - // Animate lock - setTimeout(function() { - draw(false, 1); - setTimeout(function() { - draw(false, 2); - setTimeout(function() { - draw(false, 3); - setTimeout( - function(){ - draw(false, 0); - } - ), speed; - }, speed); - }, speed); - }, speed); -} - - Bangle.on('lock', function(isLocked) { if(!settings.showLock){ return; @@ -212,4 +212,4 @@ g.clear(1); Bangle.setUI("clock"); Bangle.loadWidgets(); -drawAndQueue(); \ No newline at end of file +draw(); \ No newline at end of file From a97215860a22fcd225e0a4a24ed3307c7d084a1a Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 17:24:38 +0200 Subject: [PATCH 7/9] Improved color order for animation --- apps/neonx/neonx.app.js | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index 7af767fa2..17d3b9283 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -116,16 +116,14 @@ function drawAnimated(){ // Animate draw through different colors speed = 25; setTimeout(function() { - _draw(false, 1); + _draw(false, 2); setTimeout(function() { - _draw(false, 2); + _draw(false, 3); setTimeout(function() { - _draw(false, 3); - setTimeout( - function(){ + _draw(false, 1); + setTimeout(function(){ _draw(false, 0); - } - ), speed; + }, speed); }, speed); }, speed); }, speed); From acacc3497d5fb775d5da84d1ccc3c989f007c75a Mon Sep 17 00:00:00 2001 From: David Peer Date: Sat, 7 May 2022 17:25:35 +0200 Subject: [PATCH 8/9] Animate from outside to inside for IO --- apps/neonx/neonx.app.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/neonx/neonx.app.js b/apps/neonx/neonx.app.js index 17d3b9283..fd30fa30f 100644 --- a/apps/neonx/neonx.app.js +++ b/apps/neonx/neonx.app.js @@ -116,11 +116,11 @@ function drawAnimated(){ // Animate draw through different colors speed = 25; setTimeout(function() { - _draw(false, 2); + _draw(false, 1); setTimeout(function() { _draw(false, 3); setTimeout(function() { - _draw(false, 1); + _draw(false, 2); setTimeout(function(){ _draw(false, 0); }, speed); From 6dd5eeffed376566cacba4bc4e34f25256a495dc Mon Sep 17 00:00:00 2001 From: David Peer Date: Sun, 8 May 2022 21:29:25 +0200 Subject: [PATCH 9/9] Minor change --- apps/neonx/neonx.settings.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/neonx/neonx.settings.js b/apps/neonx/neonx.settings.js index e01ceb4d3..68e156dae 100644 --- a/apps/neonx/neonx.settings.js +++ b/apps/neonx/neonx.settings.js @@ -19,7 +19,7 @@ if (!neonXSettings) resetSettings(); - let thicknesses = [1, 2, 3, 4, 5, 6]; + let thicknesses = [1, 2, 3, 4, 5, 6, 7]; const menu = { "" : { "title":"Neon X & IO"},