Introducción
En el cambiante panorama actual de la automatización industrial, existe un interés creciente por incorporar nuevas tecnologías web a los controladores lógicos programables tradicionales. La posibilidad de utilizar marcos de trabajo, añadir bibliotecas para funciones adicionales e integrar bases de datos en estos sistemas presenta interesantes posibilidades para mejorar la funcionalidad y la eficiencia.
En esta serie de blogs de dos partes, conocerás las aplicaciones prácticas y los beneficios de aprovechar estas tecnologías web en los PLC industriales, abriendo nuevas vías para la innovación y la mejora de los procesos industriales.
¿Qué es WebGL?
WebGL es una API de JavaScript que permite renderizar gráficos 3D y 2D de alto rendimiento en navegadores web. Proporciona una forma de interactuar con el hardware gráfico del ordenador o dispositivo de un usuario, lo que permite a los desarrolladores crear aplicaciones web ricas, interactivas y visualmente atractivas sin necesidad de plugins ni instalaciones de software adicionales. Se basa en el estándar de sistemas embebidos OpenGL, que es una API gráfica muy utilizada para dispositivos móviles y sistemas embebidos. Aporta la potencia de OpenGL a la plataforma web, lo que permite crear complejas escenas y visualizaciones en 3D que pueden ejecutarse directamente en un navegador web..
Al combinar WebGL con SvelteKit, los desarrolladores pueden crear aplicaciones web reactivas que aprovechan la potencia de WebGL para obtener gráficos impresionantes e interactivos. Este enfoque ofrece muchas formas de vincular fácilmente los datos de la aplicación a los gráficos WebGL y actualizarlos en tiempo real a medida que cambian los datos. Esto permite realizar visualizaciones interactivas que responden a las entradas del usuario o a fuentes de datos dinámicas. La naturaleza reactiva de SvelteKit puede garantizar que los cambios en los datos subyacentes desencadenen automáticamente actualizaciones de los gráficos WebGL, proporcionando una experiencia de usuario fluida y sin interrupciones..
En esta entrada de blog, explorarás cómo integrar el ejemplo del cubo giratorio 3D en tu aplicación web Svelte y conectarlo con ESP32. Nuestro objetivo es integrar Svelte en su PLC con gráficos 3D dinámicos que puedan controlarse y supervisarse a través de ESP32, lo que le permitirá optimizar sus procesos industriales.
Ejemplo WebGL: Cubo 3D
Este blog ha seguido un ejemplo existente en el sitio web de Mozilla que muestra un cubo 3D. Utilizando este ejemplo, podemos agilizar el proceso de integración de WebGL en nuestro proyecto. El ejemplo del cubo proporcionado por Mozilla sirve como punto de partida útil, ofreciendo una base para incorporar capacidades gráficas 3D en nuestra aplicación web.
En primer lugar, tienes que instalar glMatrix, una biblioteca de vectores y matrices para gráficos de alto rendimiento. Puedes hacerlo con el comando npm (npm install gl-matrix).
A continuación, crearás una carpeta llamada "lib" dentro del directorio "src" de tu proyecto Svelte. En Svelte, la carpeta "lib" se utiliza normalmente para almacenar scripts del lado del cliente. Colocaremos los scripts WebGL dentro de la carpeta "lib", y el archivo "Firefox.mp4" puede ir dentro de la carpeta "static"..
Envío de la aplicación web dentro del PLC
En nuestro sitio web, también puede encontrar un tutorial que explica cómo almacenar archivos en la memoria flash de un ESP32 para servir una página web. Sin embargo, hay situaciones en las que el uso de la tarjeta SD se vuelve más ventajosa, como si usted está sirviendo aplicaciones más grandes o cuando la memoria flash tiene espacio limitado restante..
Para empezar, asegúrate de haber compilado la última versión de tu aplicación web mediante el comando npm run build. Este paso es necesario para tener los cambios más recientes disponibles para copiar.
A continuación, deberá insertar la tarjeta SD en su PC. Formatea la tarjeta SD al sistema de archivos FAT32. Una vez formateada, crea una carpeta en la tarjeta SD llamada "www". Esta carpeta servirá como directorio raíz para alojar el contenido de tu web. Ahora, navega hasta el directorio "build" dentro de la carpeta de tu proyecto Svelte. Copia todo el contenido de este directorio "build" y pégalo en la carpeta "www" de tu tarjeta SD.
Extra: Utiliza cualquier biblioteca JavaScript disponible
Esta entrada del blog se adentra en el mundo de WebGL, explorando un poco sus amplias capacidades. Aunque WebGL puede resultar complicado de manejar sin librerías adicionales, ofrece un enorme potencial para crear aplicaciones web ricas e interactivas.
Sin embargo, es importante señalar que Svelte no se limita únicamente a WebGL. En realidad, Svelte puede integrarse a la perfección con cualquier biblioteca JavaScript, independientemente de su finalidad, lo que permite desarrollar aplicaciones web realmente únicas.
Por ejemplo, al crear componentes de visualización de datos, puedes aprovechar bibliotecas como Chart.js o μPlot para crear gráficos informativos y eficaces. Cuando se trata de marcos de estilo y de interfaz de usuario, Svelte puede trabajar en armonía con marcos frontales populares como Bootstrap mediante la incorporación de los archivos CSS y JavaScript en su proyecto. E incluso entonces, la flexibilidad de Svelte se extiende a trabajar con bibliotecas especializadas adaptadas a casos de uso específicos como, por ejemplo, currency.js, que ofrece potentes herramientas para formatear, convertir y realizar cálculos con diferentes monedas.
Parte 1 - Utilizar un framework web para crear una aplicación web compleja >>
Uso de tecnologías web en los PLC de Industrial Shields - Parte 2