pace: show GPS strength (satellites)

pinched from `pacer`

apps/pace/app.ts

@@ -15,6 +15,7 @@ const S = require("Storage");
 
 let drawTimeout: TimeoutId | undefined;
 let menuShown = false;
+let latestGps: GPSFix | undefined;
 
 type Dist = number & { brand: 'dist' };
 type Time = number & { brand: 'time' };
@@ -29,36 +30,72 @@ let splitOffset = 0, splitOffsetPx = 0;
 
 const GPS_TIMEOUT_MS = 30000;
 
+const drawGpsLvl = (l: Layout.RenderedHierarchy) => {
+  const gps = latestGps;
+  const nsats = gps?.satellites ?? 0;
+
+  if (!gps || !gps.fix)
+    g.setColor("#FF0000");
+  else if (gps.satellites < 4)
+    g.setColor("#FF5500");
+  else if (gps.satellites < 6)
+    g.setColor("#FF8800");
+  else if (gps.satellites < 8)
+    g.setColor("#FFCC00");
+  else
+    g.setColor("#00FF00");
+
+  g.clearRect(l.x, l.y, l.x + l.w, l.y + l.h);
+
+  g.fillRect(
+    l.x,
+    l.y + l.h - 10 - (l.h - 10) * ((nsats > 12 ? 12 : nsats) / 12),
+    l.x + l.w,
+    l.y + l.h
+  );
+};
+
 const layout = new Layout({
-  type: "v",
+  type: "h",
   c: [
     {
-      type: "txt",
+      type: "custom",
-      font: "6x8:2",
+      render: drawGpsLvl,
-      label: "Pace",
+      filly: 1,
-      id: "paceLabel",
+      width: 10,
-      pad: 4
     },
     {
-      type: "txt",
+      type: "v",
-      font: "Vector:40",
+      c: [
-      label: "",
+        {
-      id: "pace",
+          type: "txt",
-      halign: 0
+          font: "6x8:2",
-    },
+          label: "Pace",
-    {
+          id: "paceLabel",
-      type: "txt",
+          pad: 4
-      font: "6x8:2",
+        },
-      label: "Time",
+        {
-      id: "timeLabel",
+          type: "txt",
-      pad: 4
+          font: "Vector:40",
-    },
+          label: "",
-    {
+          id: "pace",
-      type: "txt",
+          halign: 0
-      font: "Vector:40",
+        },
-      label: "",
+        {
-      id: "time",
+          type: "txt",
-      halign: 0
+          font: "6x8:2",
+          label: "Time",
+          id: "timeLabel",
+          pad: 4
+        },
+        {
+          type: "txt",
+          font: "Vector:40",
+          label: "",
+          id: "time",
+          halign: 0
+        },
+      ]
     },
   ]
 }, {
@@ -262,6 +299,7 @@ Bangle.on('tap', e => {
 Bangle.loadWidgets();
 Bangle.drawWidgets();
 Bangle.setGPSPower(1, "pace");
+Bangle.on("GPS", gps => latestGps = gps);
 
 g.clearRect(Bangle.appRect);
 draw();