DroneCan_WebTools/CLAUDE.md

CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

Commands

• npm install — install dependencies.
• npm start — start webpack dev server on http://localhost:8080 with hot reload.
• npm run build — create a production build in dist/.

There are currently no lint, typecheck, or test scripts configured in package.json, and no Jest/Vitest/ESLint config files are present. Use npm run build as the available validation command after changes. There is no single-test command until a test runner is added.

Application structure

This is a React 18 + Material UI browser application bundled by Webpack 5/Babel. webpack.config.js defines multiple entry points and HTML outputs:

• src/index.js -> public/index.html for the main application.
• src/subscriber.js -> public/subscriber.html.
• src/bus_monitor.js -> public/bus_monitor.html.
• src/esc_panel.js -> public/esc_panel.html.
• src/actuator_panel.js -> public/actuator_panel.html.

The main app is src/App.js. It creates global browser objects window.mavlinkSession and window.localNode, wires localNode.sendFrame into MAVLink CAN frame forwarding, and renders the primary node list, node logs, node properties, parameter editor, adapter settings, DNA server modal, and panel launch menus.

Standalone panel pages are opened by the main app with window.open(...). Panels such as subscriber, bus monitor, ESC, and actuator use their own entry files/window wrapper components and access shared state through window.opener.localNode when they are child windows. Avoid changing these panels as if they were independent apps unless you also account for the opener relationship.

Transport and protocol layers

src/mavlink_session.js is the bridge between browser transports and DroneCAN:

• WebSocket transport is implemented in src/ws_client.js.
• Web Serial transport is implemented in src/web_serial.js.
• MAVLink parsing/sending comes from src/mavlink.js globals and wraps CAN frames in MAVLink CAN_FRAME messages.
• Incoming extended CAN frames are emitted into window.localNode as can-frame events.

src/ConnectionSettingsModal.js owns connection setup UI for serial and WebSocket, local node ID selection, CAN bus selection, MAVLink signing, and the recurring MAV_CMD_CAN_FORWARD command that enables CAN forwarding on the selected bus.

src/dronecan/ contains the generated/ported DroneCAN protocol implementation: DSDL message classes, type packing/unpacking, frame and transfer logic, and node.js. src/dronecan/node.js is the event-oriented high-level API for node monitoring, node info requests, parameter get/set, restarts, ESC/actuator commands, dynamic node ID allocation messages, and firmware file read responses.

To regenerate the DroneCAN DSDL JavaScript, the README documents using dronecan_dsdljs.py from https://github.com/dronecan/dronecan_dsdljs and writing output to src/dronecan.

Feature-specific modules

• src/FileServer.js is a singleton (window.FileServer) used for firmware/file transfer. It loads .bin files directly, converts Intel HEX .hex files to binary, registers files by virtual path/key, and answers uavcan.protocol.file.Read.Request through localNode.responseUavcanProtocolFileRead.
• src/services/DynamicNodeIdServer.js implements a browser-side DroneCAN dynamic node ID allocation server and persists allocations in localStorage under dna_server_allocations.
• src/NodeParam.js, src/EditParamModal.js, and src/ParamEditors/ implement parameter display/editing using DroneCAN GetSet responses stored on localNode.nodeParams.
• src/BusMonitor.js, src/SubscriberWindow.js, src/EscPanel.js, and src/ActuatorPanel.js consume localNode events to monitor transfers or send command messages.

Styling and assets

Shared Material UI theme settings live in src/theme.js. Page-specific CSS is in src/css/. Webpack handles CSS and image assets via style-loader, css-loader, and file-loader.

README details to preserve

The README states the official entry is https://can.ardupilot.org and the backup entry is https://can.vimdrones.com. The browser app provides bus monitoring, ESC control/configuration, actuator control/testing, message subscription, node configuration, dynamic node ID allocation, and firmware/file transfer workflows.