Developing Industrial Web HMIs in a modern, responsive and efficient way
Cross-platform, responsive and high-performance – web technologies enable the most advanced form of HMIs currently available on the market. In this interview with Andreas Beu, Managing Director of Smart HMI GmbH, we will show you how you can efficiently create industrial Web HMIs – without any HTML programming skills. He will introduce you to the vendor-independent visualization system WebIQ, which combines the functionalities of an HMI / SCADA system with the advantages of web technologies such as HTML5 & Co.
You from Smart HMI offer WebIQ, an HMI visualization solution for machine building and automation. What exactly is WebIQ?
Andreas: WebIQ is a future-oriented and vendor-independent visualization system with which machine and plant manufacturers create industrial Web HMIs. It combines functionalities of an HMI / SCADA system with the advantages of modern web technology.
How does WebIQ help machine and plant manufacturers develop modern HMIs?
Andreas: For machine and plant manufacturers, the HMI is the window to their products. Our experience shows that, on the one hand, they need a visualization system with comprehensive design options and versatile functionality to create modern HMIs. On the other hand, they must have a handle on the effort required to develop, introduce and maintain a modern HMI. To put it bluntly: machine and plant manufacturers have high demands on their HMI, but very tightly limited resources – actually a contradiction.
As tool manufacturers, we face this contradiction. That's what we did, and we offer a unique solution with WebIQ. On the one hand, there is our engineering solution – WebIQ Designer – with its integrated and intuitive WYSIWYG (What You See Is What You Get) layout editor for the web HMI. This is aimed at project planners, application engineers and automation technicians. These are generalists with broad experience in electrical automation. Thanks to the designer, this target group can realize and maintain modern web HMIs without any HTML programming knowledge at all. To accomplish this, they use prefabricated modules and templates, which they drag and drop into the layout editor and configure accordingly. WebIQ provides a variety of building blocks and templates, which we are continuously expanding. But often the appetite comes with eating: I.e., our customer has a need for very individual functions or components with which they can stand out from the competition or link the web HMI to a very specific cloud service. And this is where the other side of WebIQ comes into play: WebIQ is also a development framework with extensive interfaces for customer-specific extensions. This is aimed at software developers. It allows the latter to create a completely individual modular system – the "custom package". He can integrate this at 100 % in the WYSIWYG layout editor. This is a special feature of WebIQ and enables project planners, application engineers and automation technicians to subsequently use these extensions in WebIQ Designer.
User experience is also becoming increasingly important in an industrial context. How does WebIQ live up to it?
Andreas: User experience is the positive user experience that the user experiences when interacting with a web HMI. The user experience is the business card that contributes a lot to a positive image of a machine and plant manufacturer. At WebIQ, we take account of this. We enable our customers to develop unique and easy-to-use web HMIs with WebIQ – or in short: HMIs that inspire. That is our claim.
As I mentioned before, WebIQ comes with a variety of pre-installed components and templates – our IQ widgets such as buttons, display and input elements, menu controls, alarm and trend value displays, etc. We designed these together with UX experts from UID. In addition, each widget consists not only of the actual control element. It includes caption, icon and unit at the same time, as well as a variety of styling options. The different variants can be selected by simply switching. With a few clicks, the widget is created, looks and feels good right away. For me, that's user experience.
How do customers benefit from the cooperation between Smart HMI and UID, especially in this respect?
Andreas: Smart HMI and UID can offer a comprehensive joint service around the design and development of unique web HMIs: from concept & design, development of components and templates to turnkey realization of the HMI and integration with existing automation. Customers receive everything from a single source – from a well-coordinated team. Machine or plant manufacturers benefit from the collaboration, especially when they want to create a customized web HMI with an individual design and customer-specific extension.
WebIQ is based 100% on web technology? Why do you rely on HTML5? Why is HMTL5 the technology of the future for mechanical engineering? What are the advantages regarding other UI high-level languages like .NET etc.?
Andreas: Web technology is based on various standards, such as HTML5, JavaScript, CSS, SVG and many more. Many well-known companies are driving the development of these technologies, but they do not own the technology. In turn, .NET is owned by Microsoft. Users of .NET become dependent on the provider to a certain extent. At WebIQ, we rely exclusively on standard technologies. Besides various web technologies, this is the industrial communication standard OPC UA, which we support by default. This way, we ensure our customers long-term added value with their web HMI. Besides, modern web technology is – in our opinion – one of the most powerful and dynamic development platforms you can find today. Practically, there is nothing like impossible in web technology. In the worldwide web community, dedicated developers have already developed answers to many questions. This has led to the fact that – and we are not alone in this opinion – modern web technology is now seen as the key to digital transformation. And another important strength must not be forgotten: Web HMIs are platform-independent and run on almost any system! An HMI based on .NET cannot accomplish that.
What is the importance of a responsive design in this context?
Andreas: The fact that a web HMI can technically be displayed anywhere a web browser is running has already become common knowledge. Thanks to responsive design, the same web HMI automatically adapts to different screen sizes and orientations – depending on whether it is displayed on a full-HD touch screen, a 10'' tablet or a smartphone.
Our experience with various machine and plant manufacturers shows that this functionality is interesting for many companies for very different reasons: One reason is the ability to integrate mobile smart devices, such as tablets and smartphones. Another motivation is more flexibility in choosing touch panel suppliers. Here, so-called web panels – often Linux-based with a pre-installed web browser and low prices – are on the rise.
WebIQ provides a variety of features for responsive design such as the smart layout container with the powerful flex design, responsive widgets and device-dependent style functions. However, the responsive design is very unfamiliar for many machine and plant manufacturers at first. This is because they have to move away from established procedures such as the fixed positioning of controls at an xy position when implementing the HMI. In particular, coming up with a concept for responsive behavior is a challenge. Here, collaboration with experienced UI experts like the colleagues at UID helps to overcome initial hurdles and to develop an initial concept and design.
What advice do you have for companies whose applications are currently developed in .NET, Qt etc.? When does switching pay off? Can WebIQ facilitate a switch, if so, how?
Andreas: Switching technology from .NET or Qt to Web, for example, is always a tricky task. Companies have previously invested a lot in a different technology. And I'm not just talking about development per se. Companies have built an entire toolchain for this and have hired and trained employees specifically for this technology. Moreover, there was all the experience that had to be gained, all the detours that had to be taken until the development with a particular technology was stable. It’s perfectly clear: Switching from one technology to web technology is a challenge.
Therefore, companies should always consider in advance what they can "save" from an existing development into web technology. The colleagues from UID have created a wonderful whitepaper, especially for the topic of HMI development, which provides good assistance in this regard. In addition, it is important that companies always understand the changeover as a process. Rarely does the switch succeed in one big step. In my opinion, taking many small steps is a much better strategy. And last but not least, I would like to see a stronger doer attitude – as is common in the USA, for example. The most important thing is to simply start and gain experience.
Interview partner
Andreas Beu is Managing Director and Founder of Smart HMI GmbH. He is responsible for business development and customer support. The graduate engineer is an expert in the design of user-friendly and mobile HMIs for embedded systems, machines and plants as well as for user interfaces of automation systems. Before that, he worked in various positions at UID, among others, for more than thirteen years. Andreas Beu is active in the “IT@Automation” forum of the German Engineering Federation (VDMA). (VDMA) and heads various working groups there.
More
- Whitepaper: How to migrate software to HTML5
- Connected Industry: Entering Industry 4.0
- UID News: UX as a key to success
- UID News: Consistently intuitive – success factors for your HMI
- UID News: Hello, future – dimensions of a modern HMI
- UID News: Design systems: higher consistency & efficiency in design and software
- UID News: Frontend: Which UI technology for your software project?
- More about Smart HMI and WebIQ