Web HMIs are one of the most modern forms of HMIs available on the market, as they offer some advanced features that are not easily possible using traditional HMI systems:

responsive design, i.e. automatic repositioning and rescaling of components depending on the device (size) used: PC, tablet, smartphone, …
high end design and styling features via CSS, creating unique and invividual HMI styling
multi-user system with multiple users logged in at different locations with completely different parts of the HMI visible on the corresponding screen (in comparison to previous solutions such as VNC)
easy and secure accessible everywhere on the planet via a network or internet connection (via a secure VPN for example)
touch gestures: swiping, pinch to zoom etc.
platform-independent, can be accessed in any modern browser that supports HTML5

These features also bring with them certain new responsibilities and challenges you need to be aware of. So if you are asking “What are the pitfalls when using Web HMIs?” and “What do I have to know before starting with my first web HMI?” these questions should be answered here.

This article is a collection of hints and tips that we have learned from customer projects that should give you a quick start with your own web HMI.

Mobile Devices

It is very impressive to watch responsive websites on a tablet when you turn it 90° and it is also beautiful to see the same website look differently on a smartphone than on a desktop PC.
But it is not that easy designing completely responsive applications and implementing them as HMIs. WebIQ supports several options for creating responsive layouts via media queries, flex layout, relative sizes or combinations thereof.

Besides extensive web and automation expertise Smart HMI has a lot of experience in creating responsive HMIs and we support you within the scope of our Accelerator Packages during the implementation of your HMI. We start the project together with you based on your requirements and empower you step-by-step through knowledge transfer so that will become a WebIQ expert yourself and can continue extending your HMI and creating new HMIs on your own.

Touch Gestures

With traditional HMIs you were mostly restricted to pressing buttons and entering text. With web HMIs you can use swipe gestures to move through several screens using your finger (for example with our Swipe Panel widget) which might be more effective and intuitive than using buttons to move between pages – and then again people are used to this nowadays.
Using your fingers to “pinch to zoom” like you know from zooming into photos on your smartphone is also something web HMIs can be capable of – like our Trend Display widget where you can zoom into the graph by using your fingers.

Open-Source Code Integration & Development Utilizing Web Technology

One of the major advantages of a web HMI is that you can – at least with our system WebIQ – integrate open-source JavaScript and CSS libraries easily.
Web technology has these advantages:

JavaScript and CSS are easy to learn and it is easy getting help online and finding tutorials and courses
Readily available JavaScript libraries like e.g. ChartJS can be integrated and used with WebIQ easily
The HMI can be extended by writing custom CSS and JavaScript code

Multi-User System

When compared with traditional non-web HMIs where only one user could be logged into the HMI at the same time things are a bit different with these new multi-user features:

As multiple users can be logged in at the same time it does not make sense to have a PLC item that reflects the logged-in user
When some event occurs in the HMI that requires user action keep in mind that when you show a message on the HMI it will be shown on all devices at the same time – so you should also think about hiding the message or dialog on all interfaces if it has been handled on one device.
So you should always keep in mind that you do not only have one HMI but multiple HMIs open at the same time – unless you really only display the HMI on a display at the machine only and do not offer remote access via the network.
Having different users and user groups to restrict access to certain items or elements of the HMI might also be something you wish to think about.

Network Security & Encryption

“With great power comes great responsibility” – and depending on how you want to access your HMI – only local on the machine, at the whole location where the machine is located or from around the world via the internet – each of these decisions should be evaluated carefully and you might want to ask yourself these questions:

Where should my web HMI be accessible?
Do I want the HMI to be accessible via the internet?
Why should I use a VPN (Virtual Private Network) instead of connecting the HMI directly to the internet?
Do I want users to be able to control the machine when they are not in the proximity of the machine?
What are TLS certificates and how do I use them with my HMI for HTTPS connectivity?

Fortunately, using TLS certificates for encrypting the HTTPS connection is really quite simple in WebIQ.

Bottom Line

Web technology is different so it really helps to utilize the full power of this new technology to elevate your HMI to new heights. So it might be really helpful
to not try to migrate your current HMI directly to the web but instead to think about how to use certain concepts and technologies to actually improve the user experience at the same time. Instead of adding a simple screen and two buttons on the left and right side to move between screens why not utilize swiping?
Think different!

And of course we are here to help – besides providing our Web HMI toolkit WebIQ we also offer these services:

consulting regarding all aspects of HMI design, user interfaces (UI) and user experience (UX)
HMI creation from basic support to creating custom widgets to full HMI project development from start to end – depending on your needs

So why not download the free version of WebIQ now and start creating your own web HMI?

Let’s start together into the future of HMI!