@robdobsn/raftjs 1.7.8 → 1.10.7

package/examples/dashboard/src/DeviceActionsForm.tsx

@@ -0,0 +1,133 @@
+import React, { useEffect, useRef, useState } from 'react';
+import ConnManager from './ConnManager';
+import { DeviceTypeAction } from '../../../src/RaftDeviceInfo';
+import DispLEDGrid from './DispLedGrid';
+
+const connManager = ConnManager.getInstance();
+
+type DeviceActionsTableProps = {
+    deviceKey: string;
+};
+
+interface InputValues {
+    [key: string]: number;
+}
+
+const DeviceActionsForm: React.FC<DeviceActionsTableProps> = ({ deviceKey }: DeviceActionsTableProps) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const [deviceActions, setDeviceActions] = useState<DeviceTypeAction[]>([]);
+    const [inputValues, setInputValues] = useState<InputValues>({});
+
+    useEffect(() => {
+        if (!deviceManager) {
+            return;
+        }
+        // Wait a little while inline for the device to be ready
+        setTimeout(() => {
+            const deviceState = deviceManager.getDeviceState(deviceKey);
+            const { deviceTypeInfo } = deviceState;
+            const actions: DeviceTypeAction[] = deviceTypeInfo?.actions || [];
+            setDeviceActions(actions);
+            // Initialize input values
+            const initialValues: InputValues = actions.reduce((acc, action) => {
+                acc[action.n] =
+                    action.d ??
+                    (action.r
+                        ? action.r.length > 1
+                            ? (action.r[1] + action.r[0]) / 2
+                            : 0
+                        : 0);
+                return acc;
+            }, {} as InputValues);
+            setInputValues(initialValues);
+        }, 1000);
+    }, [deviceKey]);
+
+    const handleInputChange = (name: string, value: number) => {
+        setInputValues((prevValues: any) => ({
+            ...prevValues,
+            [name]: value,
+        }));
+    };
+
+    const handleSendAction = (action: DeviceTypeAction, value: number) => {
+        // Send action to device
+        if (!deviceManager) {
+            return;
+        }
+        deviceManager.sendAction(deviceKey, action, [value]);
+    };
+
+    if (deviceActions.length === 0) {
+        return <></>;
+    }
+
+    return (
+        <div className="device-actions-form">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th>Send</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {deviceActions.map((action) => {
+                        if (action.f === "LEDPIX") {
+                            return (
+                                <tr key={action.n}>
+                                    <td>{action.n}</td>
+                                    <td colSpan={2}>
+                                        <DispLEDGrid
+                                            rows={action.NY || 1}
+                                            cols={action.NX || 1}
+                                            deviceKey={deviceKey}
+                                            deviceAction={action}
+                                        />
+                                    </td>
+                                </tr>
+                            );
+                        } else {
+                            return (
+                                <tr key={action.n}>
+                                    <td>{action.n}</td>
+                                    <td>
+                                        {action.t ? (
+                                            <input
+                                                type="number"
+                                                min={action.r?.[0] ?? 0}
+                                                max={action.r?.[1] ?? 100}
+                                                value={inputValues[action.n]}
+                                                onChange={(e) =>
+                                                    handleInputChange(
+                                                        action.n,
+                                                        parseInt(e.target.value, 10)
+                                                    )
+                                                }
+                                            />
+                                        ) : null}
+                                    </td>
+                                    <td>
+                                        <button
+                                            onClick={() =>
+                                                handleSendAction(
+                                                    action,
+                                                    inputValues[action.n]
+                                                )
+                                            }
+                                        >
+                                            Send
+                                        </button>
+                                    </td>
+                                </tr>
+                            );
+                        }
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default DeviceActionsForm;

package/examples/dashboard/src/DeviceAttrsForm.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { deviceAttrGetLatestFormatted, DeviceState } from '../../../src/RaftDeviceStates';
+import ConnManager from './ConnManager';
+
+const connManager = ConnManager.getInstance();
+
+type DeviceAttributesTableProps = {
+    deviceKey: string;
+    lastUpdated: number;
+};
+
+const DeviceAttrsForm: React.FC<DeviceAttributesTableProps> = ({ deviceKey, lastUpdated }) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const deviceState: DeviceState | undefined = deviceManager?.getDeviceState(deviceKey);
+
+    if (!deviceState || Object.keys(deviceState.deviceAttributes).length === 0) {
+        return <></>;
+    }
+
+    return (
+        <div className="device-attrs-form">
+            <table>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Value</th>
+                        <th>Units</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {Object.entries(deviceState.deviceAttributes)
+                        .filter(([attributeName, attributeDetails]) => attributeDetails.visibleForm !== false)
+                        .map(([attributeName, attributeDetails]) => {
+                            const valStr = deviceAttrGetLatestFormatted(attributeDetails)
+                            return (
+                                <tr key={attributeName}>
+                                    <td>{attributeName}</td>
+                                    <td>{valStr}</td>
+                                    <td>{attributeDetails.units}</td>
+                                </tr>
+                            );
+                    })}
+                </tbody>
+            </table>
+        </div>
+    );
+};
+
+export default DeviceAttrsForm;

package/examples/dashboard/src/DeviceLineChart.tsx

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

@@ -0,0 +1,171 @@
+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.warn('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.warn('Fallback: Oops, unable to copy', err);
+            alert("Failed to copy device values to clipboard");
+        }
+    
+        document.body.removeChild(textArea);
+    };
+
+    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, 16);
+        if (addrInt < 65536) {
+            const slot = addrInt >> 8;
+            if (slot === 0)
+                headerText += ` Main Bus`;
+            else
+                headerText += ` Slot ${slot}`;
+            const address = ("00" + (addrInt & 0xFF).toString(16)).slice(-2);
+            headerText += ` Addr 0x${address}`;
+        } else {
+            headerText += ` Addr ${deviceState?.deviceAddress}`;
+        }
+    }
+    if (bracketsAdded) {
+        headerText += `)`;
+    }
+    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

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

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