health 0.16: Code tidyup, add back button in top left of health app graphs

apps/health/ChangeLog

@@ -14,3 +14,4 @@
 0.13: Add support for internationalization
 0.14: Move settings
 0.15: Fix charts (fix #1366)
+0.16: Code tidyup, add back button in top left of health app graphs

apps/health/app.js

@@ -1,6 +1,4 @@
 function menuMain() {
-  swipe_enabled = false;
-  clearButton();
   E.showMenu({
     "": { title: /*LANG*/"Health Tracking" },
     /*LANG*/"< Back": () => load(),
@@ -12,8 +10,6 @@ function menuMain() {
 }
 
 function menuStepCount() {
-  swipe_enabled = false;
-  clearButton();
   E.showMenu({
     "": { title:/*LANG*/"Steps" },
     /*LANG*/"< Back": () => menuMain(),
@@ -23,8 +19,6 @@ function menuStepCount() {
 }
 
 function menuMovement() {
-  swipe_enabled = false;
-  clearButton();
   E.showMenu({
     "": { title:/*LANG*/"Movement" },
     /*LANG*/"< Back": () => menuMain(),
@@ -34,8 +28,6 @@ function menuMovement() {
 }
 
 function menuHRM() {
-  swipe_enabled = false;
-  clearButton();
   E.showMenu({
     "": { title:/*LANG*/"Heart Rate" },
     /*LANG*/"< Back": () => menuMain(),
@@ -48,9 +40,6 @@ function stepsPerHour() {
   E.showMessage(/*LANG*/"Loading...");
   var data = new Uint16Array(24);
   require("health").readDay(new Date(), h=>data[h.hr]+=h.steps);
-  g.clear(1);
-  Bangle.drawWidgets();
-  g.reset();
   setButton(menuStepCount);
   barChart("HOUR", data);
 }
@@ -59,9 +48,6 @@ function stepsPerDay() {
   E.showMessage(/*LANG*/"Loading...");
   var data = new Uint16Array(31);
   require("health").readDailySummaries(new Date(), h=>data[h.day]+=h.steps);
-  g.clear(1);
-  Bangle.drawWidgets();
-  g.reset();
   setButton(menuStepCount);
   barChart("DAY", data);
 }
@@ -75,9 +61,6 @@ function hrmPerHour() {
     if (h.bpm) cnt[h.hr]++;
   });
   data.forEach((d,i)=>data[i] = d/cnt[i]);
-  g.clear(1);
-  Bangle.drawWidgets();
-  g.reset();
   setButton(menuHRM);
   barChart("HOUR", data);
 }
@@ -91,9 +74,6 @@ function hrmPerDay() {
     if (h.bpm) cnt[h.day]++;
   });
   data.forEach((d,i)=>data[i] = d/cnt[i]);
-  g.clear(1);
-  Bangle.drawWidgets();
-  g.reset();
   setButton(menuHRM);
   barChart("DAY", data);
 }
@@ -102,9 +82,6 @@ function movementPerHour() {
   E.showMessage(/*LANG*/"Loading...");
   var data = new Uint16Array(24);
   require("health").readDay(new Date(), h=>data[h.hr]+=h.movement);
-  g.clear(1);
-  Bangle.drawWidgets();
-  g.reset();
   setButton(menuMovement);
   barChart("HOUR", data);
 }
@@ -113,15 +90,11 @@ function movementPerDay() {
   E.showMessage(/*LANG*/"Loading...");
   var data = new Uint16Array(31);
   require("health").readDailySummaries(new Date(), h=>data[h.day]+=h.movement);
-  g.clear(1);
-  Bangle.drawWidgets();
-  g.reset();
   setButton(menuMovement);
   barChart("DAY", data);
 }
 
 // Bar Chart Code
-
 const w = g.getWidth();
 const h = g.getHeight();
 
@@ -130,13 +103,10 @@ var chart_index;
 var chart_max_datum;
 var chart_label;
 var chart_data;
-var swipe_enabled = false;
-var btn;
 
 // find the max value in the array, using a loop due to array size
 function max(arr) {
   var m = -Infinity;
-
   for(var i=0; i< arr.length; i++)
     if(arr[i] > m) m = arr[i];
   return m;
@@ -145,10 +115,8 @@ function max(arr) {
 // find the end of the data, the array might be for 31 days but only have 2 days of data in it
 function get_data_length(arr) {
   var nlen = arr.length;
-
   for(var i = arr.length - 1; i > 0 && arr[i] == 0;  i--)
     nlen--;
-
   return nlen;
 }
 
@@ -167,15 +135,11 @@ function drawBarChart() {
   const bar_width = (w - 2) / 9;  // we want 9 bars, bar 5 in the centre
   var bar_top;
   var bar;
-
-  g.setColor(g.theme.bg);
-  g.fillRect(0,24,w,h);
+  g.reset().clearRect(0,24,w,h);
 
   for (bar = 1; bar < 10; bar++) {
     if (bar == 5) {
-      g.setFont('6x8', 2);
-      g.setFontAlign(0,-1);
-      g.setColor(g.theme.fg);
+      g.setFont('6x8', 2).setFontAlign(0,-1).setColor(g.theme.fg);
       g.drawString(chart_label + " " + (chart_index + bar -1) + "   " + chart_data[chart_index + bar - 1], g.getWidth()/2, 150);
       g.setColor("#00f");
     } else {
@@ -189,45 +153,26 @@ function drawBarChart() {
       bar_top = bar_bot;
 
     g.fillRect( 1 + (bar - 1)* bar_width, bar_bot, 1 + bar*bar_width, bar_top);
-    g.setColor(g.theme.fg);
-    g.drawRect( 1 + (bar - 1)* bar_width, bar_bot, 1 + bar*bar_width, bar_top);
+    g.setColor(g.theme.fg).drawRect( 1 + (bar - 1)* bar_width, bar_bot, 1 + bar*bar_width, bar_top);
   }
 }
 
-function next_bar() {
-  chart_index = Math.min(data_len - 5, chart_index + 1);
-}
-
-function prev_bar() {
-  // HOUR data starts at index 0, DAY data starts at index 1
-  chart_index = Math.max((chart_label == "DAY") ? -3 : -4, chart_index - 1);
-}
-
-Bangle.on('swipe', dir => {
-  if (!swipe_enabled) return;
-  if (dir == 1) prev_bar(); else next_bar();
-  drawBarChart();
-});
-
-// use setWatch() as Bangle.setUI("updown",..) interacts with swipes
 function setButton(fn) {
-  // cancel callback, otherwise a slight up down movement will show the E.showMenu()
-  Bangle.setUI("updown", undefined);
-
-  if (process.env.HWVERSION == 1)
-    btn = setWatch(fn, BTN2);
-  else
-    btn = setWatch(fn, BTN1);
-}
-
-function clearButton() {
-  if (btn !== undefined) {
-    clearWatch(btn);
-    btn = undefined;
-  }
+  Bangle.setUI({mode:"custom",
+                back:fn,
+                swipe:(lr,ud) => {
+    if (lr == 1) {
+      // HOUR data starts at index 0, DAY data starts at index 1
+      chart_index = Math.max((chart_label == "DAY") ? -3 : -4, chart_index - 1);
+    } else if (lr<0) {
+      chart_index = Math.min(data_len - 5, chart_index + 1);
+    } else {
+      return fn();
+    }
+    drawBarChart();
+  }});
 }
 
 Bangle.loadWidgets();
 Bangle.drawWidgets();
-
 menuMain();

apps/health/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "health",
   "name": "Health Tracking",
-  "version": "0.15",
+  "version": "0.16",
   "description": "Logs health data and provides an app to view it",
   "icon": "app.png",
   "tags": "tool,system,health",