Encender y apagar LED con WiFi usando NodeMCU ESP8266

NodeMCU ESP8266 - Servidor web para apagar LED

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:

LED con NodeMCU ESP8266

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&aacute; 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&aacute; 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:

LED apagado – Opción para encender con WiFi

Si yo hago click en encender el LED será obviamente encendido y el estado cambiará a:

NodeMCU ESP8266 – Servidor web para apagar LED

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.

Estoy aquí para ayudarte 🤝💻

Estoy aquí para ayudarte en todo lo que necesites. Si requieres alguna modificación en lo presentado en este post, deseas asistencia con tu tarea, proyecto o precisas desarrollar un software a medida, no dudes en contactarme. Estoy comprometido a brindarte el apoyo necesario para que logres tus objetivos. Mi correo es parzibyte(arroba)gmail.com, estoy como@parzibyte en Telegram o en mi página de contacto

No te pierdas ninguno de mis posts 🚀🔔

Suscríbete a mi canal de Telegram para recibir una notificación cuando escriba un nuevo tutorial de programación.

parzibyte

Programador freelancer listo para trabajar contigo. Aplicaciones web, móviles y de escritorio. PHP, Java, Go, Python, JavaScript, Kotlin y más :) https://parzibyte.me/blog/software-creado-por-parzibyte/