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.

Siemens IX

The industrial-grade design system ensuring consistency and compliance.

Angular v16+

Robust framework for managing complex state and large component trees.

RxJS

Reactive programming to handle high-frequency data streams from the PLC.

WebSockets

Full-duplex communication for real-time status updates.

TypeScript

Strict typing to prevent runtime errors in critical control paths.

Docker

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.