Components
The visualization library ships 53 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 — 14
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 · Radio · Slider · Switch · Textarea · Upload · WYSIWYG
Display — 18
Read-only presentation of values, documents, media, maps and structures.
3D Viewer · File Manager · Gauge · Icon · Image · Linear Scale · Map · Markdown · Moving Analog Indicator · PDF Viewer · Progress · 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 |
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 |
| 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.
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.
Each component page lists exactly the events that component fires and what each one hands to its actions.
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.