Case Study
Modernizing Climatix Touchpanel UI
Bringing industrial building automation interfaces into the modern era with Siemens IX and Angular.
Legacy vs. Modern Expectation
Operators accustomed to smartphones were frustrated by resistive touch screens and clunky menus.The Challenge
Our client, a leading HVAC manufacturer, was struggling with a legacy HMI (Human-Machine Interface) running on 7-inch touch panels. The existing interface was slow, difficult to navigate, and required extensive training for new operators. The goal was to modernize the UX without replacing the underlying Climatix hardware.
The Context
Industrial environments demand high reliability. The new interface needed to communicate directly with the PLC via WebSockets, handle real-time data from hundreds of datapoints, and run smoothly on constrained hardware resources.
The Solution
A responsive, touch-first interface that bridges the gap between web tech and industrial hardware.Architecture & Design
We implemented a decoupled architecture. The frontend, built with Angular and Siemens IX, runs as a Single Page Application (SPA) directly on the panel. It communicates with the controller via a localized WebSocket API, ensuring near-zero latency typical of native industrial apps.
Siemens IX Adoption
By leveraging the Siemens Industrial Experience (IX) design system, we ensured that the application not only looked professional but also adhered to strict accessibility and usability standards required in the field.
Technology Stack
Chosen for performance, maintainability, and longevity.
The industrial-grade design system ensuring consistency and compliance.
Robust framework for managing complex state and large component trees.
Reactive programming to handle high-frequency data streams from the PLC.
Full-duplex communication for real-time status updates.
Strict typing to prevent runtime errors in critical control paths.
Containerized build environment for reproducible deployments.
Impact
Key Results
40% Faster Startup
Optimized bundle sizes and lazy loading reduced the "time to interactive" significantly on cold boots.
15% Reduction in Errors
Clearer, larger touch targets and guided workflows helped operators avoid common configuration mistakes.
Unified Codebase
The same application runs on the physical panel and remote web browsers, cutting maintenance time in half.
Scalable Architecture
New features can be deployed OTA (Over The Air) without requiring firmware updates for the controller.
Lessons Learned
Every project is a learning opportunity. Here is what we took away from this implementation.Touch Targets Matter
Industrial gloved usage requires significantly larger touch areas than standard consumer web apps.
Network Resilience
Local WebSockets are fast but can disconnect. Robust reconnection logic is non-negotiable for control systems.
Performance on Low-End Hardware
CSS animations and complex shadows must be used sparingly on embedded browsers to maintain 60fps.
Facing a similar challenge?
Check out our Services page or get in touch to discuss how we can help modernize your industrial software.