The Web Edition of the GLG Toolkit enables process control and mission-critical applications to be deployed on the Web and mobile devices using JavaScript in either plain HTML or in the React, Angular or Next.js framework. An application can deploy dynamic HMI screens on the web, allowing the operator to monitor and control the process in a web browser in real-time, with no local installation required.

With the Toolkit, dynamic HMI screens are created in an interactive Graphics Builder and deployed on the web using a GLG JavaScript library, which provides the same high update rate and elaborate user interaction as a conventional desktop application.

The GLG Graphics Server for either ASP.NET or JSP is also available for an alternative server-side web deployment of legacy C# and Java applications.

For conventional desktop applications, both the C/C++, C# and Java editions of the Toolkit are also provided.

Point and Click HMI Editor

The Web Edition of the GLG Toolkit includes the GLG Graphics Builder - a graphical editor with point and click interface for creating dynamic HMI and SCADA screens and diagrams. With the Graphics Builder, developers can create elaborate process control and system monitoring drawings, define dynamic behavior and attach real-time data sources. A number of pre-built components and palettes are available for use as building blocks in the Builder. An optional GIS Map component is also available.

The HMI screens use vector graphics and are resolution-independent, which makes it possible to deploy them on a wide range of displays - from large monitors to mobile devices. Drawings created with the Builder can be reused between all deployment platforms - C/C++, C#, Java, JavaScript / React / Angular / Next.js, for both desktop, Web and Mobile deployment.

Web / Mobile Deployment with JavaScript / React / Angular / Next.js

The GLG JavaScript Library is used to deploy the HMI displays on a web page in a browser, on any desktop or mobile device. The library provides an API to load and display drawings created with the Graphics Builder, animate them with real-time data and handle user interaction.

The GLG JavaScript Library implements full GLG run-time functionality present in the GLG C/C++, C# and Java libraries, allowing the same graphical page and programming logic to be shared between the desktop, web and mobile versions of an application.

The React, Angular and Next.js GLG components are provided in the React, Angular and Next.js integration examples and may be used to integrate GLG drawings in the React, Angular and Next.js frameworks. The GLG-related part of the JavaScript source code may be shared between the React, Angular, Next.js and standalone HTML versions of an application, as shown in the GLG demos and examples.

The library uses HTML5 canvas to render graphics and supports all major browsers: Chrome, Firefox, Edge and Safari, as well as mobile browsers. Since all rendering is performed by the browser on the client side, the server load is reduced, making it possible to use low-end embedded web servers for hosting a web application.

Web / Mobile Deployment with AJAX and Server-Side Graphics Server

The GLG Graphics Server may be used as an alternative way to web-deploy legacy applications written in Java or C# on an application server.

The Graphics Server takes care of generating dynamic images of the HMI displays and updating them with the real-time data. The Graphics Server uses the same C# or Java API as the corresponding desktop applications, making it possible to reuse the existing application code and quickly deploy the application on the web with ASP.NET or JSP with minimal changes.

More Information

HMI Configurator for OEM Use

The GLG HMI Configurator, a simplified version of the HMI editor for the end-users, is also available. It may be used for OEM distribution by system integrators and can be extensively customized with custom actions, icons, dialogs, data browser and other custom features.

The HMI Configurator may also be used for developing cloud-based SCADA and monitoring systems, where a customer creates a drawing, specifies real-time data sources and uploads the drawing to a server for a web or mobile deployment.