tassello 0.8.0 → 0.9.0

package/CHANGELOG.md

@@ -5,6 +5,19 @@ change the plugin API (`tassello/sdk`, `tassello/server`, `tassello/vite`), as n
 
 ## Unreleased
 
+- Plot widget: numbers of any topic over time, as rqt_plot and PlotJuggler plot them
+  (`/odom.twist.twist.linear.x`, a battery's voltage, joints' efforts), up to 8 series on a
+  chart, from every message. Live over the latest *time shown*; paused, zoomed (drag across it,
+  the wheel, a pinch) and scrolled through time (Shift+wheel, a swipe, the arrow keys); the value
+  axis fitted to what is shown or fixed; the values at the pointer; series hidden from the
+  legend. What is shown exported as CSV, a row a message. The series are picked in the widget,
+  from the topics of the graph and the numeric fields of their latest message (a `JointState`'s
+  named by joint), and saved with the panel, or listed in its properties.
+- The topic monitor (`topic.monitor`) samples: the numbers of every message at some fields, sent
+  ten times a second (`TopicSamples`). Plugins: `subscribeTopicMonitor`'s `samples`; its `stats`
+  and `echo` handlers are optional.
+- Plugins: widgets get `updateConfig`, which changes their properties and saves the panel, as the
+  side panel does.
 - System Monitor widget: the robot's computer, every second. The CPU's load, of each core (those
   offline too), their frequencies and the load average; the memory, its cache and the swap; the
   temperatures of the thermal zones and hwmon chips, by chip with their hottest, against their

package/README.md

@@ -12,7 +12,8 @@ and plugins add more.
 - **Built in**: teleop pads, a Nav2 map with goals, the robot's URDF in 3D, an arm jogger, cameras,
   images, command buttons, a systemd application manager, a behavior tree inspector and
   editor, the ROS log of every node, the robot's diagnostics, its topics, services and actions
-  as the `ros2` command line shows them, its nodes' parameters, its rosbags (recorded, listed,
+  as the `ros2` command line shows them, plots of their numbers over time, its nodes'
+  parameters, its rosbags (recorded, listed,
   downloaded and played back), a file manager, a terminal, its networks (Wi-Fi
   joined, connections switched, the robot as an access point), and its computer: CPU, memory,
   temperatures, a Raspberry Pi's throttling, a Jetson's GPU and power, disks and networks.
@@ -133,6 +134,7 @@ after the others on the devices already arranged.
 | **Logs** | The ROS log (`/rosout`), as rqt_console and swri_console show it: every node's messages coloured by level, the nodes running and those that logged with their counts, filtered by node, by level and by text (terms or a regular expression, to show or to hide). Pause, follow the newest, clear, download, and a message's details: where it was logged |
 | **Diagnostics** | The robot's diagnostics (`/diagnostics`, or the aggregator's `/diagnostics_agg`), as rqt_robot_monitor shows them: each status's level, the groups with the worst under them, those with problems unfolded. As a tree, as a list (the worst first) or as the latest changes of level, filtered by level and by text; a widget can be for some statuses only. A status's details: its message, hardware ID, values and latest changes. Pause, download, and forget the statuses no longer published |
 | **ROS Monitor** | The ROS graph, as the `ros2` command line shows it, on three sheets: its topics, services and actions, filtered by name or type, the hidden ones on demand. A topic's messages, their rate, bandwidth and delay, its publishers and subscriptions with their QoS and those that cannot talk, a message to publish once or at a rate (`ros2 topic echo`, `hz`, `bw`, `delay`, `info -v`, `pub`); a service to call, once or at a rate (`ros2 service call`, `info`, `echo`); every goal of an action, whoever sent it, with its feedback, and a goal to send or cancel (`ros2 action send_goal`, `info`); their types' definitions (`ros2 interface show`) |
+| **Plot** | Numbers of any topic over time, as rqt_plot and PlotJuggler plot them: `/odom.twist.twist.linear.x`, a battery's voltage, joints' efforts (named by their joints), up to 8 series on a chart, from every message. Paused, zoomed and scrolled through time, each series shown or hidden; what is shown exported as CSV. Its series are picked in the widget, from the topics of the graph and the fields of their messages, or listed in its properties |
 | **Parameters** | Nodes' parameters, as rqt_reconfigure and `ros2 param` show them: the nodes of the graph, and the parameters of the one chosen grouped by their prefixes, each edited in place (a switch, a slider within its range, a field), live as they change wherever they are set. Their descriptions, ranges and constraints (`ros2 param describe`); new ones set and undeclared ones deleted (`set`, `delete`); all of them dumped as YAML, downloaded or saved on the robot (`dump`), and loaded from a YAML file of the robot or of the page's device (`load`) |
 | **Rosbags** | The robot's rosbags, as `ros2 bag` makes and reads them: those of a folder, the newest first, with when, how long and how big, their storage and compression, each topic's type, count and rate (`ros2 bag info`); downloaded, deleted, or played on the robot's topics (`ros2 bag play`: paused, sought, sped up, looped, some topics only). New ones recorded (`ros2 bag record`): topics chosen from the graph, all of them, or matching an expression, with rosbag2's options: the storage (MCAP, SQLite) and its preset, a new file by size or duration, compression of each file or message. Every page sees the recordings and the playback, the behavior tree inspectors' too |
 | **File Manager** | The robot's files: folders unfolded in place, places (home, the ROS workspaces, bookmarks) and the disks' free space, an entry's details and permissions, what takes a folder's space. Make, rename, cut, copy, paste, drag onto folders, delete, download (folders as `.tar.gz`) and upload (drop files and folders onto it). Text files edited in tabs as gedit does: highlighting, search and replace, undo; images and PGM maps shown |
@@ -308,6 +310,26 @@ Notes on some of them:
 
   Messages, requests and goals are made from rclnodejs's code of their types, which Tassello
   makes when it starts for the workspaces sourced (see Install).
+- **Plot** draws up to 8 series on one value axis: a topic, a dot and its field
+  (`/odom.twist.twist.linear.x`, `/joint_states.effort[2]`, list items by their index), then a
+  label if any, one a line in its *series* property. *Series…* picks them in the widget, in view
+  mode, and saves them with the panel: a topic of the graph, then fields among those of its
+  latest message that are numbers, with their values (a `JointState`'s by joint name), or a field
+  typed. Numbers, booleans (0 or 1) and times (in seconds, a header's stamp) are plotted; NaN and
+  infinities break the line, as does a topic that stopped. The server reads every message of the
+  topics plotted, not 10 a second, and sends the numbers of the fields asked for ten times a
+  second; each sample is on the server's clock, when its message came. The page keeps the
+  latest 10 minutes of each series (200,000 samples at most, 200 s of a 1 kHz topic), from when
+  the widget opened.
+
+  Live, it shows the latest *time shown* (30 s), the value axis fitted to what is shown or
+  *fixed*. Drag across it to zoom in on that span, which pauses it; the wheel zooms around the
+  pointer (live, a shorter or longer span to now), Shift+wheel or a sideways swipe scrolls
+  through time, two fingers pinch; *Live* or a double click goes on. Space pauses, the arrow keys
+  scroll, `+` and `-` zoom, Escape goes back live. The pointer shows each series' value at its
+  time, the legend the values at the right edge; clicking a series in the legend hides it. The
+  download button exports what is shown as CSV: the time (s since the epoch), then a column a
+  series, a row a message (those of a topic's series on the same rows).
 - **Parameters** lists the nodes of the graph (but the hidden ones, as `ros2 node list` does), or
   shows one node only, its *node* (a panel to tune `/controller_server`). A node's parameters are
   read through its parameter services (`rcl_interfaces`), grouped by the prefixes of their names
@@ -572,6 +594,10 @@ Safety and bandwidth are the server's concern:
   one recording per folder, for every page (the behavior tree inspectors' among them), one
   playback. A folder of bags is read once for every page showing it, every 2 s, a bag's metadata
   again only when its files change; the recordings' sizes every second.
+- A topic plotted is followed once for every page (the ROS Monitor's subscription, with its
+  publishers' QoS): its messages are deserialized only while a page plots it, and each page gets
+  the numbers of its own fields, ten batches a second: for a 200 Hz topic, about 3 KB a second
+  for when its messages came, and 4 KB for each field.
 - The system monitor's sensors are read once for every page, every second while one watches and
   for 30 s after the last leaves; they are looked for again every 30 s (USB ones come and go).
   Each page gets a sample a second, about 4 KB.

package/dist/server/message_format.d.ts

@@ -21,4 +21,5 @@ export interface RosTime {
 }
 export declare function toRosMessage(value: unknown, type: string, schemas: Record<string, MessageSchema>, now: () => RosTime, path?: string): Record<string, unknown>;
 export declare function fieldAt(message: unknown, path: string): unknown;
+export declare function sampleValue(value: unknown): number | null;
 export declare function echoJson(value: unknown, limit: number): unknown;

package/dist/server/message_format.js

@@ -307,6 +307,27 @@ export function fieldAt(message, path) {
     }
     return value;
 }
+// A field's value as a plot takes it: numbers, 64 bit integers, booleans (0
+// or 1), times and durations (in seconds); null for anything else, and for
+// NaN and infinities
+export function sampleValue(value) {
+    if (typeof value === 'number') {
+        return Number.isFinite(value) ? value : null;
+    }
+    if (typeof value === 'bigint') {
+        return Number(value);
+    }
+    if (typeof value === 'boolean') {
+        return value ? 1 : 0;
+    }
+    if (value !== null && typeof value === 'object' && 'sec' in value && 'nanosec' in value) {
+        const { sec, nanosec } = value;
+        if (typeof sec === 'number' && typeof nanosec === 'number') {
+            return sec + nanosec / 1e9;
+        }
+    }
+    return null;
+}
 function number(value) {
     if (Number.isFinite(value)) {
         return value;

package/dist/server/session.js

@@ -404,9 +404,11 @@ export class Session {
                     echo: echo && typeof echo === 'object'
                         ? { field: optionalString(echo.field), truncate: number(echo.truncate, 1, MAX_TRUNCATE, 128) }
                         : null,
+                    samples: message.samples === undefined ? null : strings(message.samples, 'samples'),
                     onStatus: (state, text) => this.sendStreamStatus(id, state, text),
                     onStats: (stats) => this.send({ type: 'topic.stats', id, stats }),
                     onEcho: (update) => this.send({ type: 'topic.echo', id, ...update }),
+                    onSamples: (samples) => this.send({ type: 'topic.samples', id, ...samples }),
                 }));
                 return;
             }

package/dist/server/topic_monitor.d.ts

@@ -1,5 +1,5 @@
 import rclnodejs from 'rclnodejs';
-import { type TopicEcho, type TopicStats } from '../shared/monitor.ts';
+import { type TopicEcho, type TopicSamples, type TopicStats } from '../shared/monitor.ts';
 import type { StreamState } from './frame_stream.ts';
 import type { Interfaces } from './interfaces.ts';
 import { type Logger } from './util.ts';
@@ -9,11 +9,13 @@ export interface MonitorOptions {
         field: string;
         truncate: number;
     } | null;
+    samples: string[] | null;
 }
 export interface MonitorWatcher extends MonitorOptions {
     onStatus: (state: StreamState, message: string) => void;
     onStats: (stats: TopicStats) => void;
     onEcho: (echo: TopicEcho) => void;
+    onSamples: (samples: TopicSamples) => void;
 }
 export declare class TopicMonitors {
     private readonly node;

package/dist/server/topic_monitor.js

@@ -2,14 +2,16 @@
 // at once. One subscription per topic, with its publishers' QoS, shared by
 // its pages, taking the messages serialized (rclnodejs's raw subscriptions):
 // their size is exact, a header's stamp is read from the bytes, and only the
-// messages echoed are deserialized, at most ECHO_RATE a second for each page.
-// Each page gets the figures of its own window (ros2 topic hz --window) twice
-// a second while messages come.
+// messages echoed are deserialized, at most ECHO_RATE a second for each page,
+// but for those of a topic a page plots: all of them, whose numbers at the
+// page's fields it gets every SAMPLES_PERIOD_MS. Each page gets the figures
+// of its own window (ros2 topic hz --window) twice a second while messages
+// come.
 import { performance } from 'node:perf_hooks';
 import rclnodejs from 'rclnodejs';
-import { ECHO_RATE, MAX_TRUNCATE, MAX_WINDOW } from '../shared/monitor.js';
+import { ECHO_RATE, MAX_SAMPLED_FIELDS, MAX_TRUNCATE, MAX_WINDOW, SAMPLES_PERIOD_MS, } from '../shared/monitor.js';
 import { missingCodeHint } from './message_code.js';
-import { echoJson, fieldAt } from './message_format.js';
+import { echoJson, fieldAt, sampleValue } from './message_format.js';
 import { publishersQos } from './qos.js';
 import { headerStamp, TopicStatsWindow } from './topic_stats.js';
 import { absoluteTopic, errorMessage } from './util.js';
@@ -28,6 +30,7 @@ class MonitoredTopic {
     subscription = null;
     retryTimer = null;
     statsTimer;
+    samplesTimer = null;
     type = '';
     hasHeader = false;
     latest = null;
@@ -48,6 +51,8 @@ class MonitoredTopic {
             echoCount: this.window.count,
             echoAt: 0,
             timer: null,
+            samples: null,
+            unreadable: false,
         };
         this.watchers.set(watcher, delivery);
         watcher.onStatus(this.state, this.message);
@@ -57,6 +62,10 @@ class MonitoredTopic {
             delivery.echoCount = this.latest.count - 1;
             this.echo(watcher, delivery);
         }
+        // And plotted: a battery's state, that comes once a second or less
+        if (this.latest) {
+            this.sample(watcher, delivery, this.latest);
+        }
     }
     remove(watcher) {
         const delivery = this.watchers.get(watcher);
@@ -70,6 +79,9 @@ class MonitoredTopic {
         if (this.retryTimer) {
             clearTimeout(this.retryTimer);
         }
+        if (this.samplesTimer) {
+            clearTimeout(this.samplesTimer);
+        }
         for (const delivery of this.watchers.values()) {
             if (delivery.timer) {
                 clearTimeout(delivery.timer);
@@ -111,10 +123,42 @@ class MonitoredTopic {
         }
         const receivedAt = Date.now();
         this.window.add(performance.now() / 1000, buffer.length, delay, receivedAt);
-        this.latest = { count: this.window.count, buffer, receivedAt, message: undefined };
+        const latest = { count: this.window.count, buffer, receivedAt, message: undefined };
+        this.latest = latest;
         this.setState('streaming', this.type);
         for (const [watcher, delivery] of this.watchers) {
             this.echo(watcher, delivery);
+            this.sample(watcher, delivery, latest);
+        }
+    }
+    // The numbers of a message at the page's fields, sent with those of the
+    // next ones
+    sample(watcher, delivery, latest) {
+        if (!watcher.samples) {
+            return;
+        }
+        try {
+            latest.message ??= this.deserialize(latest.buffer);
+        }
+        catch (e) {
+            if (!delivery.unreadable) {
+                delivery.unreadable = true;
+                watcher.onStatus('error', `Cannot read the messages of ${this.topic}: ${errorMessage(e)}`);
+            }
+            return;
+        }
+        const samples = (delivery.samples ??= { at: [], values: watcher.samples.map(() => []) });
+        samples.at.push(latest.receivedAt);
+        watcher.samples.forEach((field, index) => samples.values[index].push(sampleValue(fieldAt(latest.message, field))));
+        this.samplesTimer ??= setTimeout(() => this.sendSamples(), SAMPLES_PERIOD_MS);
+    }
+    sendSamples() {
+        this.samplesTimer = null;
+        for (const [watcher, delivery] of this.watchers) {
+            if (delivery.samples) {
+                watcher.onSamples(delivery.samples);
+                delivery.samples = null;
+            }
         }
     }
     // The latest message, now or when the page's rate allows
@@ -210,6 +254,7 @@ export class TopicMonitors {
                 field: watcher.echo.field.trim(),
                 truncate: Math.round(Math.min(MAX_TRUNCATE, Math.max(1, watcher.echo.truncate))),
             },
+            samples: watcher.samples?.length ? watcher.samples.slice(0, MAX_SAMPLED_FIELDS) : null,
         };
         let monitored = this.topics.get(name);
         if (!monitored) {

package/dist/shared/monitor.d.ts

@@ -73,6 +73,10 @@ export interface BigIntValue {
 export interface SpecialNumber {
     $number: 'nan' | 'inf' | '-inf';
 }
+export interface TopicSamples {
+    at: number[];
+    values: (number | null)[][];
+}
 export interface TopicEcho {
     seq: number;
     receivedAt: number;
@@ -142,3 +146,5 @@ export declare const GRAPH_PERIOD_MS = 2000;
 export declare const ECHO_RATE = 10;
 export declare const MAX_WINDOW = 10000;
 export declare const MAX_TRUNCATE = 10000;
+export declare const MAX_SAMPLED_FIELDS = 64;
+export declare const SAMPLES_PERIOD_MS = 100;

package/dist/shared/monitor.js

@@ -10,3 +10,7 @@ export const ECHO_RATE = 10;
 export const MAX_WINDOW = 10_000;
 // Of ros2 topic echo's --truncate-length: the page asks for less
 export const MAX_TRUNCATE = 10_000;
+// Fields sampled of a topic, at most, for a page
+export const MAX_SAMPLED_FIELDS = 64;
+// How often the samples of the messages since the last are sent
+export const SAMPLES_PERIOD_MS = 100;

package/dist/shared/protocol.d.ts

@@ -1,6 +1,6 @@
 import type { BtNodeModel } from './bt_nodes.ts';
 import type { FsDisk } from './file_manager.ts';
-import type { ActionGoal, GraphSnapshot, PublishQos, PublishState, TopicDetails, TopicEcho, TopicStats } from './monitor.ts';
+import type { ActionGoal, GraphSnapshot, PublishQos, PublishState, TopicDetails, TopicEcho, TopicSamples, TopicStats } from './monitor.ts';
 import type { NetworkRequest, NetworkState } from './networking.ts';
 import type { ParamInfo, ParamValue } from './parameters.ts';
 import type { BagCapabilities, BagInfo, BagsRequest, Playback, Recording, RecordOptions } from './rosbag.ts';
@@ -206,6 +206,7 @@ export interface TopicMonitorSubscribe {
         field: string;
         truncate: number;
     } | null;
+    samples?: string[];
 }
 export interface TopicPublish {
     type: 'topic.publish';
@@ -659,6 +660,10 @@ export interface TopicEchoUpdate extends TopicEcho {
     type: 'topic.echo';
     id: number;
 }
+export interface TopicSamplesUpdate extends TopicSamples {
+    type: 'topic.samples';
+    id: number;
+}
 export interface TopicPublished extends PublishState {
     type: 'topic.published';
     id: number;
@@ -694,7 +699,7 @@ export interface ActionGoals {
     id: number;
     goals: ActionGoal[];
 }
-export type ServerMessage = Hello | CommandStates | CommandUpdate | StreamStatus | TfUpdate | PathUpdate | OverlayUpdate | TopicMessage | ServicesUpdate | ServiceResult | LogsUpdate | ArmUpdate | Result | PluginData | BehaviorTreeInfo | BehaviorTreeUpdate | BehaviorTreeRecording | BehaviorTreePlaybackState | BehaviorTreeFile | BehaviorTreeModels | RosoutUpdate | DiagnosticsUpdate | TerminalOutput | TerminalExit | NetworkUpdate | GraphUpdate | TopicInfoUpdate | TopicStatsUpdate | TopicEchoUpdate | TopicPublished | ActionGoals | ParamsUpdate | BagsUpdate | SystemUpdate | PanelsChanged | ErrorMessage;
+export type ServerMessage = Hello | CommandStates | CommandUpdate | StreamStatus | TfUpdate | PathUpdate | OverlayUpdate | TopicMessage | ServicesUpdate | ServiceResult | LogsUpdate | ArmUpdate | Result | PluginData | BehaviorTreeInfo | BehaviorTreeUpdate | BehaviorTreeRecording | BehaviorTreePlaybackState | BehaviorTreeFile | BehaviorTreeModels | RosoutUpdate | DiagnosticsUpdate | TerminalOutput | TerminalExit | NetworkUpdate | GraphUpdate | TopicInfoUpdate | TopicStatsUpdate | TopicEchoUpdate | TopicSamplesUpdate | TopicPublished | ActionGoals | ParamsUpdate | BagsUpdate | SystemUpdate | PanelsChanged | ErrorMessage;
 export declare const FRAME_HEADER_BYTES = 11;
 export declare const IMAGE_FORMATS: readonly ['image/jpeg', 'image/png'];
 export interface GridInfo {

package/dist/types/client/connection.d.ts

@@ -1,4 +1,4 @@
-import type { ActionGoal, CancelResult, GraphSnapshot, InterfaceInfo, PublishState, TopicDetails, TopicEcho, TopicStats } from '../shared/monitor.ts';
+import type { ActionGoal, CancelResult, GraphSnapshot, InterfaceInfo, PublishState, TopicDetails, TopicEcho, TopicSamples, TopicStats } from '../shared/monitor.ts';
 import type { NetworkRequest, NetworkResult, NetworkSecrets } from '../shared/networking.ts';
 import type { ParamResult, ParamValue } from '../shared/parameters.ts';
 import type { BagsRequest, Playback, Recording, RecordOptions } from '../shared/rosbag.ts';
@@ -56,8 +56,9 @@ export interface OverlayHandlers {
 }
 export interface TopicMonitorHandlers {
     status: (state: StreamStatus['state'], message: string) => void;
-    stats: (stats: TopicStats) => void;
-    echo: (echo: TopicEcho) => void;
+    stats?: (stats: TopicStats) => void;
+    echo?: (echo: TopicEcho) => void;
+    samples?: (samples: TopicSamples) => void;
 }
 export interface ActionHandlers {
     status: (state: StreamStatus['state'], message: string) => void;

package/dist/types/client/icons.d.ts

@@ -95,4 +95,6 @@ export declare const ServiceIcon: (props: SVGProps<SVGSVGElement>) => import("re
 export declare const ActionIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const MonitorIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const ChipIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const PlotIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
+export declare const CheckIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;
 export declare const SendIcon: (props: SVGProps<SVGSVGElement>) => import("react").JSX.Element;

package/dist/types/client/sdk/index.d.ts

@@ -10,7 +10,7 @@ export type { BtNodeModel, BtPortModel } from '../../shared/bt_nodes.ts';
 export type { ParamDescriptor, ParamInfo, ParamResult, ParamScalar, ParamType, ParamValue } from '../../shared/parameters.ts';
 export type { BagCapabilities, BagFile, BagInfo, BagsRequest, BagTopic, CompressionMode, Playback, PlayRequest, Recording, RecordOptions, RecordRequest, } from '../../shared/rosbag.ts';
 export type { DiskIo, Fan, Gpu, NetworkIo, PowerRail, SystemInfo, SystemSample, Temperature, TrendPoint, } from '../../shared/system.ts';
-export type { ActionGoal, BigIntValue, CancelResult, GoalStatus, GraphEndpoints, GraphSnapshot, GraphTopic, InterfaceInfo, InterfaceKind, MessageConstant, MessageField, MessageSchema, PublishQos, PublishState, QosProblem, QosProfile, SpecialNumber, Spread, TopicDetails, TopicEcho, TopicEndpoint, TopicStats, TruncatedValue, } from '../../shared/monitor.ts';
+export type { ActionGoal, BigIntValue, CancelResult, GoalStatus, GraphEndpoints, GraphSnapshot, GraphTopic, InterfaceInfo, InterfaceKind, MessageConstant, MessageField, MessageSchema, PublishQos, PublishState, QosProblem, QosProfile, SpecialNumber, Spread, TopicDetails, TopicEcho, TopicEndpoint, TopicSamples, TopicStats, TruncatedValue, } from '../../shared/monitor.ts';
 export type { ConnectionKind, NetworkActivity, NetworkConnection, NetworkDevice, NetworkPermissions, NetworkRequest, NetworkResult, NetworkSecrets, NetworkSettings, NetworkState, WifiNetwork, WifiSecurity, } from '../../shared/networking.ts';
 export type { FsAnalysis, FsConflict, FsDetails, FsDisk, FsEntry, FsListing, FsOperation, FsPlaces, FsResult, FsSaved, FsSpace, FsText, } from '../../shared/file_manager.ts';
 export type { Panel, WidgetInstance } from '../../shared/panel.ts';

package/dist/types/client/widgets/types.d.ts

@@ -57,6 +57,7 @@ export interface WidgetProps<C> {
     instance: WidgetInstance;
     panelId: string;
     editing: boolean;
+    updateConfig: (changes: Partial<C>) => void;
 }
 export interface WidgetDefinition<C> {
     type: string;

package/dist/types/shared/monitor.d.ts

@@ -73,6 +73,10 @@ export interface BigIntValue {
 export interface SpecialNumber {
     $number: 'nan' | 'inf' | '-inf';
 }
+export interface TopicSamples {
+    at: number[];
+    values: (number | null)[][];
+}
 export interface TopicEcho {
     seq: number;
     receivedAt: number;
@@ -142,3 +146,5 @@ export declare const GRAPH_PERIOD_MS = 2000;
 export declare const ECHO_RATE = 10;
 export declare const MAX_WINDOW = 10000;
 export declare const MAX_TRUNCATE = 10000;
+export declare const MAX_SAMPLED_FIELDS = 64;
+export declare const SAMPLES_PERIOD_MS = 100;

package/dist/types/shared/protocol.d.ts

@@ -1,6 +1,6 @@
 import type { BtNodeModel } from './bt_nodes.ts';
 import type { FsDisk } from './file_manager.ts';
-import type { ActionGoal, GraphSnapshot, PublishQos, PublishState, TopicDetails, TopicEcho, TopicStats } from './monitor.ts';
+import type { ActionGoal, GraphSnapshot, PublishQos, PublishState, TopicDetails, TopicEcho, TopicSamples, TopicStats } from './monitor.ts';
 import type { NetworkRequest, NetworkState } from './networking.ts';
 import type { ParamInfo, ParamValue } from './parameters.ts';
 import type { BagCapabilities, BagInfo, BagsRequest, Playback, Recording, RecordOptions } from './rosbag.ts';
@@ -206,6 +206,7 @@ export interface TopicMonitorSubscribe {
         field: string;
         truncate: number;
     } | null;
+    samples?: string[];
 }
 export interface TopicPublish {
     type: 'topic.publish';
@@ -659,6 +660,10 @@ export interface TopicEchoUpdate extends TopicEcho {
     type: 'topic.echo';
     id: number;
 }
+export interface TopicSamplesUpdate extends TopicSamples {
+    type: 'topic.samples';
+    id: number;
+}
 export interface TopicPublished extends PublishState {
     type: 'topic.published';
     id: number;
@@ -694,7 +699,7 @@ export interface ActionGoals {
     id: number;
     goals: ActionGoal[];
 }
-export type ServerMessage = Hello | CommandStates | CommandUpdate | StreamStatus | TfUpdate | PathUpdate | OverlayUpdate | TopicMessage | ServicesUpdate | ServiceResult | LogsUpdate | ArmUpdate | Result | PluginData | BehaviorTreeInfo | BehaviorTreeUpdate | BehaviorTreeRecording | BehaviorTreePlaybackState | BehaviorTreeFile | BehaviorTreeModels | RosoutUpdate | DiagnosticsUpdate | TerminalOutput | TerminalExit | NetworkUpdate | GraphUpdate | TopicInfoUpdate | TopicStatsUpdate | TopicEchoUpdate | TopicPublished | ActionGoals | ParamsUpdate | BagsUpdate | SystemUpdate | PanelsChanged | ErrorMessage;
+export type ServerMessage = Hello | CommandStates | CommandUpdate | StreamStatus | TfUpdate | PathUpdate | OverlayUpdate | TopicMessage | ServicesUpdate | ServiceResult | LogsUpdate | ArmUpdate | Result | PluginData | BehaviorTreeInfo | BehaviorTreeUpdate | BehaviorTreeRecording | BehaviorTreePlaybackState | BehaviorTreeFile | BehaviorTreeModels | RosoutUpdate | DiagnosticsUpdate | TerminalOutput | TerminalExit | NetworkUpdate | GraphUpdate | TopicInfoUpdate | TopicStatsUpdate | TopicEchoUpdate | TopicSamplesUpdate | TopicPublished | ActionGoals | ParamsUpdate | BagsUpdate | SystemUpdate | PanelsChanged | ErrorMessage;
 export declare const FRAME_HEADER_BYTES = 11;
 export declare const IMAGE_FORMATS: readonly ['image/jpeg', 'image/png'];
 export interface GridInfo {

package/dist/www/assets/Joystick.js

@@ -1 +1 @@
-import{n as e}from"./rolldown-runtime.js";import{t}from"./react.js";import{Wt as n,Yt as r}from"./icons.js";import{t as i}from"./jsx-runtime.js";var a=class extends Error{status;constructor(e,t){super(t),this.status=e}};async function o(e,t,i){let o=await fetch(t,{method:e,headers:{"Content-Type":`application/json`,[r]:n.clientId??``},body:i===void 0?void 0:JSON.stringify(i)});if(!o.ok){let e=`${o.status} ${o.statusText}`;try{e=(await o.json()).error??e}catch{}throw new a(o.status,e)}return o.status===204?void 0:await o.json()}var s=e=>`/api/panels/${encodeURIComponent(e)}`;async function c(e){let t=await fetch(`/api/uploads`,{method:`POST`,body:e});if(!t.ok){let e=await t.json().catch(()=>null);throw Error(e?.error??`${t.status} ${t.statusText}`)}return await t.json()}function l(e){let t=e.trim();if(t.startsWith(`uploads/`))return`/api/uploads/${encodeURIComponent(t.slice(8))}`;let n=/^package:\/\/([^/]+)\/(.+)$/.exec(t);return n?`/api/packages/${encodeURIComponent(n[1])}/${n[2].split(`/`).map(encodeURIComponent).join(`/`)}`:t.startsWith(`/`)||t.startsWith(`~/`)?`/api/files?path=${encodeURIComponent(t)}`:null}var u={listPanels:()=>o(`GET`,`/api/panels`),getPanel:e=>o(`GET`,s(e)),createPanel:e=>o(`POST`,`/api/panels`,e),savePanel:e=>o(`PUT`,s(e.id),e),deletePanel:e=>o(`DELETE`,s(e)),listTopics:()=>o(`GET`,`/api/topics`),listPlugins:()=>o(`GET`,`/api/plugins`),listFiles:(e,t=`image`)=>o(`GET`,`/api/files/list?dir=${encodeURIComponent(e)}&kind=${t}`),uploadFile:async e=>`uploads/${(await c(e)).name}`};function d(e,t={}){let n=new URLSearchParams;for(let[e,r]of Object.entries(t))for(let t of r==null?[]:[r].flat())n.append(e,t);let r=n.toString();return`/api/fs/${e}${r?`?${r}`:``}`}var f={places:()=>o(`GET`,d(`places`)),list:(e,t)=>o(`GET`,d(`list`,{path:e,known:t})),details:e=>o(`GET`,d(`details`,{path:e})),disks:()=>o(`GET`,d(`disks`)),analyze:e=>o(`GET`,d(`analysis`,{path:e})),readText:(e,t)=>o(`GET`,d(`text`,{path:e,stamp:t})),saveText:(e,t,n,r=!1)=>o(`PUT`,d(`text`),{path:e,text:t,base:n,create:r}),operate:e=>o(`POST`,d(`op`),e),downloadUrl:e=>d(`download`,{path:e}),viewUrl:(e,t)=>d(`view`,{path:e,v:t}),upload(e,t,i,a,o){let s=new XMLHttpRequest;return{result:new Promise((c,l)=>{s.open(`POST`,d(`upload`,{path:e,name:t,conflict:a})),s.setRequestHeader(r,n.clientId??``),s.upload.onprogress=e=>o(e.loaded),s.onload=()=>{let e=null;try{e=JSON.parse(s.responseText)}catch{}s.status>=200&&s.status<300&&e?c(e):l(Error(e?.error??`${s.status} ${s.statusText}`))},s.onerror=()=>l(Error(`Cannot reach the robot`)),s.onabort=()=>l(new DOMException(`Cancelled`,`AbortError`)),s.send(i)}),abort:()=>s.abort()}}},p=e(t(),1),m=e(i(),1),h=5e3,g=[],_=1,v=new Set;function y(e){g=e,v.forEach(e=>e())}function b(e){y(g.filter(t=>t.id!==e))}function x(e,t=`info`,n){let r=_++;y([...g.filter(t=>t.message!==e),{id:r,message:e,kind:t,action:n}].slice(-4)),setTimeout(()=>b(r),h)}function S(e){return v.add(e),()=>v.delete(e)}function C(){let e=(0,p.useSyncExternalStore)(S,()=>g);return(0,m.jsx)(`div`,{className:`notifications`,role:`status`,"aria-live":`polite`,children:e.map(e=>(0,m.jsxs)(`div`,{className:`notification ${e.kind}`,children:[(0,m.jsx)(`span`,{children:e.message}),e.action&&(0,m.jsx)(`button`,{type:`button`,className:`link-button`,onClick:()=>{e.action?.run(),b(e.id)},children:e.action.label}),(0,m.jsx)(`button`,{type:`button`,className:`notification-close`,"aria-label":`Dismiss`,onClick:()=>b(e.id),children:`×`})]},e.id))})}function w(e){return e}function T(e){return e}var E=34,D=.08;function O(e){let t=Math.abs(e);return t<D?0:Math.sign(e)*(t-D)/.92}function k({axes:e,onMove:t,disabled:n,label:r}){let i=(0,p.useRef)(null),a=(0,p.useRef)(null),[o,s]=(0,p.useState)({x:0,y:0}),[c,l]=(0,p.useState)(!1),u=(0,p.useRef)(t);u.current=t;let d=(e,t)=>{s({x:e,y:t}),u.current(O(e),O(t))},f=t=>{let n=i.current.getBoundingClientRect(),r=n.width*E/100,a=e===`y`?0:(t.clientX-(n.left+n.width/2))/r,o=e===`x`?0:-(t.clientY-(n.top+n.height/2))/r,s=Math.hypot(a,o);s>1&&(a/=s,o/=s),d(a,o)},h=e=>{a.current===null||e&&e.pointerId!==a.current||(a.current=null,l(!1),d(0,0))},g=(0,p.useRef)(h);return g.current=h,(0,p.useEffect)(()=>{let e=()=>document.hidden&&g.current();return document.addEventListener(`visibilitychange`,e),()=>document.removeEventListener(`visibilitychange`,e)},[]),(0,p.useEffect)(()=>{n&&g.current()},[n]),(0,m.jsxs)(`div`,{className:`joystick-slot`,children:[(0,m.jsxs)(`div`,{ref:i,className:`joystick${e===`x`?` horizontal`:e===`y`?` vertical`:``}${c?` active`:``}${n?` disabled`:``}`,onPointerDown:e=>{n||a.current!==null||e.button!==0||(a.current=e.pointerId,l(!0),e.currentTarget.setPointerCapture(e.pointerId),f(e))},onPointerMove:e=>e.pointerId===a.current&&f(e),onPointerUp:h,onPointerCancel:h,onLostPointerCapture:h,children:[(0,m.jsx)(`div`,{className:`joystick-track`}),(0,m.jsx)(`div`,{className:`joystick-knob`,style:{left:`${50+o.x*E}%`,top:`${50-o.y*E}%`}})]}),(0,m.jsx)(`span`,{className:`joystick-label`,children:r})]})}export{x as a,f as c,C as i,l,T as n,a as o,w as r,u as s,k as t};
+import{n as e}from"./rolldown-runtime.js";import{t}from"./react.js";import{Kt as n,Zt as r}from"./icons.js";import{t as i}from"./jsx-runtime.js";var a=class extends Error{status;constructor(e,t){super(t),this.status=e}};async function o(e,t,i){let o=await fetch(t,{method:e,headers:{"Content-Type":`application/json`,[r]:n.clientId??``},body:i===void 0?void 0:JSON.stringify(i)});if(!o.ok){let e=`${o.status} ${o.statusText}`;try{e=(await o.json()).error??e}catch{}throw new a(o.status,e)}return o.status===204?void 0:await o.json()}var s=e=>`/api/panels/${encodeURIComponent(e)}`;async function c(e){let t=await fetch(`/api/uploads`,{method:`POST`,body:e});if(!t.ok){let e=await t.json().catch(()=>null);throw Error(e?.error??`${t.status} ${t.statusText}`)}return await t.json()}function l(e){let t=e.trim();if(t.startsWith(`uploads/`))return`/api/uploads/${encodeURIComponent(t.slice(8))}`;let n=/^package:\/\/([^/]+)\/(.+)$/.exec(t);return n?`/api/packages/${encodeURIComponent(n[1])}/${n[2].split(`/`).map(encodeURIComponent).join(`/`)}`:t.startsWith(`/`)||t.startsWith(`~/`)?`/api/files?path=${encodeURIComponent(t)}`:null}var u={listPanels:()=>o(`GET`,`/api/panels`),getPanel:e=>o(`GET`,s(e)),createPanel:e=>o(`POST`,`/api/panels`,e),savePanel:e=>o(`PUT`,s(e.id),e),deletePanel:e=>o(`DELETE`,s(e)),listTopics:()=>o(`GET`,`/api/topics`),listPlugins:()=>o(`GET`,`/api/plugins`),listFiles:(e,t=`image`)=>o(`GET`,`/api/files/list?dir=${encodeURIComponent(e)}&kind=${t}`),uploadFile:async e=>`uploads/${(await c(e)).name}`};function d(e,t={}){let n=new URLSearchParams;for(let[e,r]of Object.entries(t))for(let t of r==null?[]:[r].flat())n.append(e,t);let r=n.toString();return`/api/fs/${e}${r?`?${r}`:``}`}var f={places:()=>o(`GET`,d(`places`)),list:(e,t)=>o(`GET`,d(`list`,{path:e,known:t})),details:e=>o(`GET`,d(`details`,{path:e})),disks:()=>o(`GET`,d(`disks`)),analyze:e=>o(`GET`,d(`analysis`,{path:e})),readText:(e,t)=>o(`GET`,d(`text`,{path:e,stamp:t})),saveText:(e,t,n,r=!1)=>o(`PUT`,d(`text`),{path:e,text:t,base:n,create:r}),operate:e=>o(`POST`,d(`op`),e),downloadUrl:e=>d(`download`,{path:e}),viewUrl:(e,t)=>d(`view`,{path:e,v:t}),upload(e,t,i,a,o){let s=new XMLHttpRequest;return{result:new Promise((c,l)=>{s.open(`POST`,d(`upload`,{path:e,name:t,conflict:a})),s.setRequestHeader(r,n.clientId??``),s.upload.onprogress=e=>o(e.loaded),s.onload=()=>{let e=null;try{e=JSON.parse(s.responseText)}catch{}s.status>=200&&s.status<300&&e?c(e):l(Error(e?.error??`${s.status} ${s.statusText}`))},s.onerror=()=>l(Error(`Cannot reach the robot`)),s.onabort=()=>l(new DOMException(`Cancelled`,`AbortError`)),s.send(i)}),abort:()=>s.abort()}}},p=e(t(),1),m=e(i(),1),h=5e3,g=[],_=1,v=new Set;function y(e){g=e,v.forEach(e=>e())}function b(e){y(g.filter(t=>t.id!==e))}function x(e,t=`info`,n){let r=_++;y([...g.filter(t=>t.message!==e),{id:r,message:e,kind:t,action:n}].slice(-4)),setTimeout(()=>b(r),h)}function S(e){return v.add(e),()=>v.delete(e)}function C(){let e=(0,p.useSyncExternalStore)(S,()=>g);return(0,m.jsx)(`div`,{className:`notifications`,role:`status`,"aria-live":`polite`,children:e.map(e=>(0,m.jsxs)(`div`,{className:`notification ${e.kind}`,children:[(0,m.jsx)(`span`,{children:e.message}),e.action&&(0,m.jsx)(`button`,{type:`button`,className:`link-button`,onClick:()=>{e.action?.run(),b(e.id)},children:e.action.label}),(0,m.jsx)(`button`,{type:`button`,className:`notification-close`,"aria-label":`Dismiss`,onClick:()=>b(e.id),children:`×`})]},e.id))})}function w(e){return e}function T(e){return e}var E=34,D=.08;function O(e){let t=Math.abs(e);return t<D?0:Math.sign(e)*(t-D)/.92}function k({axes:e,onMove:t,disabled:n,label:r}){let i=(0,p.useRef)(null),a=(0,p.useRef)(null),[o,s]=(0,p.useState)({x:0,y:0}),[c,l]=(0,p.useState)(!1),u=(0,p.useRef)(t);u.current=t;let d=(e,t)=>{s({x:e,y:t}),u.current(O(e),O(t))},f=t=>{let n=i.current.getBoundingClientRect(),r=n.width*E/100,a=e===`y`?0:(t.clientX-(n.left+n.width/2))/r,o=e===`x`?0:-(t.clientY-(n.top+n.height/2))/r,s=Math.hypot(a,o);s>1&&(a/=s,o/=s),d(a,o)},h=e=>{a.current===null||e&&e.pointerId!==a.current||(a.current=null,l(!1),d(0,0))},g=(0,p.useRef)(h);return g.current=h,(0,p.useEffect)(()=>{let e=()=>document.hidden&&g.current();return document.addEventListener(`visibilitychange`,e),()=>document.removeEventListener(`visibilitychange`,e)},[]),(0,p.useEffect)(()=>{n&&g.current()},[n]),(0,m.jsxs)(`div`,{className:`joystick-slot`,children:[(0,m.jsxs)(`div`,{ref:i,className:`joystick${e===`x`?` horizontal`:e===`y`?` vertical`:``}${c?` active`:``}${n?` disabled`:``}`,onPointerDown:e=>{n||a.current!==null||e.button!==0||(a.current=e.pointerId,l(!0),e.currentTarget.setPointerCapture(e.pointerId),f(e))},onPointerMove:e=>e.pointerId===a.current&&f(e),onPointerUp:h,onPointerCancel:h,onLostPointerCapture:h,children:[(0,m.jsx)(`div`,{className:`joystick-track`}),(0,m.jsx)(`div`,{className:`joystick-knob`,style:{left:`${50+o.x*E}%`,top:`${50-o.y*E}%`}})]}),(0,m.jsx)(`span`,{className:`joystick-label`,children:r})]})}export{x as a,f as c,C as i,l,T as n,a as o,w as r,u as s,k as t};