Encender un LED con PWM por formulario Web en ESP8266


Seguimos con el tutorial anterior donde vimos cómo encender un LED en un ESP8266 a través de un formulario web, ampliando el ejemplo para añadir el control PWM para variar la intensidad.

Llevamos dos entradas, una sobre cómo recibir un texto, y otra sobre cómo interpretar el texto recibido para encender o apagar un LED, viendo cómo emplear un formulario web como forma sencilla de transmitir información entre la página web del cliente y el ESP8266 como backend.

En este tutorial vamos a actuar sobre un LED en el ESP8266 usando un PWM para variar la intensidad de un LED. Esto nos va a permitir mostrar cómo interpretar números y además, ¡vamos a añadir nuestro primer fragmento de JavaScript!

Estos ejemplos dedicados a formularios web son muy sencillos, pero nos permiten introducir progresivamente conceptos como Endpoint, Backend, html, JavaScript... que son la base de lo que, en próximas entradas, serán llamadas AJAX o Websockets.

Anuncio:

Y ya vale de introducción. ¡Vamos al trabajo! Nuestro programa principal queda exáctamente igual que en el ejemplo anterior.

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

Seguimos 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 convertirmos 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

Donde tenemos un slider 'pwmInput' que va entre 0 a 1023 (el rango de PWM en el ESP8266) y cuyo valor por defecto es 500. También tenemos un cuadro de texto 'textInput'. El usuario puede cambiar el valor del PWM bien 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 poquito de JavaScript. En este caso es tan sencillo, que lo añadimos en el propio '.html'. Aunque lo normal es que el JavaScript lo tengamos como ficheros independientes, como veremos en próximas entradas.

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 enviar al pulsar el botón "Send" se envía el formulario al Endpoint '/LED' bajo el método POST que tenemos definido en el ESP8266, pasando el parámetro pwmValue asociado en el slider con 'name="pwmValue"'.

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.

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

¿A que no ha sido tan difícil? Bueno, un ejemplo sencillo en el que ya vamos viendo todas las partes habituales en un proyecto con ESP8266 (métodos html, backend, endpoint, javascript... ¿se va viendo no?)

En la próxima entrada veremos cómo hacer lo mismo con un LED RGB, y será la última entrada que dedicaremos a los formularios Web, para después avanzar y meternos en mecanismos más sofisticados como Ajax. ¡Hasta pronto!

Descarga el código

Todo el código de esta entrada está disponible para su descarga en GitHub.

Si te ha gustado esta entrada y quieres leer más sobre ESP8266 puedes consultar la sección
tutoriales de ESP8266

Anuncio:

Previous Encender y apagar un LED en el ESP8266 con un formulario Web
Next Encender un LED RGB con un formulario Web con el ESP8266
1000
1 Comment threads
1 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
newest oldest
julio

FS.h ¿qué es lo que hace?....Por cierto, muchísimas gracias por tus aportes, muy currado todo, bien explicado y agradable.