Better lock animation.

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
+0.04: Ensure that widgets are always hidden in fullscreen mode
+0.05: Better lock/unlock animation

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.
+If enabled, the lock/unlock event is animated by changing the colors.

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",

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();
+drawAndQueue();