Display widgets are driven by bound data — set the widget’s value or field
path in the Data tab (or push to its widget ID from firmware). See
Binding Data.
Gauge
A circular gauge for a single value, with arcs and thresholds.| Setting | Purpose |
|---|---|
| Arc start / end · arc width | The gauge sweep |
| Add threshold | Colored bands at value ranges |
| Animation duration · easing · delay | Needle motion |
| Custom width · box shadow · CSS filter · blend mode | Appearance |
Status
A status indicator driven by a bound value — shows state with color. Bind it to a value or field path; configure its state coloring in Style.Chart
A data-visualization chart (line, bar, area, …).| Setting | Purpose |
|---|---|
| Chart type | Line, bar, area, etc. |
| Axis · grid · legend | Chart chrome |
| Line stroke width · area opacity · bar border radius | Series styling |
Image
Displays an image.| Setting | Purpose |
|---|---|
| Image URL · alt text | Source and accessibility |
| Image fit · width / height · alignment | Layout |
| Image filter · opacity | Appearance |
SVG
Displays a scalable vector graphic.| Setting | Purpose |
|---|---|
| SVG URL · SVG fit | Source and scaling |
| Alignment · padding · opacity · CSS filter | Layout and appearance |
Label
A text label — the most styled display widget, with full typography and effects.| Setting | Purpose |
|---|---|
| Angle · animation · animation type | Orientation and motion |
| Backdrop filter · blur · blend mode · box shadow | Visual effects |
| Border (color / width / radius / style) · background | Container |
Indicator
A compact state indicator (dot / badge) driven by a bound value. Bind a value or field path; set its colors in Style.Table
A data table with optional inline editing.| Setting | Purpose |
|---|---|
| Header background / text · row background / text | Coloring |
| Alternate row background | Zebra striping |
| Cell padding · font size/weight | Density |
| Enable inline editing | Edit cells in place |
| Refresh interval | Auto-reload |
Dynamic Repeater
Repeats a template per data item — a data-driven list/grid.| Setting | Purpose |
|---|---|
| Auto-generate template | Build from the data shape |
| Columns | Grid columns |
| Container / button / divider colors | Styling |
| Empty text · error text | Placeholder states |
Map
A map with markers driven by data columns.| Setting | Purpose |
|---|---|
| Map provider · map shape | Base map |
| Latitude / Longitude column | Marker coordinates from data |
| Marker type · color · path color · arrow color | Marker styling |
| Description column · always show descriptions | Popups |
Mission Planning Map
A map for planning device missions (waypoints, boundaries).| Setting | Purpose |
|---|---|
| Mission type | Mission style |
| Center lat / lng | Initial view |
| Default altitude / speed | Mission defaults |
| Boundary color · overlap percentage | Survey planning |
| Enable editing · auto-save · loop mission | Behavior |
| Product ID | Scope |
Compass
A compass showing a heading value.| Setting | Purpose |
|---|---|
| Compass size · color | Dial |
| Needle color / length / width / style | Needle |
| Show cardinal directions · direction labels · value | Readouts |
Heatmap
A heatmap of point data.| Setting | Purpose |
|---|---|
| Color scheme · custom colors | Gradient |
| Min / Max value | Scale |
| Point shape · size | Markers |
| Contour color / width | Contours |
Attitude Indicator
An aircraft-style attitude (roll/pitch) instrument.| Setting | Purpose |
|---|---|
| Display type · aircraft symbol | Instrument style |
| Sky / ground color | Horizon |
| Instrument size · animation speed | Sizing and motion |
| Show degree markings · value indicators | Readouts |
updateFlightAttitude(targetId, widgetId, roll, pitch).
HTML Viewer
Renders custom HTML in a sandboxed frame.| Setting | Purpose |
|---|---|
| HTML code | The markup to render |
| Sandbox permissions | iframe sandbox flags |
| Show controls | Viewer chrome |
3D Viewer
Displays a single 3D model (STL / OBJ / GLTF / GLB).| Setting | Purpose |
|---|---|
| Model URL · model color | The model |
| Enable controls (rotate/zoom/pan) · auto rotate | Interaction |
| Show grid · axes | Scene helpers |
| Camera X / Y / Z | Camera position |
update3DModel(targetId, widgetId, modelUrl).
Date/Time & Weather
A clock and weather panel.| Setting | Purpose |
|---|---|
| Show time / date / weekday / weather | Sections |
| Location · temperature unit | Weather |
| Weather API endpoint (optional) | Custom source |
| Refresh interval | Update cadence |
Text to Speech
Speaks bound text aloud.| Setting | Purpose |
|---|---|
| Voice · rate · pitch · volume | Speech synthesis |
| Auto play · loop playback | Behavior |
| Show controls | Playback UI |
WebRTC Viewer
Views a WebRTC camera stream (the counterpart to WebRTC Camera).| Setting | Purpose |
|---|---|
| Camera ID · Room name | Stream identity |
| Server URL | Signaling server |
| Auto connect · enable audio | Behavior |
Video Player
Plays a video.| Setting | Purpose |
|---|---|
| Autoplay · loop · muted · playback speed | Playback |
| Poster image URL | Thumbnail |
| Width / height · alignment · padding | Layout |
EM Spectrum
Visualizes an electromagnetic-spectrum band display.| Setting | Purpose |
|---|---|
| Orientation · band height / spacing | Layout |
| Highlight band · highlight color · animate highlight | Emphasis |
| Label position / color / size | Labels |
Spectral Graph
A spectral (wavelength) line graph.| Setting | Purpose |
|---|---|
| Chart type · start/end (nm) | Spectrum range |
| Min / Max value · auto scale | Y-axis |
| Data smoothing · max data points in history | Series |
| Show grid · current value badge | Chrome |
3D Virtual Twin
A multi-model 3D scene for digital twins, with lighting and environment.| Setting | Purpose |
|---|---|
| Environment preset · background color | Scene |
| Ambient / directional intensity · shadows | Lighting |
| Field of view · axes size | Camera |
| Animation index · speed | Model animation |
| Enable controls / damping / antialiasing | Rendering |
update3DWidget(targetId, widgetId, models).
3D Vector Plotter
Plots 3D vectors in a scene.| Setting | Purpose |
|---|---|
| Display mode · color mode | Vector rendering |
| Decimal precision | Value formatting |
| Field of view · axes size · grid cell color | Scene |
| Ambient / directional intensity | Lighting |
Navigation widgets
Menus, page navigation, and links.