HMI Designer

A scene is a screen resource (ADR 0009). Canvas is 1920×1080. At most 64 widgets per screen.

Widgets

kind	Binding / behavior
label	Static text
value	tagId and/or expression; style.displayDecimals
link	screenId — navigate at runtime
faceplate	Embedded screen (screenId), expand depth ≤4
shape	rect | ellipse
pen	Polyline points (no tag)
flex	direction/gap/padding/childWidgets[]
symbol	symbolId + slot bindings + animations
graphic	Custom SVG + animation

Animation: rotate | fill | visible | fillColor.

Symbol catalog

Grindstone Visual Toolkit: ~1229 symbols (vt-symbols.generated.json) + core industrial symbols. symbolId camelCase.

Editor

Palette, inspector, move/resize/rotate, align, distribute, snap, layer, group, z-order. Left browser: pages, widgets, tags (filterable). Pen tool: click to add points; Enter / double-click to finish.

Query binding and script are not in this body.

flowchart LR
  Designer[designer.tsx] --> JSON[screen JSON]
  JSON --> Engine[hmi-engine expand mount]
  Engine --> SVG[SVG nodes]
  Live[live tags] --> Apply[apply]
  Apply --> SVG