Widgets
The RosFit dashboard is built from composable widgets that visualize telemetry, accept input, and display device state. Widgets are drag-and-drop configurable and update in real-time over WebSocket.
Overview
Every widget shares a common set of configuration options:
| Option | Type | Default | Description |
|---|---|---|---|
title | string | widget type name | Display title |
device_id | string | selected device | Target device |
topic | string | — | Telemetry topic to bind to |
refresh_ms | number | 1000 | Update interval in milliseconds |
width | number | 1 | Grid columns (1–4) |
height | number | 1 | Grid rows (1–3) |
theme | string | auto | Color theme (light, dark, auto) |
Widgets are configured via the dashboard's visual editor (drag, resize, and click the gear icon) or programmatically through a JSON layout definition.
Gauge
A circular gauge for displaying a single numeric metric with min/max bounds and color zones.
| Option | Type | Description |
|---|---|---|
metric | string | Metric path (e.g. battery_percent, cpu_temp) |
min | number | Minimum value (default 0) |
max | number | Maximum value (default 100) |
unit | string | Display unit (%, °C, m/s) |
zones | array | Color zones: [{from, to, color}] |
Example configuration:
{
"type": "gauge",
"metric": "battery_percent",
"min": 0,
"max": 100,
"unit": "%",
"zones": [
{ "from": 0, "to": 20, "color": "red" },
{ "from": 20, "to": 50, "color": "yellow" },
{ "from": 50, "to": 100, "color": "green" }
]
}
Line chart
A time-series line chart for plotting telemetry values over a rolling window.
| Option | Type | Description |
|---|---|---|
metrics | array | List of metric paths to plot (supports multi-line) |
window | string | Rolling window (30s, 5m, 1h, 24h) |
y_min / y_max | number | Y-axis bounds (auto-scaled if omitted) |
colors | array | Line colors per metric |
interpolation | string | linear, step, spline |
show_legend | boolean | Show/hide the legend |
Ideal for velocity, temperature, battery trends, and position traces.
Bar chart
A bar chart for comparing discrete values across devices or topics.
| Option | Type | Description |
|---|---|---|
data_source | string | device (compare metrics) or fleet (compare devices) |
metric | string | Metric to compare |
group_by | string | Grouping field (device, group, type) |
orientation | string | horizontal or vertical |
stacked | boolean | Stack bars for multi-metric comparison |
Useful for fleet-wide battery comparison or per-group error counts.
Map marker
Displays a device's GPS or odometry position on an interactive Leaflet map.
| Option | Type | Description |
|---|---|---|
position_topic | string | Topic providing position data (default odom) |
trail | boolean | Show movement trail (default true) |
trail_length | number | Max trail points (default 200) |
tile_layer | string | Map tile URL (OpenStreetMap, satellite, or custom) |
zoom | number | Initial zoom level |
show_heading | boolean | Show heading arrow on marker |
For indoor robots without GPS, the map renders on a blank canvas or a custom floor plan image.
Camera feed
Streams a live camera feed from a device over WebRTC or MJPEG.
| Option | Type | Description |
|---|---|---|
stream_url | string | WebRTC signaling URL or MJPEG endpoint |
topic | string | ROS 2 image topic (bridge converts to MJPEG) |
resolution | string | Requested resolution (480p, 720p, 1080p) |
fps | number | Target frame rate |
overlay | boolean | Show timestamp and device ID overlay |
snapshot | boolean | Enable click-to-snapshot |
The bridge can transcode sensor_msgs/Image to MJPEG for browser consumption when a direct stream URL is not available.
3D viewer
A Three.js-based 3D viewport for visualizing robot models, point clouds, or paths.
| Option | Type | Description |
|---|---|---|
model_url | string | URDF or glTF model URL |
topics | array | ROS 2 topics to overlay (/tf, /scan, /path) |
background | string | Background color or skybox |
camera_mode | string | orbit, follow, first_person |
show_grid | boolean | Show ground grid |
point_size | number | Point cloud point size |
This widget provides a lightweight alternative to RViz for remote monitoring.
SLAM map
Renders a 2D occupancy grid from a SLAM algorithm (nav_msgs/OccupancyGrid).
| Option | Type | Description |
|---|---|---|
map_topic | string | Occupancy grid topic (default /map) |
pose_topic | string | Robot pose topic (default /amcl_pose) |
show_path | boolean | Overlay planned path |
show_costmap | boolean | Overlay cost map layer |
show_goals | boolean | Show navigation goal markers |
auto_center | boolean | Keep the robot centered in the view |
Joystick
A virtual joystick for manual teleoperation directly from the browser.
| Option | Type | Description |
|---|---|---|
publish_topic | string | MQTT topic to publish velocity commands |
max_linear | number | Maximum linear velocity (m/s) |
max_angular | number | Maximum angular velocity (rad/s) |
deadzone | number | Joystick deadzone (0–1) |
rate_hz | number | Command publish rate |
mode | string | differential (2-axis) or holonomic (3-axis) |
The joystick sends geometry_msgs/Twist-compatible JSON to the command topic.
Terminal
An embedded terminal for sending raw MQTT messages or CLI commands to a device.
| Option | Type | Description |
|---|---|---|
mode | string | mqtt (raw MQTT publish) or shell (remote shell via bridge) |
default_topic | string | Pre-filled MQTT topic |
history_size | number | Number of commands to keep in history |
show_timestamps | boolean | Prefix each message with a timestamp |
In mqtt mode you can publish arbitrary JSON to any topic in the device's namespace. In shell mode (requires bridge v2+) you can execute diagnostic commands on the robot.
Status indicator
A compact status badge showing a device's connection state and key metrics.
| Option | Type | Description |
|---|---|---|
show_uptime | boolean | Display uptime counter |
show_battery | boolean | Display battery percentage |
show_signal | boolean | Display signal strength |
size | string | compact, normal, large |
blink_on_error | boolean | Blink animation on error state |
Designed for embedding in fleet list rows or sidebar panels.
Table
A tabular view for displaying structured telemetry or device metadata.
| Option | Type | Description |
|---|---|---|
columns | array | Column definitions: [{field, label, format}] |
data_source | string | telemetry or devices |
sortable | boolean | Enable column sorting |
filterable | boolean | Enable column filtering |
page_size | number | Rows per page |
export | boolean | Enable CSV/JSON export |
Useful for displaying joint states, diagnostic arrays, or fleet device lists.