WIP Battery widget & metadata subscription

package.json

@@ -35,6 +35,7 @@
     "immer": "^9.0.15",
     "mapbox-gl": "npm:empty-npm-package@^1.0.0",
     "maplibre-gl": "^2.4.0",
+    "pretty-ms": "^8.0.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.37.0",

pnpm-lock.yaml

@@ -30,6 +30,7 @@ specifiers:
   postcss: ^8.4.17
   prettier: ^2.7.1
   prettier-plugin-tailwindcss: ^0.1.13
+  pretty-ms: ^8.0.0
   react: ^18.2.0
   react-dom: ^18.2.0
   react-hook-form: ^7.37.0
@@ -65,6 +66,7 @@ dependencies:
   immer: 9.0.15
   mapbox-gl: /empty-npm-package/1.0.0
   maplibre-gl: 2.4.0
+  pretty-ms: 8.0.0
   react: 18.2.0
   react-dom: 18.2[email protected]
   react-hook-form: 7.37[email protected]
@@ -3150,6 +3152,11 @@ packages:
       lines-and-columns: 1.2.4
     dev: true
 
+  /parse-ms/3.0.0:
+    resolution: {integrity: sha512-Tpb8Z7r7XbbtBTrM9UhpkzzaMrqA2VXMT3YChzYltwV3P3pM6t8wl7TvpMnSTosz1aQAdVib7kdoys7vYOPerw==}
+    engines: {node: '>=12'}
+    dev: false
+
   /path-exists/4.0.0:
     resolution: {integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==}
     engines: {node: '>=8'}
@@ -3287,6 +3294,13 @@ packages:
     engines: {node: '>=10.13.0'}
     hasBin: true
 
+  /pretty-ms/8.0.0:
+    resolution: {integrity: sha512-ASJqOugUF1bbzI35STMBUpZqdfYKlJugy6JBziGi2EE+AL5JPJGSzvpeVXojxrr0ViUYoToUjb5kjSEGf7Y83Q==}
+    engines: {node: '>=14.16'}
+    dependencies:
+      parse-ms: 3.0.0
+    dev: false
+
   /process-nextick-args/2.0.1:
     resolution: {integrity: sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==}
     dev: true

src/components/Widgets/BatteryWidget.tsx

@@ -1,10 +1,10 @@
 import type React from "react";
+import { useEffect, useState } from "react";
 
-import { Battery100Icon, BoltIcon } from "@heroicons/react/24/outline";
+import prettyMilliseconds from "pretty-ms";
 
-import { Card } from "../Card.js";
+import { useDevice } from "@app/core/providers/useDevice.js";
-import { Dropdown } from "../Dropdown.js";
+import { Battery100Icon, ClockIcon } from "@heroicons/react/24/outline";
-import { Mono } from "../Mono.js";
 
 export interface BatteryWidgetProps {
   batteryLevel: number;
@@ -15,23 +15,73 @@ export const BatteryWidget = ({
   batteryLevel,
   voltage,
 }: BatteryWidgetProps): JSX.Element => {
+  const { nodes, hardware } = useDevice();
+
+  const [timeRemaining, setTimeRemaining] = useState("Unknown");
+
+  useEffect(() => {
+    const stats = nodes.find(
+      (n) => n.data.num === hardware.myNodeNum
+    )?.deviceMetrics;
+
+    if (stats) {
+      let currentStat: number | undefined = undefined;
+      let currentTime = new Date();
+      let previousStat: number | undefined = undefined;
+      let previousTime = new Date();
+      for (const stat of [...stats].reverse()) {
+        if (stat.batteryLevel) {
+          if (!currentStat) {
+            currentStat = stat.batteryLevel;
+            currentTime = stat.timestamp;
+          } else {
+            previousStat = stat.batteryLevel;
+            previousTime = stat.timestamp;
+          }
+          break;
+        }
+      }
+
+      if (currentStat && previousStat) {
+        const timeDiff = currentTime.getTime() - previousTime.getTime();
+        const statDiff = Math.abs(currentStat - previousStat);
+        //
+        console.log(`timeDiff: ${timeDiff}`);
+        console.log(`statDiff: ${statDiff}`);
+
+        //convert to ms/%
+        const msPerPercent = timeDiff / statDiff;
+        console.log(`msPerPercent: ${msPerPercent}`);
+        const formatted = prettyMilliseconds(
+          (100 - currentStat) * msPerPercent
+        );
+        setTimeRemaining(formatted);
+      } else setTimeRemaining("Unknown");
+    }
+  }, [hardware.myNodeNum, nodes]);
+
   return (
-    <Card className="flex-col">
+    <div className="relative overflow-hidden rounded-lg bg-white p-4 shadow">
-      <Dropdown title="Battery" icon={<BoltIcon className="h-4" />}>
+      <dt>
-        <div className="flex">
+        <div className="absolute rounded-md bg-indigo-500 p-3">
-          <div className="flex w-20 bg-slate-700 p-3">
+          <Battery100Icon className="h-6 text-white" aria-hidden="true" />
-            <Battery100Icon className="m-auto h-12 text-white" />
-          </div>
-          <span className="m-auto text-lg">
-            {batteryLevel}
-            <Mono>%</Mono>
-          </span>
-          <span className="m-auto text-lg">
-            {voltage.toPrecision(2)}
-            <Mono>v</Mono>
-          </span>
         </div>
-      </Dropdown>
+        <p className="ml-16 truncate text-sm font-medium text-gray-500">
-    </Card>
+          Battery State
+        </p>
+      </dt>
+      <dd className="ml-16 flex items-baseline">
+        <p className="text-2xl font-semibold text-gray-900">{batteryLevel}%</p>
+        <p
+          className={`ml-2 flex items-baseline text-sm font-semibold text-orange-600`}
+        >
+          <ClockIcon
+            className="text-Orange-500 h-5 w-5 flex-shrink-0 self-center"
+            aria-hidden="true"
+          />
+          Unknown
+        </p>
+      </dd>
+    </div>
   );
 };

src/core/stores/deviceStore.ts

@@ -32,8 +32,9 @@ export interface Channel {
 }
 
 export interface Node {
-  deviceMetrics: Protobuf.DeviceMetrics[];
+  deviceMetrics: (Protobuf.DeviceMetrics & { timestamp: Date })[];
-  environmentMetrics: Protobuf.EnvironmentMetrics[];
+  environmentMetrics: (Protobuf.EnvironmentMetrics & { timestamp: Date })[];
+  metadata?: Protobuf.DeviceMetadata;
   data: Protobuf.NodeInfo;
 }
 
@@ -72,6 +73,7 @@ export interface Device {
   addConnection: (connection: Types.ConnectionType) => void;
   addMessage: (message: MessageWithAck) => void;
   addWaypointMessage: (message: WaypointIDWithAck) => void;
+  addDeviceMetadataMessage: (metadata: Types.DeviceMetadataPacket) => void;
   ackMessage: (channelIndex: number, messageId: number) => void;
   setQRDialogOpen: (open: boolean) => void;
 }
@@ -226,6 +228,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                       snr: metrics.packet.rxSnr,
                       lastHeard: new Date().getSeconds(),
                     }),
+                    metadata: undefined,
                     deviceMetrics: [],
                     environmentMetrics: [],
                   };
@@ -256,14 +259,16 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                         }
                       }
 
-                      node.deviceMetrics.push(
+                      node.deviceMetrics.push({
-                        metrics.data.variant.deviceMetrics
+                        ...metrics.data.variant.deviceMetrics,
-                      );
+                        timestamp: new Date(metrics.packet.rxTime),
+                      });
                       break;
                     case "environmentMetrics":
-                      node.environmentMetrics.push(
+                      node.environmentMetrics.push({
-                        metrics.data.variant.environmentMetrics
+                        ...metrics.data.variant.environmentMetrics,
-                      );
+                        timestamp: new Date(metrics.packet.rxTime),
+                      });
                       break;
                   }
                 }
@@ -335,6 +340,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                   } else {
                     device.nodes.push({
                       data: Protobuf.NodeInfo.create(nodeInfo.data),
+                      metadata: undefined,
                       deviceMetrics: [],
                       environmentMetrics: [],
                     });
@@ -385,6 +391,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                         snr: user.packet.rxSnr,
                         user: user.data,
                       }),
+                      metadata: undefined,
                       deviceMetrics: [],
                       environmentMetrics: [],
                     });
@@ -414,6 +421,7 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
                         num: position.packet.from,
                         position: position.data,
                       }),
+                      metadata: undefined,
                       deviceMetrics: [],
                       environmentMetrics: [],
                     });
@@ -456,6 +464,23 @@ export const useDeviceStore = create<DeviceState>((set, get) => ({
               })
             );
           },
+          addDeviceMetadataMessage: (metadata) => {
+            set(
+              produce<DeviceState>((draft) => {
+                const device = draft.devices.get(id);
+                if (device) {
+                  const node = device.nodes.find(
+                    (n) => n.data.num === metadata.packet.from
+                  );
+                  if (node) {
+                    node.metadata = metadata.data;
+                  } else {
+                    console.log("Node not found!");
+                  }
+                }
+              })
+            );
+          },
           ackMessage: (channelIndex: number, messageId: number) => {
             console.log("ack called");
 

src/core/subscriptions.ts

@@ -13,6 +13,10 @@ export const subscribeAll = (
   // onLogEvent
   // onMeshHeartbeat
 
+  connection.onDeviceMetadataPacket.subscribe((metadataPacket) => {
+    device.addDeviceMetadataMessage(metadataPacket);
+  });
+
   connection.onRoutingPacket.subscribe((routingPacket) => {
     console.log(routingPacket);
   });