Use of web technologies in Industrial Shields PLCs - Part 2

Part 2 - Implement 2D and 3D interactive graphics with WebGL API (and more!)
July 11, 2023 by
Use of web technologies in Industrial Shields PLCs - Part 2
Boot & Work Corp. S.L., Joan Vilardaga Castro


In today's ever-changing landscape of industrial automation, there is a growing interest in incorporating new web technologies into traditional Programmable Logic Controllers. The potential of utilizing frameworks, adding libraries for extra capabilities, and integrating databases into these systems presents exciting possibilities for enhancing functionality and efficiency.

In this two-part blog series, we will explore the practical applications and benefits of leveraging these web technologies in industrial PLCs, opening up new avenues for innovation and improved industrial processes.

Use of web technologies in Industrial Shields PLCs - Part 2

What is WebGL?

What is WebGL?

WebGL is a JavaScript API that enables high-performance 3D and 2D graphics rendering within web browsers. It provides a way to interact with the graphics hardware of a user's computer or device, allowing developers to create rich, interactive, and visually appealing web applications without requiring additional plugins or software installations. It is based on the OpenGL embedded systems standard, which is a widely-used graphics API for mobile devices and embedded systems. It brings the power of OpenGL to the web platform, making it possible to create complex 3D scenes and visualizations that can run directly in a web browser.

When combining WebGL with SvelteKit, developers can create reactive web applications that leverage the power of WebGL for impressive and interactive graphics.This approach gives a lot of ways to easily bind application data to WebGL graphics and update them in real-time as the data changes. This allows for interactive visualizations that respond to user input or dynamic data sources. SvelteKit's reactive nature can ensure that changes in the underlying data automatically trigger updates to the WebGL graphics, providing a smooth and seamless user experience.

In this blog post, you will explore how to integrate the 3D rotating cube example into your Svelte web app and connect it with ESP32. Our goal is to integrate Svelte into your PLC with dynamic 3D graphics that can be controlled and monitored through ESP32, enabling you to optimize your industrial processes.

WebGL Example: 3D Cube

This blog has followed an existing example from Mozilla's website that showcases a 3D cube. By utilizing this example, we can streamline the process of integrating WebGL into our project. The cube example provided by Mozilla serves as a helpful starting point, offering a foundation for incorporating 3D graphics capabilities into our web application.

First of all, you have to install glMatrix, a vector and matrix library for high performance graphics. You can do so with the npm command (npm install gl-matrix).

Next, you will create a folder named "lib" inside the "src" directory of our Svelte project. In Svelte, the "lib" folder is typically used to store client-side scripts. You will place the WebGL scripts within the "lib" folder, and the "Firefox.mp4" file can go inside the "static" folder.

WebGL file: 

WebGL Example: 3D Cube

Sending the web app inside the PLC

Sending the web app inside the PLC

On our webasite, you can also find a tutorial explaining how to store files in the flash memory of an ESP32 to serve a web page. However, there are situations where using the SD card becomes more advantageous, like if you are serving larger applications or when the flash memory has limited space remaining.

To begin with, ensure that you have built the latest version of your web app using the command  npm run build. This step is necessary to have the most recent changes available for copying. 

Next, you will need to insert the SD card into your PC. Format the SD card to the FAT32 file system. Once formatted, create a folder on the SD card named "www". This folder will serve as the root directory for hosting your web content. Now, navigate to the "build" directory within your Svelte project folder. Copy all the contents of this "build" directory and paste them into the "www" folder on your SD card.

Extra: Use any JavaScript library available

This blog post delves into the world of WebGL, exploring a bit of its extensive capabilities. While WebGL can be challenging to work with without additional libraries, it offers tremendous potential for creating rich and interactive web applications. 

However, it is important to note that Svelte is not limited to WebGL alone. In reality, Svelte can seamlessly integrate with any JavaScript library, regardless of its purpose, enabling the development of truly unique web applications.

bulb photography

For instance, when building data visualization components, you can leverage libraries like Chart.js or μPlot to create informative and performant charts. When it comes to styling and UI frameworks, Svelte can work harmoniously with popular front-end frameworks like Bootstrap by incorporating the CSS and JavaScript files into your project. And even then, Svelte's flexibility extends to working with specialized libraries tailored for specific use cases like, for example, currency.js, that offers powerful tools for formatting, converting, and performing calculations with different currencies.

First part -  Use a web framework to create a complex web application >>

​Search in our Blog

Use of web technologies in Industrial Shields PLCs - Part 2
Boot & Work Corp. S.L., Joan Vilardaga Castro July 11, 2023
Share this post

Looking for your ideal Programmable Logic Controller?

Take a look at this product comparison with other industrial controllers Arduino-based. 

We are comparing inputs, outputs, communications and other features with the ones of the relevant brands.

Industrial PLC comparison >>>