@robotical/raftjs 1.3.3

package/examples/dashboard/src/DeviceLineChart.tsx

@@ -0,0 +1,139 @@
+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";
+
+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 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%)",
+        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%)",
+        IR: "hsl(300, 70%, 60%)",
+    });
+
+    useEffect(() => {
+        if (!deviceState)
+            return;
+        const maxChartDataPoints = 50;
+        const labels = deviceState.deviceTimeline.timestampsUs.slice(maxChartDataPoints).map(time => {
+            const seconds = time / 1e6; // Convert microseconds to seconds
+            const secondsStr = seconds.toFixed(3); // Format decimal places
+            return secondsStr;
+        });
+
+        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;
+                }
+                let rangeEnds: [number,number] = [Math.min(...attributeDetails.range), Math.max(...attributeDetails.range)];
+                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',
+                scaleLabel: {
+                    display: true,
+                    labelString: axis.units
+                },
+                ticks: {
+                    min: axis.range[0],
+                    max: axis.range[1]
+                }
+            };
+        }
+        );
+        options.scales = scales;
+        setChartData({ labels, 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,135 @@
+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';
+
+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);
+
+    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);
+    };
+
+    return (
+        <div className={`device-panel ${offlineClass}`}>
+            <div className="device-block-heading">
+                <div className="device-block-heading-text">Device {deviceState?.deviceTypeInfo?.name} Address {deviceKey}{!deviceState?.isOnline ? " (Offline)" : ""}</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>
+                <DeviceLineChart deviceKey={deviceKey} lastUpdated={timedChartUpdate} />
+            </div>
+        </div>
+    );
+};
+
+export default DevicePanel;

package/examples/dashboard/src/DevicesPanel.tsx

@@ -0,0 +1,57 @@
+// 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.onNewDevice(onNewDevice);
+
+        const onNewAttribute = (deviceKey: string, attribute: DeviceAttributeState) => {
+            setLastUpdated(Date.now());
+        }
+        deviceManager.onNewDeviceAttribute(onNewAttribute);
+
+        const onNewAttributeData = (deviceKey: string, attribute: DeviceAttributeState) => {
+            setLastUpdated(Date.now());
+        }
+        deviceManager.onNewAttributeData(onNewAttributeData);
+
+    }, [lastUpdated]);
+
+    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;

package/examples/dashboard/src/DispOneLed.tsx

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

package/examples/dashboard/src/Main.tsx

@@ -0,0 +1,106 @@
+import React, { useEffect, useState } from 'react';
+import './styles.css';
+import ConnManager from './ConnManager';
+import { RaftConnEvent, RaftUpdateEvent, RaftPublishEvent } from "../../../src/main";
+import StatusPanel from './StatusPanel';
+import DevicesPanel from './DevicesPanel';
+import CommandPanel from './CommandPanel';
+
+const connManager = ConnManager.getInstance();
+
+export default function Main() {
+  const [connectionStatus, setConnectionStatus] = useState<RaftConnEvent>(RaftConnEvent.CONN_DISCONNECTED);
+
+  useEffect(() => {
+    // Define the listener for raft events
+    const listener = (eventType: string,
+      eventEnum: RaftConnEvent | RaftUpdateEvent | RaftPublishEvent,
+      eventName: string,
+      data?: object | string | null) => {
+      console.log(`Connection event: ${eventName}`);
+      if (eventType === "conn") {
+        if ((eventEnum === RaftConnEvent.CONN_CONNECTED) || (eventEnum === RaftConnEvent.CONN_DISCONNECTED)) {
+          setConnectionStatus(eventEnum);
+        }
+      }
+    };
+
+    // Set the listener function
+    connManager.setConnectionEventListener(listener);
+
+    // Clean up the listener when the component unmounts
+    return () => {
+      connManager.setConnectionEventListener(() => { });
+    };
+  }, []);
+
+  return (
+    <div className="content-outer">
+      <div className="header">
+        <h1>RaftJS Dashboard</h1>
+      </div>
+      <div className="content-body">
+        {/* Div optionally shown if connected */}
+        {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>
+              </div>
+              <StatusPanel />
+              <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" />
+                <button className="action-button" onClick={() => {
+                  // Get IP address
+                  const ipAddrElem = document.getElementById("ip-addr") as HTMLInputElement;
+                  if (ipAddrElem) {
+                    const ipAddr = ipAddrElem.value;
+                    connManager.connect("WebSocket", ipAddr, "");
+                  } else {
+                    console.error("No IP address entered");
+                  }
+                }
+                }>
+                  Connect
+                </button>
+              </div>
+              <div className="info-box">
+                <h3>WebBLE</h3>
+                <button className="action-button" onClick={() => {
+                  connManager.connect("WebBLE", "", "");
+                }
+                }>
+                  Connect
+                </button>
+              </div>
+              <div className="info-box">
+                <h3>WebSerial</h3>
+                <button className="action-button" onClick={() => {
+                  connManager.connect("WebSerial", "", "");
+                }
+                }>
+                  Connect
+                </button>
+              </div>
+            </div>
+          </>
+        }
+      </div>
+    </div>
+  );
+}

package/examples/dashboard/src/StatusPanel.tsx

@@ -0,0 +1,71 @@
+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>
+  );
+
+}