@robdobsn/raftjs 1.7.8 → 1.10.7

package/examples/dashboard/src/DispOneLed.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+interface LEDProps {
+  color: string;
+  onClick: () => void;
+}
+
+const DispOneLED: React.FC<LEDProps> = ({ color, onClick }) => {
+  return (
+    <div style={{
+      width: '20px',
+      height: '20px',
+      backgroundColor: color,
+      margin: '2px',
+      cursor: 'pointer'
+    }} onClick={onClick} />
+  );
+};
+
+export default DispOneLED;

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

@@ -0,0 +1,234 @@
+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 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 [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 [serialNo, setSerialNo] = useState<string>('');
+
+  const handleConnect = () => {
+    if (ipAddress.trim() === '') {
+      console.warn('No IP address entered');
+      return;
+    }
+    connManager.connect('WebSocket', ipAddress, [], null);
+    localStorage.setItem('lastIpAddress', ipAddress);
+  };
+
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter') {
+      handleConnect();
+    }
+  };
+
+  useEffect(() => {
+    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
+        ) {
+          setConnectionStatus(eventEnum);
+          setConnectionTime(new Date());
+        }
+      }
+    };
+
+    connManager.setConnectionEventListener(listener);
+
+    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">
+      {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 className="info-box">
+                    <h3>WebBLE</h3>
+                    <input
+                      className="serial-no-input"
+                      id="serial-no"
+                      type="text"
+                      placeholder="Serial No (ignored if empty)"
+                      value={serialNo}
+                      onChange={(e) => setSerialNo(e.target.value)}
+                    />
+                    <button
+                      className="action-button"
+                      onClick={() => {
+                        connManager.connect('WebBLE', '', sysTypeManager.getAllServiceUUIDs(), serialNo);
+                      }}
+                    >
+                      Connect
+                    </button>
+                  </div>
+                  <div className="info-box">
+                    <h3>WebSerial</h3>
+                    <button
+                      className="action-button"
+                      onClick={() => {
+                        connManager.connect('WebSerial', '', [], null);
+                      }}
+                    >
+                      Connect
+                    </button>
+                  </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;