Current automation systems often use graphical user interfaces based on SCADA. However, requirements in the field of controls are increasing and developments such as Digital Twin are becoming more and more important. The HTML-GUI can then offer a solution. The HTML-GUI can function on any conceivable PLC or PC platform and is also very user friendly. Also, there is no lock-in with a supplier and there is an end to (difficult) migrations of operational systems.

The case

Since the beginning of the 90s, the web browser has experienced tumultuous growth. Whereas the first websites still consisted mainly of static code, with an image here and there, almost every conceivable application has now been built on the basis of markup languages such as HTML and CSS and scripting languages such as JavaScript. Particularly with the advent of web standards (i.e. HTML5 and CSS3), it is also becoming increasingly easy to build websites that function on every conceivable platform and are also very user-friendly. In industrial automation, SCADA programmes are still often used to realise operating interfaces. Control in the browser can provide great advantages for remote operation, linking with Digital Twin, inexpensive test and training systems, widely available programming knowledge, etc.

A GUI based on web technology: the architecture


For example, a GUI developed by Strypes on the basis of the National Tunnel Standard, working in the Google Chrome web browser.

SCADA packages are increasingly making way for an operator interface based on web technology. Strypes has done research into the use of these techniques to realise a GUI. It turned out that in many cases it is quite possible to realise a complete GUI on a web-based basis. An architecture model consisting of five layers has been developed for this purpose:

The application is formed by the actual application code, which consists of code in three forms:

  • HTML – this defines the structure of the graphical user interface: which elements there are and what the hierarchy is between these elements (i.e. a button in a particular pane) and what visual style they use;
  • CSS – this defines the visual style of the elements in the GUI (colour, font, size, position) and special properties of the elements, such as a colour that changes when the operator’s mouse is over it;
  • JavaScript – this captures part of the dynamic behaviour of the GUI. This concerns, for example, actions that take place in the GUI after pressing a button (i.e. hiding part of the screen) and the exchange of data with the underlying framework (presenting statuses and passing on control commands).

The application layer is custom-made for which freely available libraries on the web are available for many standard applications. An example of this is the jQuery library (for JavaScript) from which a lot of standard applications (i.e. animations) can be integrated into the application.

The application framework is the “engine” of the application that provides communication between the actual GUI application and an underlying database. The framework is often an existing software package that can be adapted to meet the needs of the user interface. Communication on this layer goes in two directions:

  • From GUI to database – in particular or control commands and things like suppressing or confirming alerts;
  • From database to GUI – this is where communication takes place of, among other things, the current status of installations and any active alerts.

The database layer provides a sort of “buffer” between the user interface and the underlying control platform, storing statuses and commands. The current value of each state variable and signal is stored. The application framework ensures that every change in a state variable is also immediately presented on the user interface. As a result, performance requirements are no longer an issue.

The communication layer takes care of the exchange of information between the database and the underlying control platform, for example via a standard such as OPC-UA and a polling mechanism, whereby the control platform is checked a number of times per second for changed information.

The advantages

The transition from the traditional SCADA packages to a GUI based on web technology brings a number of advantages:

  • Speed – web technology is based on an expectation among users that an input is often converted into an output within milliseconds (think of the reaction speed of controls on websites that are often instantaneous). As a result, changes in the underlying control hardware often result in a change on the screen within milliseconds;
  • Stable base that is constantly evolving – billions of web applications have been built since the commercialisation of the World Wide Web in the mid-1990s. Technology is still improving on a daily basis;
  • Knowledge is widely available ­- where expertise for certain SCADA packages is sometimes limited to a few people, there is a very broad market for web developers who can maintain and improve GUIs;
  • Graphic possibilities are virtually unlimited – especially since the advent of HTML5 and techniques such as WebGL, the graphic possibilities of web applications have grown enormously. Ranging from simple effects such as coloured scrollbars and sliding faceplates to complete 3D rendering of objects, all supported directly in the browser;
  • Wide range of testing options – In SCADA packages, testing graphical user interfaces is often a vulnerable, time-consuming and expensive process. The use of browsers paves the way for test tools such as TestComplete, Selenium and SoapUI. Visual testing is carried out using fully automatic scripts, which greatly reduces the costs of projects where a lot of regression is used.

Strypes makes a difference

Within our vision, an organisation that really makes a difference is aimed at serving customers as well as possible and ensuring that employees develop to the maximum and feel involved in the company. Growth and profit for the organisation are derived from growth and profit for our clients and our employees, not a goal in itself. Wondering how Strypes can help your organisation improve? Get in touch.

CONTACT BY E-MAIL +31 (0)343 769024