Use of web technologies in Industrial Shields PLCs - Part 2

Introduction

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.

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.

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: 

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.