ESP8266 - Controla el relé a través de la web
Este tutorial te enseña cómo controlar un relé a través de una interfaz web usando un navegador en un PC o un teléfono inteligente, utilizando el ESP8266. En detalle, el ESP8266 será programado para funcionar como un servidor web. Supongamos que la dirección IP del ESP8266 es 192.168.0.3. A continuación se muestran los detalles de cómo funciona:
- Cuando ingresas 192.168.0.3 en el navegador web, el navegador envía una solicitud al ESP8266, y el ESP8266 responde con una página web que contiene el botón de encendido/apagado para controlar el relé.
- De manera similar, cuando haces clic en el botón "Encender" de la página web o escribes 192.168.0.3/relay1/on en el navegador, el ESP8266 enciende el relé y responde con la página de control.
- Del mismo modo, cuando haces clic en el botón "Apagar" de la página web o escribes 192.168.0.3/relay1/off en el navegador, el ESP8266 apaga el relé y responde con la página de control.
Aprenderemos a través de dos ejemplos de código:
- El contenido HTML está embebido en el código ESP8266
- El contenido HTML está separado del código ESP8266 y se coloca en un archivo .h
El tutorial ofrece los fundamentos que puedes personalizar de forma rápida e innovadora para lograr lo siguiente:
- Controlando múltiples relés a través de la web
- Rediseñando la interfaz de usuario web (UI)
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables Sensor Kit (30 sensors/displays) | |
| 1 | × | DIYables Sensor Kit (18 sensors/displays) |
Divulgación: Algunos de los enlaces proporcionados en esta sección son enlaces de afiliado de Amazon. Podemos recibir una comisión por las compras realizadas a través de estos enlaces sin costo adicional para usted. Apreciamos su apoyo.
Acerca del relé y del ESP8266
Si no sabes sobre el relé y el ESP8266 (conexiones de pines, cómo funciona, cómo programarlo...), aprende sobre ellos en los siguientes tutoriales:
Diagrama de Cableado
This image is created using Fritzing. Click to enlarge image
Para obtener m\u00e1s informaci\u00f3n, consulte Pines del ESP8266 y c\u00f3mo alimentar ESP8266 y otros componentes.
Código ESP8266 - El contenido HTML está embebido en el código ESP8266
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-controls-relay-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#define RELAY_PIN D8 // The ESP8266 pin connected to Relay
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
int relay_state = LOW;
String getHTML() {
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel='icon' href='data:,'>";
html += "</head>";
html += "<p>Relay state: <span style='color: red;'>";
if (relay_state == LOW)
html += "OFF";
else
html += "ON";
html += "</span></p>";
html += "<a href='/relay1/on'>Turn ON</a>";
html += "<br><br>";
html += "<a href='/relay1/off'>Turn OFF</a>";
html += "</html>";
return html;
}
void setup() {
Serial.begin(9600);
pinMode(RELAY_PIN, OUTPUT);
digitalWrite(RELAY_PIN, relay_state);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// home page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /");
server.send(200, "text/html", getHTML());
});
// Route to control the Relay
server.on("/relay1/on", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
Pasos R\u00e1pidos
Para empezar con ESP8266 en Arduino IDE, siga estos pasos:
- Consulta el tutorial cómo configurar el entorno para ESP8266 en Arduino IDE si es la primera vez que usas ESP8266.
- Cablea los componentes como se muestra en el diagrama.
- Conecta la placa ESP8266 a tu computadora mediante un cable USB.
- Abre Arduino IDE en tu computadora.
- Elige la placa ESP8266 correcta, por ejemplo (p. ej. NodeMCU 1.0 (ESP-12E Module)), y su puerto COM correspondiente.
- Copia el código anterior y ábrelo con Arduino IDE.
- Cambia la información de Wi-Fi (SSID y contraseña) en el código por la tuya.
- Haz clic en el botón Subir en Arduino IDE para subir el código al ESP8266.
- Abre el monitor serie.
- Consulta el resultado en el monitor serie.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Verá una dirección IP, por ejemplo: 192.168.0.3. Esta es la dirección IP del servidor web ESP8266
- Abra un navegador web y escriba uno de los tres formatos que se muestran a continuación en la barra de direcciones:
192.168.0.3
192.168.0.3/relay1/on
192.168.0.3/relay1/off
- Tenga en cuenta que la dirección IP podría variar. Por favor, verifique el valor actual en el Monitor Serial.
- También verá la salida que se muestra a continuación en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
ESP8266 Web Server's IP address: 192.168.0.3
ESP8266 Web Server: New request recieved:
GET /
ESP8266 Web Server: New request recieved:
GET /relay1/on
ESP8266 Web Server: New request recieved:
GET /relay1/off
Autoscroll
Clear output
9600 baud
Newline
- Comprobar el estado del relé
- Verá la página web de la placa ESP8266 en el navegador como se muestra a continuación
- Ahora puedes controlar el relé encendido/apagado a través de la interfaz web
Código ESP8266 - El contenido HTML está separado del código ESP8266
Dado que una página web gráfica contiene una gran cantidad de contenido HTML, incrustarlo en el código ESP8266 como antes resulta inconveniente. Para abordar esto, necesitamos separar el código ESP8266 y el código HTML en archivos diferentes:
- El código ESP8266 se colocará en un archivo .ino.
- El código HTML (incluyendo HTML, CSS y JavaScript) se colocará en un archivo .h.
Pasos R\u00e1pidos
- Abre Arduino IDE y crea un nuevo sketch. Dale un nombre, por ejemplo, newbiely.com.ino
- Copia el código de abajo y ábrelo con Arduino IDE.
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-controls-relay-via-web
*/
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN D8 // The ESP8266 pin connected to relay
const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT
const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT
ESP8266WebServer server(80); // Web server on port 80
int relay_state = LOW;
String getHTML() {
String html = webpage; // Use the HTML content from the index.h file
html.replace("%RELAY_STATE%", relay_state ? "ON" : "OFF"); // update the relay state
return html;
}
void setup() {
Serial.begin(9600);
pinMode(RELAY_PIN, OUTPUT);
digitalWrite(RELAY_PIN, relay_state);
// Connect to Wi-Fi
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(1000);
Serial.println("Connecting to WiFi...");
}
Serial.println("Connected to WiFi");
// Print the ESP8266's IP address
Serial.print("ESP8266 Web Server's IP address: ");
Serial.println(WiFi.localIP());
// home page
server.on("/", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /");
server.send(200, "text/html", getHTML());
});
// Route to control the relay
server.on("/relay1/on", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/on");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
server.on("/relay1/off", HTTP_GET, []() {
Serial.println("ESP8266 Web Server: New request received:");
Serial.println("GET /relay1/off");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.send(200, "text/html", getHTML());
});
// Start the server
server.begin();
}
void loop() {
// Handle client requests
server.handleClient();
// Your code here
}
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya.
- Crea el archivo index.h en Arduino IDE de la siguiente manera:
- Haz clic en el botón justo debajo del icono del monitor serie y elige Nueva pestaña, o usa las teclas Ctrl+Shift+N.
- Ingrese el nombre del archivo index.h y haga clic en el botón Aceptar
- Copia el código de abajo y pégalo en index.h.
- Ahora tienes el código en dos archivos: newbiely.com.ino y index.h
- Haz clic en el botón Subir en el IDE de Arduino para cargar el código al ESP8266
- Accede a la página web de la placa ESP8266 a través de un navegador web en tu PC o teléfono móvil como antes. La verás similar al código anterior, como se muestra a continuación:
- Si modifica el contenido HTML en el index.h y no toca nada en el archivo newbiely.com.ino, cuando compiles y subas el código al ESP8266, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, haga un cambio en el newbiely.com.ino (p. ej. añadir una línea en blanco, añadir un comentario....)
- Controlar varios relés a través de la web
- Rediseño de la interfaz de usuario web (UI)
/*
* Este código de ESP8266 NodeMCU fue desarrollado por es.newbiely.com
* Este código de ESP8266 NodeMCU se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp8266/esp8266-controls-relay-via-web
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE HTML>
<html>
<head>
<link rel='icon' href='data:,'>
</head>
<p>Relay state: <span style='color: red;'>%RELAY_STATE%</span></p>
<a href='/relay1/on'>Turn ON</a>
<br><br>
<a href='/relay1/off'>Turn OFF</a>
</html>
)=====";
#endif
※ Nota:
Puedes personalizar de manera rápida e innovadora el código anterior para lograr lo siguiente: