In the realm of industrial automation, Human-Machine Interfaces (HMIs) play a crucial role in facilitating efficient control and monitoring of complex systems.
Traditionally, Supervisory Control and Data Acquisition (SCADA) systems have been the go-to solution for industrial HMIs.
Today it’s possible to create industrial HMIs using web technologies, thanks to Javascript & Typescript languages, creating stunning UIs using React or Vue libraries. The application will, literally, react to multiple machinery inputs and should render the most appropriate data to the machine operator. Due to the high complexity of this machinery, it is advised to use a state manager to handle the state of the application. We use React Redux, in the Redux Toolkit implementation which follows the base principles of Flux and gives us a plain and natural syntax to achieve our goals.
Let’s delve into the key differences between current SCADA interfaces and new HMI interfaces developed with web technologies, specifically leveraging React.
Legacy HMIs: SCADA systems
SCADA (Supervisory Control and Data Acquisition) interfaces are a type of software application used in industrial automation to monitor and control complex processes or systems. SCADA systems typically consist of a central server or software platform that gathers data from various sensors, equipment, and devices distributed throughout an industrial environment. The data collected by SCADA systems is presented to operators through a graphical user interface (GUI), which allows them to visualize real-time data, issue commands, and make informed decisions.
SCADA interfaces have been widely used in industrial settings for several decades but today they are considered “old” due to:
- Legacy Architecture: they have a legacy architecture that relies on proprietary hardware and software. This architecture often lacks flexibility, making it difficult and expensive to adapt to evolving technological advancements.
- Limited Customization: interfaces are often rigid and provide limited customization options. Modifying the interface layout or incorporating new features typically requires significant effort and specialized expertise.
- High Costs: these systems can involve high upfront costs, including licensing fees, hardware infrastructure, and maintenance expenses.
- Lack of Modern UI/UX: interfaces tend to have dated user interface designs that may not provide an optimal user experience. They may lack the responsiveness, interactivity, and visual appeal expected in today’s technology-driven world.
- Integration Challenges: integration with other technologies, such as cloud platforms, IoT devices, or data analytics tools, can be complex and require additional development efforts.
While SCADA systems continue to be widely used in various industries, the emergence of web technologies and frameworks like React offers a new approach to industrial HMIs, addressing some of the limitations associated with traditional SCADA interfaces. By leveraging web technologies, industrial HMIs can benefit from improved user experiences, customization options, cross-platform compatibility, real-time data visualization, and easier integration with other systems and data sources.
What to consider while creating new HMIs
User Experience (UX)
The user experience difference between a SCADA system and a web interface is significant, primarily due to the advancements in web technologies and the flexibility they offer:
- Modern and Intuitive Design: web interfaces developed using technologies like React prioritize modern design principles, offering intuitive and visually appealing layouts. They leverage industry-standard user interface components, responsive design, and user-centric design practices. This results in a more engaging and user-friendly experience for operators.
- Dynamic Data Visualization: using web technologies it is easier to show charts, graphs, and real-time dashboards that efficiently present complex data in a clear and meaningful manner. This allows operators to gain insights quickly and make informed decisions based on the presented information.
- Customization and Personalization: unlike SCADA interfaces, web ones offer greater customization and personalization options. With React’s component-based architecture, developers can create modular UI components that can be easily rearranged, added, or modified according to specific requirements.
- Familiar Web Navigation and Interaction Paradigms: web interfaces leverage common web navigation patterns, making them more familiar to users who are accustomed to browsing the internet. Operators can navigate through the interface using menus, tabs, and search functionalities, making it easier to locate specific information and access relevant features.
Hardware Performance
Real-time hardware performance is another extremely relevant concern; particularly within industrial settings. One potential challenge here involves the embedded nature of many HMIs. The hardware is very different from the one we’re used to on our laptops: HMI has a dedicated IPC (Industrial PC) with limited power and memory. IPC limited resources are shared between all the applications allowing an HMI to properly work: backend, frontend, PLC outputs, peripherals, faults, and monitoring systems.
Data Processing and Visualization
How will the HMI process data and display this information to the end user? Not only does an HMI need to collate and interpret data, but it must be able to display these metrics to the operator so that the appropriate actions can be taken at the right times. Critical cases can be production errors which should be immediately notified to the operator, due to machinery possible damages or, even worse, operator injuries.
Reliability
Reliability is of paramount importance in an industrial context: these systems often involve critical processes, machinery, and infrastructure that require uninterrupted operation to maintain productivity, safety, and efficiency.
Why use React to build an HMI
React has emerged as one of the most popular JavaScript libraries for building dynamic and interactive user interfaces.
These are the key points of the React library:
- Component-Based Architecture: at the core of React lies its component-based architecture. Components are reusable, self-contained building blocks that encapsulate the UI and its behavior. React encourages the creation of modular components, allowing developers to build complex interfaces by composing smaller, manageable parts.
- Rendering: React can render blazing fast a UI using Virtual DOM and avoiding unnecessary re-renders. Re-renders cause browsers to recreate the entire DOM section if an element changes.
React utilizes a Virtual DOM (a lightweight representation of the DOM) for efficient rendering and updating of UI elements. When changes occur in the component state or props, React performs a virtual diffing process to identify the minimal set of updates required; this is often referred to as reconciliation.
These updates are then efficiently applied to the real DOM, minimizing expensive DOM manipulations and enhancing performances.
- State and Props: State and Props are two key concepts in React for managing data within components. State represents the internal mutable data of a component, allowing it to keep track of changes and trigger re-renders. Props, on the other hand, are read-only properties passed to a component from its parent component.
- Unidirectional Data Flow: React follows a unidirectional data flow pattern, also known as “one-way binding.” Data flows from parent components to child components through props, while child components communicate with parents through callback functions.
State Management
State management includes monitoring specific component conditions to re-render components and handle changes to our application in a simple and straightforward manner.
Multiple state managers are available for web applications like: Context API, Redux, MobX or Recoil.
React Redux which automatically implements performance optimizations and in our opinion is one of the best state managers if you’re using React.
It provides a predictable and centralized approach to managing state in React applications, following an unidirectional data flow pattern, storing the application state in a single, global store.
Components can dispatch actions to modify the state, and changes propagate through reducers that update the store. Redux offers advanced features like middleware for asynchronous actions, time-travel debugging, and a robust ecosystem of extensions.
When to use React Redux:
- You have large amounts of application state that are needed in many places in the app
- The app state is updated frequently
- The logic to update that state may be complex
- The app has a medium or large-sized codebase, and might be worked on by many people
- You need to see how that state is being updated over time
Conclusions
In conclusion, designing innovative HMIs with web technologies, particularly utilizing React and Redux, brings a new era of possibilities for industrial interfaces. The combination of these powerful tools allows developers to create HMIs that not only provide real-time monitoring and control but also offer enhanced user experiences and flexibility.
The marriage of web technologies, React, and Redux, enables the creation of innovative, user-friendly, and scalable interfaces that empower operators, optimize industrial processes, and propel industries into the future of automation and digitalization.
Evolutions could be the remote access, allowing operators to monitor and control industrial processes remotely, or a tracking system, to highlight which sections are the most used to improve the overall experience.
Next steps include an “adaptive HMI” which organizes the interface depending on the current scenario, bringing to the foreground the most important information and minimizing the others.
