Cosmetic and UX improvements

IMO the UX and legibility have been improved

apps/wohrm/ChangeLog

@@ -9,3 +9,4 @@
 0.09: Ported to Bangle.js2
       Home returns to clock, instead of menu
       Add settings
+0.10: Increased(font sizes and bg height for current HR), BJS2 (added support for bottom widgets)

apps/wohrm/README.md

@@ -30,3 +30,9 @@ Pressing middle button will switch off the HRM of the watch and return you to th
 # HRM usage
 The HRM is switched on when the app is started. It stays switch on while the app is running, even
 when the watch screen goes to stand-by.
+
+
+Screenshot BJS2 emul
+
+![](bangle2-workout-HRM-screenshot.png)
+

apps/wohrm/app.js

@@ -18,7 +18,7 @@ let lowerLimitChanged = true;
 
 let limitSetter = Setter.NONE;
 
-let currentHeartRate = 0;
+let currentHeartRate = 0; //use for emuls
 let hrConfidence = -1;
 let hrChanged = true;
 let confidenceChanged = true;
@@ -31,7 +31,7 @@ const upperLshape = isB1 ? {
   left: 210,
   bottom: 40,
   top: 210,
-  rectWidth: 30,
+  rectWidth: 30, 
   cornerRoundness: 5,
   orientation: -1,
   color: '#f00'
@@ -39,7 +39,7 @@ const upperLshape = isB1 ? {
   right: Bangle.appRect.x2-100,
   left: Bangle.appRect.x2,
   bottom: 24,
-  top: Bangle.appRect.y2,
+  top: Bangle.appRect.y2-24, //for bottom widget
   rectWidth: 26,
   cornerRoundness: 4,
   orientation: -1,   // rotated 180°
@@ -58,19 +58,20 @@ const lowerLshape = {
 };
 
 const centerBar = {
-  minY: (upperLshape.bottom + upperLshape.top - upperLshape.rectWidth)/2,
-  maxY: (upperLshape.bottom + upperLshape.top + upperLshape.rectWidth)/2,
+	//1.5 =height*2
+  minY: (upperLshape.bottom + upperLshape.top - (upperLshape.rectWidth*1.5))/2,
+  maxY: (upperLshape.bottom + upperLshape.top + (upperLshape.rectWidth*1.5))/2,
   confidenceWidth: isB1 ? 10 : 8,
-  minX: isB1 ? 55 : upperLshape.rectWidth + 14,
+  minX: isB1 ? 55 : upperLshape.rectWidth + 14, 
   maxX: isB1 ? 165 : Bangle.appRect.x2 - upperLshape.rectWidth - 14
 };
 
 const fontSizes = isB1 ? {
-  limits: 13,
-  heartRate: 24
+  limits: 14,
+  heartRate: 44
 } : {
-  limits: 12,
-  heartRate: 20
+  limits: 16,
+  heartRate: 34
 };
 
 function fillEllipse(x, y, x2, y2) {
@@ -178,10 +179,11 @@ function renderCurrentHeartRate() {
 
   g.setColor(g.theme.bg);
   g.setFontVector(fontSizes.heartRate);
-  g.setFontAlign(1, 0, 0);
+  g.setFontAlign(0, 0, 0);//center
   g.drawString(currentHeartRate,
-               Math.max(upperLshape.right+upperLshape.cornerRoundness,
-                        lowerLshape.right-lowerLshape.cornerRoundness),
+              // Math.max(upperLshape.right+upperLshape.cornerRoundness, lowerLshape.right-lowerLshape.cornerRoundness),
+			  // Math.max(upperLshape.right+upperLshape.cornerRoundness, lowerLshape.right-lowerLshape.cornerRoundness)-(g.stringWidth(currentHeartRate)/2),
+			   centerBar.minX+((centerBar.maxX-centerBar.minX)/2),
                (centerBar.minY+centerBar.maxY)/2);
 
   //Reset alignment to defaults

apps/wohrm/metadata.json

@@ -1,7 +1,7 @@
 {
   "id": "wohrm",
   "name": "Workout HRM",
-  "version": "0.09",
+  "version": "0.10",
   "description": "Workout heart rate monitor notifies you with a buzz if your heart rate goes above or below the set limits.",
   "icon": "app.png",
   "type": "app",