@robdobsn/raftjs 1.7.2 → 1.7.5

package/examples/dashboard/src/LatencyTestPanel.tsx

@@ -1,92 +0,0 @@
-// 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,234 +0,0 @@
-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.error('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

@@ -1,67 +0,0 @@
-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

@@ -1,174 +0,0 @@
-// 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/StatusPanel.tsx

@@ -1,71 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import './styles.css';
-import { RaftSystemInfo } from "../../../src/main";
-import ConnManager from "./ConnManager";
-
-const connManager = ConnManager.getInstance();
-
-export default function StatusPanel() {
-  const [systemInfo, setSystemInfo] = useState<RaftSystemInfo>(new RaftSystemInfo());
-
-  // Use useEffect to fetch system info when the component mounts
-  useEffect(() => {
-    if (connManager.isConnected()) {
-      connManager.getConnector().getRaftSystemUtils().getSystemInfo().then((sysInfo: RaftSystemInfo) => {
-        console.log(`System Info: ${JSON.stringify(sysInfo)}`);
-        setSystemInfo(sysInfo);
-      });
-    }
-  }, []); // Empty dependency == on component mount
-  
-  return (
-    <div className="info-boxes">
-
-      <div className="info-box">
-        <h3>SysInfo</h3>
-        {
-          (systemInfo !== undefined) && (systemInfo.validMs) && (systemInfo.validMs > 0) ?
-            <div className="info">
-              <div className="info-line">
-                <div className="info-label">System Name:</div>
-                <div className="info-value">{systemInfo.SystemName}</div>
-              </div>
-
-              <div className="info-line">
-                <div className="info-label">System Version:</div>
-                <div className="info-value">{systemInfo.SystemVersion}</div>
-              </div>
-
-              <div className="info-line">
-                <div className="info-label">HwRev:</div>
-                <div className="info-value">{systemInfo.HwRev}</div>
-              </div>
-
-              <div className="info-line">
-                <div className="info-label">MAC:</div>
-                <div className="info-value">{systemInfo.MAC}</div>
-              </div>
-
-              <div className="info-line">
-                <div className="info-label">SerialNo:</div>
-                <div className="info-value">{systemInfo.SerialNo}</div>
-              </div>
-
-              <div className="info-line">
-                <div className="info-label">Friendly:</div>
-                <div className="info-value">{systemInfo.Friendly}</div>
-              </div>
-            </div>
-            :
-            <div className="info">
-              <div className="info-line">
-                <div className="info-label">System Info:</div>
-                <div className="info-value">Not available</div>
-              </div>
-            </div>
-        }
-      </div>
-    </div>
-  );
-
-}