Controls
Controls: Custom Output
The Custom Output control offers maximum flexibility for displaying system information and statuses by allowing users to upload and use their own custom SVG graphics. This control is designed for scenarios where standard visualization elements are not sufficient and a tailor-made representation is required. By connecting the Custom Output control to a variable, the SVG can visually reflect different system states or conditions in real time.
Key Features:
-
Custom SVG Integration:
Users can upload their own SVG files to create completely customized visual representations, such as animated components, complex icons, or status indicators that match their specific application needs. -
Dynamic State Display:
The Custom Output control can be connected to a variable from a PLC or runtime environment. Based on the value of this variable, different states or elements in the SVG can be shown or hidden, enabling dynamic and highly visual feedback. -
Advanced Visualization:
Ideal for advanced use cases where standard controls like gauges or labels aren’t sufficient. Custom Output allows for complex visualizations such as machine schematics, process flows, or multi-state icons. -
Design Consistency:
Because users provide the SVG, the visual style can be perfectly aligned with the rest of the interface, ensuring a cohesive and professional look.
Use Cases:
-
Status Visualization:
Show different machine states (e.g., "Running," "Stopped," "Fault") using custom icons or illustrations that change based on system data. -
Process Diagrams:
Embed visual representations of machines or processes that highlight different components or flows based on real-time data. -
Custom Indicators:
Create tailor-made indicators for unique systems or industry-specific visuals that are not available through standard controls.
SVG ID Reference Table:
# | Element | SVG ID |
---|---|---|
1 | Current Value | value_tspan |
2 | Unit | label_unit_tspan |
3 | Root Class | custom_control_root |
DATA JSON Interface
{
"value": "55555.123456789",
"label1": "",
"label2": "",
"unit": "rpm",
"general": {
"rootClass": ""
}
}
*Live Demo
Todo