Introduction
In an increasingly interconnected world, where machines and systems play vital roles in various industries, the need for efficient and seamless human-machine interaction has become mandatory.
Traditionally, Human-Machine Interfaces (HMIs) have been physical interfaces that allow users to control and monitor machines. However, with the advent of advanced technologies and the growing demand for remote operations, virtual HMIs have emerged as a game-changer.
Virtual HMIs are transforming human-machine interactions by leveraging digital interfaces, offering unparalleled convenience, accessibility, and flexibility. Among these interfaces, web-based platforms are playing a main role in reshaping how humans engage with machines. In this blog post, we will delve into the various approaches that enable remote monitoring and interaction with machines specifically through web-based platforms.
Web-based HMIs
Web-based HMIs are virtual HMIs developed using web technology. One of the key advantages of this approach is their platform independence. Users can access the HMI through a web browser on various devices, such as computers, smartphones, and tablets. This flexibility allows engineers, operators, and professionals to monitor and control machines remotely, regardless of their physical location or the type of device they have at hand.
Moreover, web-based HMIs eliminate the need to install specialised software. Users can simply access the HMI by entering the designated web address, eliminating the hassle of software compatibility and updates. This convenience enables seamless connectivity and ensures that the latest HMI version is readily available to users.
Since this blog focuses on web-based HMIs, we will talk about HTML5, CSS and JavaScript, the main technology that underpins all web development today. HTML5 allows for structuring and organising content, while CSS provides styling and visual enhancements. JavaScript is a versatile scripting language that allows you to create dynamic and interactive elements within web applications. Together, these languages form the foundation of modern web development, and can be used to develop web pages as well as web applications and native applications. For this, there are multiple ways to use these languages:
Low code platforms / CSM
These platforms are designed to be beginner-friendly and require little coding knowledge. The visual interfaces and drag-and-drop functionality make it relatively easy for users to create web pages and applications without writing code, although to interact with or make an external API you will need some coding skills. Examples of such platforms are Bubble and Wordpress.
The "traditional" way
This method usually involves writing code from scratch using programming languages such as HTML, CSS, and JavaScript. Developers have full control over the code and can customise every aspect of the web application to suit their needs. While it requires more coding knowledge and experience, this method provides flexibility and allows for more advanced functionalities. Developers can leverage their skills to create unique, tailor-made solutions that meet specific requirements. However, it is important to note that this approach may require more time and effort compared to using low-code platforms or pre-built frameworks.
CSS frameworks
CSS frameworks such as W3.CSS provide pre-designed styles and components that can be easily incorporated into web pages. They offer a range of predefined layouts, typography and UI elements, which significantly speeds up the development process, and also often provide responsive designs from the outset, ensuring better compatibility across multiple devices.
CSS/JS frameworks
CSS/JS frameworks such as Bootstrap and Tailwind CSS combine the advantages of CSS frameworks with additional JavaScript features. They often offer extensive customisation options through configuration files, allowing developers to create unique designs while still benefiting from the convenience of pre-built components. However, working with CSS/JS frameworks requires a higher learning curve than with standalone CSS frameworks.
Advanced frameworks
Advanced frameworks such as SvelteKit and React offer powerful tools and features for creating complex web applications. They follow a component-based approach, allowing developers to break down the user interface into reusable and manageable parts. They also provide robust ecosystems with a wide range of community-developed libraries and extensions. However, working with advanced frameworks requires a steeper learning curve, and can introduce additional compilation steps and overhead.
These interfaces, however, need some sort of mechanism to communicate with the machine in order to interact with it (if they are physically separated). Some ways to accomplish this are:
RESTful APIs
Representational State Transfer is an architectural style that facilitates communication between different software systems. RESTful APIs provide a standardised approach to exposing and consuming data and functionality. Implementing a RESTful API enables seamless integration between the web-based HMI and other back-end systems or services, allowing retrieval of data and control commands.
WebSockets
WebSockets is a communication protocol that provides full-duplex bi-directional communication between a client and a server. It allows real-time data exchange, making it ideal for web-based HMIs that require continuous updates and synchronised interactions between the user and the HMI server, for example if you need continuous and reliable monitoring.
Another option for creating a web-based HMI is to use Node-RED with the Dashboard plugin. Node-RED is a flow-based programming tool that allows users to visually create and deploy applications by connecting nodes. Node-RED Dashboard provides a set of pre-designed user interface components that can be easily customised and organised to build a virtual HMI. These components include buttons, sliders, gauges, graphics, text inputs and more. Node-RED's drag-and-drop interface makes it easy to use and accessible to developers with varying levels of experience.
It enables real-time data visualisation and control, allowing users to monitor and interact with connected devices or systems. By connecting the necessary input and output nodes in the flow editor, data from sensors, machines or IoT devices can be visualised and controlled through the Dashboard interface.
The security of web-based HMIs
Security concerns
Whichever approach is chosen, virtual HMIs travel across networks, whether local, wide area or even the Internet. Strong security measures are essential to protect sensitive data and prevent unauthorised access to machines. When accessing a web-based HMI, communication between the user's device and the HMI server occurs over a network connection, which can introduce potential vulnerabilities if not properly protected:
Encryption and Server authentication
Employing strong encryption protocols, such as TLS, ensures that the communication between the user's device and the HMI server is encrypted and server-authenticated. This encryption prevents unauthorized individuals from intercepting and accessing sensitive information transmitted between the two endpoints. And server authentication verifies that the user's device is connecting to the intended server, reducing the risk of connecting to a fraudulent or malicious server.
User Authentication and Access control
These protocols must also implement robust user authentication mechanisms, such as username/password combinations or multi-factor authentication. This ensures that only authorized users can access the HMI and perform operations or view sensitive data. Plus, adding fine-grained access controls will help restrict user privileges and access rights within the HMI. Different user roles can be defined with specific permissions, ensuring that each user can only perform authorized actions and access relevant information.
Firewalls and Intrusion Detection Systems
Deploying firewalls and IDS systems at the network level can provide an extra layer of defense. Firewalls help filter incoming and outgoing network traffic, while IDS systems monitor network activity for suspicious behavior, promptly alerting administrators to potential security threats.
Network segmentation
Implementing network segmentation can isolate the HMI from other network resources, limiting potential attack vectors. By segregating the network and employing appropriate access controls, the impact of a security breach can be minimised.
Regular Updates and Patches
Keeping the HMI software and underlying server infrastructure up to date with the latest security patches is crucial. Regularly updating the system helps address any known vulnerabilities and ensures that security measures remain effective against evolving threats.
Methods to connect to a web-based HMI
When connecting to a web-based human machine interface (HMI), there are several methods available to ensure secure and efficient communication. These methods include hosting the web application directly on the machine itself, using virtual private networks (VPNs) for secure connections, employing reverse proxies for enhanced security, hosting only a REST API server for lightweight interactions, or using a hosting server to collect and manage data. Each approach offers unique advantages in terms of speed, security and ease of deployment.
Directlly hosting the web application in the machine
For virtual HMIs that require fast data collection and ensure real-time interaction, a viable approach is to host the web application directly on the machine itself. By hosting the web application on the machine, data can be collected quickly and processed locally, minimising latency and dependency on external networks or hosting services. But to access it remotely, it is essential to secure connections to the server. If the web application does not directly support secure connections, you will need other ways to secure it:
Using Virtual Private Networks
By using VPN technology, users can establish secure connections directly to the server hosting the HMI. VPNs create a private network connection over a public network, such as the internet, ensuring that the communication between the user's device and the web server remains secure and protected from potential eavesdropping or interception. Protocols like Wireguard or OpenVPN both support strong encryption methods and user access control. Note that with this method, its still recommended to use another layer of security such as TLS for the communication between the VPN server and the HMI server.
Using reverse proxies
Following the same idea with VPNs, reverse proxies act as intermediaries between users and the server hosting the HMI. They receive incoming requests from users, perform security checks, and forward the requests to the server. This helps protect the HMI server by concealing its identity and filtering out potentially malicious traffic. Reverse proxies can provide additional security features such as TLS termination and user access control.
Hosting only a REST API server in the machine
If you need the HMI server to be lightweight, instead of serving a full web application you can implement a REST API on it. A web interface (local or hosted elsewhere) can then access the REST API to communicate with the machine, allowing the ability to send commands, retrieve data, and monitor the machine's status. If this method is to be used, note that to secure the REST API, you will still need to configure methods such as JWT authentication and TLS encryption. You can implement this manually (with libraries), or you can also use the methods we mentioned earlier, such as VPNs and reverse proxies.
Using a hosting server to collect data
Another option enabled by a lightweight HMI server can be for the virtual HMI to collect and process data from machines or systems and securely transmit it to a designated hosting service. The hosting service acts as a central repository, storing and managing the collected data. Through a well-defined access protocol, virtual HMIs can retrieve stored data from the hosting service as needed. This method has the advantage that there is no need to configure the HMI server, VPNs or reverse proxies, as the hosting provider will provide secure methods.
It is important to note that all the approaches discussed in this blog post can have the HMI application interface available either on the server itself or installed locally on the device used to display the virtual HMI. This flexibility allows users to choose the most appropriate configuration based on their specific needs and preferences.
Possible implementations with Industrial Shields PLCs
M-Duino Family
Industrial Shields' M-Duino devices offer diverse capabilities to handle a wide range of workloads, including web applications. While there may be certain considerations to take into account, such as resource constraints and security requirements, these devices can effectively host lightweight web applications within their capabilities.
When it comes to hosting web applications, it is important to assess the specific needs and limitations of the project. For applications that are within the resource constraints of the device and do not require secure connections, the M-Duino can directly host the web application.
However, for applications that require secure connections, it is recommended to implement a REST API approach. By using a reverse proxy or VPN, secure access can be guaranteed. This approach enables secure communication between the M-Duino device and external servers or clients.
In situations where a hosting service is used, it is possible to establish a secure connection between the M-Duino device and the hosting server through an intermediary, such as a reverse proxy. This configuration enables secure communication and ensures that the connection remains protected.
For this reason, we do not recommend M-Duino for secure connections over Ethernet, as the ESP32 PLC and Raspberry PLC family of products allow this functionality without the need for an external intermediary.
All in all, M-Duino devices offer flexibility when hosting web applications, and given the specific requirements of the project, the right approaches can be implemented to achieve the desired goals.
ESP32 family
In contrast to the limitations of M-Duino devices, ESP32 devices offer robust support for secure connections. With dedicated hardware accelerators and the use of BearSSL (a secure implementation of SSL/TLS designed specifically for embedded devices), these devices can easily handle secure connections.
This flexibility allows ESP32 devices to use all of the above methods to implement web-based HMIs. Whether it is hosting the web application directly on the device or implementing a REST API, ESP32 devices can handle it more efficiently than M-Duinos. In addition, the connection to a hosting service can be made without the need for an intermediary.
This versatility and the built-in security features of ESP32 appliances make them well suited for a variety of virtual HMI applications. Whether you choose to host the web application or implement a REST API, or even use a hosting service, ESP32 appliances provide a reliable and secure foundation for web-based HMI without the need for additional layers of complexity.
Raspberry Pi Family
Finally, the Raspberry Pi family is similar to the ESP32 in that they can also support secure connections and provide robust security features. You can use any other TLS implementation as long as it is compatible with the Linux-ARM ecosystem. It also goes a step further by offering the ability to host VPNs and act as a reverse proxy (e.g. to act as a bridge between the Internet and M-Duino PLCs).
The Raspberry Pi can host complex web applications directly on the device (with further capabilities such as server-side rendering) or implement a broader REST API. And, of course, it can also support any kind of communication to connect to a hosting server to collect data.
Introduction to Virtual Human-Machine Interfaces