@robotical/raftjs 2.1.0 → 2.1.3

package/examples/dashboard/src/DevicePanel.tsx

@@ -1,9 +1,10 @@
 import React, { useEffect, useRef, useState } from 'react';
 import './styles.css';
-import { DeviceState } from '../../../src/RaftDeviceStates';
+import { DeviceState, DeviceOnlineState } from '../../../src/RaftDeviceStates';
 import DeviceAttrsForm from './DeviceAttrsForm';
 import DeviceActionsForm from './DeviceActionsForm';
 import DeviceLineChart from './DeviceLineChart';
+import DeviceStatsPanel from './DeviceStatsPanel';
 import ConnManager from './ConnManager';
 import SettingsManager from './SettingsManager';
 
@@ -19,10 +20,14 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
     const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
 
     // Gray out the device panel if the device is offline
-    const offlineClass = deviceState?.isOnline ? '' : 'offline';
+    const offlineClass = deviceState?.onlineState === DeviceOnlineState.Online ? '' : 'offline';
 
     const [timedChartUpdate, setTimedChartUpdate] = useState<number>(0);
     const [menuOpen, setMenuOpen] = useState<boolean>(false);
+    const [showPollRateDialog, setShowPollRateDialog] = useState<boolean>(false);
+    const [pollRateInput, setPollRateInput] = useState<string>('');
+    const [pollRateStatus, setPollRateStatus] = useState<string>('');
+    const [showStats, setShowStats] = useState<boolean>(false);
     const menuRef = useRef<HTMLDivElement>(null);
 
     const settingsManager = SettingsManager.getInstance();
@@ -92,6 +97,34 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
         setMenuOpen(false);
     };
     
+    const handleSetPollRateClick = () => {
+        setMenuOpen(false);
+        setPollRateInput('');
+        setPollRateStatus('');
+        setShowPollRateDialog(true);
+    };
+
+    const handlePollRateSubmit = () => {
+        const rateHz = parseFloat(pollRateInput);
+        if (isNaN(rateHz) || rateHz <= 0) {
+            setPollRateStatus('Invalid rate — enter a positive number');
+            return;
+        }
+        const intervalUs = Math.round(1000000 / rateHz);
+        const busName = deviceState?.busName ?? '0';
+        const addr = deviceState?.deviceAddress ?? '0';
+        const cmd = `devman/devconfig?bus=${busName}&addr=${addr}&intervalUs=${intervalUs}`;
+        setPollRateStatus('Sending...');
+        connManager.getConnector().sendRICRESTMsg(cmd, {}).then((response: object) => {
+            console.log(`Poll rate set: ${rateHz} Hz (${intervalUs} us)`, response);
+            setPollRateStatus(`Set to ${rateHz} Hz (${intervalUs} µs)`);
+            setTimeout(() => setShowPollRateDialog(false), 1500);
+        }).catch((error: unknown) => {
+            console.warn('Error setting poll rate', error);
+            setPollRateStatus('Error setting poll rate');
+        });
+    };
+
     const fallbackCopyTextToClipboard = (text: string) => {
         const textArea = document.createElement("textarea");
         textArea.value = text;
@@ -117,25 +150,30 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
     };
 
     let headerText = `Device ${deviceState?.deviceTypeInfo?.name}`;
+    let bracketsAdded = false;
+    if ((deviceState?.busName !== undefined) && (deviceState?.busName !== "") && (deviceState?.busName !== "0")) {
+        headerText += ` (Bus ${deviceState?.busName}`;
+        bracketsAdded = true;
+    }
     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);
+        const addrInt = parseInt(deviceState?.deviceAddress, 16);
         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)`;
+                headerText += ` Main Bus`;
             else
-                headerText += ` (Slot ${slot})`;
+                headerText += ` Slot ${slot}`;
+            const address = ("00" + (addrInt & 0xFF).toString(16)).slice(-2);
+            headerText += ` Addr 0x${address}`;
         } else {
-            headerText += ` Address ${deviceState?.deviceAddress}`;
+            headerText += ` Addr ${deviceState?.deviceAddress}`;
         }
     }
-    if ((deviceState?.busName !== undefined) && (deviceState?.busName !== "") && (deviceState?.busName !== "0")) {
-        headerText += ` Bus ${deviceState?.busName}`;
+    if (bracketsAdded) {
+        headerText += `)`;
     }
-    if (!deviceState?.isOnline) {
+    if (deviceState?.onlineState !== DeviceOnlineState.Online) {
         headerText += " (Offline)";
     }
 
@@ -147,14 +185,57 @@ const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
                 {menuOpen && (
                     <div className="dropdown-menu" ref={menuRef}>
                         <div className="menu-item always-enabled" onClick={handleCopyToClipboard}>Copy Values to Clipboard</div>
+                        <div className="menu-item always-enabled" onClick={handleSetPollRateClick}>Set Poll Rate</div>
+                        <div className="menu-item always-enabled menu-item-toggle">
+                            <label className="menu-toggle">
+                                <input
+                                    type="checkbox"
+                                    checked={showStats}
+                                    onChange={(e) => setShowStats(e.target.checked)}
+                                />
+                                <span>Show Stats</span>
+                            </label>
+                        </div>
                     </div>
                 )}
             </div>
+            {showPollRateDialog && (
+                <div className="poll-rate-dialog-overlay" onClick={() => setShowPollRateDialog(false)}>
+                    <div className="poll-rate-dialog" onClick={(e) => e.stopPropagation()}>
+                        <div className="poll-rate-dialog-title">Set Poll Rate</div>
+                        <div className="poll-rate-dialog-row">
+                            <input
+                                className="poll-rate-input"
+                                type="number"
+                                min="0.001"
+                                step="any"
+                                placeholder="Rate (Hz)"
+                                value={pollRateInput}
+                                onChange={(e) => setPollRateInput(e.target.value)}
+                                onKeyDown={(e) => { if (e.key === 'Enter') handlePollRateSubmit(); if (e.key === 'Escape') setShowPollRateDialog(false); }}
+                                autoFocus
+                            />
+                            <span className="poll-rate-unit">Hz</span>
+                        </div>
+                        {pollRateInput && !isNaN(parseFloat(pollRateInput)) && parseFloat(pollRateInput) > 0 && (
+                            <div className="poll-rate-preview">{Math.round(1000000 / parseFloat(pollRateInput))} µs interval</div>
+                        )}
+                        {pollRateStatus && <div className="poll-rate-status">{pollRateStatus}</div>}
+                        <div className="poll-rate-dialog-buttons">
+                            <button className="poll-rate-btn poll-rate-btn-set" onClick={handlePollRateSubmit}>Set</button>
+                            <button className="poll-rate-btn poll-rate-btn-cancel" onClick={() => setShowPollRateDialog(false)}>Cancel</button>
+                        </div>
+                    </div>
+                </div>
+            )}
             <div className={`device-block-data`}>
                 <div className="device-attrs-and-actions">
                     <DeviceAttrsForm deviceKey={deviceKey} lastUpdated={lastUpdated} />
                     <DeviceActionsForm deviceKey={deviceKey} />
                 </div>
+                {showStats && (
+                    <DeviceStatsPanel deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
+                )}
                 {showCharts &&
                     <DeviceLineChart deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
                 }

package/examples/dashboard/src/DeviceSelectDialog.tsx

@@ -0,0 +1,224 @@
+import React, { useState } from 'react';
+import './styles.css';
+
+// Rate presets: label + milliseconds
+const RATE_PRESETS = [
+  { label: 'Max (poll rate)', ms: 0 },
+  { label: '10 Hz', ms: 100 },
+  { label: '1 Hz', ms: 1000 },
+  { label: '0.1 Hz (10s)', ms: 10000 },
+  { label: '1/min', ms: 60000 },
+  { label: '1/10min', ms: 600000 },
+  { label: '1/hour', ms: 3600000 },
+  { label: '1/day', ms: 86400000 },
+];
+
+// Log-scale slider range
+const LOG_RATE_MIN_MS = 50;
+const LOG_RATE_MAX_MS = 360000000;
+
+function msToSliderValue(ms: number): number {
+  if (ms <= 0) return 0;
+  const minLog = Math.log10(LOG_RATE_MIN_MS);
+  const maxLog = Math.log10(LOG_RATE_MAX_MS);
+  const val = (Math.log10(Math.max(ms, LOG_RATE_MIN_MS)) - minLog) / (maxLog - minLog);
+  return Math.min(1, Math.max(0, val));
+}
+
+function sliderValueToMs(val: number): number {
+  if (val <= 0) return 0;
+  const minLog = Math.log10(LOG_RATE_MIN_MS);
+  const maxLog = Math.log10(LOG_RATE_MAX_MS);
+  return Math.round(Math.pow(10, minLog + val * (maxLog - minLog)));
+}
+
+function formatRateMs(ms: number): string {
+  if (ms <= 0) return 'Max (every poll)';
+  if (ms < 1000) return `${ms} ms (${(1000 / ms).toFixed(1)} Hz)`;
+  if (ms < 60000) return `${(ms / 1000).toFixed(1)} s (${(1000 / ms).toFixed(2)} Hz)`;
+  if (ms < 3600000) return `${(ms / 60000).toFixed(1)} min`;
+  if (ms < 86400000) return `${(ms / 3600000).toFixed(1)} hr`;
+  return `${(ms / 86400000).toFixed(1)} days`;
+}
+
+export interface DeviceLogEntry {
+  enabled: boolean;
+  busName: string;
+  addr: string;
+  typeName: string;
+  rateMs: number;
+  pollIntervalMs: number;
+  availableAttrs: string[];
+  selectedAttrs: string[];
+}
+
+interface DeviceSelectDialogProps {
+  entries: DeviceLogEntry[];
+  format: string;
+  onSave: (entries: DeviceLogEntry[]) => void;
+  onCancel: () => void;
+}
+
+export default function DeviceSelectDialog({ entries, format, onSave, onCancel }: DeviceSelectDialogProps) {
+  const [localEntries, setLocalEntries] = useState<DeviceLogEntry[]>(
+    entries.map(e => ({ ...e, selectedAttrs: [...e.selectedAttrs] }))
+  );
+
+  const toggleDevice = (index: number) => {
+    setLocalEntries(prev => {
+      const next = [...prev];
+      next[index] = { ...next[index], enabled: !next[index].enabled };
+      return next;
+    });
+  };
+
+  const setRate = (index: number, rateMs: number) => {
+    setLocalEntries(prev => {
+      const next = [...prev];
+      next[index] = { ...next[index], rateMs };
+      return next;
+    });
+  };
+
+  const selectAll = () => {
+    setLocalEntries(prev => prev.map(d => ({ ...d, enabled: true })));
+  };
+
+  const selectNone = () => {
+    setLocalEntries(prev => prev.map(d => ({ ...d, enabled: false })));
+  };
+
+  const toggleAttr = (deviceIndex: number, attrName: string) => {
+    setLocalEntries(prev => {
+      const next = [...prev];
+      const entry = { ...next[deviceIndex] };
+      const selected = [...entry.selectedAttrs];
+      const idx = selected.indexOf(attrName);
+      if (idx >= 0) {
+        selected.splice(idx, 1);
+      } else {
+        selected.push(attrName);
+      }
+      entry.selectedAttrs = selected;
+      next[deviceIndex] = entry;
+      return next;
+    });
+  };
+
+  return (
+    <div className="dev-select-overlay" onClick={onCancel}>
+      <div className="dev-select-dialog" onClick={e => e.stopPropagation()}>
+        <h3 className="dev-select-title">Select Devices &amp; Attributes</h3>
+
+        <div className="log-config-select-buttons">
+          <button className="log-config-select-btn" onClick={selectAll}>All</button>
+          <button className="log-config-select-btn" onClick={selectNone}>None</button>
+        </div>
+
+        <div className="dev-select-list">
+          {localEntries.map((entry, idx) => (
+            <div key={`${entry.busName}_${entry.addr}`} className={`log-config-device ${entry.enabled ? '' : 'log-config-device-disabled'}`}>
+              <div className="log-config-device-header">
+                <label className="log-config-checkbox-label">
+                  <input
+                    type="checkbox"
+                    checked={entry.enabled}
+                    onChange={() => toggleDevice(idx)}
+                  />
+                  <span className="log-config-device-name">{entry.typeName}</span>
+                </label>
+                <span className="log-config-device-addr">
+                  Bus {entry.busName} · 0x{entry.addr}
+                </span>
+              </div>
+
+              {entry.enabled && (
+                <div className="log-config-rate-control">
+                  <div className="log-config-rate-row">
+                    <label className="log-config-rate-label">Log rate:</label>
+                    <select
+                      className="log-config-rate-preset"
+                      value={RATE_PRESETS.find(p => p.ms === entry.rateMs) ? entry.rateMs : 'custom'}
+                      onChange={e => {
+                        const val = e.target.value;
+                        if (val !== 'custom') setRate(idx, parseInt(val, 10));
+                      }}
+                    >
+                      {RATE_PRESETS.map(p => (
+                        <option key={p.ms} value={p.ms}>{p.label}</option>
+                      ))}
+                      {!RATE_PRESETS.find(p => p.ms === entry.rateMs) && (
+                        <option value="custom">Custom</option>
+                      )}
+                    </select>
+                  </div>
+
+                  <div className="log-config-slider-row">
+                    <span className="log-config-slider-label">Fast</span>
+                    <input
+                      type="range"
+                      className="log-config-slider"
+                      min="0"
+                      max="1"
+                      step="0.005"
+                      value={msToSliderValue(entry.rateMs)}
+                      onChange={e => {
+                        const ms = sliderValueToMs(parseFloat(e.target.value));
+                        setRate(idx, ms);
+                      }}
+                    />
+                    <span className="log-config-slider-label">Slow</span>
+                  </div>
+
+                  <div className="log-config-rate-display">
+                    {formatRateMs(entry.rateMs)}
+                    {entry.pollIntervalMs > 0 && entry.rateMs === 0 && (
+                      <span className="log-config-poll-rate"> · poll: {(1000 / entry.pollIntervalMs).toFixed(1)} Hz</span>
+                    )}
+                  </div>
+
+                  {format === 'csv' && entry.availableAttrs.length > 0 && (
+                    <div className="log-config-attrs">
+                      <div className="log-config-attrs-label">
+                        Attributes {entry.selectedAttrs.length === 0 ? '(all)' : `(${entry.selectedAttrs.length}/${entry.availableAttrs.length})`}:
+                      </div>
+                      <div className="log-config-attrs-list">
+                        {entry.availableAttrs.map(attrName => (
+                          <label key={attrName} className="log-config-attr-checkbox">
+                            <input
+                              type="checkbox"
+                              checked={entry.selectedAttrs.length === 0 || entry.selectedAttrs.includes(attrName)}
+                              onChange={() => {
+                                if (entry.selectedAttrs.length === 0) {
+                                  setLocalEntries(prev => {
+                                    const next = [...prev];
+                                    const e = { ...next[idx] };
+                                    e.selectedAttrs = entry.availableAttrs.filter(a => a !== attrName);
+                                    next[idx] = e;
+                                    return next;
+                                  });
+                                } else {
+                                  toggleAttr(idx, attrName);
+                                }
+                              }}
+                            />
+                            {attrName}
+                          </label>
+                        ))}
+                      </div>
+                    </div>
+                  )}
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+
+        <div className="dev-select-buttons">
+          <button className="dev-select-btn dev-select-btn-cancel" onClick={onCancel}>Cancel</button>
+          <button className="dev-select-btn dev-select-btn-save" onClick={() => onSave(localEntries)}>OK</button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/dashboard/src/DeviceStatsPanel.tsx

@@ -0,0 +1,76 @@
+import React, { useRef } from 'react';
+import ConnManager from './ConnManager';
+import './styles.css';
+
+const connManager = ConnManager.getInstance();
+
+const LAST_SAMPLE_AVG_COUNT = 5;
+
+export interface DeviceStatsPanelProps {
+    deviceKey: string;
+    lastUpdated: number;
+}
+
+const DeviceStatsPanel: React.FC<DeviceStatsPanelProps> = ({ deviceKey, lastUpdated }: DeviceStatsPanelProps) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const stats = deviceManager?.getDeviceStats(deviceKey);
+    const recentAgesRef = useRef<number[]>([]);
+
+    if (!stats) {
+        return <></>;
+    }
+
+    const windowSeconds = stats.windowMs / 1000;
+    const sampleRateHz = Number.isFinite(stats.sampleRateHz) ? stats.sampleRateHz : 0;
+    const nowMs = Math.max(lastUpdated || 0, Date.now());
+
+    let lastSampleAgeMs: number | null = null;
+    if (stats.lastSampleTimeMs) {
+        const ageMs = nowMs - stats.lastSampleTimeMs;
+        const ages = recentAgesRef.current;
+        ages.push(ageMs);
+        if (ages.length > LAST_SAMPLE_AVG_COUNT) {
+            ages.shift();
+        }
+        lastSampleAgeMs = ages.reduce((sum, v) => sum + v, 0) / ages.length;
+    }
+
+    const handleReset = () => {
+        deviceManager?.resetDeviceStats(deviceKey);
+    };
+
+    return (
+        <div className="device-stats-panel">
+            <div className="device-stats-header">
+                <span>Sampling Stats</span>
+                <button className="device-stats-reset" onClick={handleReset}>Reset Samples</button>
+            </div>
+            <div className="device-stats-grid">
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Sample Rate</div>
+                    <div className="device-stats-value">{sampleRateHz.toFixed(2)} Hz</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Window</div>
+                    <div className="device-stats-value">{windowSeconds.toFixed(1)} s</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Window Samples</div>
+                    <div className="device-stats-value">{stats.windowSamples}</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Total Samples</div>
+                    <div className="device-stats-value">{stats.totalSamples}</div>
+                </div>
+                <div className="device-stats-item">
+                    <div className="device-stats-label">Last Sample</div>
+                    <div className="device-stats-value">
+                        {lastSampleAgeMs === null ? 'N/A' : `${lastSampleAgeMs.toFixed(0)} ms ago`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default DeviceStatsPanel;

package/examples/dashboard/src/DevicesPanel.tsx

@@ -41,6 +41,17 @@ export default function DevicesPanel(props: DevicesPanelProps) {
         }
         deviceManager.addAttributeDataCallback(onNewAttributeData);
 
+        const onDeviceRemoved = (deviceKey: string, state: DeviceState) => {
+            setLastUpdated(Date.now());
+        };
+        deviceManager.addDeviceRemovedCallback(onDeviceRemoved);
+
+        return () => {
+            deviceManager.removeNewDeviceCallback(onNewDevice);
+            deviceManager.removeNewAttributeCallback(onNewAttribute);
+            deviceManager.removeAttributeDataCallback(onNewAttributeData);
+            deviceManager.removeDeviceRemovedCallback(onDeviceRemoved);
+        };
     }, []);
 
     const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;