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 Square Info Card
The Square Info Card is a high-performance Custom Web Control designed for modern industrial SCADA and HMI environments. It provides a sleek, 1:1 aspect ratio data visualization component that combines a premium dark industrial aesthetic with smooth hover animations. This control allows engineers to display critical process data in a compact, organized, and visually appealing format within WinCC Unified and WinCC V8 dashboards.
Key Features
- Dynamic Data Visualization: Real-time display of process information using the title and value properties.
- Industrial Design: Features a modern square layout with rounded corners and smooth transitions for a professional operator experience.
- Interactive Elements: Includes a built-in OnCardClicked event to trigger navigation or detailed pop-ups, and an updateDisplay method for programmatic control.
- Responsive Layout: Maintains a perfect square shape regardless of container scaling, ensuring dashboard consistency.
Customization
The Square Info Card offers 8 configurable properties to match any corporate identity or functional requirement. Users can define the backgroundColor and cardColor for depth, set a specific accentColor for the top highlight bar, and adjust the borderRadius for a sharp or soft appearance. Text styling is fully manageable via titleColor and valueColor, ensuring high legibility against the industrial background.
Use Cases
- Machine Status: Displaying motor speeds, pressure readings, or temperature setpoints.
- Production Metrics: Showing OEE percentages, shift targets, or cycle times.
- Alarm Summaries: Highlighting active fault counts or system health indicators.
Compatibility
This control is fully compatible with WinCC Unified (TIA Portal) and WinCC V8. It supports direct tag binding for all properties and is optimized for both desktop and touch-panel operation.
💡 TIA Portal Reminder: Remember to uncheck the "Read only" option in TIA Portal when linking a tag to a property that needs to be written from the Custom Web Control. If you do not, the CWC will only be able to read the HMI tags and not write to them.
⚠️ AI-Generated: This custom web control was automatically generated using AI. Please test and validate 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.