📅 Vie, 27 Sept 2019 ⏲️ ~ 3 minutos

Encender y apagar un LED en el ESP8266 o ESP32 con un formulario Web

Continuamos con las entradas del ESP8266 y el ESP32 viendo cómo encender un LED a través de un formulario Web en una página Web servida desde el ESP8266.

Haremos referencia al ESP8266, pero el mismo código es compatible para el ESP32, ajustando el nombre de las librerías. Al final tenéis el código tanto para el ESP8266 como para el ESP32.

En la entrada anterior ya vimos cómo recibir información con el ESP8266 actuando como servidor a través de un formulario Web. Ya adelantamos que existen diversas formas de comunicar una web con el ESP8266 actuando como el servidor. Los formularios Web son una de las más sencillas pero (ni mucho menos) la mejor.

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.

main.ino

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 <ESP8266WiFi.h>
#include <ESPAsyncWebServer.h>
#include <FS.h>

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

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

  InitServer();
}

void loop()
{
}

Server.hpp

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");
}

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

index.html

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>

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

¡Así de fácil! Un sencillo ejemplo que muestra cómo procesar la información recibida por el ESP8266 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!

En la siguiente entrada veremos otro ejemplo típico, encender un LED PWM, para lo cuál añadiremos un poquito de JavaScript en la página Web servida. ¡Hasta pronto!