Encender y apagar un LED en el ESP8266 con un formulario Web Deja un comentario
Continuamos con las entradas del ESP8266 viendo cómo encender un LED a través de un formulario Web en una página Web servida desde el ESP8266.
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
#include #include #include #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() { } |
Por su parte, el fichero ‘server.hpp’ queda de la siguiente forma.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
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”); } |
Donde vemos que 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.
Finalmente, el contenido de ‘index.html’ que tenemos en la carpeta ‘data’ y subiremos al SPIFFS es el siguiente
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
class=“no-js”lang=“”>
charset=“utf-8”>
http-equiv=“x-ua-compatible” content=“ie=edge”>
name=“description” content=“”>
name=“viewport” content=“width=device-width, initial-scale=1”>
Form example
|
Donde únicamente hemos añadido dos radio button asociados al valor ‘ON’ y ‘OFF’
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.
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.
¡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!
Descarga el código
Todo el código de esta entrada está disponible para su descarga en GitHub.
