Merge pull request #990 from andrewgoz/master

UI fixes and improvements

apps.json

@@ -4451,7 +4451,7 @@
     "shortName": "AuthWatch",
     "icon": "app.png",
     "screenshots": [{"url":"screenshot.png"}],
-    "version": "0.03",
+    "version": "0.04",
     "description": "Google Authenticator compatible tool.",
     "tags": "tool",
     "interface": "interface.html",

apps/authentiwatch/ChangeLog

@@ -1,3 +1,4 @@
+0.04: Fix tapping at very bottom of list, exit on inactivity
 0.03: Add "Calculating" placeholder, update JSON save format
 0.02: Fix JSON save format
 0.01: First release

apps/authentiwatch/app.js

@@ -10,6 +10,8 @@ const calculating = "Calculating";
 const notokens = "No tokens";
 const notsupported = "Not supported";
 
+// sample settings:
+// {tokens:[{"algorithm":"SHA1","digits":6,"period":30,"issuer":"","account":"","secret":"Bbb","label":"Aaa"}],misc:{}}
 var settings = require("Storage").readJSON("authentiwatch.json", true) || {tokens:[],misc:{}};
 if (settings.data  ) tokens = settings.data  ; /* v0.02 settings */
 if (settings.tokens) tokens = settings.tokens; /* v0.03+ settings */
@@ -146,14 +148,14 @@ function drawToken(id, r) {
       // counter - draw triangle as swipe hint
       let yc = (y1 + y2) / 2;
       g.fillPoly([0, yc, 10, yc - 10, 10, yc + 10, 0, yc]);
-      adj = 5;
+      adj = 10;
     }
     // digits just below label
     sz = 30;
     do {
       g.setFont("Vector", sz--);
     } while (g.stringWidth(state.otp) > (r.w - adj));
-    g.drawString(state.otp, (x1 + x2) / 2 + adj, y1 + 16, false);
+    g.drawString(state.otp, (x1 + adj + x2) / 2, y1 + 16, false);
   }
   // shaded lines top and bottom
   g.setColor(0.5, 0.5, 0.5);
@@ -163,6 +165,8 @@ function drawToken(id, r) {
 }
 
 function draw() {
+  var timerfn = exitApp;
+  var timerdly = 10000;
   var d = new Date();
   if (state.curtoken != -1) {
     var t = tokens[state.curtoken];
@@ -203,17 +207,13 @@ function draw() {
       y += tokenentryheight;
     }
     if (drewcur) {
-      // the current token has been drawn - draw it again in 1sec
-      if (state.drawtimer) {
-        clearTimeout(state.drawtimer);
-      }
-      var dly;
+      // the current token has been drawn - schedule a redraw
       if (tokens[state.curtoken].period > 0) {
-        dly = (state.otp == calculating) ? 1 : 1000;
+        timerdly = (state.otp == calculating) ? 1 : 1000; // timed
       } else {
-        dly = state.nexttime - d.getTime();
+        timerdly = state.nexttime - d.getTime(); // counter
       }
-      state.drawtimer = setTimeout(draw, dly);
+      timerfn = draw;
       if (tokens[state.curtoken].period <= 0) {
         state.hide = 0;
       }
@@ -230,12 +230,16 @@ function draw() {
     g.setFontAlign(0, 0, 0);
     g.drawString(notokens, Bangle.appRect.x + Bangle.appRect.w / 2, Bangle.appRect.y + Bangle.appRect.h / 2, false);
   }
+  if (state.drawtimer) {
+    clearTimeout(state.drawtimer);
+  }
+  state.drawtimer = setTimeout(timerfn, timerdly);
 }
 
 function onTouch(zone, e) {
   if (e) {
     var id = Math.floor((state.listy + (e.y - Bangle.appRect.y)) / tokenentryheight);
-    if (id == state.curtoken || tokens.length == 0) {
+    if (id == state.curtoken || tokens.length == 0 || id >= tokens.length) {
       id = -1;
     }
     if (state.curtoken != id) {
@@ -254,26 +258,20 @@ function onTouch(zone, e) {
       state.nextTime = 0;
       state.curtoken = id;
       state.hide = 2;
+    }
+  }
   draw();
-    }
-  }
 }
 
 function onDrag(e) {
   if (e.x > g.getWidth() || e.y > g.getHeight()) return;
   if (e.dx == 0 && e.dy == 0) return;
   var newy = Math.min(state.listy - e.dy, tokens.length * tokenentryheight - Bangle.appRect.h);
-  newy = Math.max(0, newy);
-  if (newy != state.listy) {
-    state.listy = newy;
+  state.listy = Math.max(0, newy);
   draw();
-  }
 }
 
 function onSwipe(e) {
-  if (e == 1) {
-    Bangle.showLauncher();
-  }
   if (e == -1 && state.curtoken != -1 && tokens[state.curtoken].period <= 0) {
     tokens[state.curtoken].period--;
     let newsettings={tokens:tokens,misc:settings.misc};
@@ -281,8 +279,8 @@ function onSwipe(e) {
     state.nextTime = 0;
     state.otp = "";
     state.hide = 2;
-    draw();
   }
+  draw();
 }
 
 function bangle1Btn(e) {
@@ -302,16 +300,22 @@ function bangle1Btn(e) {
     state.curtoken = -1;
     state.nextTime = 0;
     onTouch(0, fakee);
+  } else {
+    draw(); // resets idle timer
   }
 }
 
+function exitApp() {
+  Bangle.showLauncher();
+}
+
 Bangle.on('touch', onTouch);
 Bangle.on('drag' , onDrag );
 Bangle.on('swipe', onSwipe);
 if (typeof BTN2 == 'number') {
-  setWatch(function(){bangle1Btn(-1);       }, BTN1, {edge:"rising", debounce:50, repeat:true});
-  setWatch(function(){Bangle.showLauncher();}, BTN2, {edge:"rising", debounce:50, repeat:true});
-  setWatch(function(){bangle1Btn( 1);       }, BTN3, {edge:"rising", debounce:50, repeat:true});
+  setWatch(function(){bangle1Btn(-1);}, BTN1, {edge:"rising", debounce:50, repeat:true});
+  setWatch(function(){exitApp();     }, BTN2, {edge:"rising", debounce:50, repeat:true});
+  setWatch(function(){bangle1Btn( 1);}, BTN3, {edge:"rising", debounce:50, repeat:true});
 }
 Bangle.loadWidgets();