Merge pull request espruino#3829 from bobrippling/fix/pace-menu

pace: fix menu rendering

Author: bobrippling

apps/pace/ChangeLog

@@ -2,3 +2,5 @@
 0.02: Show elapsed time on pause screen
 0.03: Avoid initial GPS skew and allow reset of time/splits
 0.04: Bump exstats module - show active time, not elapsed
+0.05: Fix menu display - don't draw over the menu and vice-versa. Require
+	double-tap for menu

apps/pace/README.md

@@ -5,7 +5,8 @@ A running pace app, useful for races. Will also record your splits and display t
 Drag up/down on the pause menu to scroll through your splits.
 Press the button to pause/resume - when resumed, pressing the button will pause instantly, regardless of whether the screen is locked.
 
+Double tap the pause screen to access a menu for finer control
+
 # Todo
 
 - Load splits on app start, button to reset (exs is always reset)
-- Show total time on pause screen

apps/pace/app.js

@@ -10,6 +10,7 @@
     });
     var S_1 = require("Storage");
     var drawTimeout_1;
+    var menuShown_1 = false;
     var splits_1 = [];
     var splitOffset_1 = 0, splitOffsetPx_1 = 0;
     var GPS_TIMEOUT_MS_1 = 30000;
@@ -113,12 +114,10 @@
     };
     var pauseRun_1 = function () {
         exs_1.stop();
-        Bangle.setGPSPower(0, "pace");
         draw_1();
     };
     var resumeRun_1 = function () {
         exs_1.resume();
-        Bangle.setGPSPower(1, "pace");
         g.clearRect(Bangle.appRect);
         layout_1.forgetLazyState();
         draw_1();
@@ -129,6 +128,12 @@
         else
             resumeRun_1();
     };
+    var hideMenu_1 = function () {
+        if (!menuShown_1)
+            return;
+        Bangle.setUI();
+        menuShown_1 = false;
+    };
     exs_1.start();
     exs_1.stats.dist.on("notify", function (dist) {
         var prev = { time: 0, dist: 0 };
@@ -156,7 +161,7 @@
     });
     setWatch(function () { return onButton_1(); }, BTN1, { repeat: true });
     Bangle.on('drag', function (e) {
-        if (exs_1.state.active || e.b === 0)
+        if (exs_1.state.active || e.b === 0 || menuShown_1)
             return;
         splitOffsetPx_1 -= e.dy;
         if (splitOffsetPx_1 > 20) {
@@ -174,32 +179,34 @@
     Bangle.on('twist', function () {
         Bangle.setBacklight(1);
     });
-    Bangle.on('tap', function (_e) {
-        if (exs_1.state.active)
+    Bangle.on('tap', function (e) {
+        if (exs_1.state.active || menuShown_1 || !e.double)
             return;
+        menuShown_1 = true;
         var menu = {
             "": {
                 remove: function () {
                     draw_1();
                 },
             },
             "< Back": function () {
-                Bangle.setUI();
+                hideMenu_1();
             },
             "Zero time": function () {
                 exs_1.start();
                 exs_1.stop();
-                Bangle.setUI();
+                hideMenu_1();
             },
             "Clear splits": function () {
                 splits_1.splice(0, splits_1.length);
-                Bangle.setUI();
+                hideMenu_1();
             },
         };
         E.showMenu(menu);
     });
     Bangle.loadWidgets();
     Bangle.drawWidgets();
+    Bangle.setGPSPower(1, "pace");
     g.clearRect(Bangle.appRect);
     draw_1();
 }

apps/pace/app.ts

@@ -14,6 +14,7 @@ const exs = require("exstats").getStats(
 const S = require("Storage");
 
 let drawTimeout: TimeoutId | undefined;
+let menuShown = false;
 
 type Dist = number & { brand: 'dist' };
 type Time = number & { brand: 'time' };
@@ -151,13 +152,11 @@ const drawSplit = (i: number, y: number, pace: number | string) =>
 
 const pauseRun = () => {
   exs.stop();
-  Bangle.setGPSPower(0, "pace")
   draw();
 };
 
 const resumeRun = () => {
   exs.resume();
-  Bangle.setGPSPower(1, "pace");
 
   g.clearRect(Bangle.appRect); // splits -> layout, clear. layout -> splits, fine
   layout.forgetLazyState();
@@ -171,6 +170,12 @@ const onButton = () => {
     resumeRun();
 };
 
+const hideMenu = () => {
+  if (!menuShown) return;
+  Bangle.setUI(); // calls `remove`, which handles redrawing
+  menuShown = false;
+}
+
 exs.start(); // aka reset
 
 exs.stats.dist.on("notify", (dist) => {
@@ -209,7 +214,7 @@ Bangle.on('lock', locked => {
 setWatch(() => onButton(), BTN1, { repeat: true });
 
 Bangle.on('drag', e => {
-  if (exs.state.active || e.b === 0) return;
+  if (exs.state.active || e.b === 0 || menuShown) return;
 
   splitOffsetPx -= e.dy;
   if (splitOffsetPx > 20) {
@@ -226,26 +231,28 @@ Bangle.on('twist', () => {
   Bangle.setBacklight(1);
 });
 
-Bangle.on('tap', _e => {
-  if(exs.state.active) return;
+Bangle.on('tap', e => {
+  // require a double tap, to avoid picking up menu "< Back" taps
+  if(exs.state.active || menuShown || !e.double) return;
 
+  menuShown = true;
   const menu: Menu = {
     "": {
       remove: () => {
         draw();
       },
     },
     "< Back": () => {
-      Bangle.setUI(); // calls `remove`, which handles redrawing
+      hideMenu();
     },
     "Zero time": () => {
       exs.start(); // calls reset
       exs.stop(); // re-pauses
-      Bangle.setUI();
+      hideMenu();
     },
     "Clear splits": () => {
       splits.splice(0, splits.length);
-      Bangle.setUI();
+      hideMenu();
     },
   };
 
@@ -254,6 +261,7 @@ Bangle.on('tap', _e => {
 
 Bangle.loadWidgets();
 Bangle.drawWidgets();
+Bangle.setGPSPower(1, "pace");
 
 g.clearRect(Bangle.appRect);
 draw();

apps/pace/metadata.json

@@ -1,7 +1,7 @@
 {
 	"id": "pace",
 	"name": "Pace",
-	"version": "0.04",
+	"version": "0.05",
 	"description": "Show pace and time running splits",
 	"icon": "app.png",
 	"tags": "run,running,fitness,outdoors",