Made with the HMIx AI Generator
This resource was created with AI on ai.hmix.tech. Describe what you need and generate your own HMI controls in minutes — free.
Custom Web Control
About Progress Bar
Progress Bar is a Custom Web Control for SCADA and HMI screens that displays a process value as a horizontal bar. The fill grows proportionally between a configurable minimum and maximum, so operators can read the level of a process at a glance. The control runs on WinCC Unified (TIA Portal) and WinCC V8 and is bound to PLC tags through its properties.
Key Features
- Proportional fill: The bar fills according to processValue relative to the range defined by minValue and maxValue.
- Range labels: The minimum and maximum values appear below the bar at the left and right ends.
- Limit events: ValueReachedMax fires when the process value reaches or exceeds the maximum, and ValueReachedMin fires when it reaches or falls below the minimum.
- Runtime methods: setRange updates both limits at once, and setProcessValue updates the fill level from a script or tag change.
Customization
Appearance and range settings are defined as properties in the engineering tool, with no coding required. Set barFilledColor and barUnfilledColor to match your color scheme, use textColor, textFont and textSize to style the min and max labels, and choose backgroundColor for the control surface. Bind processValue, minValue and maxValue to PLC tags for live operation.
Use Cases
Ideal for tank level indicators, pressure and flow monitoring, batch progress displays, and operator panels where a quick visual reading of a process value is needed.
Compatibility
Works with WinCC Unified (TIA Portal) and WinCC V8. Includes full documentation with installation instructions for both platforms.
TIA Portal note: When linking a tag to a property that the Custom Web Control must write, uncheck the Read only option in TIA Portal. Otherwise the control can read the HMI tag but cannot write to it.
AI-generated: This custom web control was generated automatically using AI. Test and validate it thoroughly before use in production environments.
⚠️ AI-Generated: This custom web control was automatically generated using AI technology. It may contain errors or unexpected behavior. Users are responsible for testing and validating before using in production environments.