En este artículo te voy a mostrar cómo encender y apagar un LED a través de Wifi usando la tarjeta NodeMCU ESP8266. Lo que haremos será:
- Dentro de la tarjeta crear un servidor web
- Mostrar una página HTML con una interfaz para encender y apagar un LED
- Dependiendo de la opción seleccionada el LED se va a apagar o encender
En resumen vamos a controlar un LED usando solo WiFi desde una computadora o teléfono móvil con un navegador web.
Lecturas recomendadas
Mira cómo hacer el Hola mundo con el ESP8266. De hecho en este tutorial vamos a combinar dos anteriores:
Voy a continuar con el post asumiendo que has entendido cómo funciona de manera básica el servidor web y la conexión del LED.
Circuito
Como el módulo WiFi ya viene integrado a la tarjeta solo tenemos que conectar el LED con una resistencia. Tomaré el circuito de mi post anterior:
Eso es todo lo que necesitamos conectar.
Función que dibuja la interfaz HTML
Comenzamos viendo la función que enviará el HTML al cliente. Dependiendo del estado del led (encendido o apagado) vamos a mostrar un enlace para apagarlo o encenderlo.
Si queremos apagarlo vamos a ir al enlace /apagar y si queremos encenderlo vamos a ir al enlace /encender:
String obtenerInterfaz()
{
String HtmlRespuesta = "<!DOCTYPE html>"
"<html lang='en'>"
"<head>"
"<meta charset='UTF-8'>"
"<meta name='viewport' content='width=device-width, initial-scale=1.0'>"
"<title>LEDS by parzibyte</title>"
"</head>"
"<body>";
HtmlRespuesta += "<h1>Encender y apagar LED</h1>";
HtmlRespuesta += "<p>El LED está actualmente ";
if (estadoDelLED)
{
HtmlRespuesta += "encendido</p>";
HtmlRespuesta += "<a href='/apagar'>Apagar</a>";
}
else
{
HtmlRespuesta += "apagado</p>";
HtmlRespuesta += "<a href='/encender'>Encender</a>";
}
HtmlRespuesta += "<br><a href='https://parzibyte.me/blog'>By parzibyte</a>";
HtmlRespuesta += "</body>"
"</html>";
return HtmlRespuesta;
}Estamos pre procesando el HTML y mostrando un enlace u otro dependiendo de la ruta.
Manejando rutas
Anteriormente definimos los enlaces que llevarán a una ruta dentro de la red del ESP8266, ahora vamos a definir el manejador de cada ruta:
void mostrarInterfazHTML()
{
servidor.send(200, "text/html", obtenerInterfaz());
}
void rutaEncenderLed()
{
estadoDelLED = true;
digitalWrite(LED_D1, HIGH);
mostrarInterfazHTML();
}
void rutaApagarLed()
{
estadoDelLED = false;
digitalWrite(LED_D1, LOW);
mostrarInterfazHTML();
}
void rutaRaiz()
{
mostrarInterfazHTML();
}
void rutaNoEncontrada()
{
servidor.send(404, "text/plain", "404");
}Todos envían la respuesta HTML que devuelve la función vista anteriormente. En este punto tenemos una bandera que define el estado del LED.
La función rutaEncenderLed enciende el LED y cambia el estado de la variable; después devuelve el HTML dependiendo del estado. De igual modo la función rutaApagarLed apaga el LED y cambia el estado.
También definimos la ruta raíz que por defecto no realiza ninguna acción pero debe mostrar el HTML.
El método loop y setup
Finalmente veamos cómo configurar el AP, además del web server para que dependiendo de la ruta llame a determinada función.
Dentro del loop atendemos la petición del cliente.
void setup()
{
// Configuración del LED
pinMode(LED_D1, OUTPUT);
// Configurar como un access point
WiFi.softAP(NOMBRE_RED, CLAVE_RED);
WiFi.softAPConfig(ip, puertaDeEnlace, mascaraDeRed);
delay(100);
// Configuramos la ruta y la función que responderá a la solicitud de dicha ruta
servidor.on("/", rutaRaiz);
servidor.on("/encender", rutaEncenderLed);
servidor.on("/apagar", rutaApagarLed);
servidor.onNotFound(rutaNoEncontrada);
// Empezar a escuchar
servidor.begin();
}
// En el loop manejamos al cliente conectado y eso es todo ;)
void loop()
{
servidor.handleClient();
}
Poniendo todo junto
El código completo queda como se ve a continuación:
/*
Programado por Luis Cabrera Benito
____ _____ _ _ _
| _ \ | __ \ (_) | | |
| |_) |_ _ | |__) |_ _ _ __ _____| |__ _ _| |_ ___
| _ <| | | | | ___/ _` | '__|_ / | '_ \| | | | __/ _ \
| |_) | |_| | | | | (_| | | / /| | |_) | |_| | || __/
|____/ \__, | |_| \__,_|_| /___|_|_.__/ \__, |\__\___|
__/ | __/ |
|___/ |___/
Blog: https://parzibyte.me/blog
Ayuda: https://parzibyte.me/blog/contrataciones-ayuda/
Contacto: https://parzibyte.me/blog/contacto/
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
const char *NOMBRE_RED = "Parzibyte",
*CLAVE_RED = "00000000"; // Son 8 ceros
const int PUERTO = 80,
LED_D1 = 5;
// Tener un estado del LED
bool estadoDelLED = false;
IPAddress ip(192, 168, 1, 1);
IPAddress puertaDeEnlace(192, 168, 1, 1);
IPAddress mascaraDeRed(255, 255, 255, 0);
ESP8266WebServer servidor(PUERTO);
String obtenerInterfaz()
{
String HtmlRespuesta = "<!DOCTYPE html>"
"<html lang='en'>"
"<head>"
"<meta charset='UTF-8'>"
"<meta name='viewport' content='width=device-width, initial-scale=1.0'>"
"<title>LEDS by parzibyte</title>"
"</head>"
"<body>";
HtmlRespuesta += "<h1>Encender y apagar LED</h1>";
HtmlRespuesta += "<p>El LED está actualmente ";
if (estadoDelLED)
{
HtmlRespuesta += "encendido</p>";
HtmlRespuesta += "<a href='/apagar'>Apagar</a>";
}
else
{
HtmlRespuesta += "apagado</p>";
HtmlRespuesta += "<a href='/encender'>Encender</a>";
}
HtmlRespuesta += "<br><a href='https://parzibyte.me/blog'>By parzibyte</a>";
HtmlRespuesta += "</body>"
"</html>";
return HtmlRespuesta;
}
void mostrarInterfazHTML()
{
servidor.send(200, "text/html", obtenerInterfaz());
}
void rutaEncenderLed()
{
estadoDelLED = true;
digitalWrite(LED_D1, HIGH);
mostrarInterfazHTML();
}
void rutaApagarLed()
{
estadoDelLED = false;
digitalWrite(LED_D1, LOW);
mostrarInterfazHTML();
}
void rutaRaiz()
{
mostrarInterfazHTML();
}
void rutaNoEncontrada()
{
servidor.send(404, "text/plain", "404");
}
void setup()
{
// Configuración del LED
pinMode(LED_D1, OUTPUT);
// Configurar como un access point
WiFi.softAP(NOMBRE_RED, CLAVE_RED);
WiFi.softAPConfig(ip, puertaDeEnlace, mascaraDeRed);
delay(100);
// Configuramos la ruta y la función que responderá a la solicitud de dicha ruta
servidor.on("/", rutaRaiz);
servidor.on("/encender", rutaEncenderLed);
servidor.on("/apagar", rutaApagarLed);
servidor.onNotFound(rutaNoEncontrada);
// Empezar a escuchar
servidor.begin();
}
// En el loop manejamos al cliente conectado y eso es todo ;)
void loop()
{
servidor.handleClient();
}
Es momento de enviarlo a la tarjeta y probar.
Probando servidor web
Al conectar al servidor web se muestra el estado del LED y el enlace para encenderlo. Si selecciono apagar, el LED se apaga y muestra lo siguiente:
Si yo hago click en encender el LED será obviamente encendido y el estado cambiará a:
Así podemos probar de manera infinita, conectándonos desde cualquier cliente.
Con esto se abren varias posibilidades, entre ellas las de conectar un relevador en lugar de un LED para controlar diferentes corrientes, o mostrar valores de sensores.
