adds hint, if always on is not enabled

app/client/app.js

@@ -11,15 +11,23 @@ export function createApp () {
   const fieldFormatter = {
     peripheralMode: (value) => {
       if (value === 'PM5') {
-        return 'Concept2 PM5'
+        return 'C2 PM5'
       } else if (value === 'FTMSBIKE') {
-        return 'FTMS (Bike)'
+        return 'FTMS Bike'
       } else {
-        return 'FTMS (Rower)'
+        return 'FTMS Rower'
       }
     },
     distanceTotal: (value) => value >= 10000 ? { value: (value / 1000).toFixed(1), unit: 'km' } : { value, unit: 'm' }
   }
+  const standalone = (window.location.hash === '#:standalone:')
+
+  if (standalone) {
+    document.getElementById('closeButton').style.display = 'inline-block'
+  } else {
+    document.getElementById('fullscreenButton').style.display = 'inline-block'
+  }
+
   let socket
 
   initWebsocket()
@@ -69,29 +77,29 @@ export function createApp () {
   }
 
   async function requestWakeLock () {
-    // use the Wake Lock API to prevent the screen from going to standby
-    if (!('wakeLock' in navigator)) {
-      console.log('Browser does not support Wake Lock API (or maybe we are not using SSL).' +
-      'Now enforcing the screen with a hack, user has to click once for this to work...')
-      // Chrome enables the new Wake Lock API only if the connection is secured via SSL
-      // This is quite annoying for IoT use cases like this one, where the device sits on the
-      // local network and is directly addressed by its IP.
-      // In this case the only way of using SSL is by creating a self signed certificate, and
-      // that would pop up different warnings in the browser (and also prevents fullscreen via
-      // a home screen icon so it can show these warnings). Okay, enough ranting :-)
-      // In this case we use the good old hacky way of keeping the screen on via a hidden video.
-      // eslint-disable-next-line no-undef
-      const noSleep = new NoSleep()
-      document.addEventListener('click', function enableNoSleep () {
-        document.removeEventListener('click', enableNoSleep, false)
-        noSleep.enable()
-      }, false)
-    } else {
-      try {
-        await navigator.wakeLock.request('screen')
-        console.log('Wake Lock is active')
-      } catch (err) {
-        console.log(err)
+    // Chrome enables the new Wake Lock API only if the connection is secured via SSL
+    // This is quite annoying for IoT use cases like this one, where the device sits on the
+    // local network and is directly addressed by its IP.
+    // In this case the only way of using SSL is by creating a self signed certificate, and
+    // that would pop up different warnings in the browser (and also prevents fullscreen via
+    // a home screen icon so it can show these warnings). Okay, enough ranting :-)
+    // In this case we use the good old hacky way of keeping the screen on via a hidden video.
+    // eslint-disable-next-line no-undef
+    const noSleep = new NoSleep()
+    checkAlwaysOn()
+    setInterval(() => {
+      checkAlwaysOn()
+    }, 3000)
+    document.addEventListener('click', function enableNoSleep () {
+      document.removeEventListener('click', enableNoSleep, false)
+      noSleep.enable().then(checkAlwaysOn)
+    }, false)
+
+    function checkAlwaysOn () {
+      if (noSleep.isEnabled) {
+        document.getElementById('alwaysOnHint').style.display = 'none'
+      } else {
+        document.getElementById('alwaysOnHint').style.display = 'grid'
       }
     }
   }
@@ -113,6 +121,10 @@ export function createApp () {
     }
   }
 
+  function close () {
+    window.close()
+  }
+
   function reset () {
     resetFields()
     if (socket)socket.send(JSON.stringify({ command: 'reset' }))
@@ -125,6 +137,7 @@ export function createApp () {
   return {
     toggleFullscreen,
     reset,
+    close,
     switchPeripheralMode
   }
 }

app/client/index.html

@@ -72,11 +72,15 @@
   </div>
   <div class="col">
     <div class="content">
-      <button onclick="app.toggleFullscreen()">Fullscreen</button>
+      <button onclick="app.toggleFullscreen()" id="fullscreenButton">Fullscreen</button>
+      <button onclick="app.close()" id="closeButton">Exit</button>
       <button onclick="app.switchPeripheralMode()" id="peripheralMode">Bluetooth Mode</button>
       <button onclick="app.reset()">Reset</button>
     </div>
   </div>
 </div>
+<div class="popup" id="alwaysOnHint">
+  <p>Tap the screen to prevent display sleep.</p>
+</div>
 </body>
 </html>

app/client/manifest.json

@@ -11,5 +11,6 @@
   ],
   "background_color": "0059B3",
   "display": "fullscreen",
-  "orientation": "any"
+  "orientation": "any",
+  "start_url": "/#:standalone:"
 }

app/client/style.css

@@ -8,6 +8,7 @@ body {
     font-size: calc(16px + (60 - 16) * ((100vw - 300px) / (1920 - 300)));
     font-family: Verdana, "Lucida Sans Unicode", sans-serif;
     user-select: none;
+    overscroll-behavior: contain;
 }
 
 .grid {
@@ -52,10 +53,30 @@ button {
   background-color: #00468c;
   border: 0;
   color: white;
-  padding: 1.5vw 2vw;
-  margin: 1vw;
-  font-size: 80%;
+  padding: 1.2vw 1.5vw;
+  margin: 0.8vw;
+  font-size: 70%;
   text-align: center;
   text-decoration: none;
   display: inline-block;
 }
+
+#fullscreenButton, #closeButton {
+  display:none;
+}
+
+.popup {
+  display: none;
+  position: fixed;
+  border: solid 0.3vw white;
+  align-items: center;
+  justify-content: center;
+  padding: 10px;
+  width: 50vw;
+  height: 10vh;
+  left: 24vw;
+  top: 5vw;
+  background: rgba(80, 0, 0, 0.95);
+  font-size: 60%;
+  z-index: 20;
+}

doc/backlog.md

@@ -4,8 +4,6 @@ This is the very minimalistic Backlog for further development of this project.
 
 ## Soon
 
-* Web UI: hint, when screen is not in always on mode
-* Web UI: replace fullscreen button with exit Button when started from home screen
 * investigate: occasionally stroke rate is too high - seems to happen after rowing pause
 * figure out where to set the Service Advertising Data (FTMS.pdf p 15)
 * investigate bug: crash, when one unsubscribe to BLE "Generic Attribute", probably a bleno bug "handleAttribute.emit is not a function"