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 3D Color Block
3D Color Block is a Custom Web Control that displays a block-shaped indicator with a shaded front face and side face, giving operators a clear three-dimensional state cue on SCADA and HMI screens. The block color is selected by an integer value from 1 to 7, and each index maps to a color you define. Color changes use a smooth transition, so state changes are easy to follow at a glance.
Key Features
- Seven-step color selection: The colorIndex property selects one of seven palette colors. Out-of-range values are clamped to the range 1 to 7.
- Configurable palette: Properties color1 through color7 define the block color for each index.
- Click event without color change: The Clicked event returns the current color index, so a click can open a detail view or trigger an operator action while the block color stays unchanged.
- Smooth color transitions: Color changes animate gradually instead of switching abruptly.
- Accessible labeling: The ariaLabel property provides the text read by screen readers.
Customization
Adjust the control through its ten properties. colorIndex sets the active color, color1 to color7 define the palette, ariaLabel sets the accessible name, and backgroundColor sets the control background. The setColorIndex method lets scripts change the block color programmatically. All properties can be bound to PLC or HMI tags without writing code.
Use Cases
- Machine or process state indicators showing up to seven operating modes.
- Clickable status blocks that open detail faceplates or operator pages.
- Recipe or product-type selectors on operator panels.
Compatibility
Works with WinCC Unified (TIA Portal) and WinCC V8. When a property must write back to an HMI tag, clear the Read only option for that tag in TIA Portal. Otherwise the control can read the tag but not write to it.
AI-Generated: This custom web control was generated using AI. Test and validate it thoroughly before deploying 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.