Control de led por internet – NodeMCU
En este artículo aprenderás a encender un LED o cualquier otro dispositivo de salida vía internet utilizando una placa NodeMCU (ESP8266).
En al artículo “Conectar NodeMCU al wifi (ESP8266)” a nuestra red wifi, es ese artículo aprendimos a conocer la IP y la MAC de la placa, nosotros utilizaremos la IP para que, desde cualquier navegador (estando en la misma red), podamos controlar un LED o cualquier otro dispositivo de salida.
Aplicando parte del código anterior podemos podremos modificarlo, de tal forma, que guardemos una pequeña página web en la placa y poder agregar dos botones, uno de encendido y otro de apagado.
/*
*www.ProveedoraCano.com
*Encender un LED o cualquier otro dispositivo
*vía wifi utilizando una placa NODE MCU (ESP8266)
*La salida del LED es en el PIN D6
*/
#include <ESP8266WiFi.h> //LIBRERÍA PARA CARGAR WIFI
#define pinLed D6
String ssid = "reemplazar-el-nombre-de-la-red"; //Nombre de la red a la que se va a conectar
String password = "reemplazar-la-contraseña-de-la-red"; // Contraseña de la red a la que se conecta
WiFiServer server(80); //objeto de la clase WiFiServer. DECLARAMOS EL SERVIDOR DENTRO DE LA TARJETA
int estado = 0;
void setup() {
// Inicia Serial
Serial.begin(115200);
Serial.println("\n");
pinMode(pinLed,OUTPUT); //definimos que el pinLED es de salida
// Conexión WIFI , siempre se intentará conectar
WiFi.begin(ssid, password); // INICIAMOS CONEXIÓN CON LOS DATOS DE LA RED
while (WiFi.status() != WL_CONNECTED ) {
delay(500);
Serial.print(".");
}
// Cuando se conecta a la re Wifi nos imprime la información
Serial.println("");
Serial.println("********************************************");
Serial.print("Conectado a la red WiFi: ");
Serial.println(WiFi.SSID());
Serial.print("IP: ");
Serial.println(WiFi.localIP()); // Esta IP nos dara la dirección consultarlo desde un navegador
Serial.print("macAdress: ");
Serial.println(WiFi.macAddress());
Serial.println("*********************************************");
server.begin(); //begin() LEVANTAMOS EL SERVIDOR
digitalWrite(pinLed, 0); //EL LED LO APAGAMOS
}
void loop() {
WiFiClient client = server.available(); //objeto de la clase cliente Wifi.
// avalaible() detecta un cliente nuevo del objeto de la clase WifiServer
if(!client){ //SI EL CLIENTE NO EXISTE REGRESA
return;
}
// SOLO SALE DEL CICLO ANTERIOR SI HAY CLIENTE
Serial.println("Nuevo cliente...");
while(!client.available()){ //espera a un cliente diponible
delay(1);
}
// UNA VEZ QUE EL CLIENTE ESTE DISPONIBLE LEE LA PETICIÓN DEL CLIENTE
String peticion = client.readStringUntil('\r'); //lee la peticion del cliente
Serial.println(peticion); //IMPRIME LA PETICIÓN
client.flush(); //limpia la peticion del cliente
if(peticion.indexOf('LED=ON') != -1)
{
estado=1; //SI ENCUENTRA LED ON CAMBIA EL ESTADO A 1
}
if(peticion.indexOf('LED=OFF') != -1)
{
estado=0;//SI ENCUENTRA LED OFF CAMBIA EL ESTADO A 0
}
digitalWrite(pinLed, estado); //ENCIENDE O APAGA EL LED
// LAS SIGUIENTES 5 LINEAS INDICAN EL TIPO DE DOCUMENTO QUE ESTAMOS ENVIANDO
client.println("HTTP/1.1 200 OK");
client.println("");
client.println("");
client.println("");
client.println("");
//INICIA LA PAGINA
client.println("<!DOCTYPE html> <html> <head> <meta charset='utf-8'> ");
client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
client.println("<title>IOT Proveedora Cano</title> ");
client.println("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css'>");
client.println("</head> <body> <section class='hero is-warning'> <div class='container'>");
client.println("<h1 class='title'>Controlar estado del LED</h1>");
if(estado==1)
client.println("<h3 class='subtitle'>LED encendido </h3> </div></section>");
else
client.println("<h3 class='subtitle'>LED apagado </h3> </div></section>");
client.println("<div class='columns is-mobile is-centered'><div class='column is-half'>");
client.println("<p> <button class='button is-success is-focused' type='button' onClick=location.href='/LED=ON'>Encender</button>");
client.println("<button class='button is-danger is-focused' type='button' onClick=location.href='/LED=OFF'>Apagar</button>");
client.println("<br> </p> </div> </div> </body> </html>");
//FIN DE LA PAGINA
delay(10);
Serial.println("Peticion finalizada");
Serial.println("");
}¿Cómo se adapta el código HTM al ESP8266?
Hay diferente editores HTM en línea o gratis para que puedas generar tu página web, una opción gratuita y online es www.html-online.com/editor/. Con esta herramienta puedes generar una página, como si se tratase de un documendo .doc y te genera el código html.
Para el ejemplo, también utilizamos un framework llamado Bulma, el cuál te da diversas opciones para puedas utilizar css (estilos) prediseñados.
El código de la página que usamos de ejemple es el siguiente:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IOT Proveedora Cano</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<div class="center">
<section class="hero is-warning">
<div class="container">
<h1 class="title">Controlar estado del LED</h1>
<h2 class="subtitle">
Selecciona una opción
</h2>
</div>
</section>
</div>
<div class="columns is-mobile is-centered">
<div class="column is-half">
<p>
<button class="button is-success is-focused" type='button' onClick=location.href='/LED=ON'>Encender</button>
<button class="button is-danger is-focused" type='button' onClick=location.href='/LED=OFF'>Apagar</button>
<br>
</p>
</div>
</div>
</body>
</html>Una vez que tengas el código de tu página web, viene el trabajo minucioso, ya que cada línea de tu código html lo deberás modificar de la siguiente manera:
client.println(“línea_de_codigo_HTML“);
Por ejemplo: para la línea que dice:
<title>IOT Proveedora Cano</title>
la tendremos que modificar de la siguiente manera:
client.println(“<title>IOT Proveedora Cano</title>“);
Como consejo, puedes juntar más de una línea para facilitar el trabajo, por ejemplo, para la primer parte del código que dice:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>IOT Proveedora Cano</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css">
</head>
<body>
<div class="center">
<section class="hero is-warning">
<div class="container">
<h1 class="title">Controlar estado del LED</h1>Lo podemos arreglar de la siguiente forma:
client.println("<!DOCTYPE html> <html> <head> <meta charset='utf-8'> ");
client.println("<meta name='viewport' content='width=device-width, initial-scale=1'>");
client.println("<title>IOT Proveedora Cano</title> ");
client.println("<link rel='stylesheet' href='https://cdn.jsdelivr.net/npm/bulma@0.9.1/css/bulma.min.css'>");
client.println("</head> <body> <section class='hero is-warning'> <div class='container'>");
client.println("<h1 class='title'>Controlar estado del LED</h1>");Lo único que no lleva el formato , son las condiciones de programación:
if(estado==1)
client.println("<h3 class='subtitle'>LED encendido </h3> </div></section>");
else
client.println("<h3 class='subtitle'>LED apagado </h3> </div></section>");Circuito y consulta desde navegador web.
Para este ejemplo, conectaremos la pata positiva a D6 y la negativa a GND.
El voltaje que tenemos a la salida de los pines del ESP8266 y la tierra es de 3.3V, por lo que podemos conectar un LED de color azul.
Antes de hacer la conexión con otro tipo de LED, te recomendamos leer el artículo Voltaje de LEDs y cálculo de resistencia, ahí veras como calcular la resistencia para un voltaje determinado y no quemar el LED.
Para poder acceder desde cualquier navegador y encender y apagar el LED solo tenemos conectar la placa a la pc, entrar al monitor serie del IDE de arduino y arrancar el programa, en el monitor serie nos dará la IP de la placa, copiamos esa IP y la pegamos en la barra de direcciones del navegador y nos cargará la página.
Dando click en el botón verde, el LED se encenderá y la leyenda en la página cambiará a “LED encendido”. Si damos click en el botón rojo, la el led se apagará y en la página podremos leer “LED apagado”.
Conclusiones.
Con este código, podremos controlar de manera sencilla cualquier dispositivo de salida conectado a nuestra placa Node MCU (led, relevador, etc) y controlarlo vía wifi (estando conectados en la misma red.