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.
What is WebGL?
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.
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.
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.