@robdobsn/raftjs 1.1.1

package/examples/dashboard/src/SystemTypeMarty/RICSystemUtils.ts

@@ -0,0 +1,371 @@
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+// RICJS
+// Communications Library
+//
+// Rob Dobson & Chris Greening 2020-2022
+// (C) 2020-2022
+//
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+import RaftLog from "../../../../src/RaftLog";
+import RaftMsgHandler from "../../../../src/RaftMsgHandler";
+import { RaftOKFail, RaftReportMsg } from "../../../../src/RaftTypes";
+import { RICConfiguredAddOns } from "./RICAddOn";
+import RICAddOnManager from "./RICAddOnManager";
+import { RICHWElem, RICHWElemList, RICHWElemList_Str } from "./RICHWElem";
+import { RICCalibInfo } from "./RICTypes";
+
+export default class RICSystemUtils {
+
+  // Message handler
+  private _msgHandler: RaftMsgHandler;
+
+  // Add-on manager
+  private _addOnManager: RICAddOnManager;
+
+  // HWElems (connected to RIC) - excluding AddOns
+  private _hwElemsExcludingAddOns: Array<RICHWElem> = new Array<RICHWElem>();
+  private _connectedAddOns: Array<RICHWElem> = new Array<RICHWElem>();
+
+  // Calibration info
+  private _calibInfo: RICCalibInfo | null = null;
+
+  /**
+   * constructor
+   * @param raftMsgHandler
+   * @param addOnManager
+   */
+  constructor(msgHandler: RaftMsgHandler, addOnManager: RICAddOnManager) {
+    this._msgHandler = msgHandler;
+    this._addOnManager = addOnManager;
+  }
+
+  /**
+   * invalidate
+   */
+  invalidate() {
+    // Invalidate system info
+    this._hwElemsExcludingAddOns = new Array<RICHWElem>();
+    this._connectedAddOns = new Array<RICHWElem>();
+    this._addOnManager.clear();
+    this._calibInfo = null;
+    RaftLog.debug("RICSystem information invalidated");
+  }
+
+  /**
+   *  getSystemInfo - get system info
+   * @returns Promise<RICSystemInfo>
+   *
+   */
+  async retrieveInfo(): Promise<boolean> {
+    // Get HWElems (connected to RIC)
+    try {
+      await this.getHWElemList();
+    } catch (error) {
+      RaftLog.warn("retrieveInfo - failed to get HWElems " + error);
+      return false;
+    }
+
+    // Get calibration info
+    try {
+      await this.getRICCalibInfo(true);
+    } catch (error) {
+      RaftLog.warn("retrieveInfo - failed to get calib info " + error);
+      return false;
+    }
+
+    // Get HWElems (connected to RIC)
+    try {
+      await this.getHWElemList();
+    } catch (error) {
+      RaftLog.warn("retrieveInfo - failed to get HWElems " + error);
+      return false;
+    }
+    return true;
+  }
+
+  /**
+ * Get information Marty system
+ *
+ *  @return void
+ *
+ */
+  async retrieveMartySystemInfo(): Promise<boolean> {
+
+    // Retrieve system info
+    try {
+      const retrieveResult = await this.retrieveInfo();
+      return retrieveResult;
+    } catch (err) {
+      RaftLog.error(`retrieveMartySystemInfo: error ${err}`);
+    }
+    return false;
+  }
+
+  // Mark: Calibration -----------------------------------------------------------------------------------------
+
+  async calibrate(
+    cmd: string,
+    jointList: Array<string>,
+    jointNames: { [key: string]: string }
+  ) {
+    let overallResult = true;
+    if (cmd === "set") {
+      // Set calibration
+      for (const jnt of jointList) {
+        try {
+          // Set calibration on joint
+          const cmdUrl = "calibrate/set/" + jnt;
+          const rsl = await this._msgHandler.sendRICRESTURL<RaftOKFail>(
+            cmdUrl
+          );
+          // saving the calibration... (For the new servo boards it is necessary
+          // to send a "save" command after the calibration ones or any servo
+          // parameter changes in order to save any changes made into nonvolatile storage)
+          const saveCalibCmd = `elem/${jnt}/saveparams`;
+          await this._msgHandler.sendRICRESTURL<RaftOKFail>(saveCalibCmd);
+          if (rsl.rslt != "ok") overallResult = false;
+        } catch (error) {
+          console.log(`calibrate failed on joint ${jnt}`, error);
+        }
+
+        // Wait as writing to flash blocks servo access
+        // as of v0.0.113 of firmware, the pause is no longer required
+        //await new Promise(resolve => setTimeout(resolve, 3000));
+      }
+
+      // ensure all joints are enabled
+      for (const jnt in jointNames) {
+        try {
+          // enable joint
+          const cmdUrl = "servo/" + jnt + "/enable/1";
+          const rsl = await this._msgHandler.sendRICRESTURL<RaftOKFail>(
+            cmdUrl
+          );
+          if (rsl.rslt != "ok") overallResult = false;
+        } catch (error) {
+          console.log(`enable failed on joint ${jnt}`, error);
+        }
+      }
+
+      // Result
+      console.log("Set calibration flag to true");
+      const rslt = new RaftOKFail();
+      rslt.set(overallResult);
+      return rslt;
+    }
+    return false;
+  }
+
+  /**
+   *
+   * getRICCalibInfo
+   * @returns Promise<RICCalibInfo>
+   *
+   */
+  async getRICCalibInfo(forceGetFromRIC = false): Promise<RICCalibInfo> {
+    if (!forceGetFromRIC && this._calibInfo) {
+      return this._calibInfo;
+    }
+    try {
+      this._calibInfo = await this._msgHandler.sendRICRESTURL<RICCalibInfo>(
+        "calibrate"
+      );
+      RaftLog.debug("getRICCalibInfo returned " + this._calibInfo);
+      this._calibInfo.validMs = Date.now();
+      return this._calibInfo;
+    } catch (error) {
+      RaftLog.debug(`getRICCalibInfo Failed to get version ${error}`);
+      return new RICCalibInfo();
+    }
+  }
+
+  /**
+   *
+   * getHWElemList - get the list of hardware elements connected to the robot
+   *               - the result (if successful) is processed as follows:
+   *                       = if no filter is applied then all non-add-ons found are stored in
+   *                         this._hwElemsExcludingAddOns and all addons are stored in this._connectedAddOns
+   *                       = if a filter is applied and this filter is RSAddOns then this._connectedAddOns is
+   *                         updated with the new list of addons
+   *                       = in all cases the discovered list is returned
+   *
+   * @returns Promise<RICHWElemList>
+   *
+   */
+
+  async getHWElemList(filterByType?: string): Promise<Array<RICHWElem>> {
+    // Form a list of the requests to make
+    const reqList: Array<string> = [];
+    let addToNonAddOnsList = false;
+    if (!filterByType) {
+      reqList.push("SmartServo");
+      reqList.push("RSAddOn");
+      reqList.push("BusPixels");
+      reqList.push("!SmartServo,RSAddOn,BusPixels"); // not SmartServo or RSAddOn or BusPixels
+      this._hwElemsExcludingAddOns = new Array<RICHWElem>();
+      addToNonAddOnsList = true;
+    } else if (filterByType === "RSAddOn") {
+      // we treat BusPixels as an RSAddOn
+      // (batch 4 led eye add-ons have type BusPixels)
+      reqList.push("RSAddOn");
+      reqList.push("BusPixels");
+      this._connectedAddOns = new Array<RICHWElem>();
+    } else {
+      reqList.push(filterByType);
+    }
+
+    // Make the requests
+    const fullListOfElems = new Array<RICHWElem>();
+    this._connectedAddOns = [];
+    for (const reqType of reqList) {
+      try {
+        const hwElemList_Str = await this._msgHandler.sendRICRESTURL<
+          RICHWElemList_Str
+        >(`hwstatus/strstat?filterByType=${reqType}`);
+        // if the results of hwElem indicates that we are on an older fw version
+        // send the old hwstatus command and don't expand()
+        // the logic behind deciding if we are on a fw version that
+        // supports strstat is: given that hwElemList_Str.hw === object[]
+        // if we get back string[], then we know we are on an older version
+        // if hw === empty array, then we don't have any hw elems in which
+        // case we can stop at that point
+        const hwElems = hwElemList_Str.hw;
+        let hwElemList;
+        if (hwElems.length) {
+          if (typeof hwElems[0] !== "object") {
+            // we are on an older version
+            hwElemList = await this._msgHandler.sendRICRESTURL<
+              RICHWElemList
+            >(`hwstatus?filterByType=${reqType}`);
+          } else {
+            // we are on the fw version that supports strstat
+            hwElemList = RICHWElemList_Str.expand(hwElemList_Str);
+          }
+        }
+        if (hwElemList && hwElemList.rslt && hwElemList.rslt === "ok") {
+          fullListOfElems.push(...hwElemList.hw);
+          if (reqType === "RSAddOn") {
+            this._connectedAddOns = hwElemList.hw;
+            this._addOnManager.setHWElems(this._connectedAddOns);
+            // Debug
+            RaftLog.debug(
+              `getHWElemList: found ${hwElemList.hw.length} addons/buspixels`
+            );
+          } else if (reqType === "BusPixels") {
+            // BusPixels are treated as an RSAddOn
+            this._connectedAddOns.push(...hwElemList.hw);
+            this._addOnManager.setHWElems(this._connectedAddOns);
+            // Debug
+            RaftLog.debug(
+              `getHWElemList: found ${hwElemList.hw.length} addons/buspixels`
+            
+          } else if (addToNonAddOnsList) {
+            this._hwElemsExcludingAddOns.push(...hwElemList.hw);
+            // Debug
+            RaftLog.debug(
+              `getHWElemList: found ${hwElemList.hw.length} elems matching ${reqType}`
+            );
+          }
+        }
+      } catch (error) {
+        RaftLog.debug(`getHWElemList failed to get ${reqType} ${error}`);
+        return new Array<RICHWElem>();
+      }
+    }
+
+    // Handle any callbacks
+    try {
+      const reports: Array<RaftReportMsg> = [];
+      // add callback to subscribe to report messages
+      this._msgHandler.reportMsgCallbacksSet("getHWElemCB", function (
+        report: RaftReportMsg
+      ) {
+        reports.push(report);
+        RaftLog.debug(`getHWElemCB Report callback ${JSON.stringify(report)}`);
+      });
+
+      // run any required initialisation for the addons
+      const initCmds = this._addOnManager.getInitCmds();
+      // send init commands to the robot
+      const timeInitStart = Date.now();
+      for (let i = 0; i < initCmds.length; i++) {
+        this.runCommand(initCmds[i], {});
+      }
+      // wait a couple of seconds for any report messages to be received
+      await new Promise((resolve) => setTimeout(resolve, 2000));
+      // pass report messages to add on manager for processing
+      this._addOnManager.processReportMsg(reports, timeInitStart);
+
+      // clean up callback
+      this._msgHandler.reportMsgCallbacksDelete("getHWElemCB");
+    } catch (error) {
+      RaftLog.debug(`getHWElemList failed processing callback reports ${error}`);
+      return new Array<RICHWElem>();
+    }
+
+    // return the full list of elements
+    return fullListOfElems;
+  }
+
+  /**
+   *
+   * getAddOnConfigs - get list of add-ons configured on the robot
+   * @returns Promise<RICConfiguredAddOns>
+   *
+   */
+  async getAddOnConfigs(): Promise<RICConfiguredAddOns> {
+    try {
+      const addOnList = await this._msgHandler.sendRICRESTURL<
+        RICConfiguredAddOns
+      >("addon/list");
+      RaftLog.debug("getAddOnConfigs returned " + addOnList);
+      return addOnList;
+    } catch (error) {
+      RaftLog.debug(`getAddOnConfigs Failed to get list of add-ons ${error}`);
+      return new RICConfiguredAddOns();
+    }
+  }
+
+  /**
+     *
+     * runCommand
+     * @param commandName command API string
+     * @param params parameters (simple name value pairs only) to parameterize trajectory
+     * @returns Promise<RaftOKFail>
+     *
+     */
+  async runCommand(commandName: string, params: object): Promise<RaftOKFail> {
+    try {
+      // Format the paramList as query string
+      const paramEntries = Object.entries(params);
+      let paramQueryStr = "";
+      for (const param of paramEntries) {
+        if (paramQueryStr.length > 0) paramQueryStr += "&";
+        paramQueryStr += param[0] + "=" + param[1];
+      }
+      // Format the url to send
+      if (paramQueryStr.length > 0) commandName += "?" + paramQueryStr;
+      return await this._msgHandler.sendRICRESTURL<RaftOKFail>(commandName);
+    } catch (error) {
+      RaftLog.debug(`RaftSystemUtils runCommand failed ${error}`);
+      return new RaftOKFail();
+    }
+  }
+
+  getCachedAddOnList(): Array<RICHWElem> {
+    return this._connectedAddOns;
+  }
+
+  getCachedAllHWElems(): Array<RICHWElem> {
+    const allHWElems = new Array<RICHWElem>();
+    allHWElems.push(...this._connectedAddOns);
+    allHWElems.push(...this._hwElemsExcludingAddOns);
+    return allHWElems;
+  }
+
+  getCachedCalibInfo(): RICCalibInfo | null {
+    return this._calibInfo;
+  }
+}

package/examples/dashboard/src/SystemTypeMarty/RICTypes.ts

@@ -0,0 +1,20 @@
+export type RICLEDPatternCheckerColour = {
+    led: string;
+    lcd: string;
+  }
+
+  export type RICLedLcdColours = Array<RICLEDPatternCheckerColour>;
+
+  export type RICServoFaultFlags = {
+    intermittentConnection: boolean,
+    noConnection: boolean,
+    faultyConnection: boolean,
+    servoHornPositionError: boolean
+  };
+
+  export class RICCalibInfo {
+    rslt = '';
+    calDone = 0;
+    validMs?= 0;
+  }
+  

package/examples/dashboard/src/SystemTypeMarty/SystemTypeMarty.ts

@@ -0,0 +1,113 @@
+import { RaftSystemType } from "../../../../src/RaftSystemType";
+import { RaftLog, RaftSystemUtils, RaftOKFail, RaftConnEventFn, RaftEventFn, RaftPublishEvent, RaftPublishEventNames } from "../../../../src/main";
+import RICAddOnManager from "./RICAddOnManager";
+import RICCommsStats from "./RICCommsStats";
+import RICLEDPatternChecker from "./RICLEDPatternChecker";
+import RICServoFaultDetector from "./RICServoFaultDetector";
+import { RICStateInfo } from "./RICStateInfo";
+
+export default class SystemTypeMarty implements RaftSystemType {
+  nameForDialogs = "Robotical Marty";
+  defaultWiFiHostname = "Marty";
+  firmwareDestName = "ricfw";
+  normalFileDestName = "fs";
+  connectorOptions = {wsSuffix: "ws"};
+
+  // LED Pattern checker
+  private _ledPatternChecker: RICLEDPatternChecker = new RICLEDPatternChecker();
+  getLEDPatternChecker(): RICLEDPatternChecker {
+    return this._ledPatternChecker;
+  }
+
+  // Latest data from servos, IMU, etc
+  private _ricStateInfo: RICStateInfo = new RICStateInfo();
+  getRICStateInfo(): RICStateInfo {
+    return this._ricStateInfo;
+  }
+
+  // Add-on Manager
+  private _addOnManager = new RICAddOnManager();
+  getAddOnManager(): RICAddOnManager {
+    return this._addOnManager;
+  }
+
+  // Properties for Marty
+  private _ricServoFaultDetector: RICServoFaultDetector | null = null;
+  getRICServoFaultDetector(): RICServoFaultDetector {
+    return this._ricServoFaultDetector!;
+  }
+
+  // RIC comms stats
+  private _commsStats = new RICCommsStats();
+  getCommsStats(): RICCommsStats {
+    return this._commsStats;
+  }
+
+  // Event handler
+  private _onEvent: RaftEventFn | null = null;
+
+  // Raft system utils
+  private _systemUtils: RaftSystemUtils | null = null;
+
+  // Setup
+  setup(systemUtils: RaftSystemUtils, onEvent: RaftEventFn | null): void {
+    this._systemUtils = systemUtils;
+    this._onEvent = onEvent;
+    this._ricServoFaultDetector = new RICServoFaultDetector(this._systemUtils!.getMsgHandler(), this._ricStateInfo);
+  }
+
+  // Subscribe for updates
+  async subscribeForUpdates(systemUtils: RaftSystemUtils, enable: boolean): Promise<void> {
+    // Subscription rate
+    const subscribeRateHz = 10;
+    try {
+      const subscribeDisable = '{"cmdName":"subscription","action":"update",' +
+        '"pubRecs":[' +
+        `{"name":"MultiStatus","rateHz":0,}` +
+        '{"name":"PowerStatus","rateHz":0},' +
+        `{"name":"AddOnStatus","rateHz":0}` +
+        ']}';
+      const subscribeEnable = '{"cmdName":"subscription","action":"update",' +
+        '"pubRecs":[' +
+        `{"name":"MultiStatus","rateHz":${subscribeRateHz.toString()}}` +
+        `{"name":"PowerStatus","rateHz":1.0},` +
+        `{"name":"AddOnStatus","rateHz":${subscribeRateHz.toString()}}` +
+        ']}';
+
+      const msgHandler = systemUtils.getMsgHandler();
+      const ricResp = await msgHandler.sendRICRESTCmdFrame<RaftOKFail>(
+        enable ? subscribeEnable : subscribeDisable
+      );
+
+      // Debug
+      RaftLog.debug(`subscribe enable/disable returned ${JSON.stringify(ricResp)}`);
+    } catch (error: unknown) {
+      RaftLog.warn(`getRICCalibInfo Failed subscribe for updates ${error}`);
+    }
+  }
+
+  // Invalidate state
+  stateIsInvalid(): void {
+    if (this._systemUtils) {
+      this._systemUtils.invalidate();
+    }
+  }
+
+  // Other message type
+  rxOtherMsgType(payload: Uint8Array, frameTimeMs: number) {
+    // RICLog.debug(`onRxROSSerialMsg payload ${RICUtils.bufferToHex(payload)}`);
+    RaftLog.verbose(`onRxROSSerialMsg payloadLen ${payload.length}`);
+    const topicIDs = this._ricStateInfo.updateFromROSSerialMsg(payload, this._commsStats, this._addOnManager, frameTimeMs);
+
+    // Call event handler if registered
+    if (this._onEvent) {
+      this._onEvent("pub", RaftPublishEvent.PUBLISH_EVENT_DATA, RaftPublishEventNames[RaftPublishEvent.PUBLISH_EVENT_DATA],
+        {
+          topicIDs: topicIDs,
+          payload: payload,
+          frameTimeMs: frameTimeMs
+        });
+    }
+  }
+}
+

package/examples/dashboard/src/index.html

@@ -0,0 +1,15 @@
+<!-- index.html -->
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width,initial-scale=1">
+  <meta name="description" content="BusI2CWebTest">
+  <title>BusI2CWebTest</title>
+  <link rel="icon" href="data:image/svg+xml;base64, PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB3aWR0aD0iNTExIgogICBoZWlnaHQ9IjUxMSIKICAgdmlld0JveD0iMCAwIDEzNS4yMDIwOSAxMzUuMjAyMDkiCiAgIHZlcnNpb249IjEuMSIKICAgaWQ9InN2ZzE3OCIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMS4zLjIgKDA5MWUyMGUsIDIwMjMtMTEtMjUsIGN1c3RvbSkiCiAgIHNvZGlwb2RpOmRvY25hbWU9IlNjYWRlclVpTG9nby5zdmciCiAgIGlua3NjYXBlOmV4cG9ydC1maWxlbmFtZT0ibG9nbzUxMi5wbmciCiAgIGlua3NjYXBlOmV4cG9ydC14ZHBpPSI5Ni4xODc4NjYiCiAgIGlua3NjYXBlOmV4cG9ydC15ZHBpPSI5Ni4xODc4NjYiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIgogICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3MTgwIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6c2hvd3BhZ2VzaGFkb3c9IjIiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiCiAgICAgaW5rc2NhcGU6ZG9jdW1lbnQtdW5pdHM9Im1tIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBzaG93Z3VpZGVzPSJ0cnVlIgogICAgIGlua3NjYXBlOnpvb209IjEiCiAgICAgaW5rc2NhcGU6Y3g9IjU3OCIKICAgICBpbmtzY2FwZTpjeT0iNTM2LjUiCiAgICAgaW5rc2NhcGU6d2luZG93LXdpZHRoPSIzODQwIgogICAgIGlua3NjYXBlOndpbmRvdy1oZWlnaHQ9IjE1MjkiCiAgICAgaW5rc2NhcGU6d2luZG93LXg9IjI1NTIiCiAgICAgaW5rc2NhcGU6d2luZG93LXk9Ii04IgogICAgIGlua3NjYXBlOndpbmRvdy1tYXhpbWl6ZWQ9IjEiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIj4KICAgIDxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjM4Ljc1MTcwNSw1NS4yMDIwODIiCiAgICAgICBvcmllbnRhdGlvbj0iMCwxIgogICAgICAgaWQ9Imd1aWRlMzg4IgogICAgICAgaW5rc2NhcGU6bG9ja2VkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIiCiAgICAgICBpbmtzY2FwZTpjb2xvcj0icmdiKDAsMTM0LDIyOSkiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI2Ny43NTAwMDMsMTQzLjQwNDE3IgogICAgICAgb3JpZW50YXRpb249Ii0xLDAiCiAgICAgICBpZD0iZ3VpZGUzOTAiCiAgICAgICBpbmtzY2FwZTpsb2NrZWQ9ImZhbHNlIgogICAgICAgaW5rc2NhcGU6bGFiZWw9IiIKICAgICAgIGlua3NjYXBlOmNvbG9yPSJyZ2IoMCwxMzQsMjI5KSIgLz4KICAgIDxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjEzNSw2Ni4wODUyNDUiCiAgICAgICBvcmllbnRhdGlvbj0iLTEsMCIKICAgICAgIGlkPSJndWlkZTM5MiIKICAgICAgIGlua3NjYXBlOmxvY2tlZD0iZmFsc2UiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iIgogICAgICAgaW5rc2NhcGU6Y29sb3I9InJnYigwLDEzNCwyMjkpIiAvPgogICAgPHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iMzUuMDAwMDAyLDkyLjY5MDg5MyIKICAgICAgIG9yaWVudGF0aW9uPSItMSwwIgogICAgICAgaWQ9Imd1aWRlMzk0IgogICAgICAgaW5rc2NhcGU6bG9ja2VkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIiCiAgICAgICBpbmtzY2FwZTpjb2xvcj0icmdiKDAsMTM0LDIyOSkiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSIxNDkuMjc3MzQsLTE0Ljc5NzkyIgogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIGlkPSJndWlkZTM5NiIKICAgICAgIGlua3NjYXBlOmxvY2tlZD0iZmFsc2UiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iIgogICAgICAgaW5rc2NhcGU6Y29sb3I9InJnYigwLDEzNCwyMjkpIiAvPgogICAgPHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iNDUuMDAwMDAzLDk4LjQxMzY5MyIKICAgICAgIG9yaWVudGF0aW9uPSItMSwwIgogICAgICAgaWQ9Imd1aWRlNDMxIgogICAgICAgaW5rc2NhcGU6bG9ja2VkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIiCiAgICAgICBpbmtzY2FwZTpjb2xvcj0icmdiKDAsMTM0LDIyOSkiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSItNDEuMTAyMzkyLC00Ljc5NzkyMTEiCiAgICAgICBvcmllbnRhdGlvbj0iMCwxIgogICAgICAgaWQ9Imd1aWRlNDMzIgogICAgICAgaW5rc2NhcGU6bG9ja2VkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIiCiAgICAgICBpbmtzY2FwZTpjb2xvcj0icmdiKDAsMTM0LDIyOSkiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSIxMjUsODQuMDc5NzE3IgogICAgICAgb3JpZW50YXRpb249Ii0xLDAiCiAgICAgICBpZD0iZ3VpZGU0MzUiCiAgICAgICBpbmtzY2FwZTpsb2NrZWQ9ImZhbHNlIgogICAgICAgaW5rc2NhcGU6bGFiZWw9IiIKICAgICAgIGlua3NjYXBlOmNvbG9yPSJyZ2IoMCwxMzQsMjI5KSIgLz4KICAgIDxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249IjE0LjMxNDI2Niw1MS4yMDIwODUiCiAgICAgICBvcmllbnRhdGlvbj0iMCwxIgogICAgICAgaWQ9Imd1aWRlNDM3IgogICAgICAgaW5rc2NhcGU6bG9ja2VkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIiCiAgICAgICBpbmtzY2FwZTpjb2xvcj0icmdiKDAsMTM0LDIyOSkiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSI1NS4wMDAwMDMsNzMuODg3ODUzIgogICAgICAgb3JpZW50YXRpb249Ii0xLDAiCiAgICAgICBpZD0iZ3VpZGU0MzkiCiAgICAgICBpbmtzY2FwZTpsb2NrZWQ9ImZhbHNlIgogICAgICAgaW5rc2NhcGU6bGFiZWw9IiIKICAgICAgIGlua3NjYXBlOmNvbG9yPSJyZ2IoMCwxMzQsMjI5KSIgLz4KICAgIDxzb2RpcG9kaTpndWlkZQogICAgICAgcG9zaXRpb249Ijk3Ljc1MDAwNSwxNTUuODM5NTkiCiAgICAgICBvcmllbnRhdGlvbj0iLTEsMCIKICAgICAgIGlkPSJndWlkZTQ0MSIKICAgICAgIGlua3NjYXBlOmxvY2tlZD0iZmFsc2UiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iIgogICAgICAgaW5rc2NhcGU6Y29sb3I9InJnYigwLDEzNCwyMjkpIiAvPgogICAgPHNvZGlwb2RpOmd1aWRlCiAgICAgICBwb3NpdGlvbj0iLTM2LjYwMzYyMSw1LjIwMjA3OTQiCiAgICAgICBvcmllbnRhdGlvbj0iMCwxIgogICAgICAgaWQ9Imd1aWRlNDQzIgogICAgICAgaW5rc2NhcGU6bG9ja2VkPSJmYWxzZSIKICAgICAgIGlua3NjYXBlOmxhYmVsPSIiCiAgICAgICBpbmtzY2FwZTpjb2xvcj0icmdiKDAsMTM0LDIyOSkiIC8+CiAgICA8c29kaXBvZGk6Z3VpZGUKICAgICAgIHBvc2l0aW9uPSItMjAuNjUzNDQsNDcuMjAyMDg1IgogICAgICAgb3JpZW50YXRpb249IjAsMSIKICAgICAgIGlkPSJndWlkZTQ0NSIKICAgICAgIGlua3NjYXBlOmxvY2tlZD0iZmFsc2UiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iIgogICAgICAgaW5rc2NhcGU6Y29sb3I9InJnYigwLDEzNCwyMjkpIiAvPgogIDwvc29kaXBvZGk6bmFtZWR2aWV3PgogIDxkZWZzCiAgICAgaWQ9ImRlZnMxNzUiPgogICAgPGxpbmVhckdyYWRpZW50CiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ0ODEzIgogICAgICAgaW5rc2NhcGU6c3dhdGNoPSJzb2xpZCI+CiAgICAgIDxzdG9wCiAgICAgICAgIHN0eWxlPSJzdG9wLWNvbG9yOiMwMDAwMDA7c3RvcC1vcGFjaXR5OjE7IgogICAgICAgICBvZmZzZXQ9IjAiCiAgICAgICAgIGlkPSJzdG9wNDgxMSIgLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgICA8bGluZWFyR3JhZGllbnQKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHhsaW5rOmhyZWY9IiNsaW5lYXJHcmFkaWVudDQ4MTMiCiAgICAgICBpZD0ibGluZWFyR3JhZGllbnQ0ODE1IgogICAgICAgeDE9IjY0LjY0NDQzNyIKICAgICAgIHkxPSI2NS44Njc1ODUiCiAgICAgICB4Mj0iOTcuNDU5NTYxIgogICAgICAgeTI9IjY1Ljg2NzU4NSIKICAgICAgIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiAvPgogICAgPGZpbHRlcgogICAgICAgaW5rc2NhcGU6Y29sbGVjdD0iYWx3YXlzIgogICAgICAgc3R5bGU9ImNvbG9yLWludGVycG9sYXRpb24tZmlsdGVyczpzUkdCIgogICAgICAgaWQ9ImZpbHRlcjEwIgogICAgICAgeD0iLTAuMDMyNzgxOTciCiAgICAgICB5PSItMC4wMjQ3MTkxNSIKICAgICAgIHdpZHRoPSIxLjA2NTU2MzkiCiAgICAgICBoZWlnaHQ9IjEuMDUzNzIxMyI+CiAgICAgIDxmZUdhdXNzaWFuQmx1cgogICAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMC41MzI1ODIwNCIKICAgICAgICAgaWQ9ImZlR2F1c3NpYW5CbHVyMTAiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIKICAgICAgIGlkPSJmaWx0ZXIxMSIKICAgICAgIHg9Ii0wLjAzNzc2MjYyMiIKICAgICAgIHk9Ii0wLjAyODE4ODY5OCIKICAgICAgIHdpZHRoPSIxLjA3NTUyNTIiCiAgICAgICBoZWlnaHQ9IjEuMDYxNjkyOCI+CiAgICAgIDxmZUdhdXNzaWFuQmx1cgogICAgICAgICBpbmtzY2FwZTpjb2xsZWN0PSJhbHdheXMiCiAgICAgICAgIHN0ZERldmlhdGlvbj0iMC40MjU0MjA3MSIKICAgICAgICAgaWQ9ImZlR2F1c3NpYW5CbHVyMTEiIC8+CiAgICA8L2ZpbHRlcj4KICAgIDxmaWx0ZXIKICAgICAgIGlua3NjYXBlOmNvbGxlY3Q9ImFsd2F5cyIKICAgICAgIHN0eWxlPSJjb2xvci1pbnRlcnBvbGF0aW9uLWZpbHRlcnM6c1JHQiIKICAgICAgIGlkPSJmaWx0ZXIxMiIKICAgICAgIHg9Ii0wLjAyOTI5NjUwOSIKICAgICAgIHk9Ii0wLjAxNzUwNzUyNCIKICAgICAgIHdpZHRoPSIxLjA1ODU5MyIKICAgICAgIGhlaWdodD0iMS4wMzUwMTUiPgogICAgICA8ZmVHYXVzc2lhbkJsdXIKICAgICAgICAgaW5rc2NhcGU6Y29sbGVjdD0iYWx3YXlzIgogICAgICAgICBzdGREZXZpYXRpb249IjAuMzU1NDU5NiIKICAgICAgICAgaWQ9ImZlR2F1c3NpYW5CbHVyMTIiIC8+CiAgICA8L2ZpbHRlcj4KICA8L2RlZnM+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iTGF5ZXIgMSIKICAgICBpbmtzY2FwZTpncm91cG1vZGU9ImxheWVyIgogICAgIGlkPSJsYXllcjEiPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpub3JtYWw7ZmlsbDojZTY3MTFlO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDo0O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOmJldmVsO3N0cm9rZS1kYXNoYXJyYXk6bm9uZTtzdHJva2Utb3BhY2l0eToxO2ZpbHRlcjp1cmwoI2ZpbHRlcjEwKSIKICAgICAgIGQ9Ik0gMTcuODAyMDgzLDEyMy4wMTI1IFYgNTMuMDEyNTAxIGwgNTAsLTQzLjAzMjgyMSA0OS45OTk5OTcsNDMuMDMyODIxIFYgMTIzLjAxMjUgWiIKICAgICAgIGlkPSJwYXRoNDA3IgogICAgICAgc29kaXBvZGk6bm9kZXR5cGVzPSJjY2NjY2MiCiAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgxLjE2NzE5ODQsMCwwLDEuMTE0OTM2MiwtMTAuOTM5NTI4LC04LjE5OTc5MjkpIiAvPgogICAgPHBhdGgKICAgICAgIHN0eWxlPSJmaWxsOiNlNjcxMWU7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOiNmZmZmZmY7c3Ryb2tlLXdpZHRoOjQ7c3Ryb2tlLWxpbmVjYXA6YnV0dDtzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjE7ZmlsdGVyOnVybCgjZmlsdGVyMTEpIgogICAgICAgZD0iTSAyNy44MDIwODMsMTEzLjAxMjUgViA1Ny4wMTI1MDEgbCA0MCwtMzQuMTY4Mjg3IDM5Ljk5OTk5NywzNC4xNjgyODcgViAxMTMuMDEyNSBaIgogICAgICAgaWQ9InBhdGg0MDctOSIKICAgICAgIHNvZGlwb2RpOm5vZGV0eXBlcz0iY2NjY2NjIgogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4xMDQ3NjAzLDAsMCwxLjA5MzkzODYsLTUuNTE1NDYxNywtNS44NzQ0NDU0KSIgLz4KICAgIDxyZWN0CiAgICAgICBzdHlsZT0iZmlsbDpub25lO3N0cm9rZTojMDAwMDAwO3N0cm9rZS13aWR0aDowLjI2NDU4MztzdHJva2UtbGluZWpvaW46YmV2ZWw7c3Ryb2tlLWRhc2hhcnJheTpub25lO3N0cm9rZS1vcGFjaXR5OjA7ZmlsbC1vcGFjaXR5OjEiCiAgICAgICBpZD0icmVjdDI3NzciCiAgICAgICB3aWR0aD0iMTM1LjIwMjA5IgogICAgICAgaGVpZ2h0PSIxMzUuMjAyMDkiCiAgICAgICB4PSIwIgogICAgICAgeT0iMCIgLz4KICAgIDx0ZXh0CiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIgogICAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOjk3LjEwNDhweDtsaW5lLWhlaWdodDoxLjI1O2ZvbnQtZmFtaWx5OkNhbGlicmk7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjonQ2FsaWJyaSwgTm9ybWFsJztmb250LXZhcmlhbnQtbGlnYXR1cmVzOm5vcm1hbDtmb250LXZhcmlhbnQtY2Fwczpub3JtYWw7Zm9udC12YXJpYW50LW51bWVyaWM6bm9ybWFsO2ZvbnQtdmFyaWFudC1lYXN0LWFzaWFuOm5vcm1hbDttaXgtYmxlbmQtbW9kZTpub3JtYWw7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDowLjUwNTIwNjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MTtmaWx0ZXI6dXJsKCNmaWx0ZXIxMikiCiAgICAgICB4PSIzOS4zOTM2NjEiCiAgICAgICB5PSIxMTYuMTE2OCIKICAgICAgIGlkPSJ0ZXh0Mjg1NCIKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMjIwMTU3OCwwLDAsMC45NDYxNTE3NSwtNS43NTQ3Mzk5LC0yLjU0ODUyODQpIj48dHNwYW4KICAgICAgICAgc29kaXBvZGk6cm9sZT0ibGluZSIKICAgICAgICAgaWQ9InRzcGFuMjg1MiIKICAgICAgICAgeD0iMzkuMzkzNjYxIgogICAgICAgICB5PSIxMTYuMTE2OCIKICAgICAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6bm9ybWFsO2ZvbnQtc3RyZXRjaDpub3JtYWw7Zm9udC1zaXplOjk3LjEwNDhweDtmb250LWZhbWlseTpDYWxpYnJpOy1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246J0NhbGlicmksIE5vcm1hbCc7Zm9udC12YXJpYW50LWxpZ2F0dXJlczpub3JtYWw7Zm9udC12YXJpYW50LWNhcHM6bm9ybWFsO2ZvbnQtdmFyaWFudC1udW1lcmljOm5vcm1hbDtmb250LXZhcmlhbnQtZWFzdC1hc2lhbjpub3JtYWw7ZmlsbDojZmZmZmZmO2ZpbGwtb3BhY2l0eToxO3N0cm9rZTojZmZmZmZmO3N0cm9rZS13aWR0aDowLjUwNTIwNjtzdHJva2UtZGFzaGFycmF5Om5vbmU7c3Ryb2tlLW9wYWNpdHk6MSI+UzwvdHNwYW4+PC90ZXh0PgogIDwvZz4KPC9zdmc+Cg==" type="image/svg+xml" />
+</head>
+<body>
+  <div id="root"></div>
+  <script type="module" src="./index.tsx"></script>
+</body>
+</html>

package/examples/dashboard/src/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import Main from './Main';
+import './styles.css';
+import 'process';
+import 'buffer';
+
+// Find the root element
+const rootElement = document.getElementById('root');
+
+// Create a root
+const root = createRoot(rootElement!);
+
+// Render the Main component into the root
+root.render(<Main />);

package/examples/dashboard/src/styles.css

@@ -0,0 +1,122 @@
+/* Main.css */
+
+/* General styling for the dark theme */
+body,
+.device-screen,
+.device-block-heading,
+.device-attrs-and-actions,
+.device-attrs-form,
+.device-actions-form,
+.device-line-chart {
+    /* Dark background for all components */
+    color: #fff;
+    /* Light text for better readability */
+    font-family: 'Segoe UI', 'Roboto', 'Oxygen',
+        'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+        sans-serif;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+    background-color: #282c34;
+    color: #ffffff;
+}
+
+code {
+    font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+        monospace;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 10px 20px;
+    border: 1px solid #666;
+    /* Adjusting border color for dark theme */
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+h1 {
+    margin: 0;
+}
+
+.always-enabled {
+    pointer-events: auto !important; /* Ensures interactions are always enabled */
+}
+
+.content-body {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.content-row {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+    flex-direction: col;
+}
+
+.conn-indication {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    border-radius: 8px;
+    margin-bottom: 10px;
+}
+
+.action-button {
+    margin-left: 10px;
+}
+
+.info-boxes {
+    display: flex;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+    gap: 10px;
+}
+
+.info-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 10px;
+    padding: 10px 20px;
+    border: 1px solid #666;
+}
+
+.ip-addr-input {
+    width: 100%;
+    margin-bottom: 10px;
+}
+
+.status-screen {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    border-radius: 10px;
+    padding: 10px 20px;
+    border: 1px solid #666;
+}
+
+.info {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+}
+
+.info-line {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: 10px;
+}
+
+.info-label {
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.info-value {
+    font-weight: normal;
+}