Figure 1: HTML5-based user interface for operating and monitoring an industrial production system.

© Inosoft

The growing digitalization of processes means that IT and OT are overcoming their boundaries and growing together. As a result, technologies that have been established in the IT environment for many years are also moving into the OT world. The advance of Ethernet networks and TCP-based communication protocols or the use of industrial PCs as automation platforms are just a few examples of this. Above all, the inclusion of the Internet is ensuring that other technologies that have been established in IT for years are also finding their way into industrial applications. A good example of this is HTML5-based user interfaces(Fig. 1) - these can be used with almost any end device using a web browser, regardless of location and without any further installation. The obvious advantages of this technology have prompted many machine manufacturers to base the local HMI of a machine on this technology.

Table 2 List of libraries that specialize in individual functions.

© Inosoft

The frameworks and libraries are usually developed as part of open source projects. Some of them are backed by large US software companies such as Google (Angular) or Meta (React), which also use the frameworks in their own apps and platforms such as Google Gmail or Facebook.

Requirements of the machine manufacturer

The advantages of using a framework are therefore obvious. However, the concepts and functional scope of the various frameworks differ greatly from one another. This raises the question for machine manufacturers as to whether the use of such a framework for the local HMI also makes sense and which one they should choose.
However, this article will focus less on technical details. Many other, non-technical factors play a role in the decision for or against a technology, tool or framework. Decision-makers should ask themselves the following fundamental questions:

• Which companies are behind it and what interests are they pursuing?
• Which application areas and industries does the approach come from and what are the main requirements there?
• Are my employees capable of providing technical support for the approach?
• Does the approach have a chance of spreading in the long term or is it a short-term trend?

The last question is particularly important in an industrial environment. Websites such as a company website or an online store are frequently updated. Changing to a new framework is not a problem here, as such websites are administered centrally on a web server on the Internet. The situation is different for a machine HMI. The machines are often operated on site in a factory over a very long period of time and must also be maintained there. However, if the original developer community stops maintaining the framework after years in favor of new developments, the machine manufacturer is faced with major challenges.
This also raises the question of the life cycle of a framework. In a blog post on Stack Overflow, a popular developer network, the following statement can be read: "JavaScript frameworks work in cycles. Every six months or so, a new one emerges and claims to have revolutionized UI development. Thousands of developers adopt it into their new projects, blog posts are written, Stack Overflow questions are asked and answered, and then a newer (and even more revolutionary) framework emerges to usurp the throne." (Source: Ian Allen)

Figure 2: Percentage distribution of questions on various JavaScript UI frameworks at Stack Overflow.

© insights.stackoverflow.com/trends

Stack Overflow Trends can be used to examine how demand for each of these technologies has changed over time. Figure 2 shows how interest in some of the major frameworks has changed over time.

Another important point is the complexity and therefore applicability of a framework in your own company. The currently popular frameworks are aimed at software developers who are familiar with the use of the underlying technologies JavaScript, CSS and HTML. For such users, the frameworks represent an immense relief and significantly increase efficiency in the development of an HMI.

However, there is usually no simple tool support for the frameworks in the form of a graphic designer. In mechanical engineering, however, automation engineers with rather broad-based expertise must also be able to create a machine HMI. Tools with low-code or no-code approaches are required here.

The freely available frameworks are therefore very tempting due to their wide range of functions and widespread use, but present machine builders with other major challenges.

Alternative approaches

Figure 3: Architecture of the JavaScript UI framework VisiWinJS from Inosoft.

© Inosoft

JavaScript frameworks from an HMI manufacturer in the automation industry can be an alternative here. Inosoft, for example, provides the VisiWinJS framework as part of VisiWin 7 Web UI. Just like the frameworks already mentioned, VisiWinJS is based purely on JavaScript and can also be used in HTML-based applications. The range of functions is also comparable. It includes ready-made, styleable UI elements as well as various customizable layout templates and navigation functions. A connection to the machine data, e.g. current process values or fault messages, is also integrated. In addition, the specific requirements of a machine manufacturer are also taken into account. These include ease of use without programming knowledge with the help of a graphic designer and guaranteed long-term user support from the manufacturer. As Figure 3 shows, the framework also has an open, modular architecture that enables custom extensions and collaboration with other JavaScript frameworks and libraries.

The choice of framework

The advent of the internet is bringing new technologies to automation technology. HTML5, JavaScript and CSS offer a good opportunity for platform-, device- and location-independent HMI solutions. Development can be made efficient with the help of powerful JavaScript frameworks. However, when selecting the right framework, complex requirements must be taken into account, not just technical ones.

The author: Sven Kröger is Product Manager at Inosoft.

© Inosoft

The generally available frameworks such as Angular or React offer a good basis for this, especially for companies with sufficient in-house software expertise. However, machine manufacturers are often positioned differently in this respect. With VisiWin, Inosoft offers them an approach that is specialized to the requirements of machine builders.