runplus: add zoom ability

to make stats easier to read while running, e.g. focus on pace

apps/runplus/app.js

@@ -1,5 +1,5 @@
 let runInterval;
-let screen = "main"; // main | karvonen | menu
+let screen = "main"; // main | karvonen | menu | zoom
 // Run interface wrapped in a function
 const ExStats = require("exstats");
 let B2 = process.env.HWVERSION===2;
@@ -7,6 +7,7 @@ let Layout = require("Layout");
 let locale = require("locale");
 let fontHeading = "6x8:2";
 let fontValue = B2 ? "6x15:2" : "6x8:3";
+let zoomFont = "12x20:3";
 let headingCol = "#888";
 let fixCount = 0;
 const wu = require("widget_utils");
@@ -51,12 +52,17 @@ function setStatus(running) {
   layout.button.label = running ? "STOP" : "START";
   layout.status.label = running ? "RUN" : "STOP";
   layout.status.bgCol = running ? "#0f0" : "#f00";
-  layout.render();
+  if (screen === "main") layout.render();
 }
 
 // Called to start/stop running
 function onStartStop() {
-  if (screen === "karvonen") run(); // stop karvonen display
+  switch (screen) {
+    case "karvonen":
+      // start/stop on the karvonen screen reverts us to the main screen
+      setScreen("main");
+      break;
+  }
 
   var running = !exs.state.active;
   var shouldResume = false;
@@ -100,7 +106,7 @@ function onStartStop() {
   promise.then(() => {
     if (running) {
       if (shouldResume)
-        exs.resume()
+        exs.resume();
       else
         exs.start();
     } else {
@@ -112,23 +118,68 @@ function onStartStop() {
   });
 }
 
+function zoom(statID) {
+  if (screen !== "main") return;
+
+  setScreen("zoom");
+
+  const onTouch = () => {
+    Bangle.removeListener("touch", onTouch);
+    Bangle.removeListener("twist", onTwist);
+    if (runInterval) clearInterval(runInterval);
+    runInterval = undefined;
+    setScreen("main");
+  };
+  Bangle.on("touch", onTouch); // queued after layout's touchHandler
+
+  const onTwist = () => {
+    Bangle.setLCDPower(1);
+  };
+  Bangle.on("twist", onTwist);
+
+  const draw = () => {
+    const R = Bangle.appRect;
+
+    g.reset()
+      .clearRect(R)
+      .setFontAlign(0, 0);
+
+    layout.render(layout.bottom);
+
+    const stat = exs.stats[statID];
+    g
+      .setFont(zoomFont)
+      .setColor(headingCol)
+      .drawString(stat.title.toUpperCase(), R.x+R.w/2, R.y+R.h/3)
+      .setColor("#fff")
+      .drawString(stat.getString(), R.x+R.w/2, R.y+R.h*2/3);
+  };
+  layout.lazy = false; // restored when we go back to "main"
+
+  if (runInterval) clearInterval(runInterval);
+  runInterval = setInterval(draw, 1000);
+  draw();
+}
+
 let lc = [];
 // Load stats in pair by pair
 for (let i=0;i<statIDs.length;i+=2) {
   let sa = exs.stats[statIDs[i+0]];
   let sb = exs.stats[statIDs[i+1]];
+  let cba = zoom.bind(null, statIDs[i]);
+  let cbb = zoom.bind(null, statIDs[i+1]);
   lc.push({ type:"h", filly:1, c:[
-    sa?{type:"txt", font:fontHeading, label:sa.title.toUpperCase(), fillx:1, col:headingCol }:{},
-    sb?{type:"txt", font:fontHeading, label:sb.title.toUpperCase(), fillx:1, col:headingCol }:{}
+    sa?{type:"txt", font:fontHeading, label:sa.title.toUpperCase(), fillx:1, col:headingCol, cb: cba }:{},
+    sb?{type:"txt", font:fontHeading, label:sb.title.toUpperCase(), fillx:1, col:headingCol, cb: cbb }:{}
   ]}, { type:"h", filly:1, c:[
-    sa?{type:"txt", font:fontValue, label:sa.getString(), id:sa.id, fillx:1 }:{},
-    sb?{type:"txt", font:fontValue, label:sb.getString(), id:sb.id, fillx:1 }:{}
+    sa?{type:"txt", font:fontValue, label:sa.getString(), id:sa.id, fillx:1, cb: cba }:{},
+    sb?{type:"txt", font:fontValue, label:sb.getString(), id:sb.id, fillx:1, cb: cbb }:{}
   ]});
   if (sa) sa.on('changed', e=>layout[e.id].label = e.getString());
   if (sb) sb.on('changed', e=>layout[e.id].label = e.getString());
 }
 // At the bottom put time/GPS state/etc
-lc.push({ type:"h", filly:1, c:[
+lc.push({ type:"h", id:"bottom", filly:1, c:[
   {type:"txt", font:fontHeading, label:"GPS", id:"gps", fillx:1, bgCol:"#f00" },
   {type:"txt", font:fontHeading, label:"00:00", id:"clock", fillx:1, bgCol:g.theme.fg, col:g.theme.bg },
   {type:"txt", font:fontHeading, label:"---", id:"status", fillx:1 }
@@ -166,13 +217,22 @@ Bangle.on("GPS", function(fix) {
   }
 });
 
-// run() function used to start updating traditional run ui
-function run() {
+function setScreen(to) {
+  switch (screen) {
+    case "karvonen":
       require("runplus_karvonen").stop();
-  screen = "main";
       wu.show();
       Bangle.drawWidgets();
+      break;
+  }
+
+  if (runInterval) clearInterval(runInterval);
+  runInterval = undefined;
   g.reset().clearRect(Bangle.appRect);
+
+  screen = to;
+  switch (screen) {
+    case "main":
       layout.lazy = false;
       layout.render();
       layout.lazy = true;
@@ -183,34 +243,25 @@ function run() {
           if (screen !== "menu") layout.render();
         }, 1000);
       }
-}
-run();
+      break;
 
-///////////////////////////////////////////////
-//                Karvonen
-///////////////////////////////////////////////
-
-function karvonen(){
-  // stop updating and drawing the traditional run app UI
-  setScreen("karvonen");
+    case "karvonen":
       require("runplus_karvonen").start(settings.HRM, exs.stats.bpm);
+      break;
   }
-
-function setScreen(to) {
-  if (runInterval) clearInterval(runInterval);
-  runInterval = undefined;
-  g.reset().clearRect(Bangle.appRect);
-  screen = to;
 }
 
 // Define the function to go back and forth between the different UI's
 function swipeHandler(LR,_) {
   if (screen !== "menu"){
     if (LR < 0 && screen == "karvonen")
-      run(); // back to main screen
+      setScreen("main");
     if (LR > 0 && screen !== "karvonen")
-      karvonen();
+      setScreen("karvonen"); // stop updating and drawing the traditional run app UI
   }
 }
+
+setScreen("main");
+
 // Listen for swipes with the swipeHandler
 Bangle.on("swipe", swipeHandler);