@robotical/raftjs 1.3.3

package/dist/web/main.d.ts

@@ -0,0 +1,22 @@
+declare const raftChannel: typeof import("./RaftChannelBLE.web").default;
+export { raftChannel as RaftChannelBLE };
+export { default as RaftCommsStats } from './RaftCommsStats';
+export { default as RaftConnector } from './RaftConnector';
+export { default as RaftChannel } from './RaftChannel';
+export { default as RaftChannelWebSocket } from './RaftChannelWebSocket';
+export { default as RaftFileHandler } from './RaftFileHandler';
+export { default as RaftLog } from './RaftLog';
+export { default as RaftMiniHDLC } from './RaftMiniHDLC';
+export { default as RaftMsgHandler } from './RaftMsgHandler';
+export { default as RaftStreamHandler } from './RaftStreamHandler';
+export { default as RaftSystemUtils } from './RaftSystemUtils';
+export { default as RaftUtils } from './RaftUtils';
+export { DeviceManager } from './RaftDeviceManager';
+export { DeviceManager as RaftDeviceManager } from './RaftDeviceManager';
+export * from './RaftTypes';
+export * from './RaftSystemType';
+export * from './RaftWifiTypes';
+export * from './RaftConnEvents';
+export * from './RaftUpdateEvents';
+export * from "./RaftProtocolDefs";
+export * from "./RaftDeviceStates";

package/dist/web/main.js

@@ -0,0 +1,48 @@
+"use strict";
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+//
+// RaftJS
+// Commms library for the Raft ESP32 application framework supporting BLE, WebSockets and Serial
+//
+// Rob Dobson & Chris Greening 2020-2024
+// (C) 2020-2024 All rights reserved
+//
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////////
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RaftDeviceManager = exports.DeviceManager = exports.RaftUtils = exports.RaftSystemUtils = exports.RaftStreamHandler = exports.RaftMsgHandler = exports.RaftMiniHDLC = exports.RaftLog = exports.RaftFileHandler = exports.RaftChannelWebSocket = exports.RaftConnector = exports.RaftCommsStats = exports.RaftChannelBLE = void 0;
+const tslib_1 = require("tslib");
+const RaftChannelBLEFactory_1 = require("./RaftChannelBLEFactory");
+const raftChannel = (0, RaftChannelBLEFactory_1.createBLEChannel)();
+exports.RaftChannelBLE = raftChannel;
+var RaftCommsStats_1 = require("./RaftCommsStats");
+Object.defineProperty(exports, "RaftCommsStats", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftCommsStats_1).default; } });
+var RaftConnector_1 = require("./RaftConnector");
+Object.defineProperty(exports, "RaftConnector", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftConnector_1).default; } });
+var RaftChannelWebSocket_1 = require("./RaftChannelWebSocket");
+Object.defineProperty(exports, "RaftChannelWebSocket", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftChannelWebSocket_1).default; } });
+var RaftFileHandler_1 = require("./RaftFileHandler");
+Object.defineProperty(exports, "RaftFileHandler", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftFileHandler_1).default; } });
+var RaftLog_1 = require("./RaftLog");
+Object.defineProperty(exports, "RaftLog", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftLog_1).default; } });
+var RaftMiniHDLC_1 = require("./RaftMiniHDLC");
+Object.defineProperty(exports, "RaftMiniHDLC", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftMiniHDLC_1).default; } });
+var RaftMsgHandler_1 = require("./RaftMsgHandler");
+Object.defineProperty(exports, "RaftMsgHandler", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftMsgHandler_1).default; } });
+var RaftStreamHandler_1 = require("./RaftStreamHandler");
+Object.defineProperty(exports, "RaftStreamHandler", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftStreamHandler_1).default; } });
+var RaftSystemUtils_1 = require("./RaftSystemUtils");
+Object.defineProperty(exports, "RaftSystemUtils", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftSystemUtils_1).default; } });
+var RaftUtils_1 = require("./RaftUtils");
+Object.defineProperty(exports, "RaftUtils", { enumerable: true, get: function () { return tslib_1.__importDefault(RaftUtils_1).default; } });
+var RaftDeviceManager_1 = require("./RaftDeviceManager");
+Object.defineProperty(exports, "DeviceManager", { enumerable: true, get: function () { return RaftDeviceManager_1.DeviceManager; } });
+var RaftDeviceManager_2 = require("./RaftDeviceManager");
+Object.defineProperty(exports, "RaftDeviceManager", { enumerable: true, get: function () { return RaftDeviceManager_2.DeviceManager; } });
+tslib_1.__exportStar(require("./RaftTypes"), exports);
+tslib_1.__exportStar(require("./RaftSystemType"), exports);
+tslib_1.__exportStar(require("./RaftWifiTypes"), exports);
+tslib_1.__exportStar(require("./RaftConnEvents"), exports);
+tslib_1.__exportStar(require("./RaftUpdateEvents"), exports);
+tslib_1.__exportStar(require("./RaftProtocolDefs"), exports);
+tslib_1.__exportStar(require("./RaftDeviceStates"), exports);
+//# sourceMappingURL=main.js.map

package/dist/web/main.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"main.js","sourceRoot":"","sources":["../../src/main.ts"],"names":[],"mappings":";AAAA,iHAAiH;AACjH,EAAE;AACF,SAAS;AACT,gGAAgG;AAChG,EAAE;AACF,wCAAwC;AACxC,oCAAoC;AACpC,EAAE;AACF,iHAAiH;;;;AAEjH,mEAA2D;AAC3D,MAAM,WAAW,GAAG,IAAA,wCAAgB,GAAE,CAAC;AACf,qCAAc;AAEtC,mDAA6D;AAApD,yIAAA,OAAO,OAAkB;AAClC,iDAA2D;AAAlD,uIAAA,OAAO,OAAiB;AAEjC,+DAAyE;AAAhE,qJAAA,OAAO,OAAwB;AACxC,qDAA+D;AAAtD,2IAAA,OAAO,OAAmB;AACnC,qCAA+C;AAAtC,2HAAA,OAAO,OAAW;AAC3B,+CAAyD;AAAhD,qIAAA,OAAO,OAAgB;AAChC,mDAA4D;AAAnD,yIAAA,OAAO,OAAkB;AAClC,yDAAmE;AAA1D,+IAAA,OAAO,OAAqB;AACrC,qDAA+D;AAAtD,2IAAA,OAAO,OAAmB;AACnC,yCAAmD;AAA1C,+HAAA,OAAO,OAAa;AAC7B,yDAAoD;AAA3C,kHAAA,aAAa,OAAA;AACtB,yDAAyE;AAAhE,sHAAA,aAAa,OAAqB;AAG3C,sDAA4B;AAC5B,2DAAiC;AACjC,0DAAgC;AAChC,2DAAiC;AACjC,6DAAmC;AACnC,6DAAmC;AACnC,6DAAmC"}

package/eslint.config.mjs

@@ -0,0 +1,33 @@
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+import js from "@eslint/js";
+import { FlatCompat } from "@eslint/eslintrc";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+    baseDirectory: __dirname,
+    recommendedConfig: js.configs.recommended,
+    allConfig: js.configs.all
+});
+
+export default [
+    ...compat.extends("eslint:recommended", "plugin:@typescript-eslint/recommended"),
+    {
+        plugins: {
+            "@typescript-eslint": typescriptEslint,
+        },
+
+        languageOptions: {
+            parser: tsParser,
+        },
+
+        rules: {
+            "no-loss-of-precision": "off",
+            "@typescript-eslint/no-loss-of-precision": ["off"],
+            "@typescript-eslint/no-explicit-any": ["off"],
+        },
+    },
+];

package/examples/dashboard/package.json

@@ -0,0 +1,43 @@
+{
+  "name": "raftjs-example-dashboard",
+  "version": "1.0.0",
+  "description": "",
+  "scripts": {
+    "start": "parcel src/index.html",
+    "clean": "rm -rf dist",
+    "build": "npm run clean && parcel build src/index.html",
+    "test": "jest"
+  },
+  "keywords": [],
+  "author": "Rob Dobson",
+  "license": "ISC",
+  "devDependencies": {
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.7",
+    "@types/python-struct": "^1.0.4",
+    "@types/react": "^18.2.48",
+    "@types/react-color": "^3.0.12",
+    "@types/react-dom": "^18.2.18",
+    "assert": "^2.1.0",
+    "buffer": "^6.0.3",
+    "console-browserify": "^1.2.0",
+    "jest": "^29.7.0",
+    "parcel": "^2.11.0",
+    "process": "^0.11.10",
+    "ts-jest": "^29.1.2",
+    "typescript": "^5.3.3",
+    "util": "^0.12.5"
+  },
+  "dependencies": {
+    "chart.js": "^4.4.4",
+    "python-struct": "^1.1.3",
+    "react": "^18.2.0",
+    "react-chartjs-2": "^5.2.0",
+    "react-color": "^2.19.3",
+    "react-dom": "^18.2.0"
+  },
+  "jest": {
+    "preset": "ts-jest",
+    "testEnvironment": "node"
+  }
+}

package/examples/dashboard/src/CommandPanel.tsx

@@ -0,0 +1,147 @@
+import React, { useState } from 'react';
+import ConnManager from './ConnManager';
+
+const connManager = ConnManager.getInstance();
+
+const examplesJson = {
+  "sections": [
+    {
+      "name": "LEDs (ind,ring,button)",
+      "examples": [
+        { "label": "Button red", "api": "/led/button/set/0/#ff0000" },
+        { "label": "Ring pattern RainbowSnake", "api": "/led/ring/pattern/RainbowSnake" },
+        { "label": "Ring pattern clear", "api": "/led/ring/pattern" }
+      ]
+    },
+    {
+      "name": "Audio",
+      "examples": [
+        { "label": "Play Halloween", "api": "/audio/rtttl/Entertainer:d=4,o=5,b=140:8d,8d#,8e,c6,8e,c6,8e,2c.6,8c6,8d6,8d#6,8e6,8c6,8d6,e6,8b,d6,2c6,p,8d,8d#,8e,c6,8e,c6,8e,2c.6,8p,8a,8g,8f#,8a,8c6,e6,8d6,8c6,8a,2d6" },
+        { "label": "Stop", "api": "/audio/stop" },
+        { "label": "Volume 50%", "api": "/audio/vol/50" }
+      ]
+    }
+  ]
+};
+
+export default function CommandPanel() {
+  const [command, setCommand] = useState('');
+  const [commandHistory, setCommandHistory] = useState<string[]>([]); // Command history state
+  const [historyIndex, setHistoryIndex] = useState<number>(-1); // Track position in history
+  const [openSections, setOpenSections] = useState<{ [key: string]: boolean }>({});
+
+  // Handler to send command when button is clicked or Enter is pressed
+  const handleSendCommand = (cmd: string) => {
+    if (cmd) {
+      connManager.getConnector().sendRICRESTMsg(cmd, {}).then(response => {
+        console.log(`Command sent: ${cmd}, Response:`, response);
+
+        // Update history only if the command is not the same as the last one
+        if (commandHistory.length === 0 || commandHistory[commandHistory.length - 1] !== cmd) {
+          setCommandHistory((prevHistory) => [...prevHistory, cmd]);
+        }
+
+        // Reset the history index and clear the command
+        setHistoryIndex(-1);
+        setCommand('');
+      }).catch(error => {
+        console.error(`Error sending command: ${cmd}`, error);
+      });
+    } else {
+      console.error("Command is empty.");
+    }
+  };
+
+  // Handler for key press events in the input box
+  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      handleSendCommand(command);
+    } else if (e.key === 'ArrowUp') {
+      // Navigate to previous command in history
+      if (historyIndex < commandHistory.length - 1) {
+        const newIndex = historyIndex + 1;
+        setHistoryIndex(newIndex);
+        setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
+      }
+    } else if (e.key === 'ArrowDown') {
+      // Navigate to next command in history
+      if (historyIndex > 0) {
+        const newIndex = historyIndex - 1;
+        setHistoryIndex(newIndex);
+        setCommand(commandHistory[commandHistory.length - 1 - newIndex]);
+      } else if (historyIndex === 0) {
+        // Clear the command input when navigating past the most recent command
+        setHistoryIndex(-1);
+        setCommand('');
+      }
+    }
+  };
+
+  // Handler to set the command in the input box
+  const handleLoadCommand = (api: string) => {
+    setCommand(api);
+  };
+
+  // Toggle the open/close state of a section
+  const toggleSection = (sectionName: string) => {
+    setOpenSections((prevOpenSections) => ({
+      ...prevOpenSections,
+      [sectionName]: !prevOpenSections[sectionName]
+    }));
+  };
+
+  return (
+    <div className="info-boxes">
+      <div className="info-box">
+        <div className="info-columns">
+          {/* Command Input and Button in Left Column */}
+          <div className="info-column command-input-column">
+            <h3>Command Panel</h3>
+            <input
+              type="text"
+              className="command-input"
+              value={command}
+              placeholder="Enter Command"
+              onChange={(e) => setCommand(e.target.value)}
+              onKeyDown={handleKeyDown} // Add onKeyDown event handler
+            />
+            <button className="send-command-button" onClick={() => handleSendCommand(command)}>
+              Send Command
+            </button>
+          </div>
+
+          {/* Example Commands in Right Column */}
+          <div className="info-column example-commands-column">
+            <h4>Example Commands</h4>
+
+            {examplesJson.sections.map((section) => (
+              <div className="collapsible-section" key={section.name}>
+                <button
+                  className="collapsible-header"
+                  onClick={() => toggleSection(section.name)}
+                >
+                  {section.name} {openSections[section.name] ? "▲" : "▼"}
+                </button>
+                {openSections[section.name] && (
+                  <div className="collapsible-content">
+                    {section.examples.map((example, index) => (
+                      <div className="example-command" key={index} title={example.api}>
+                        {example.label}
+                        <button
+                          className="example-load-button"
+                          onClick={() => handleLoadCommand(example.api)}
+                        >
+                          Load
+                        </button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

package/examples/dashboard/src/ConnManager.ts

@@ -0,0 +1,85 @@
+import { RaftChannelBLE, RaftConnector, RaftEventFn, RaftLog, RaftSystemUtils } from "../../../src/main";
+import SystemTypeCog from "./SystemTypeCog/SystemTypeCog";
+import SystemTypeMarty from "./SystemTypeMarty/SystemTypeMarty";
+
+export default class ConnManager {
+
+  // Singleton
+  private static _instance: ConnManager;
+
+  // Connector
+  private _connector = new RaftConnector(async (systemUtils: RaftSystemUtils) => {
+    const systemInfo = await systemUtils.getSystemInfo();
+    if (systemInfo.SystemName === "RIC") {
+      RaftLog.info("ConnManager - Marty detected");
+      return new SystemTypeMarty();
+    } else if (systemInfo.SystemName === "Cog") {
+      RaftLog.info("ConnManager - Cog detected");
+      return new SystemTypeCog();
+    }
+    RaftLog.error(`ConnManager - unknown system ${systemInfo.SystemName} ${JSON.stringify(systemInfo)}`);
+    return null;
+  });
+
+  // Callback on connection event
+  private _onConnectionEvent: RaftEventFn | null = null;
+
+  // Get instance
+  public static getInstance(): ConnManager {
+    if (!ConnManager._instance) {
+      ConnManager._instance = new ConnManager();
+    }
+    return ConnManager._instance;
+  }
+
+  // Set connection event listener
+  public setConnectionEventListener(listener: RaftEventFn) {
+    this._onConnectionEvent = listener;
+  }
+
+  // Check if connected
+  public isConnected(): boolean {
+    return this._connector.isConnected();
+  }
+
+  public getConnector(): RaftConnector {
+    return this._connector;
+  }
+
+  private async getBleDevice(uuid?: string): Promise<BluetoothDevice | null> {
+    const uuids = uuid ? [uuid] : [RaftChannelBLE.RICServiceUUID, RaftChannelBLE.CogServiceUUID];
+    const filtersArray = uuids.map((uuid) => ({ services: [uuid] }));
+    try {
+      const dev = await navigator.bluetooth.requestDevice({
+        filters: filtersArray,
+        optionalServices: []
+      });
+      return dev;
+    } catch (e) {
+      RaftLog.error(`getBleDevice - failed to get device ${e}`);
+      return null;
+    }
+  }
+
+  // Connect
+  public async connect(method: string, locator: string | object, uuid: string): Promise<boolean> {
+    this._connector.setEventListener((evtType, eventEnum, eventName, eventData) => {
+      RaftLog.verbose(`ConnManager - event ${eventName}`);
+      if (this._onConnectionEvent) {
+        this._onConnectionEvent(evtType, eventEnum, eventName, eventData);
+      }
+    });
+    await this._connector.initializeChannel(method);
+    // Set the connector websocket suffix
+    if (method === "WebBLE") {
+      const dev = await this.getBleDevice(uuid);
+      return this._connector.connect(dev as object);
+    }
+    return this._connector.connect(locator);
+  }
+
+  // Disconnect
+  public disconnect(): Promise<void> {
+    return this._connector.disconnect();
+  }
+}

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 }) => {
+    const deviceManager = connManager.getConnector().getSystemType()?.deviceMgrIF;
+    const [deviceActions, setDeviceActions] = useState<DeviceTypeAction[]>([]);
+    const [inputValues, setInputValues] = useState<InputValues>({});
+    const [lastSentValues, setLastSentValues] = useState<InputValues>({});
+    const sendTimer = useRef<NodeJS.Timeout | null>(null);
+    
+    useEffect(() => {
+        if (!deviceManager) {
+            return;
+        }
+        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 = { ...acc, [action.n]: action.d ? action.d : (action.r ? action.r[0] | 0 : 0) };
+            return acc;
+        }, {});
+        setInputValues(initialValues);
+        queueSendAction(initialValues);
+    }, [deviceKey]);
+
+    const handleInputChange = (name: string, value: number) => {
+        const newValues = { ...inputValues, [name]: value };
+        setInputValues(newValues);
+        queueSendAction(newValues);
+    };
+
+    const queueSendAction = (newValues: InputValues) => {
+        if (sendTimer.current) {
+            clearTimeout(sendTimer.current);
+        }
+        // console.log(`queueSendAction new values ${JSON.stringify(newValues)}`);
+        sendTimer.current = setTimeout(() => {
+            deviceActions.forEach(action => {
+                const currentValue = newValues[action.n];
+                const lastSentValue = lastSentValues[action.n];
+                if (currentValue !== lastSentValue) {
+                    // console.log(`queueSendAction timeout ${action.n} ${currentValue}`);
+                    handleSendAction(action, currentValue);
+                    setLastSentValues(prev => ({ ...prev, [action.n]: currentValue }));
+                }
+            });
+        }, 300);
+    };
+    
+    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 => {
+                                                        console.log(`input change ${action.n} ${e.target.value}`)
+                                                        handleInputChange(action.n, parseInt(e.target.value));
+                                                    }}
+                                            />
+                                            : <></>
+                                        }
+                                    </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;