ESP32 - Controla el relé a través de la web
En este tutorial, vamos a aprender cómo controlar un relé a través de una interfaz web usando un navegador en una computadora o teléfono inteligente, utilizando el ESP32. En detalle, el ESP32 será programado para funcionar como un servidor web. Supongamos que la dirección IP del ESP32 es 192.168.0.2. Aquí están los detalles de cómo funciona:
- Cuando introduces 192.168.0.2 en el navegador, el navegador envía una solicitud al ESP32, y el ESP32 responde con una página web que contiene el botón de encendido/apagado para controlar el relé.
- De manera similar, al hacer clic en el botón "Turn ON" en la página web o al escribir 192.168.0.2/relay1/on en el navegador, el ESP32 enciende el relé y responde con la página de control web.
- Asimismo, al hacer clic en el botón "Turn OFF" en la página web o al escribir 192.168.0.2/relay1/off en el navegador, el ESP32 apaga el relé y responde con la página de control web.
Aprenderemos mediante dos ejemplos de código:
- El contenido HTML está incrustado en el código ESP32
- El contenido HTML está separado del código ESP32 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:
- Controlar múltiples relés a través de la web
- Rediseñando la interfaz de usuario web (IU)
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables ESP32 Starter Kit (ESP32 included) | |
| 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 ESP32
Si no conoces nada sobre el relé y el ESP32 (pinout, cómo funciona, cómo programarlo...), aprende sobre ellos en los siguientes tutoriales:
Diagrama de Cableado
- Cómo conectar el ESP32 y un relé usando placa de pruebas (alimentado vía un cable USB)
This image is created using Fritzing. Click to enlarge image
Si no sabe c\u00f3mo alimentar ESP32 y otros componentes, encuentre instrucciones en el siguiente tutorial: C\u00f3mo alimentar ESP32.
- Cómo conectar ESP32 y un relé usando placa de pruebas (alimentado a través del pin Vin)
This image is created using Fritzing. Click to enlarge image
- Cómo conectar ESP32 y relé usando placa breakout con terminales de tornillo (alimentada a través de un cable USB)
- Cómo conectar el ESP32 y el relé usando [placa de breakout con terminales de tornillo] (alimentada a través del pin Vin)
Código ESP32 - El contenido HTML está incrustado en el código ESP32
/*
* Este código de ESP32 fue desarrollado por es.newbiely.com
* Este código de ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp32/esp32-controls-relay-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay
int relay_state = LOW;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
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;
}
// home page
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
server.sendResponse(client, getHTML().c_str());
}
// Route to control the Relay
void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/relay1/on", handleRelayOn);
server.addRoute("/relay1/off", handleRelayOff);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Pasos R\u00e1pidos
- Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en Arduino IDE.
- Realiza el cableado como en la imagen de arriba.
- Conecta la placa ESP32 a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa ESP32 correcta (p. ej. ESP32 Dev Module) y el puerto COM.
- Abre el Library Manager haciendo clic en el icono de la barra de navegación izquierda de Arduino IDE.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca Web Server creada por DIYables.
- Haz clic en el botón Install para instalar la biblioteca Web Server.
- Copia el código anterior y ábrelo con Arduino IDE
- Cambia la información wifi (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 ESP32
- Abre el Monitor Serial
- Mira el resultado en el Monitor Serial
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
- Verás una dirección IP, por ejemplo: 192.168.0.2. Esta es la dirección IP del servidor web ESP32
- Abre un navegador web e introduce uno de los tres formatos que se muestran a continuación en la barra de direcciones:
192.168.0.2
192.168.0.2/relay1/on
192.168.0.2/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 siguiente salida en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request recieved:
GET /
ESP32 Web Server: New request recieved:
GET /relay1/on
ESP32 Web Server: New request recieved:
GET /relay1/off
Autoscroll
Clear output
9600 baud
Newline
- Comprobar el estado del relé
- Podrá ver la página web de la placa ESP32 en el navegador, como se muestra a continuación
- Ahora puedes controlar el rele encendido/apagado a través de la interfaz web
Código ESP32 - el contenido HTML está separado del código ESP32
Dado que una página web gráfica contiene una gran cantidad de contenido HTML, incrustarlo en el código ESP32 como antes resulta incómodo. Para abordar esto, necesitamos separar el código del ESP32 y el código HTML en archivos diferentes:
- El código ESP32 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 el IDE de Arduino y crea un nuevo sketch, dale un nombre, por ejemplo, newbiely.com.ino
- Copia el código de abajo y ábrelo con el IDE de Arduino
/*
* Este código de ESP32 fue desarrollado por es.newbiely.com
* Este código de ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp32/esp32-controls-relay-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN 16 // ESP32 pin GPIO16 connected to Relay
int relay_state = LOW;
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
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;
}
// home page
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
server.sendResponse(client, getHTML().c_str());
}
// Route to control the Relay
void handleRelayOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = HIGH;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void handleRelayOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("ESP32 Web Server: New request received");
relay_state = LOW;
digitalWrite(RELAY_PIN, relay_state);
server.sendResponse(client, getHTML().c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/relay1/on", handleRelayOn);
server.addRoute("/relay1/off", handleRelayOff);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
- 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 haciendo:
- O bien haz clic en el botón justo debajo del icono del monitor serie y elige New Tab, o usa las teclas Ctrl+Shift+N
- Escribe el nombre del archivo index.h y haga clic en el botón Aceptar
- Copie el código a continuación y péguelo en el 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 ESP32
- Accede a la página web de la placa ESP32 a través de un navegador web en tu PC o teléfono inteligente como antes. Verás que se parece al código anterior, como se muestra a continuación:
- Si modificas el contenido HTML en el index.h y no tocas nada en el archivo newbiely.com.ino, cuando compilas y subes el código al ESP32, el IDE de Arduino no actualizará el contenido HTML.
- Para hacer que el IDE de Arduino actualice el contenido HTML en este caso, realiza un cambio en el archivo newbiely.com.ino (por ejemplo, agregar una línea en blanco, añadir un comentario....)
- Controlar múltiples relés a través de la web
- Rediseño de la interfaz de usuario web (UI)
/*
* Este código de ESP32 fue desarrollado por es.newbiely.com
* Este código de ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/esp32/esp32-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:
Puede personalizar de forma rápida e innovadora el código anterior para lograr lo siguiente: