@robdobsn/raftjs 1.7.1 → 1.7.3

package/examples/dashboard/src/DeviceLineChart.tsx

@@ -1,163 +0,0 @@
-import React, { useEffect, useState, memo, useRef } from "react";
-import { Chart as ChartJS, CategoryScale, LinearScale, PointElement, LineElement, ArcElement, Tooltip, Legend } from 'chart.js';
-import { Line } from "react-chartjs-2";
-import ConnManager from "./ConnManager";
-import { DeviceState } from "../../../src/RaftDeviceStates";
-import SettingsManager from "./SettingsManager";
-
-const connManager = ConnManager.getInstance();
-
-ChartJS.register(
-    CategoryScale,
-    LinearScale,
-    PointElement,
-    LineElement,
-    ArcElement,
-    Tooltip,
-    Legend
-);
-
-export interface DeviceLineChartProps {
-    deviceKey: string;
-    lastUpdated: number;
-}
-
-interface ChartJSData {
-    labels: string[];
-    datasets: {
-        label: string;
-        data: number[];
-        fill: boolean;
-        borderColor: string;
-        backgroundColor: string;
-        yAxisID: string;
-    }[];
-}
-
-const DeviceLineChart: React.FC<DeviceLineChartProps> = memo(({ deviceKey, lastUpdated }) => {
-
-    const settingsManager = SettingsManager.getInstance();
-    const maxChartDataPoints = settingsManager.getSetting('maxChartDataPoints');
-
-    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
-    const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
-    // const { deviceAttributes, deviceTimeline } = deviceState;
-    const [chartData, setChartData] = useState<ChartJSData>({
-        labels: [],
-        datasets: []
-    });
-
-    const options = {
-        responsive: true,
-        maintainAspectRatio: false,
-        animation: {
-            duration: 1, // default is 1000ms
-        },
-        scales: {}
-    };
-
-    const colourMapRef = useRef<{ [key: string]: string }>({
-        prox: "hsl(60, 70%, 60%)",
-        als: "hsl(0, 70%, 60%)",
-        white: "hsl(120, 70%, 60%)",
-        x: "hsl(240, 70%, 60%)",
-        y: "hsl(300, 70%, 60%)",
-        z: "hsl(0, 70%, 60%)",
-        ax: "hsl(230, 70%, 60%)",
-        ay: "hsl(323, 69.60%, 60.00%)",
-        az: "hsl(64, 69.60%, 60.00%)",
-        gx: "hsl(275, 70%, 60%)",
-        gy: "hsl(352, 69.60%, 60.00%)",
-        gz: "hsl(88, 69.60%, 60.00%)",
-        dist: "hsl(60, 70%, 60%)",
-        temperature: "hsl(360, 70%, 60%)",
-        humidity: "hsl(200, 70%, 60%)",
-        Red: "hsl(0, 70%, 60%)",
-        Green: "hsl(120, 70%, 60%)",
-        Blue: "hsl(240, 70%, 60%)",
-        ir0: "hsl(300, 70%, 60%)",
-        ir1: "hsl(278, 69.60%, 60.00%)",
-        ir2: "hsl(7, 69.60%, 60.00%)",
-        amb0: "hsl(231, 25.50%, 90.00%)",
-        battV: "hsl(194, 69.60%, 60.00%)",
-        powerBtn: "hsl(256, 69.60%, 60.00%)",
-        USB: "hsl(71, 69.60%, 60.00%)",
-        powerMan: "hsl(0, 69.60%, 60.00%)",
-        powerBtnLvl: "hsl(120, 69.60%, 60.00%)",
-        angle: "hsl(240, 69.60%, 60.00%)",
-        current: "hsl(300, 69.60%, 60.00%)",
-        state: "hsl(60, 69.60%, 60.00%)",
-        velocity: "hsl(120, 69.60%, 60.00%)",
-    });
-
-    useEffect(() => {
-        if (!deviceState) return;
-
-        const labels = deviceState.deviceTimeline.timestampsUs.slice(-maxChartDataPoints).map(time => {
-            const seconds = time / 1e6; // Convert microseconds to seconds
-            return seconds.toFixed(3); // Format decimal places
-        });
-
-        const uniqueAxes = new Map<string, { range: [number, number], units: string }>();
-        const datasets = Object.entries(deviceState.deviceAttributes)
-            .filter(([attributeName, attributeDetails]) => attributeDetails.visibleSeries !== false)
-            .map(([attributeName, attributeDetails]) => {
-                const data = attributeDetails.values.slice(-maxChartDataPoints);
-                let colour = colourMapRef.current[attributeName];
-                if (!colour) {
-                    colour = `hsl(${Math.random() * 360}, 70%, 60%)`;
-                    colourMapRef.current[attributeName] = colour;
-                }
-
-                // Ensure range has a minimum width if all values are the same
-                const minVal = Math.min(...attributeDetails.range);
-                const maxVal = Math.max(...attributeDetails.range);
-                const rangeEnds: [number, number] = minVal === maxVal
-                    ? [minVal - 1, maxVal + 1]
-                    : [minVal, maxVal];
-
-                const axisKey = `${rangeEnds[0]}-${rangeEnds[1]}-${attributeDetails.units}`;
-                if (!uniqueAxes.has(axisKey)) {
-                    uniqueAxes.set(axisKey, { range: rangeEnds, units: attributeDetails.units });
-                }
-
-                return {
-                    label: attributeName,
-                    data: data,
-                    fill: false,
-                    borderColor: colour,
-                    backgroundColor: colour,
-                    yAxisID: axisKey
-                };
-            });
-
-        const scales: { [key: string]: any } = {};
-        uniqueAxes.forEach((axis, key) => {
-            scales[key] = {
-                type: 'linear',
-                display: true,
-                position: 'left',
-                ticks: {
-                    min: axis.range[0],
-                    max: axis.range[1],
-                },
-            };
-        });
-
-        // Update options and chart data
-        options.scales = scales;
-        setChartData({ labels: labels.length ? labels : ['0.000'], datasets });
-    }, [lastUpdated]);
-
-    if (!deviceState || Object.keys(deviceState.deviceAttributes).length === 0) {
-        return <></>;
-    }
-
-    return (
-        <div className="device-line-chart">
-            <Line data={chartData} options={options} />
-        </div>
-    );
-});
-
-export default DeviceLineChart;

package/examples/dashboard/src/DevicePanel.tsx

@@ -1,166 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import './styles.css';
-import { DeviceState } from '../../../src/RaftDeviceStates';
-import DeviceAttrsForm from './DeviceAttrsForm';
-import DeviceActionsForm from './DeviceActionsForm';
-import DeviceLineChart from './DeviceLineChart';
-import ConnManager from './ConnManager';
-import SettingsManager from './SettingsManager';
-
-const connManager = ConnManager.getInstance();
-
-export interface DevicePanelProps {
-    deviceKey: string;
-    lastUpdated: number;
-}
-
-const DevicePanel = ({ deviceKey, lastUpdated }: DevicePanelProps) => {
-    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
-    const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
-
-    // Gray out the device panel if the device is offline
-    const offlineClass = deviceState?.isOnline ? '' : 'offline';
-
-    const [timedChartUpdate, setTimedChartUpdate] = useState<number>(0);
-    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 = () => {
-            setTimedChartUpdate(Date.now());
-        };
-        const updateTimer = setInterval(updateChart, 500);
-        return () => clearInterval(updateTimer);
-    }, []);
-
-    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);
-        };
-    }, []);
-
-    const handleCopyToClipboard = () => {
-        if (!deviceState) {
-            return;
-        }
-        const headers = ["Time (s)"];
-        const rows: string[][] = [];
-    
-        const timestampsUs = deviceState.deviceTimeline.timestampsUs;
-        const attributes = deviceState.deviceAttributes;
-    
-        // Collect headers and initialize rows with timestamps
-        Object.keys(attributes).forEach(attrName => {
-            headers.push(attrName);
-        });
-    
-        timestampsUs.forEach((timestampUs, index) => {
-            const row: string[] = [(timestampUs / 1000000.0).toString()];
-            Object.keys(attributes).forEach(attrName => {
-                const values = attributes[attrName].values;
-                row.push(values[index]?.toString() || "");
-            });
-            rows.push(row);
-        });
-    
-        // Create a tab-separated string
-        const csvContent = [headers.join("\t"), ...rows.map(row => row.join("\t"))].join("\n");
-    
-        // Try using navigator.clipboard.writeText, with a fallback to document.execCommand
-        if (navigator.clipboard) {
-            navigator.clipboard.writeText(csvContent).then(() => {
-                console.log("Device values copied to clipboard");
-            }).catch(err => {
-                console.error('Failed to copy: ', err);
-                fallbackCopyTextToClipboard(csvContent);
-            });
-        } else {
-            fallbackCopyTextToClipboard(csvContent);
-        }
-        setMenuOpen(false);
-    };
-    
-    const fallbackCopyTextToClipboard = (text: string) => {
-        const textArea = document.createElement("textarea");
-        textArea.value = text;
-    
-        // Avoid scrolling to bottom
-        textArea.style.top = "0";
-        textArea.style.left = "0";
-        textArea.style.position = "fixed";
-    
-        document.body.appendChild(textArea);
-        textArea.focus();
-        textArea.select();
-    
-        try {
-            document.execCommand("copy");
-            // alert("Device values copied to clipboard!");
-        } catch (err) {
-            console.error('Fallback: Oops, unable to copy', err);
-            alert("Failed to copy device values to clipboard");
-        }
-    
-        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">{headerText}</div>
-                <div className="menu-icon always-enabled" onClick={() => setMenuOpen(!menuOpen)}>☰</div>
-                {menuOpen && (
-                    <div className="dropdown-menu" ref={menuRef}>
-                        <div className="menu-item always-enabled" onClick={handleCopyToClipboard}>Copy Values to Clipboard</div>
-                    </div>
-                )}
-            </div>
-            <div className={`device-block-data`}>
-                <div className="device-attrs-and-actions">
-                    <DeviceAttrsForm deviceKey={deviceKey} lastUpdated={lastUpdated} />
-                    <DeviceActionsForm deviceKey={deviceKey} />
-                </div>
-                {showCharts &&
-                    <DeviceLineChart deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
-                }
-            </div>
-        </div>
-    );
-};
-
-export default DevicePanel;

package/examples/dashboard/src/DevicesPanel.tsx

@@ -1,58 +0,0 @@
-// Component which uses the DeviceList component to display the list of devices
-
-import React, { useEffect, useState } from 'react';
-// import { DeviceAttributeState, DevicesState, DeviceState } from "../../../src/main";
-// import { DeviceManager } from './DeviceManager';
-// import DeviceScreen from './DeviceScreen';
-import './styles.css';
-import ConnManager from "./ConnManager";
-import { DeviceAttributeState, DevicesState, DeviceState } from '../../../src/RaftDeviceStates';
-import DevicePanel from './DevicePanel';
-
-const connManager = ConnManager.getInstance();
-
-export class DevicesPanelProps {
-    constructor(
-    ) { }
-}
-
-export default function DevicesPanel(props: DevicesPanelProps) {
-    const [lastUpdated, setLastUpdated] = useState<number>(0);
-    
-    useEffect(() => {
-        const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
-        if (!deviceManager) {
-            return;
-        }
-
-        const onNewDevice = (deviceKey: string, newDeviceState: DeviceState) => {
-            setLastUpdated(Date.now());
-        };
-        deviceManager.addNewDeviceCallback(onNewDevice);
-
-        const onNewAttribute = (deviceKey: string, attribute: DeviceAttributeState) => {
-            setLastUpdated(Date.now());
-        }
-        deviceManager.addNewAttributeCallback(onNewAttribute);
-
-        const onNewAttributeData = (deviceKey: string, attribute: DeviceAttributeState) => {
-            setLastUpdated(Date.now());
-            // console.log(`New attribute data: ${deviceKey} ${attribute.name} ${attribute.values.length}`);
-        }
-        deviceManager.addAttributeDataCallback(onNewAttributeData);
-
-    }, []);
-
-    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
-    let devicesState: DevicesState = {};
-    if (deviceManager) 
-        devicesState = deviceManager.getDevicesState();
-    
-    return (
-        <div className="devices-container">
-        {Object.entries(devicesState).filter(([key, _]) => key !== 'getDeviceKey').map(([deviceKey, data]) => (
-            <DevicePanel key={deviceKey} deviceKey={deviceKey} lastUpdated={lastUpdated} />
-        ))}
-      </div>
-    );
-}

package/examples/dashboard/src/DispLedGrid.tsx

@@ -1,110 +0,0 @@
-import React, { useState } from 'react';
-import DispOneLED from './DispOneLed';
-import ConnManager from './ConnManager';
-import { DeviceTypeAction } from '../../../src/RaftDeviceInfo';
-import { CirclePicker } from 'react-color';
-
-const connManager = ConnManager.getInstance();
-
-interface LEDGridProps {
-  rows: number;
-  cols: number;
-  deviceKey: string;
-  deviceAction: DeviceTypeAction;
-}
-
-const customColors = [
-    '#000000', // black
-    '#FFFFFF', // white
-    '#FF0000', // red
-    '#00FF00', // green
-    '#0000FF', // blue
-    '#FFFF00', // yellow
-    '#FF00FF', // pink
-    '#00FFFF', // cyan
-    '#FFA500', // orange
-    '#800080', // purple
-    '#808080', // gray
-    '#A52A2A', // brown
-    '#008000', // dark green
-    '#800000', // maroon
-    '#008080', // teal
-    '#000080', // navy
-    '#FFD700', // gold
-    '#FF4500', // orange red
-    '#FF6347', // tomato
-    // Add more custom colors as needed
-  ];
-  
-const DispLEDGrid: React.FC<LEDGridProps> = ({ rows, cols, deviceKey, deviceAction }) => {
-  // Initialize the grid with all LEDs turned off (black)
-  const [colors, setColors] = useState<string[][]>(
-    Array.from({ length: rows }, () => Array.from({ length: cols }, () => '#000000'))
-  );
-  const [activeLED, setActiveLED] = useState<{row: number, col: number} | null>(null);
-
-  const handleLEDClick = (row: number, col: number) => {
-    setActiveLED({ row, col });
-  };
-
-  const hexToRgb = (hex: string): number[] => {
-    const r = parseInt(hex.slice(1, 3), 16);
-    const g = parseInt(hex.slice(3, 5), 16);
-    const b = parseInt(hex.slice(5, 7), 16);
-    return [r, g, b];
-  };
-
-  const handleChangeComplete = (color: any) => {
-    if (activeLED) {
-      const { row, col } = activeLED;
-      const newColors = colors.map((rowColors, rowIndex) =>
-        rowColors.map((colColor, colIndex) =>
-          rowIndex === row && colIndex === col ? color.hex : colColor
-        )
-      );
-      setColors(newColors);
-      setActiveLED(null); // Optionally close the picker automatically
-
-      // Convert into a list of RGB values
-      let colourList = [];
-      for (let i = 0; i < rows; i++) {
-        for (let j = 0; j < cols; j++) {
-          colourList.push(hexToRgb(newColors[i][j]));
-        }
-      }
-
-      // Send result
-      const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
-      if (deviceManager) {
-        deviceManager.sendCompoundAction(deviceKey, deviceAction, colourList);
-      }
-    }
-  };
-
-  return (
-    <div>
-      <div style={{
-        display: 'grid',
-        gridTemplateColumns: `repeat(${cols}, 24px)`,
-        gridTemplateRows: `${rows === 1 ? '1fr' : `repeat(${rows}, 24px)`}`,
-        justifyContent: 'center',
-        width: `${cols * 24}px`
-      }}>
-        {colors.map((row, rowIndex) =>
-          row.map((color, colIndex) => (
-            <DispOneLED key={`${rowIndex}-${colIndex}`} color={color} onClick={() => handleLEDClick(rowIndex, colIndex)} />
-          ))
-        )}
-      </div>
-      {activeLED && (
-        <CirclePicker 
-          color={colors[activeLED.row][activeLED.col]}
-          colors={customColors}
-          onChangeComplete={handleChangeComplete}
-        />
-      )}
-    </div>
-  );
-};
-
-export default DispLEDGrid;

package/examples/dashboard/src/DispOneLed.tsx

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

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