Custom States

The Custom States control is a display-only widget used to visualize system states in real time based on external input. It is designed for monitoring—not interaction—and reflects live data from sources such as PLCs via connection strings.

Overview

Custom States are used to visually represent the operational status of connected systems. Whether it’s a simple LED-style indicator or a complex machine diagram, this control passively updates to show current states without allowing user input—making it ideal for supervisory and monitoring interfaces.

Key Features

Display-Only Visualization

No direct user interaction—purely for monitoring purposes.
Eliminates risk of accidental changes to system behavior.

Live System Feedback

Reflects real-time status of machines or processes via variable connection (e.g., CODESYS, MQTT).
Useful for keeping operators informed of critical states.

Flexible State Representation

Visualize multiple states (e.g., active, standby, fault) using icons, text, or color changes.
Can range from simple status lights to animated machine illustrations.

Custom Graphics

Use SVG elements to represent the machine or system layout.
Dynamically update individual elements to reflect system changes.

Use in Supervisory Interfaces

Ideal for control room dashboards and plant overviews where monitoring is key.

Use Cases

Factory Monitoring

Example: Show if a conveyor belt is running, paused, or jammed.

Equipment Status

Example: Indicate the operational state of filling, sealing, or packaging stations.

Safety Monitoring

Example: Visually confirm the state of safety gates or access doors.

SVG ID Reference Table

Use the following SVG IDs to bind system states to graphical elements in the Custom States control:

#	Element	SVG ID
1	Default State	`gState_0`
2	State 1	`gState_1`
3	State 2	`gState_2`
4	State n	`gState_n`

If your interface requires user interaction (e.g., turning something on or off), consider using a Custom Toggle or Custom Slider instead.

Code Snippet Example

<g id="gState_0">
    STATE 0 SVG Code goes here
</g>
<g id="gState_1">
    STATE 1 SVG Code goes here
</g>

Pages