Components
The visualization library ships 56 widgets, 9 drawing tools and 1048 HMI symbols.
Every widget has its own page, covering what it is for, when to reach for it instead of a neighbour, its full property table, its events, and the things that catch people out. The property and event tables are generated from the product's own component registry and event definitions, so they cannot drift from the software.
Every component is configured the same way: set properties in the Properties panel, bind any of them to live data, and attach event actions.
By category
Alarm — 4
Annunciate and operate alarms from a screen. These read the alarm system directly and need no binding.
Alarm Bell · Alarm Event · Alarm Journal · Alarm Performance
Chart — 9
Trends, historical charts and analytical plots.
Bar Chart · Historian · HMI Sparkline · HMI Trend · Line Chart · Pie Chart · Radar Chart · Scatter Chart · Sparkline
Input — 15
Operator input. An input bound to a writable tag reads and writes it, subject to the tag's write level.
AI Chat · Button · Checkbox · Color Picker · Date Picker · Dropdown · Form · Input · QR / Barcode Scanner · Radio · Slider · Switch · Textarea · Upload · WYSIWYG
Display — 20
Read-only presentation of values, documents, media, maps and structures.
3D Viewer · Barcode · File Manager · Gauge · Icon · Image · Linear Scale · Map · Markdown · Moving Analog Indicator · PDF Viewer · Progress · QR Code · Segment Display · Table · Tag Browser · Tank · Text · Tree · Video Player
Container — 4
Layout and composition.
Embedded View · Flex Container · Flex Repeater · Tab Container
Navigation — 3
Horizontal Menu · Link · Vertical Menu
Scheduler — 1
Drawing tools and symbols
9 vector drawing tools and 1048 HMI symbols are documented together in the component reference. See Drawing & symbols for how to build a process mimic with them.
Choosing a component
Showing one number
| Need | Component |
|---|---|
| A plain value with units | Text |
| A value against a range | Gauge, Linear Scale, Progress |
| A level in a vessel | Tank |
| A numeric readout, HMI style | Segment Display |
| Deviation from setpoint | Moving Analog Indicator |
| A value plus its recent shape | Sparkline, HMI Sparkline |
Showing history
| Need | Component |
|---|---|
| Historical trend with time controls | Historian |
| An embedded trend in HMI style | HMI Trend |
| Category comparison | Bar Chart, Pie Chart |
| Correlation | Scatter Chart |
| Multi-axis profile | Radar Chart |
Operator input
| Need | Component |
|---|---|
| An action | Button |
| A setpoint | Input, Slider |
| A binary command | Switch, Checkbox |
| A choice | Dropdown, Radio |
| Structured entry with validation | Form |
| A file | Upload |
| Rich text | WYSIWYG |
| A scanned QR code or barcode | QR / Barcode Scanner 1.0.8 |
Labels and codes New in 1.0.8
| Need | Component |
|---|---|
| A QR code an operator's phone can open | QR Code |
| A barcode for a label, traveller or part | Barcode |
Structure and composition
| Need | Component |
|---|---|
| Group and flow children | Flex Container |
| Several panes in one screen | Tab Container |
| Reuse an authored screen | Embedded View |
| One card per item in a list | Flex Repeater |
Common property groups
Most components share these:
| Group | Typical properties |
|---|---|
| Value | The bound value, and its range where applicable |
| Appearance | Colours, sizes, variants |
| Size 1.0.8 | size on field, button, menu, tab and text widgets |
| Style | A style property accepting custom CSS |
| Behaviour | Enabled, visible, read-only |
| Format | Number/date formatting, units, precision |
Any of them can be bound, which is where most of the expressive power comes from — colour bound to a state tag, visibility bound to a mode, a range bound to a recipe value.
One size scale New in 1.0.8
Inputs, dropdowns, date and colour pickers, uploads, sliders, the toggle widgets, buttons, forms,
both menus, the Tab Container and Text all size themselves from one scale — xs, sm, md,
lg, xl (a 28, 36, 44, 52 or 64 px field). Each has a size property whose default,
Project default, follows the project's Control size in Project settings → Theme, so one
setting resizes every control on every screen and a widget sets its own only where it must differ.
Before 1.0.8 these widgets drew at what is now md. The Control size defaults to sm, sized for
desktop dashboards, so an upgraded project's fields, buttons, menus, tabs and text come out one
step smaller. On a touch panel set Control size to md or larger — 44 px is the touch-target
minimum.
Events
Every widget carries the generic mouse events (click, dblclick, contextmenu, mouseenter,
mouseleave). Input-like widgets add change, submit, focus and blur, and several widgets
add their own — table row events, chart data clicks, tree node selection, video playback, file
management, map marker clicks, scheduler drags, menu item clicks, and scans from the QR / Barcode
Scanner.
Each component page lists exactly the events that component fires and what each one hands to its
actions — for most widget events, in the words the Event Manager itself shows under the event: the
name a script types (row, event, context.point). Changed in 1.0.8
Accessibility and readability
- Do not use colour alone for a safety-relevant state — pair it with shape, icon or text.
- Keep contrast high; a control room is rarely a well-lit office.
- Size touch targets for gloved hands on panel PCs.
- Give bad quality a distinct appearance, so "unknown" never reads as "normal".
Next
Browse a category above, or see the flat component reference.