HMI, OI

New mobile HMI designs respond to user, device requirements

HMI software should mix elements of web design and controls engineering to create effective operator interfaces for industrial displays and mobile devices of all sizes.
By Daymon Thompson September 16, 2019
Courtesy: Beckhoff Automation

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 enable access from ruggedized industrial tablets and consumer technologies, including wearables, smartphones and tablets from any manufacturer. Recent HMI software advances provide the ability to create responsive, web-based operator interfaces with multi-touch for intuitive operation. Although this software relies on information technology (IT) design standards, it also must 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 using mobile devices became a possibility, the interfaces, at first, were crude interpretations of screens with some alarms and notifications from the plant floor. Multi-touch functionality on an industrial display was a pipe dream.

Mobile-first design strategies are important for ensuring the HMI is 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; software should leverage the mobile device’s power and ease of use.

Responsive HMI designs

The term responsive means content on HMI screens should adapt different layouts based on the screen’s specifications. This is particularly true for mobile devices. It is difficult displaying a lot of text and graphics on smaller screens. 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 platforms support all of these capabilities for industrial and mobile screens.

Responsive content begins with dividing the screen’s layout into blocks that can automatically reorient depending on screen width. For example, four content blocks may 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 referred to as a hamburger button in mobile interface design. This does not reduce the amount of content or functionality available. Instead, it makes the content more digestible based on the hardware used. These principles are familiar to web designers, but for controls engineers, they may not be as apparent.

Responsive, HTML5-enabled HMI screens with reusable components can dynamically rearrange content to fit the device and screen size. Courtesy: Beckhoff Automation

Responsive, HTML5-enabled HMI screens with reusable components can dynamically rearrange content to fit the device and screen size. Courtesy: Beckhoff Automation

Familiar programming environments

While larger companies may have user experience (UX) teams dedicated to mobile interface creation, many factories and machine builder original equipment manufacturers (OEMs) rely on a group of controls engineers for these upgrades. Rather than requiring engineers to learn a new programming environment, some HMI software supports programming via familiar platforms such as the automation software.

This means controls engineers have a shorter learning curve when programming HMIs, in part, because they can manage all machine code and projects in the same place. Graphical editors should allow engineers to build responsive, HTML5 and JavaScript-based HMIs with the same toolset and programming environment used for the machine control programming. They should also provide a toolbox stocked with premade interface components to cover common elements such as buttons, dials, sliders and menu layouts.

HMI software should support programming in a graphical editor familiar to controls engineers, such as Microsoft Visual Studio, and offer standard tools to implement CSS themes and build additional programs with APIs. Courtesy: Beckhoff Automation

HMI software should support programming in a graphical editor familiar to controls engineers, such as Microsoft Visual Studio, and offer standard tools to implement CSS themes and build additional programs with APIs. Courtesy: Beckhoff Automation

Having reusable HMI control components accelerates the design process. This includes various buttons and alarms that perform the same function throughout the system. Engineers also should select software that supports themes for Cascading Style Sheet (CSS) to build new pages without having to create new style parameters for each object. With some software packages, CSS is generated based on theme designs and works in the background to enable faster implementation. For example, colors and styles for alarms, content blocks or body text automatically apply to new pages. If a specific style requires adjustments or updates, these happen in a central location and take effect across the platform.

HMI software also should be extensible. If preset controls cannot be customized enough for specific tasks, then the software should provide an integrated application programming interface (API). Some HMI software allows users to create objects once and store them as reusable extensions to the HMI software for future use. This capability enables engineers to create whatever program they require in C# that can talk to a piece of hardware, another API, an obsolete database, or a custom protocol as long as there is a server connection.

HMI servers for real-world connectivity

Mobile HMI allows operators to complete plant-floor tasks onsite or offsite via a web browser and a secure connection. However, to enable this capability for multi-client, multi-server and multi-runtime concepts, an HMI server must support powerful architectures. Some software supports servers on local devices or in the cloud. As a result, client devices can use communication protocols, such as OPC UA, automation device specification (ADS) or ADS over message queuing telemetry transport (MQTT), ensuring reliable and secure data transmission between devices and the server.

With data binding, engineers can link specific controls in the HMI to field devices. To avoid issues from communicating through multiple servers and technologies, some software packages make connections from virtual buttons on the HMI to actual functions in the programmable logic controller (PLC) via OPC UA, as an adopted protocol for its vendor independence and built-in security mechanisms.

These connections are represented in a tree-browsing menu, which allows users either to browse the memory of the control device or to browse the namespace of an OPC-enabled device. While many HMI platforms require users to complete the time-consuming process of mapping these connections upfront, others perform this function in the background for faster configuration and programming.

HMI servers should support multi-client, multi-server and multi-runtime concepts, providing options for local or cloud-based servers and secure communication protocols, such as OPC Unified Architecture, Automation Device Specification or ADS over MQTT (message queuing telemetry transport). Courtesy: Beckhoff Automation

HMI servers should support multi-client, multi-server and multi-runtime concepts, providing options for local or cloud-based servers and secure communication protocols, such as OPC Unified Architecture, Automation Device Specification or ADS over MQTT (message queuing telemetry transport). Courtesy: Beckhoff Automation

From server architectures to responsive designs, effective mobile HMIs ensure engineers can interface with real systems in an intuitive manner. This capability is extremely important if systems require remote troubleshooting or data access. Mobile HMI has the power to modernize many applications and provide access to live production data anywhere. Because HMI performs such crucial functions, engineers must design and implement it with reliable software that values controls engineering and user experience design best practices.

Daymon Thompson is automation product manager – North America, Beckhoff Automation. Edited by Chris Vavra, production editor, Control Engineering, CFE Media, cvavra@cfemedia.com.

Keywords: human-machine interface, mobile HMI

Mobile human-machine interface (HMI) technology can take advantage of HTML5 and CSS to create more interactive interfaces for users.

Responsive HMI components can speed up the design process for users.

Mobile HMI allows users to complete tasks off-site with a secure connection.

Consider this

What mobile HMI features would help your plant the most?


Daymon Thompson
Author Bio: Daymon Thompson, automation product manager – North America, Beckhoff Automation.