Encender un LED con PWM por formulario Web en ESP32

4 min
Iniciación

Un formulario web también puede enviar valores PWM al ESP32 para variar la intensidad de un LED.

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

Hasta ahora hemos usado formularios para recibir texto y para encender o apagar un LED. Ahora vamos a enviar un valor numérico desde la página web al ESP32.

En este tutorial vamos a actuar sobre un LED usando PWM para variar su intensidad. Esto nos permite mostrar cómo interpretar números y, además, añadir un pequeño fragmento de JavaScript.

Estos ejemplos dedicados a formularios web son muy sencillos, pero nos permiten introducir progresivamente conceptos como endpoint, backend, HTML y JavaScript.

Vamos al trabajo.

Nuestro programa principal queda exactamente igual que en el ejemplo anterior.

#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(void)
{
  pinMode(LED_BUILTIN, OUTPUT);
  Serial.begin(115200);
  SPIFFS.begin();
  
  ConnectWiFi_STA();

  InitServer();
}

void loop(void)
{
}

Copied!

Por su parte, el fichero ‘Server.hpp’ también es muy parecido al anterior.

AsyncWebServer server(80);

void handleFormPWM(AsyncWebServerRequest *request)
{
 String pwmValue = request->arg("pwmValue");
 
 Serial.print("PWM:\t");
 Serial.println(pwmValue);

 // No invertido
 //analogWrite(LED_BUILTIN, pwmValue.toInt());
 
 // Invertido
 analogWrite(LED_BUILTIN, 1023 - pwmValue.toInt());
 
 request->redirect("/");
}

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

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

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

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

Copied!

Tenemos un endpoint para /LED bajo peticiones POST, asociado a la función de callback handleFormPWM(...). En esta función leemos el parámetro enviado por el formulario pwmValue y lo convertimos a integer con el método toInt() de la clase String.

En este ejemplo, invertimos el valor recibido ya que el LED integrado en la placa tiene salida invertida (HIGH es apagado, y LOW encendido). Si usáis otra salida PWM, usar el código comentado sin invertir.

Respecto a la página ‘index.html’ ubicada en ‘data’, que subirá al SPIFFS, queda de la siguiente manera

<!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">
      Slider:<br>
      <input type="range" id="pwmInput" name="pwmValue" min="0" max="1023" value="500" onchange="updateTextInput(this.value);" >
      <input type="number" id="textInput" onchange="updateTextInput(this.value);" value="500" style="width:50px">
      <label for="pwmInput">PWM</label><br>
      <button type="submit" value="Submit">Send</button>
    </form>
    <script>
      function updateTextInput(val) {
        console.log(val);
        document.getElementById('pwmInput').value = val; 
        document.getElementById('textInput').value = val; 
      }
    </script>
    </body>
</html>

Copied!

Tenemos un slider pwmInput que va entre 0 y 1023, y cuyo valor por defecto es 500. También tenemos un cuadro de texto textInput. El usuario puede cambiar el valor del PWM usando el slider o el cuadro de texto y ambos valores están vinculados.

Para esta vinculación entre el slider y el cuadro de texto añadimos un poco de JavaScript. En este caso es tan sencillo que lo añadimos en el propio HTML, aunque en proyectos más grandes lo normal será tenerlo en ficheros independientes.

En este script simplemente tenemos una función updateTextInput(…) donde mostramos el valor por la consola del navegador, y sincronizamos los valores del slider y el cuadro de texto.

Por otro lado, tenemos esta función asociada a los eventos ‘onchange(…)’ tanto del slider como del textbox. Ambas funciones envían el valor de su propio control.

Finalmente, al pulsar el botón “Send” se envía el formulario al endpoint /LED bajo el método POST que tenemos definido en el ESP32, pasando el parámetro pwmValue asociado en el slider con name="pwmValue".

Resultado

Si ahora accedemos a nuestra, (si, una vez más, feísima) página web, veremos nuestro slider y nuestro texbox. Podemos arrastrar el slider o escribir directamente el valor que queramos en el textbox, y vemos que el otro control se actualizar correctamente.

esp8266-server-form-led-pwm-html

Si pulsamos el botón de enviar veremos que el valor elegido se muestra en la consola del navegador y en el puerto serie del ESP32. Y, por supuesto, el LED integrado en la placa se ilumina con la intensidad que hemos elegido.

esp8266-server-form-led-pwm-serial-port