@robotical/raftjs 1.3.5 → 1.4.1

package/examples/dashboard/src/DevicePanel.tsx

@@ -5,6 +5,7 @@ import DeviceAttrsForm from './DeviceAttrsForm';
 import DeviceActionsForm from './DeviceActionsForm';
 import DeviceLineChart from './DeviceLineChart';
 import ConnManager from './ConnManager';
+import SettingsManager from './SettingsManager';
 
 const connManager = ConnManager.getInstance();
 
@@ -24,6 +25,11 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
     const [menuOpen, setMenuOpen] = useState<boolean>(false);
     const menuRef = useRef<HTMLDivElement>(null);
 
+    const settingsManager = SettingsManager.getInstance();
+    const [showCharts, setShowCharts] = useState(
+       settingsManager.getSetting('showCharts')
+    );
+    
     useEffect(() => {
         const startTime = Date.now();
         const updateChart = () => {
@@ -110,10 +116,33 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
         document.body.removeChild(textArea);
     };
 
+    let headerText = `Device ${deviceState?.deviceTypeInfo?.name}`;
+    if ((deviceState?.deviceAddress !== undefined) && (deviceState?.deviceAddress !== "") && (deviceState?.deviceAddress !== "0")) {
+        // See if we can identify I2C addresses - should start with two bytes of 0s and then have a byte which is slot and a byte which is address
+        const addrInt = parseInt(deviceState?.deviceAddress, 10);
+        if (addrInt < 65536) {
+            const slot = addrInt >> 8;
+            const address = ("00" + (addrInt & 0xFF).toString(16)).slice(-2);
+            headerText += ` I2C Address 0x${address}`;
+            if (slot === 0)
+                headerText += ` (Main Bus)`;
+            else
+                headerText += ` (Slot ${slot})`;
+        } else {
+            headerText += ` Address ${deviceState?.deviceAddress}`;
+        }
+    }
+    if ((deviceState?.busName !== undefined) && (deviceState?.busName !== "") && (deviceState?.busName !== "0")) {
+        headerText += ` Bus ${deviceState?.busName}`;
+    }
+    if (!deviceState?.isOnline) {
+        headerText += " (Offline)";
+    }
+
     return (
         <div className={`device-panel ${offlineClass}`}>
             <div className="device-block-heading">
-                <div className="device-block-heading-text">Device {deviceState?.deviceTypeInfo?.name} Address {deviceKey}{!deviceState?.isOnline ? " (Offline)" : ""}</div>
+                <div className="device-block-heading-text">{headerText}</div>
                 <div className="menu-icon always-enabled" onClick={() => setMenuOpen(!menuOpen)}>☰</div>
                 {menuOpen && (
                     <div className="dropdown-menu" ref={menuRef}>
@@ -126,7 +155,9 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
                     <DeviceAttrsForm deviceKey={deviceKey} lastUpdated={lastUpdated} />
                     <DeviceActionsForm deviceKey={deviceKey} />
                 </div>
-                <DeviceLineChart deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
+                {showCharts &&
+                    <DeviceLineChart deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
+                }
             </div>
         </div>
     );

package/examples/dashboard/src/DevicesPanel.tsx

@@ -28,19 +28,20 @@ export default function DevicesPanel(props: DevicesPanelProps) {
         const onNewDevice = (deviceKey: string, newDeviceState: DeviceState) => {
             setLastUpdated(Date.now());
         };
-        deviceManager.onNewDevice(onNewDevice);
+        deviceManager.addNewDeviceCallback(onNewDevice);
 
         const onNewAttribute = (deviceKey: string, attribute: DeviceAttributeState) => {
             setLastUpdated(Date.now());
         }
-        deviceManager.onNewDeviceAttribute(onNewAttribute);
+        deviceManager.addNewAttributeCallback(onNewAttribute);
 
         const onNewAttributeData = (deviceKey: string, attribute: DeviceAttributeState) => {
             setLastUpdated(Date.now());
+            // console.log(`New attribute data: ${deviceKey} ${attribute.name} ${attribute.values.length}`);
         }
-        deviceManager.onNewAttributeData(onNewAttributeData);
+        deviceManager.addAttributeDataCallback(onNewAttributeData);
 
-    }, [lastUpdated]);
+    }, []);
 
     const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
     let devicesState: DevicesState = {};

package/examples/dashboard/src/LatencyTest.ts

@@ -0,0 +1,130 @@
+import { mean, standardDeviation } from 'simple-statistics';
+import { DeviceAttributeState } from '../../../src/RaftDeviceStates';
+import SettingsManager from './SettingsManager';
+
+class LatencyTest {
+  private static instance: LatencyTest;
+
+  private lastWhiteTime: number | null = null;
+  private lastBlackTime: number | null = null;
+  private lastAttrValue: number | null = null;
+
+  private latencyRecords: { type: 'white' | 'black'; latency: number }[] = [];
+  private latencyWindowSize: number = 10;
+  private sampleCounter: number = 0;
+
+  // Singleton access
+  static getInstance(): LatencyTest {
+    if (!LatencyTest.instance) {
+      LatencyTest.instance = new LatencyTest();
+    }
+    return LatencyTest.instance;
+  }
+
+  // Get abruptChangeThreshold
+  private get abruptChangeThreshold(): number {
+    const settingsManager = SettingsManager.getInstance();
+    return settingsManager.getSetting('latencyChangeThreshold') || 50;
+  }
+
+  // Record color change time
+  recordColorChange(color: 'white' | 'black', timestamp: number): void {
+    if (color === 'white') {
+      this.lastWhiteTime = timestamp;
+      this.lastBlackTime = null;
+    } else if (color === 'black') {
+      this.lastBlackTime = timestamp;
+      this.lastWhiteTime = null;
+    }
+    // console.log(`Color change recorded: ${color} at ${timestamp}`);
+  }
+
+  // Process values
+  processAttrValues(attribute: DeviceAttributeState, timestamp: number): void {
+    for (let i = 0; i < attribute.numNewValues; i++) {
+      const newValue = attribute.values[attribute.values.length - attribute.numNewValues + i];
+      // console.log(`New value: ${newValue} prev value: ${this.lastAttrValue}`);
+      if (this.lastAttrValue === null) {
+        this.lastAttrValue = newValue;
+        return;
+      }
+      this.sampleCounter++;
+
+      // Calculate change and update last value
+      const change = newValue - this.lastAttrValue;
+      this.lastAttrValue = newValue;
+
+      // Check size of change - needs to be above threshold
+      if (Math.abs(change) < this.abruptChangeThreshold) {
+        continue;
+      }
+
+      // console.log(`[${new Date().toISOString()}] new ${newValue} chg ${Math.abs(change)} >thresh ${Math.abs(change) >= this.abruptChangeThreshold} ${this.sampleCounter}`);
+
+      // Skip invalid changes (in the wrong direction) - also skips repeated values
+      // since lastWhiteTime and lastBlackTime are cleared after a change
+      if ((change >= 0 && this.lastWhiteTime === null) || (change < 0 && this.lastBlackTime === null)) {
+        // console.log(`Invalid change detected: ${change} lastWhite ${this.lastWhiteTime} lastBlack ${this.lastBlackTime}`);
+        continue;
+      }
+
+      // console.log(
+      //   `[${new Date().toISOString()}] ${newValue} ${this.lastAttrValue} ${change} ${Math.abs(change)} ${this.abruptChangeThreshold} ${Math.abs(change) >= this.abruptChangeThreshold} ${this.sampleCounter} ${this.lastTriggerIndex}`
+      // );
+
+      // console.log(`Sample counter = ${this.sampleCounter} Last trigger index = ${this.lastTriggerIndex} Diff = ${this.sampleCounter - this.lastTriggerIndex}`);
+
+      // Detect abrupt change with threshold
+      if (Math.abs(change) >= this.abruptChangeThreshold) {
+        const eventType = change > 0 ? 'white' : 'black';
+        const relatedTime =
+          eventType === 'white' ? this.lastWhiteTime : this.lastBlackTime;
+
+        if (relatedTime !== null) {
+          const latency = timestamp - relatedTime;
+          this.latencyRecords.push({ type: eventType, latency });
+          if (this.latencyRecords.length > this.latencyWindowSize) {
+            this.latencyRecords.shift();
+          }
+
+          // console.log(
+          //   `[${new Date().toISOString()}] Triggered: ${eventType} change ${change} detected. Last white time = ${this.lastWhiteTime} Last black time = ${this.lastBlackTime} Latency = ${latency} ms`
+          // );
+        }
+      }
+
+      // Clear timers of change
+      this.lastWhiteTime = null;
+      this.lastBlackTime = null;
+    }
+  }
+
+  // Get latency stats
+  getLatencyStats(): {
+    meanLatency: number | null;
+    stdDevLatency: number | null;
+    records: { type: 'white' | 'black'; latency: number }[];
+  } {
+    if (this.latencyRecords.length === 0) {
+      return {
+        meanLatency: null,
+        stdDevLatency: null,
+        records: [],
+      };
+    }
+
+    const latencies = this.latencyRecords.map((record) => record.latency);
+    const meanLatency = mean(latencies);
+    const stdDevLatency = standardDeviation(latencies);
+
+    // console.log(`Mean latency: ${meanLatency} ms, Std Dev: ${stdDevLatency} ms Num records: ${this.latencyRecords.length}`);
+
+    return {
+      meanLatency,
+      stdDevLatency,
+      records: this.latencyRecords,
+    };
+  }
+}
+
+export default LatencyTest;

package/examples/dashboard/src/LatencyTestPanel.tsx

@@ -0,0 +1,92 @@
+// src/LatencyTestPanel.tsx
+import React, { useEffect, useState } from 'react';
+import './styles.css';
+import ConnManager from "./ConnManager";
+import LatencyTest from './LatencyTest';
+import SettingsManager from './SettingsManager';
+import { DeviceAttributeState, DeviceState } from '../../../src/RaftDeviceStates';
+
+const connManager = ConnManager.getInstance();
+const settingsManager = SettingsManager.getInstance();
+
+const LatencyTestPanel = () => {
+
+  const latencyTest = LatencyTest.getInstance();
+  const [stats, setStats] = useState(latencyTest.getLatencyStats());
+  const [isWhite, setIsWhite] = useState<boolean>(true);
+
+  const attributeName = settingsManager.getSetting('latencyAttributeName');
+  
+  useEffect(() => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    if (!deviceManager) {
+      return;
+    }
+
+    const onNewDevice = (deviceKey: string, newDeviceState: DeviceState) => {
+      console.log(`New device: ${deviceKey}`);
+    };
+
+    const onNewAttribute = (deviceKey: string, attribute: DeviceAttributeState) => {
+      console.log(`New attribute: ${deviceKey}`);
+    };
+
+    const onNewAttributeData = (deviceKey: string, attribute: DeviceAttributeState) => {
+      // console.log(`New attribute data: ${deviceKey}`);
+      if (attribute.name === attributeName) {
+        latencyTest.processAttrValues(attribute, Date.now());
+        setStats(latencyTest.getLatencyStats());
+      }
+    };
+
+    deviceManager.addNewDeviceCallback(onNewDevice);
+    deviceManager.addNewAttributeCallback(onNewAttribute);
+    deviceManager.addAttributeDataCallback(onNewAttributeData);
+
+    // Cleanup callbacks when the component unmounts
+    return () => {
+      deviceManager.removeNewDeviceCallback(onNewDevice);
+      deviceManager.removeNewAttributeCallback(onNewAttribute);
+      deviceManager.removeAttributeDataCallback(onNewAttributeData);
+    };
+  }, [latencyTest, attributeName]);
+  
+  useEffect(() => {
+    const interval = setInterval(() => {
+      // Toggle `isWhite` and record the color change
+      setIsWhite((prevIsWhite) => {
+        const newColor = !prevIsWhite ? 'white' : 'black';
+        latencyTest.recordColorChange(newColor, new Date().getTime());
+        return !prevIsWhite;
+      });
+    }, 2500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <div className="info-boxes">
+      <div className="info-box">
+        <h3>Latency Stats</h3>
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+          <div
+            className="latency-test-panel"
+            style={{
+              width: '200px',
+              height: '150px',
+              backgroundColor: isWhite ? '#fff' : '#000',
+              border: '1px solid #666',
+              borderRadius: '8px',
+              marginRight: '20px',
+            }}
+          />
+          <div>
+            <div>Mean Latency: {stats.meanLatency ? `${stats.meanLatency.toFixed(1)} ms` : 'N/A'}</div>
+            <div>Std Dev: {stats.stdDevLatency ? `${stats.stdDevLatency.toFixed(1)} ms` : 'N/A'}</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LatencyTestPanel;

package/examples/dashboard/src/Main.tsx

@@ -1,106 +1,224 @@
-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 } 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 SettingsManager from './SettingsManager';
 
+const sysTypeManager = RaftSysTypeManager.getInstance();
 const connManager = ConnManager.getInstance();
 
 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) => {
-      console.log(`Connection event: ${eventName}`);
-      if (eventType === "conn") {
-        if ((eventEnum === RaftConnEvent.CONN_CONNECTED) || (eventEnum === RaftConnEvent.CONN_DISCONNECTED)) {
+      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", "", "");
-                }
-                }>
-                  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;