Dashboards

Control Seat dashboards are built in a visual editor and published as live, real-time screens.

Building A Dashboard

The editor lets you build dashboards by dragging blocks onto a canvas. You can also use AI to generate a dashboard from a text description.

Editor Features

  • Drag-and-drop blocks — charts, tables, gauges, text, images, and more
  • Coordinate canvas — absolute-position layouts for HMI-style screens
  • Style editor — customize colors, fonts, borders, and spacing on any block
  • Binding editor — connect any block property to live tag data with optional scripting
  • Embedded views — nest other pages inside your dashboard as reusable components
  • Dock layout — create sidebar and panel layouts
  • Pipe drawing — draw process flow lines between blocks
  • AI-assisted editing — describe what you want and let AI build or modify your dashboard

Publishing

Once your dashboard is ready:

  1. Save your draft
  2. Publish to make it live
  3. Share the URL or embed it anywhere

Published dashboards are accessible by their slug URL. You can have multiple versions and revert to any previous save.

Embedded Views

Embedded views let you build a page once and reuse it across multiple dashboards with different parameters.

  • The source page stays editable on its own
  • Each embedded instance can have unique parameters and bindings
  • Parent dashboards pass tag data to embedded views automatically — no extra connections needed
  • Embedded views are isolated for clean CSS and DOM separation

This is useful for reusable components like pump status panels, zone overviews, or equipment detail views.

Screen Payload

A published screen includes:

  • html — the rendered page structure
  • css — compiled styles
  • scripts.client — page scripts that run in the browser
  • projectData — layout metadata for docks, pipes, and embedded views
  • meta — publish metadata like slug and version

How The Runtime Works

When someone opens a published dashboard:

  1. The screen payload is loaded
  2. HTML and CSS are injected into the page
  3. Layout features (docks, pipes, embedded views) are reconstructed
  4. The live tag stream connects via WebSocket
  5. Bindings update block properties in real time
  6. Page scripts run and respond to tag changes

The result is a live, interactive dashboard that updates in real time as your data changes.