Cómo ejecutar un servidor web del ESP32 PLC usando SPIFFS
Tutorial avanzado de SPIFFS
28 mayo, 2021 por
Cómo ejecutar un servidor web del ESP32 PLC usando SPIFFS
Boot & Work Corp. S.L., Amil Shrivastava


Introducción


En el post anterior, te contamos los fundamentos del sistema de archivos SPIFFS. En ese artículo te hablamos de las operaciones básicas para leer, escribir, borrar y añadir archivos.  

Pero qué pasa si tienes scripts de varias líneas que necesitamos subir al SPIFFS, y escribir ese código en tu sketch de Arduino es muy ineficiente.   

En este ejemplo, verás cómo ejecutar un pequeño servidor web desde el PLC ESP32 con los archivos del servidor en el sistema SPIFF del ESP32. Utilizarás este servidor para acceder a los pines GPIO del PLC y controlar los LEDs incorporados del PLC Industrial. Para cargar los archivos, se utilizará un plugin de carga del sistema de archivos. Esto puede ser desarrollado para otras aplicaciones como el almacenamiento y la visualización de los datos del sensor. 

Para esta demo, trabajamos con 10 I/O ESP32 Industrial PLC.  

10 I/O ESP32 Industrial PLC

Instalación del plugin Filesystem Uploader


Para subir archivos al sistema de archivos SPIFFS del ESP, debes utilizar un plugin llamado ESP32 Filesystem Uploader plugin. Este plugin te ayudará a subir los archivos directamente al sistema SPIFFS. Puedes instalarlo siguiendo los siguientes pasos:    

Instalación 

1. Actualiza el IDE de Arduino 

2. Actualiza las librerías de las placas Industrial Shields 

3. Ve a este enlace y descargar el archivo ESP32F-1.0.zip 

4. Descomprime el archivo en la carpeta de herramientas del directorio de Arduino IDE como se muestra. 

Unzip the file




5. Reinicia el IDE de Arduino y comprueba si aparece la opción del plugin.  

Check if the plugin option appears


Cómo cargar los archivos

  1. Crea un sketch de Arduino y guárdalo.  

  2. Ve a la carpeta del sketch (CTRL + K)  

  3. Dentro de esta carpeta, crea otra carpeta y llámala "data” 

  4. La carpeta data contendrá los archivos que queremos subir a la placa 

  5. En el menú desplegable de herramientas, selecciona ESP32 sketch data upload para subir los archivos 

Y ya está, los archivos deberían estar subidos. Puedes comprobar si se han subido usando el código de los Fundamentos del sistema de archivos SPIFFS. 

Ejecutar un servidor web en un PLC industrial ESP32 

Como este va a ser un pequeño servidor para demostración, sólo hay dos archivos que necesitan ser subidos al sistema SPIFFS. Además, necesitarás la librería ESPAsyncWebServer y Async TCP. Puedes leer más sobre la librería aquí. También puedes descargar el archivo .zip desde el mismo enlace. 

Descomprime y renombra la carpeta de ESPAsyncWebServer-master a ESPAsyncWebServer y ponla en la carpeta de librerías de instalación de Arduino IDE como se muestra.


Bibliotecas de instalación de Arduino IDE


La librería ESPAsyncWebServer requiere la librería AsyncTCP para funcionar.

Puedes descargar la biblioteca desde este enlace. 

Descomprime, cambia el nombre (a AsyncTCP) y mueve la carpeta a la carpeta de liberrías de instalación de Arduino IDE. 

Bibliotecas de instalación de Arduino IDE

Reinicie el IDE de Arduino.


Código

esp32plc_webserver_spiffs.ino

 Importar las librerías necesarias 

#include "WiFi.h" 
#include "ESPAsyncWebServer.h" 
#include "SPIFFS.h"


 Reemplaza con sus credenciales de red 

const char* ssid = "Amilrt"; 
const char* password = "12345678"; 


 Ajustar el LED GPIO 

const int ledPin = Q0_9; 


  Almacena el estado del LED 

String ledState;

  Crear el objeto AsyncWebServer en el puerto 80

AsyncWebServer server(80); 


 Sustituir el marcador de posición por el valor del estado del LED 

String processor(const String& var){ 

  Serial.println(var); 
  if(var == "STATE"){ 
    if(Serial.println("HIGH")){ 
      ledState = "ON"; 
    } 
    else if (Serial.println("LOW")){ 
      ledState = "OFF"; 
    } 
    Serial.print(ledState); 
    return ledState; 
  } 
  return String(); 
} 
void setup(){ 


  Puerto serie para fines de depuración 

  Serial.begin(115200); 
pinMode(ledPin, OUTPUT); 


 Inicializar SPIFFS 

  if(!SPIFFS.begin(true)){ 
    Serial.println("An Error has occurred while mounting SPIFFS"); 
    return; 
  } 


 Conectar al Wi-Fi 

 WiFi.begin(ssid, password); 
  while (WiFi.status() != WL_CONNECTED) { 
    delay(1000); 
    Serial.println("Connecting to WiFi.."); 
  } 


  Imprimir la dirección IP local de ESP32 

  Serial.println(WiFi.localIP()); 

  Ruta para la raíz / página web 

server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){ 
    request->send(SPIFFS, "/index.html", String(), false, processor); 
  });

 Ruta para cargar el archivo style.css 

  server.on("/style.css", HTTP_GET, [](AsyncWebServerRequest *request){ 
    request->send(SPIFFS, "/style.css", "text/css"); 
  }); 


  Ruta para poner el GPIO en HIGH 

  server.on("/on", HTTP_GET, [](AsyncWebServerRequest *request){ 
      digitalWrite(ledPin, HIGH);     
    request->send(SPIFFS, "/index.html", String(), false, processor); 
  }); 

  Ruta para poner el GPIO en LOW 

  server.on("/off", HTTP_GET, [](AsyncWebServerRequest *request){ 
    digitalWrite(ledPin, LOW);         
    request->send(SPIFFS, "/index.html", String(), false, processor); 
  }); 


  Iniciar servidor 

  server.begin(); 

  void loop(){ 


index.html 

<!DOCTYPE html> 
<html> 
<head> 
  <title>ESP32 PLC Web Server</title> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <link rel="icon" href="data:,"> 
  <link rel="stylesheet" type="text/css" href="style.css"> 
</head> 
<body> 
<img src="ispic.jpg" alt="ispic"> 
  <h1>SPIFFS Web Server Industrial PLC</h1> 
  <h2>PLC used : 10 I/O ESP32 </h2> 
  <p>GPIO state: <strong> %STATE%</strong></p> 
  <p><a href="/on"><button class="button">ON</button></a></p> 
  <p><a href="/off"><button class="button button2">OFF</button></a></p> 
</body> 
</html> 


style.css 

html { 
  font-family: Arial; 
  display: inline-block; 
  margin: 0px auto; 
  text-align: center; 

img { 
  border: 1px solid #ddd; 
  border-radius: 4px; 
  padding: 5px; 
  width: 150px; 

h1{ 
  color: #006400; 
  padding: 2vh; 

h2{ 
  color: #006400; 
  padding: 2vh; 

p{ 
  font-size: 1.5rem; 

.button { 
   
  background-color: #006400; 
  border: none; 
  border-radius: 6px; 
  color: white; 
  padding: 16px 40px; 
text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer; } .button2 { background-color: #A9A9A9; }


      Enlaces relacionados


      Cómo controlar un PLC industrial ESP32 a través de Bluetooth  Read >>

      Cómo programar un PLC industrial ESP32 de 10 E/S a través de WiFi  Read >>


      Odoo text and image block
      Cómo ejecutar un servidor web del ESP32 PLC usando SPIFFS
      Boot & Work Corp. S.L., Amil Shrivastava
      28 mayo, 2021
      Compartir
      Archivar

      ¿En busca de tu PLC ideal?

      Echa un vistazo a esta comparativa de producto de varios controladores industriales basados en Arduino.

      Comparamos entradas, salidas, comunicaciones y otras especificaciones con las de los equipos de otras marcas destacadas.


      Comparativa PLC industrial >>

      ¿Quieres más información?

      ¡Rellena el formulario!

      ¡Cuéntame más!