@robdobsn/raftjs 1.5.0 → 1.5.9

package/examples/dashboard/src/Main.tsx

@@ -1,114 +1,230 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import './styles.css';
+import SettingsScreen from './SettingsScreen';
 import ConnManager from './ConnManager';
-import { RaftConnEvent, RaftUpdateEvent, RaftPublishEvent, RaftSysTypeManager } from "../../../src/main";
+import {
+  RaftConnEvent,
+  RaftUpdateEvent,
+  RaftPublishEvent,
+  RaftSysTypeManager,
+} from '../../../src/main';
 import StatusPanel from './StatusPanel';
 import DevicesPanel from './DevicesPanel';
 import CommandPanel from './CommandPanel';
+import LatencyTestPanel from './LatencyTestPanel';
 import SystemTypeCog from './SystemTypeCog/SystemTypeCog';
 import SystemTypeMarty from './SystemTypeMarty/SystemTypeMarty';
 import SystemTypeGeneric from './SystemTypeGeneric/SystemTypeGeneric';
+import SettingsManager from './SettingsManager';
 
 const sysTypeManager = RaftSysTypeManager.getInstance();
 const connManager = ConnManager.getInstance();
-sysTypeManager.addSystemType("Cog", () => new SystemTypeCog());
-sysTypeManager.addSystemType("Marty", () => new SystemTypeMarty());
+sysTypeManager.addSystemType('Cog', () => new SystemTypeCog());
+sysTypeManager.addSystemType('Marty', () => new SystemTypeMarty());
 sysTypeManager.addDefaultSystemType(() => new SystemTypeGeneric());
 
-
 export default function Main() {
-  const [connectionStatus, setConnectionStatus] = useState<RaftConnEvent>(RaftConnEvent.CONN_DISCONNECTED);
+  const [connectionStatus, setConnectionStatus] = useState<RaftConnEvent>(
+    RaftConnEvent.CONN_DISCONNECTED
+  );
+  const [connectionTime, setConnectionTime] = useState<Date | null>(null);
+  const [elapsedTime, setElapsedTime] = useState<string | null>(null);
+  const [menuOpen, setMenuOpen] = useState(false);
+  const [showSettings, setShowSettings] = useState(false);
+  const menuRef = useRef<HTMLDivElement>(null);
+  const settingsManager = SettingsManager.getInstance();
+  const [latencyTestEnabled, setLatencyTestEnabled] = useState(
+    settingsManager.getSetting('latencyTest')
+  );
+
+  const [ipAddress, setIpAddress] = useState<string>(
+    localStorage.getItem('lastIpAddress') || ''
+  );
+
+  const handleConnect = () => {
+    if (ipAddress.trim() === '') {
+      console.error('No IP address entered');
+      return;
+    }
+    connManager.connect('WebSocket', ipAddress, []);
+    localStorage.setItem('lastIpAddress', ipAddress);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleConnect();
+    }
+  };
 
   useEffect(() => {
-    // Define the listener for raft events
-    const listener = (eventType: string,
+    const listener = (
+      eventType: string,
       eventEnum: RaftConnEvent | RaftUpdateEvent | RaftPublishEvent,
       eventName: string,
-      data?: object | string | null) => {
-      if (eventType === "conn") {
-        if ((eventEnum === RaftConnEvent.CONN_CONNECTED) || (eventEnum === RaftConnEvent.CONN_DISCONNECTED)) {
-          console.log(`Connection event: ${eventName}`);
+      data?: object | string | null
+    ) => {
+      if (eventType === 'conn') {
+        if (
+          eventEnum === RaftConnEvent.CONN_CONNECTED ||
+          eventEnum === RaftConnEvent.CONN_DISCONNECTED
+        ) {
           setConnectionStatus(eventEnum);
+          setConnectionTime(new Date());
         }
       }
     };
 
-    // Set the listener function
     connManager.setConnectionEventListener(listener);
 
-    // Clean up the listener when the component unmounts
     return () => {
       connManager.setConnectionEventListener(() => { });
     };
   }, []);
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(event.target as Node)) {
+        setMenuOpen(false);
+      }
+    };
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, []);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setLatencyTestEnabled(settingsManager.getSetting('latencyTest'));
+    }, 100);
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    if (connectionStatus === RaftConnEvent.CONN_CONNECTED && connectionTime) {
+      const interval = setInterval(() => {
+        const now = new Date();
+        const elapsed = now.getTime() - connectionTime.getTime();
+
+        const hours = Math.floor(elapsed / 3600000).toString().padStart(2, '0');
+        const minutes = Math.floor((elapsed % 3600000) / 60000).toString().padStart(2, '0');
+        const seconds = Math.floor((elapsed % 60000) / 1000).toString().padStart(2, '0');
+        const milliseconds = (elapsed % 1000).toString().padStart(3, '0');
+
+        setElapsedTime(`${hours}:${minutes}:${seconds}:${milliseconds}`);
+      }, 50);
+
+      return () => clearInterval(interval);
+    } else {
+      setElapsedTime(null);
+    }
+  }, [connectionStatus, connectionTime]);
+
   return (
     <div className="content-outer">
-      <div className="header">
-        <h1>RaftJS Dashboard</h1>
-      </div>
-      <div className="content-body">
-        {/* Div optionally shown if connected */}
-        {connectionStatus === RaftConnEvent.CONN_CONNECTED ?
-          <>
-            <div className="connected-panel">
-              <div className="info-boxes">
-                <div className="info-box">
-                  <div className="conn-indication">
-                    <h3>Connected</h3>
+      {showSettings ? (
+        <SettingsScreen onBack={() => setShowSettings(false)} />
+      ) : (
+        <>
+          <div className="header">
+            <h1>RaftJS Dashboard</h1>
+            <div
+              className="menu-icon header-menu-icon"
+              onClick={() => setMenuOpen(!menuOpen)}
+            >
+              ☰
+            </div>
+            {menuOpen && (
+              <div className="dropdown-menu" ref={menuRef}>
+                <div
+                  className="menu-item"
+                  onClick={() => {
+                    setMenuOpen(false);
+                    setShowSettings(true);
+                  }}
+                >
+                  Settings
+                </div>
+              </div>
+            )}
+          </div>
+          <div className="content-body">
+            {connectionStatus === RaftConnEvent.CONN_CONNECTED ? (
+              <>
+                <div className="connected-panel">
+                  <div className="info-boxes">
+                    <div className="info-box">
+                      <div className="conn-indication">
+                        <h3>Connected</h3>
+                      </div>
+                      <div>
+                        <button
+                          className="action-button"
+                          onClick={() => connManager.disconnect()}
+                        >
+                          Disconnect
+                        </button>
+                      </div>
+                      <div>
+                        {elapsedTime && <p>{elapsedTime}</p>}
+                      </div>
+                    </div>
+                  </div>
+                  <StatusPanel />
+                  {latencyTestEnabled && <LatencyTestPanel />}
+                  <CommandPanel />
+                </div>
+                <DevicesPanel />
+              </>
+            ) : (
+              <>
+                <div className="info-boxes">
+                  <div className="info-box">
+                    <h3>WebSocket</h3>
+                    <input
+                      className="ip-addr-input"
+                      id="ip-addr"
+                      type="text"
+                      placeholder="IP Address"
+                      value={ipAddress}
+                      onChange={(e) => setIpAddress(e.target.value)}
+                      onKeyDown={handleKeyDown}                      
+                    />
+                    <button
+                      className="action-button"
+                      onClick={handleConnect}
+                    >
+                      Connect
+                    </button>
                   </div>
-                  <div>
-                    <button className="action-button" onClick={() => connManager.disconnect()}>Disconnect</button>
+                  <div className="info-box">
+                    <h3>WebBLE</h3>
+                    <button
+                      className="action-button"
+                      onClick={() => {
+                        connManager.connect('WebBLE', '', sysTypeManager.getAllServiceUUIDs());
+                      }}
+                    >
+                      Connect
+                    </button>
+                  </div>
+                  <div className="info-box">
+                    <h3>WebSerial</h3>
+                    <button
+                      className="action-button"
+                      onClick={() => {
+                        connManager.connect('WebSerial', '', []);
+                      }}
+                    >
+                      Connect
+                    </button>
                   </div>
                 </div>
-              </div>
-              <StatusPanel />
-              <CommandPanel />
-            </div>
-            <DevicesPanel />
-          </>
-          :
-          <>
-            <div className="info-boxes">
-              <div className="info-box">
-                <h3>WebSocket</h3>
-                <input className="ip-addr-input" id="ip-addr" type="text" placeholder="IP Address" />
-                <button className="action-button" onClick={() => {
-                  // Get IP address
-                  const ipAddrElem = document.getElementById("ip-addr") as HTMLInputElement;
-                  if (ipAddrElem) {
-                    const ipAddr = ipAddrElem.value;
-                    connManager.connect("WebSocket", ipAddr, []);
-                  } else {
-                    console.error("No IP address entered");
-                  }
-                }
-                }>
-                  Connect
-                </button>
-              </div>
-              <div className="info-box">
-                <h3>WebBLE</h3>
-                <button className="action-button" onClick={() => {
-                  connManager.connect("WebBLE", "", sysTypeManager.getAllServiceUUIDs());
-                }
-                }>
-                  Connect
-                </button>
-              </div>
-              <div className="info-box">
-                <h3>WebSerial</h3>
-                <button className="action-button" onClick={() => {
-                  connManager.connect("WebSerial", "", []);
-                }
-                }>
-                  Connect
-                </button>
-              </div>
-            </div>
-          </>
-        }
-      </div>
+              </>
+            )}
+          </div>
+        </>
+      )}
     </div>
   );
 }

package/examples/dashboard/src/SettingsManager.ts

@@ -0,0 +1,67 @@
+export type Settings = {
+  showCharts: boolean;
+  maxChartDataPoints: number;
+  maxDatapointsToStore: number;
+  latencyTest: boolean;
+  latencyAttributeName: string;
+  latencyChangeThreshold: number;
+};
+
+class SettingsManager {
+  private static instance: SettingsManager;
+  private settings: Settings;
+  private storageKey = "RaftJS_Settings";
+  private maxChartDataPoints_default = 50;
+  private maxDatapointsToStore_default = 1000;
+
+  private constructor() {
+    // Load settings from localStorage or use default values
+    const savedSettings = localStorage.getItem(this.storageKey);
+    this.settings = savedSettings
+      ? JSON.parse(savedSettings)
+      : {
+          latencyTest: false,
+          showCharts: true,
+          maxChartDataPoints: this.maxChartDataPoints_default,
+          maxDatapointsToStore: this.maxDatapointsToStore_default,
+        };
+  }
+
+  static getInstance(): SettingsManager {
+    if (!SettingsManager.instance) {
+      SettingsManager.instance = new SettingsManager();
+    }
+    return SettingsManager.instance;
+  }
+
+  getSetting<K extends keyof Settings>(key: K): Settings[K] {
+    return this.settings[key];
+  }
+
+  setSetting<K extends keyof Settings>(key: K, value: Settings[K]): void {
+    this.settings[key] = value;
+    this.saveSettings();
+  }
+
+  getAllSettings(): Settings {
+    return this.settings;
+  }
+
+  // Save settings to localStorage
+  private saveSettings(): void {
+    localStorage.setItem(this.storageKey, JSON.stringify(this.settings));
+  }
+
+  // Reset to default settings
+  resetSettings(): void {
+    this.settings = {
+      latencyTest: false,
+      showCharts: true,
+      maxChartDataPoints: this.maxChartDataPoints_default,
+      maxDatapointsToStore: this.maxDatapointsToStore_default,
+    };
+    this.saveSettings();
+  }
+}
+
+export default SettingsManager;

package/examples/dashboard/src/SettingsScreen.tsx

@@ -0,0 +1,174 @@
+// src/SettingsScreen.tsx
+import React, { useState, useEffect } from 'react';
+import SettingsManager from './SettingsManager';
+import ConnManager from './ConnManager';
+
+const connManager = ConnManager.getInstance();
+
+const SettingsScreen = ({ onBack }: { onBack: () => void }) => {
+  const settingsManager = SettingsManager.getInstance();
+
+  const [latencyTest, setLatencyTest] = useState<boolean>(
+    settingsManager.getSetting('latencyTest')
+  );
+  const [showCharts, setShowCharts] = useState<boolean>(
+    settingsManager.getSetting('showCharts')
+  );
+  const [maxChartDataPoints, setMaxChartDataPoints] = useState<number>(
+    settingsManager.getSetting('maxChartDataPoints')
+  );
+  const [maxDatapointsToStore, setMaxDatapointsToStore] = useState<number>(
+    settingsManager.getSetting('maxDatapointsToStore')
+  );
+  const [latencyAttributeName, setLatencyAttributeName] = useState<string>(
+    settingsManager.getSetting('latencyAttributeName') || 'amb0'
+  );
+  const [latencyChangeThreshold, setLatencyChangeThreshold] = useState<number>(
+    settingsManager.getSetting('latencyChangeThreshold') || 100
+  );
+
+  const handleSaveAndReturn = () => {
+    // Save settings to SettingsManager
+    settingsManager.setSetting('latencyTest', latencyTest);
+    settingsManager.setSetting('showCharts', showCharts);
+    settingsManager.setSetting('maxChartDataPoints', maxChartDataPoints);
+    settingsManager.setSetting('maxDatapointsToStore', maxDatapointsToStore);
+
+    // Log and update maxDatapointsToStore in DeviceManager
+    console.log(
+      `Set maxDatapointsToStore to ${maxDatapointsToStore} ` +
+      `${connManager.getConnector().getSystemType()} ` +
+      `${connManager.getConnector().getSystemType()?.deviceMgrIF}` +
+      `${connManager.getConnector().getSystemType()?.deviceMgrIF?.setMaxDataPointsToStore}`
+    );
+
+    connManager.getConnector().getSystemType()?.deviceMgrIF?.setMaxDataPointsToStore(maxDatapointsToStore);
+    
+    
+    if (latencyTest) {
+      settingsManager.setSetting('latencyAttributeName', latencyAttributeName);
+      settingsManager.setSetting('latencyChangeThreshold', latencyChangeThreshold);
+    }
+
+    onBack();
+  };
+
+  return (
+    <div className="content-outer">
+      <div className="header">
+        <h1>RaftJS Dashboard Settings</h1>
+      </div>
+      <div className="content-body">
+        <div className="info-boxes">
+          <div className="info-box">
+
+            <div className="settings-item">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={showCharts}
+                  onChange={(e) => setShowCharts(e.target.checked)}
+                />
+                Show Charts
+              </label>
+            </div>
+
+            <div className="settings-item">
+              <label>
+                Max Chart Points
+                <input
+                  type="number"
+                  min="1"
+                  max="500"
+                  value={maxChartDataPoints}
+                  onChange={(e) =>
+                    setMaxChartDataPoints(
+                      Math.min(parseInt(e.target.value, 10) || 1, 500)
+                    )
+                  }
+                  style={{ width: '50px', marginLeft: '10px' }}
+                />
+              </label>
+            </div>
+
+            <div className="settings-item">
+              <label>
+                Max Stored Points
+                <input
+                  type="number"
+                  min="1"
+                  max="100000"
+                  value={maxDatapointsToStore}
+                  onChange={(e) =>
+                    setMaxDatapointsToStore(
+                      Math.min(parseInt(e.target.value, 10) || 1, 100000)
+                    )
+                  }
+                  style={{ width: '50px', marginLeft: '10px' }}
+                />
+              </label>
+            </div>
+
+            <div className="settings-item">
+              <label>
+                <input
+                  type="checkbox"
+                  checked={latencyTest}
+                  onChange={(e) => setLatencyTest(e.target.checked)}
+                />
+                Latency Test
+              </label>
+            </div>
+
+            {latencyTest && (
+              <>
+                <div className="settings-item">
+                  <label>
+                    Attribute Name
+                    <input
+                      type="text"
+                      value={latencyAttributeName}
+                      onChange={(e) => setLatencyAttributeName(e.target.value)}
+                      style={{ marginLeft: '10px' }}
+                    />
+                  </label>
+                </div>
+                <div className="settings-item">
+                  <label>
+                    Change Threshold
+                    <input
+                      type="number"
+                      min="1"
+                      value={latencyChangeThreshold}
+                      onChange={(e) =>
+                        setLatencyChangeThreshold(parseInt(e.target.value, 10) || 1)
+                      }
+                      style={{ width: '60px', marginLeft: '10px' }}
+                    />
+                  </label>
+                </div>
+              </>
+            )}
+            
+            <button className="action-button" onClick={handleSaveAndReturn}>
+              Save and Return
+            </button>
+
+            <button
+              className="action-button"
+              style={{ marginTop: '10px' }}
+              onClick={() => {
+                settingsManager.resetSettings();
+                window.location.reload();
+              }}
+            >
+              Reset to Defaults
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SettingsScreen;

package/examples/dashboard/src/SystemTypeCog/CogStateInfo.ts

@@ -1,6 +1,7 @@
 import { time } from "console";
 import RaftLog from "../../../../src/RaftLog";
 import { DeviceManager } from "../../../../src/RaftDeviceManager";
+import RaftUtils from "../../../../src/RaftUtils";
 
 // export interface IMUStateInfo {
 //     gx: number;
@@ -45,18 +46,22 @@ export class CogStateInfo {
         return this._deviceManager; 
     }
 
-    updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number): Array<string> {
+    updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number, isBinary: boolean): Array<string> {
 
         // Debug 
         // RaftLog.info(`CogStateInfo: updateFromMsg: rxMsg: ${rxMsg} frameTimeMs: ${frameTimeMs}`);
 
-        // Convert Uint8Array to string
-        const decoder = new TextDecoder('utf-8');
-        const jsonString = decoder.decode(rxMsg.slice(2));
-
-        // Handle using device manager
-        this._deviceManager.handleClientMsgJson(jsonString);
-
+        if (isBinary) {
+            // console.log(`CogStateInfo: updateFromMsg: ${RaftUtils.bufferToHex(rxMsg)}`);
+            this._deviceManager.handleClientMsgBinary(rxMsg);
+        } else {
+            // Convert Uint8Array to string
+            const decoder = new TextDecoder('utf-8');
+            const jsonString = decoder.decode(rxMsg.slice(2));
+
+            // Handle using device manager
+            this._deviceManager.handleClientMsgJson(jsonString);
+        }
 
     //     // Debug
     //     // RaftLog.info(`CogStateInfo: updateFromMsg: jsonString: ${jsonString}`);

package/examples/dashboard/src/SystemTypeCog/SystemTypeCog.ts

@@ -3,6 +3,8 @@ import { RaftEventFn, RaftLog, RaftOKFail, RaftPublishEvent, RaftPublishEventNam
 import { CogStateInfo } from "./CogStateInfo";
 import { DeviceManager } from "../../../../src/RaftDeviceManager";
 
+const SUBSCRIBE_BINARY_MSGS = true;
+
 export default class SystemTypeCog implements RaftSystemType {
     nameForDialogs = "Robotical Cog";
     defaultWiFiHostname = "Cog";
@@ -38,15 +40,16 @@ export default class SystemTypeCog implements RaftSystemType {
     // Subscribe for updates
     subscribeForUpdates: RaftSubscribeForUpdatesCBType | null = async (systemUtils: RaftSystemUtils, enable: boolean) => {
       // Subscription rate
+      const topic = SUBSCRIBE_BINARY_MSGS ? "devbin" : "devjson";
       const subscribeRateHz = 0.1;
       try {
         const subscribeDisable = '{"cmdName":"subscription","action":"update",' +
           '"pubRecs":[' +
-          `{"name":"devjson","rateHz":0,}` +
+          `{"name":"${topic}","rateHz":0,}` +
           ']}';
         const subscribeEnable = '{"cmdName":"subscription","action":"update",' +
           '"pubRecs":[' +
-          `{"name":"devjson","trigger":"timeorchange","rateHz":${subscribeRateHz.toString()}}` +
+          `{"name":"${topic}","trigger":"timeorchange","rateHz":${subscribeRateHz.toString()}}` +
           ']}';
 
         const msgHandler = systemUtils.getMsgHandler();
@@ -67,9 +70,9 @@ export default class SystemTypeCog implements RaftSystemType {
     // Other message type
     rxOtherMsgType(payload: Uint8Array, frameTimeMs: number) {
 
-      // RICLog.debug(`rxOtherMsgType payload ${RICUtils.bufferToHex(payload)}`);
+      // RICLog.debug(`rxOtherMsgType payload ${RaftUtils.bufferToHex(payload)}`);
       RaftLog.verbose(`rxOtherMsgType payloadLen ${payload.length}`);
-      const topicIDs = this._stateInfo.updateFromMsg(payload, frameTimeMs);
+      const topicIDs = this._stateInfo.updateFromMsg(payload, frameTimeMs, SUBSCRIBE_BINARY_MSGS);
 
       // Call event handler if registered
       if (this._onEvent) {
@@ -77,7 +80,8 @@ export default class SystemTypeCog implements RaftSystemType {
           {
             topicIDs: topicIDs,
             payload: payload,
-            frameTimeMs: frameTimeMs
+            frameTimeMs: frameTimeMs,
+            isBinary: SUBSCRIBE_BINARY_MSGS
           });
       }
     };

package/examples/dashboard/src/SystemTypeGeneric/StateInfoGeneric.ts

@@ -7,17 +7,23 @@ export class StateInfoGeneric {
     public constructor(private _deviceManager: DeviceManager) {
     }
 
-    updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number): Array<string> {
+    updateFromMsg(rxMsg: Uint8Array, frameTimeMs: number, isBinary: boolean): Array<string> {
 
         // Debug 
         // RaftLog.info(`StateInfoGeneric: updateFromMsg: rxMsg: ${rxMsg} frameTimeMs: ${frameTimeMs}`);
 
-        // Convert Uint8Array to string
-        const decoder = new TextDecoder('utf-8');
-        const jsonString = decoder.decode(rxMsg.slice(2));
+        // Handle binary or JSON
+        if (isBinary) {
+            // Handle using device manager
+            this._deviceManager.handleClientMsgBinary(rxMsg);            
+        } else {
+            // Convert Uint8Array to string
+            const decoder = new TextDecoder('utf-8');
+            const jsonString = decoder.decode(rxMsg.slice(2));
 
-        // Handle using device manager
-        this._deviceManager.handleClientMsgJson(jsonString);
+            // Handle using device manager
+            this._deviceManager.handleClientMsgJson(jsonString);
+        }
         return [];
 
     }