Grid Layout | Custom Web Control | WinCC Unified & V8

Custom Web Control

About Grid Layout

Grid Layout is a robust Custom Web Control (CWC) engineered for modern industrial SCADA environments. It provides a highly flexible container for organizing HMI elements into a structured, responsive grid. Designed for high-performance visualization in both WinCC Unified and WinCC V8, this control allows engineers to create clean, modular interfaces that adapt to any screen resolution without manual repositioning.

Key Features

• Dynamic Grid Architecture: Define complex layouts instantly using rowCount and columnCount properties.
• Interactive Event Handling: Build responsive user journeys with built-in CellClicked and CellHovered events that trigger SCADA scripts or screen changes.
• Programmatic Control: Use the refreshLayout method to force UI updates or highlightCell to direct operator attention to specific process areas during alarms or critical events.
• Data-Driven Content: Populate the entire grid dynamically through the cellData array property, supporting icons, labels, and indices.

Customization

The Grid Layout offers 13 adjustable properties for total visual control. Operators can fine-tune the gridGap for optimal spacing, while designers can match corporate identity using backgroundColor, cellBorderColor, and accentColor. Visibility toggles like showIcons and showLabels allow for a minimalist or information-rich display depending on the operational context.

Use Cases

This control is ideal for multi-pump station overviews, production line status dashboards, modular navigation menus, and large-scale sensor matrices where structured data visualization is critical for situational awareness.

Compatibility

Fully compatible with WinCC Unified (TIA Portal) and WinCC V8. The package includes all necessary configuration files for seamless integration into your industrial automation projects.

⚠️ AI-Generated: This custom web control was automatically generated using AI. Please test and validate all functionality before deploying in a live production environment.

⚠️ 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.