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 (see below)

Data Tables

Data tables render multi-row, multi-column results — useful for things like "last 50 alarms", "current open work orders", or "top 10 slowest cycles today". Bind a data table to a Table tag and the table renders the live query result with sorting and pagination. Only table tags appear in the data table's binding dropdown — scalar tags are hidden because a table needs rows and columns, not a single value.

Change the underlying query (or the tag's datasource) and every table bound to it updates automatically.

AI-Assisted Editing

Open the AI popover (or use the AI Edit modal on a selected component) and describe what you want in plain English. The assistant can add components, edit styles, update bindings, reorder the layout, and work from your existing design language — all in a single reviewable change.

A few things worth knowing about how the AI works in V0.1.2:

• Live status — the popover shows what the assistant is doing right now ("measuring spacing", "adding chart 2 of 2", "verifying result") instead of a generic spinner.
• Stop button — cancel the edit mid-flight from the popover or AI Edit modal. Nothing is applied until the assistant finishes, so stopping leaves the canvas untouched.
• Self-verification — after applying a change the assistant checks its own work against what you asked for. If you asked for two charts and it added one, it notices and fixes the miss before returning control.
• Spacing-aware — the AI can measure the gaps between existing elements, so requests like "match the spacing of the row above" actually match.
• Binding-aware — it can read and edit the bindings already attached to a component, not just the HTML. Requests like "stop this chart from updating live" or "rebind this gauge to pump/rpm" work the way you'd expect.
• Data-aware — the AI can query your historian on the fly (aggregates, raw points, or the last N readings) to ground design decisions in real data. Ask "what was the average flow rate yesterday afternoon?" and it'll look up the answer instead of guessing, then use that to pick appropriate chart y-axis ranges or threshold colors.

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.