Encender y apagar un LED en ESP32 con un formulario Web

3 min
Iniciación

Un formulario web permite ejecutar acciones en un ESP32, como encender o apagar un LED desde el navegador.

El ejemplo está orientado a ESP32. En muchos casos también puede adaptarse a ESP8266 cambiando librerías y algunos detalles de pines.

Ya hemos visto que existen distintas formas de comunicar una web con el ESP32 actuando como servidor. Los formularios web son una de las más sencillas, aunque no necesariamente la mejor para proyectos más avanzados.

Sin embargo, estos ejemplos sencillos nos preparan para los tutoriales más avanzados que veremos más adelante, y nos permiten introducir conceptos poco a poco. Entre ellos, un ejemplo sencillo y muy típico es encender un LED a través de una sencilla página web.

El código para el programa principal queda igual que en el ejemplo anterior, solo que hemos definido el pin asociado al led integrado en la placa como salida.

#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

#include "config.h"  // Sustituir con datos de vuestra red
#include "Server.hpp"
#include "ESP32_Utils.hpp"

void setup()
{
  pinMode(LED_BUILTIN, OUTPUT);
  Serial.begin(115200);
  SPIFFS.begin();
  
  ConnectWiFi_STA();

  InitServer();
}

void loop()
{
}

Copied!

Por su parte, el fichero ‘Server.hpp’ hemos definido un Endpoint para /LED bajo el método post, que llama a la función handleFormLed(...). En esta función obtenemos el parámetro status, y encendemos o apagamos el LED integrado en la placa en función del valor recibido.

AsyncWebServer server(80);

void handleFormLed(AsyncWebServerRequest *request)
{
 String ledStatus = request->arg("status");
 
 Serial.print("Status:\t");
 Serial.println(ledStatus);

 digitalWrite(LED_BUILTIN, ledStatus == "ON" ? LOW : HIGH);

 request->redirect("/");
}

void InitServer()
{
  server.serveStatic("/", SPIFFS, "/").setDefaultFile("index.html");

  server.on("/LED", HTTP_POST, handleFormLed);

  server.onNotFound([](AsyncWebServerRequest *request) {
    request->send(400, "text/plain", "Not found");
  });

  server.begin();
    Serial.println("HTTP server started");
}

Copied!

Finalmente, el contenido de ‘index.html’ que tenemos en la carpeta ‘data’ y subiremos al SPIFFS es el siguiente

En esta página únicamente hemos añadido dos radio button asociados al valor ‘ON’ y ‘OFF’

<!DOCTYPE html>
<html class="no-js" lang="">

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>ESP8266 Forms</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Form example</h1>
  <form action="/LED" method="post">
    Radio:<br>
    <input type="radio" id="ledOn" name="status" value="ON" checked>
    <label for="ledOn">ON</label><br>
    <input type="radio" id="ledOff" name="status" value="OFF">
    <label for="ledOff">OFF</label><br>
    <button type="submit" value="Submit">Send</button>
  </form>
</body>

</html>

Copied!

Resultado

Si cargamos esto en el ESP8266 veremos nuestra (aún feísima) página web, con los dos radio button y el botón de ‘Send’ que envía el formulario.

esp8266-server-form-led-web

Si cambiamos la selección y pulsamos el botón de envío, comprobamos que recibimos los datos correctamente por el puerto serie y que, efectivamente, se enciende y se apaga el LED integrado en la placa.

esp8266-server-form-led-serial-port

Este sencillo ejemplo muestra cómo procesar la información recibida por el ESP32 para ejecutar acciones en el backend.

Por supuesto, podríamos hacer cualquier otra acción, cambiar una salida, tomar una medición, actuar en un motor, o cualquier otra función. ¡Lo que necesitéis!

A partir de esta misma idea podemos enviar valores más complejos, como un nivel PWM, una configuración o cualquier parámetro que queramos aplicar en el dispositivo.