> ## Documentation Index
> Fetch the complete documentation index at: https://docs.hyperwisor.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Display Widgets

> The 24 widgets that visualize device data — their settings and what they bind to.

Display widgets visualize data bound from devices. They share the four-tab model
([General / Style / Triggers / Data](/dashboard/overview)) and the common Style
controls (background, border, font, padding, container, shadow) — each section
below highlights a widget's **distinctive** settings.

<Note>
  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](/dashboard/binding-data).
</Note>

## 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          |

Update from firmware with `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 |

Update from firmware with `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       |

Drive models live from firmware with `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         |

<Card title="Navigation widgets" icon="compass" href="/dashboard/widgets/navigation">
  Menus, page navigation, and links.
</Card>