HMI software should mix web design and controls engineering to create effective operator interfaces for industrial displays and mobile devices
As mobile devices are more commonly used to manage industrial operations, web-based options for human-machine interfaces (HMIs) continue to grow. Flexible operator interfaces based on HTML5 and JavaScript now enable access from ruggedized industrial tablets and consumer technologies, including wearables, smartphones and tablets from all manufacturers. Recent advances in HMI software provide the ability to create responsive, web-based operator interfaces with multi-touch for intuitive operation. Although this software relies on IT standards for design, it must also be reliable from an industrial standpoint. In addition, these HMIs operate and monitor multi-vendor architectures that require special connectivity measures.
For many years, engineers integrated HMI solely for control panels inside factories. When the use of mobile devices became a possibility, the interfaces were, at first, simply crude interpretations of screens with some alarms and notifications from the plant floor. Multi-touch functionality on an industrial display was a pipe dream for many. Mobile-first design strategies are important for ensuring that the HMI is truly ready for smartphones, tablets and the like. Above all, it is important to consider HMI as a responsive operations tool rather than a series of pages and to select software that fully leverages the user friendliness and power of mobile devices.
TwinCAT enables responsive designs for HMI
The term responsive means that content on HMI screens should adapt different layouts based on the screen’s specifications. This is particularly true for mobile devices. After all, it is difficult to display as much text and graphics at once on smaller screens, and fingers are much less precise navigation tools than a computer mouse or keyboard.
Designing HMIs as dynamic systems with reusable components and themes, rather than static pages built from scratch every time, allows engineers to create responsive interfaces that adapt to each user’s screen size and device type. These concerns should be considered during the design phase, rather than after the design for the “standard” HMI screen has already been finished. It’s also possible to harmonize the mobile touch interface with the industrial displays by selecting control panels and panel PCs that integrate multi-touch functionality. When evaluating HMI software, engineers should ensure that platforms support all of these capabilities for industrial and mobile screens.
Responsive content begins with dividing the layout of the screens into blocks that can automatically reorient depending on screen width. For example, four content blocks may easily display all at once on a computer monitor or mid-size industrial control panel. On a smartphone, however, they should stack on top of each other, allowing the user to see one at a time while scrolling down. Similarly, a menu bar across the top of a wider screen should automatically convert into a drop-down menu icon on a tablet, which is commonly referred to as a hamburger button in mobile interface design.
This does not reduce the amount of content or functionality available, but instead makes it more digestible based on the hardware in use. These principles are familiar to web designers, but for controls engineers, they may not be as apparent.
Are you interested in using TwinCAT HMI to optimize your operator interface? Contact your local Beckhoff sales engineer today.
Daymon Thompson is the Automation Product Manager for Beckhoff Automation LLC.
A version of this article previously appeared in Control Engineering.