pomoplus: HW button hide/show widgets + SW buttons

apps/pomoplus/ChangeLog

@@ -2,4 +2,6 @@
 0.02-0.04: Bug fixes
 0.05: Submitted to the app loader
 0.06: Added setting to show clock after start/resume
-0.07: Make fonts and buttons larger for legibility and ease of use.
+0.07: Make fonts and buttons larger for legibility and ease of use. Hide
+	buttons when screen is locked. Toggle the graphical presentation when
+	pressing the (middle) hardware button.

apps/pomoplus/README.md

@@ -19,13 +19,16 @@
 - Click the pause button if you're interrupted with something urgent.
 - Click the cross button if you need to end your work session.
 - Click the skip button if you forgot to start the pomodori after the urgent interruption and ended up working for a long time! (Good on ya'!)
+- Press the (middle) hardware button to toggle visibility of widgets and software buttons. 
 
 Configure the pomodori and break times in the settings.
 
 ## Features
 
 Continues to run in the background if you exit the app while the pomodoro timer is running.
 
+The buttons and widgets hide automatically when the screen is locked.
+
 ## Requests
 
 Open an issue on the espruino/BangleApps issue tracker.

apps/pomoplus/app.js

@@ -88,10 +88,34 @@ function drawTimerAndMessage() {
 
 if (!Bangle.isLocked()) drawButtons();
 
-Bangle.on("touch", (button, xy) => {
+let hideButtons = ()=>{
+    g.clearRect(0,BUTTON_TOP,W-1,H-1);
+}
+
+let graphicState = 0; // 0 - all is visible, 1 - widgets are hidden, 2 - widgets and buttons are hidden.
+let switchGraphicsOnButton = (n)=>{
+  if (process.env.HWVERSION == 2) n=2; // Translate Bangle.js 2 button to Bangle.js 1 middle button.
+  if (n == 2) {
+    if (graphicState == 0) {
+      wu.hide();
+    }
+    if (graphicState == 1) {
+      hideButtons();
+    }
+    if (graphicState == 2) {
+      wu.show();
+      drawButtons();
+    }
+
+    graphicState = (graphicState+1) % 3;
+  }
+}
+
+let touchHandler = (button, xy) => {
   //If we support full touch and we're not touching the keys, ignore.
   //If we don't support full touch, we can't tell so just assume we are.
-  if (xy !== undefined && xy.y <= g.getHeight() - BUTTON_HEIGHT) return;
+  let isOutsideButtonArea = xy !== undefined && xy.y <= g.getHeight() - BUTTON_HEIGHT;
+  if (isOutsideButtonArea || graphicState == 2) return;
 
   if (!common.state.wasRunning) {
     //If we were never running, there is only one button: the start button
@@ -147,7 +171,14 @@ Bangle.on("touch", (button, xy) => {
       if (common.settings.showClock) Bangle.showClock();
     }
   }
-});
+};
+
+Bangle.setUI({
+  mode: "custom",
+  touch: touchHandler,
+  btn: switchGraphicsOnButton
+
+})
 
 let timerInterval;
 
@@ -168,7 +199,7 @@ if (common.state.running) {
 
 Bangle.on('lock', (on, reason) => {
   if (on) {
-    g.clearRect(0,BUTTON_TOP,W-1,H-1);
+    hideButtons();
     wu.hide();
   }
   if (!on) {