displays battery status of heart rate monitor in frontend

README.md

@@ -24,7 +24,7 @@ Open Rowing Monitor implements a physics model to simulate the typical metrics o
 * Strokes per Minute
 * Calories used (kcal)
 * Training Duration
-* Heart Rate (requires BLE Heart Rate Monitor)
+* Heart Rate (requires a BLE Heart Rate Monitor)
 
 ### Web Interface
 
@@ -41,7 +41,7 @@ Fitness Machine Service (FTMS) is a standardized GATT protocol for different typ
 
 **FTMS Rower:** This is the FTMS profile for rowing machines and supports all rowing specific metrics (such as stroke rate). So far not many training applications for this profile exist, but the market is evolving. I've successfully tested it with [EXR](https://www.exrgame.com), [MyHomeFit](https://myhomefit.de) and [Kinomap](https://www.kinomap.com).
 
-**FTMS Indoor Bike:** This FTMS profile is used by Smart Bike Trainers and widely adopted by training applications for bike training. It does not support rowing specific metrics. But we can present metrics such as power and distance to the biking application. So why not use your virtual rowing bike to row up a mountain in [Zwift](https://www.zwift.com), [Bkool](https://www.bkool.com), [The Sufferfest](https://thesufferfest.com) or similar :-)
+**FTMS Indoor Bike:** This FTMS profile is used by Smart Bike Trainers and widely adopted by training applications for bike training. It does not support rowing specific metrics. But we can present metrics such as power and distance to the biking application and use cadence for stroke rate. So why not use your virtual rowing bike to row up a mountain in [Zwift](https://www.zwift.com), [Bkool](https://www.bkool.com), [The Sufferfest](https://thesufferfest.com) or similar :-)
 
 **Concept2 PM:** Open Rowing Monitor also implements part of the Concept2 PM Bluetooth Smart Communication Interface Definition. This is still work in progress and only implements the most common parts of the spec, so it will not work with all applications that support C2 rowing machines. It currently works with all the samples from [The Erg Arcade](https://ergarcade.com), i.e. you can [row in the clouds](https://ergarcade.github.io/mrdoob-clouds/). This also works very well with [EXR](https://www.exrgame.com).
 

app/client/app.js

@@ -70,6 +70,12 @@ export function createApp () {
           if (data.heartrate !== 0) {
             document.getElementById('heartrate-container').style.display = 'inline-block'
             document.getElementById('strokes-total-container').style.display = 'none'
+            if (data.heartrateBatteryLevel !== undefined) {
+              document.getElementById('heartrate-battery-container').style.display = 'inline-block'
+              setHeartrateMonitorBatteryLevel(data.heartrateBatteryLevel)
+            } else {
+              document.getElementById('heartrate-battery-container').style.display = 'none'
+            }
           } else {
             document.getElementById('strokes-total-container').style.display = 'inline-block'
             document.getElementById('heartrate-container').style.display = 'none'
@@ -145,6 +151,13 @@ export function createApp () {
     if (socket)socket.send(JSON.stringify({ command: 'switchPeripheralMode' }))
   }
 
+  function setHeartrateMonitorBatteryLevel (batteryLevel) {
+    if (document.getElementById('battery-level') !== null) {
+      // 416 is the max width value of the battery bar in the SVG graphic
+      document.getElementById('battery-level').setAttribute('width', `${batteryLevel * 416 / 100}px`)
+    }
+  }
+
   return {
     toggleFullscreen,
     reset,

app/client/index.html

@@ -81,6 +81,12 @@
         <span class="metric-value" id="heartrate"></span>
         <span class="metric-unit">bpm</span>
       </div>
+      <div id="heartrate-battery-container">
+        <svg aria-hidden="true" focusable="false" class="icon" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512">
+          <path fill="currentColor" d="M544 160v64h32v64h-32v64H64V160h480m16-64H48c-26.51 0-48 21.49-48 48v224c0 26.51 21.49 48 48 48h512c26.51 0 48-21.49 48-48v-16h8c13.255 0 24-10.745 24-24V184c0-13.255-10.745-24-24-24h-8v-16c0-26.51-21.49-48-48-48z"></path>
+          <rect fill="currentColor" id="battery-level" x="96" y="192" width="416" height="128"></rect>
+        </svg>
+      </div>
     </div>
   </div>
 

app/client/style.css

@@ -23,6 +23,7 @@ body {
 .col {
     background: #002b57;
     text-align: center;
+    padding: 0.5em 0.2em 0 0.2em;
 }
 
 @media (orientation: portrait) {
@@ -50,13 +51,23 @@ body {
 }
 
 div.label, div.content {
-    padding: 5% 1%;
+    padding: 0.1em 0;
 }
 
 .icon {
   height: 1.8em;
 }
 
+#heartrate-battery-container .icon {
+  height: 1.2em;
+}
+
+#heartrate-battery-container {
+  right: 0.2em;
+  bottom: 0;
+  position: absolute;
+  display: none;
+}
 .metric-value {
     font-size: 150%;
 }
@@ -70,7 +81,7 @@ button {
   background-color: #365080;
   border: 0;
   color: white;
-  padding: 0.6em 0.9em 0.4em 0.9em;
+  padding: 0.5em 0.9em 0.3em 0.9em;
   margin: 0.2em;
   font-size: 70%;
   text-align: center;
@@ -80,9 +91,11 @@ button {
 }
 
 #close-button, #heartrate-container {
-  display:none;
+  display: none;
 }
 
 #heartrate-container, #strokes-total-container {
-  width:100%;
+  width: 100%;
+  height: 100%;
+  position: relative;
 }

docs/backlog.md

@@ -4,7 +4,6 @@ This is the very minimalistic Backlog for further development of this project.
 
 ## Soon
 
-* monitor battery level of heart rate monitor and show hint if battery is low
 * add an update script to simplify the migration to new versions
 * validate FTMS with more training applications and harden implementation (i.e. Holofit and Coxswain)
 * record a longer rowing session and analyze two encountered problems: 1) rarely the stroke rate doubles for a short duration (might be a problem with stroke detection when measurements are imprecise), 2) in one occasion the measured power jumped to a very high value after a break (40000 watts)