A card grouping an asset's readout, status, and action into one unit on the panel grid
Containers group other components. Use them when a panel grows beyond a simple grid — to cluster a machine’s readouts under one title or split a screen into tabs.
Like trays on a workbench. The bench grid holds the trays in place; each tray keeps one job’s tools together so they move as a unit.
Two containers are available today: card for grouping, tabs for splitting.
A titled card grouping a single temperature readout
ADD COMPONENT "StatusCard" WITH TYPE "card" SET TITLE "Zone 1 Status" ADD COMPONENT "TempReading" WITH TYPE "value" BIND VALUE TO TOPIC "zone1/temperature" SET UNIT "°C"
A card combining a readout, an indicator, and a navigation button — the two extra children are the new parts:
A Zone 1 Status card with a temperature readout, a status indicator, and a Details button
ADD COMPONENT "StatusCard" WITH TYPE "card" SET TITLE "Zone 1 Status" ADD COMPONENT "TempReading" WITH TYPE "value" BIND VALUE TO TOPIC "zone1/temperature" SET UNIT "°C" ADD COMPONENT "StatusIndicator" WITH TYPE "indicator" BIND STATE TO TOPIC "zone1/status" SET ON_VALUE "running" WITH COLOR "green" SET ON_VALUE "stopped" WITH COLOR "red" ADD COMPONENT "DetailsButton" WITH TYPE "button" SET LABEL "Details" ON CLICK DO NAVIGATE TO PANEL "Zone1Details"
Each tab holds its own components — useful for Overview / Analytics / Settings splits on one screen.
In the current HUB build, tab headers show the inner component name rather than the ADD TAB title. The structure below matches the spec syntax; tab labelling is tracked as a known issue.
Basic
A tab strip switching between sub-views on one panel (current build labels tabs from their content)
ADD COMPONENT "MainTabs" WITH TYPE "tabs" ADD TAB "Overview" ADD COMPONENT "OvTemp" WITH TYPE "value" BIND VALUE TO TOPIC "zone1/temperature" SET UNIT "°C" ADD TAB "Analytics" ADD COMPONENT "OvGauge" WITH TYPE "gauge" SET RANGE FROM 0 TO 100 BIND VALUE TO TOPIC "zone1/temperature" ADD TAB "Settings" ADD COMPONENT "OvText" WITH TYPE "text" SET LABEL "Settings go here"
Use grid positioning (AT COLUMN/ROW) when components are independent readouts. Use a card when components belong to the same asset and should travel together — a card moves as one unit when you rearrange the panel. See Mixing layouts with cards for a complete panel that combines both.
