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.
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.
5. Reinicia el IDE de Arduino y comprueba si aparece la opción del plugin.
Cómo cargar los archivos
Crea un sketch de Arduino y guárdalo.
Ve a la carpeta del sketch (CTRL + K)
Dentro de esta carpeta, crea otra carpeta y llámala "data”
La carpeta data contendrá los archivos que queremos subir a la placa
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.
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.
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;
}
Cómo ejecutar un servidor web del ESP32 PLC usando SPIFFS