Arduino Nano ESP32 - Controla un 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 PC o un teléfono inteligente, utilizando el Arduino Nano ESP32. En detalle, el Arduino Nano ESP32 se programará para funcionar como un servidor web. Supongamos que la dirección IP del Arduino Nano ESP32 es 192.168.0.3. Aquí están los detalles de cómo funciona:
- Cuando ingresas 192.168.0.3 en el navegador web, el navegador envía una solicitud al ESP32, y el Arduino Nano ESP32 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' en la página web o escribes 192.168.0.3/relay1/on en el navegador, el Arduino Nano ESP32 enciende el relé y responde con la página de control.
- Del mismo modo, cuando haces clic en el botón 'Apagar' en la página web o escribes 192.168.0.3/relay1/off en el navegador, el Arduino Nano ESP32 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á incrustado en el código de Arduino Nano ESP32
- El contenido HTML se separa del código de Arduino Nano 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 varios relés a través de la web
- Rediseñando la interfaz de usuario de la 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.
Sobre relé y Arduino Nano ESP32
Si no sabes nada sobre relé y Arduino Nano ESP32 (disposición 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
Código de Arduino Nano ESP32 - El contenido HTML está incrustado en el código Arduino Nano ESP32
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-relay-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#define RELAY_PIN D2 // The Arduino Nano ESP32 pin connected to the 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("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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
Para empezar con Arduino Nano ESP32, siga estos pasos:
- Si eres nuevo en Arduino Nano ESP32, consulta el tutorial sobre cómo configurar el entorno para Arduino Nano ESP32 en el IDE de Arduino.
- Conecta los componentes de acuerdo con el diagrama proporcionado.
- Conecta la placa Arduino Nano ESP32 a tu computadora usando un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa Arduino Nano ESP32 y su puerto COM correspondiente.
- Abre el Gestor de bibliotecas haciendo clic en el icono Gestor de bibliotecas en la barra de navegación izquierda del IDE de Arduino.
- Busca “DIYables ESP32 WebServer”, y luego localiza el DIYables ESP32 WebServer.
- Haz clic en el botón Instalar para instalar la biblioteca Web Server de DIYables.
- Copia el código anterior y ábrelo con Arduino IDE
- Cambia la información de WiFi (SSID y contraseña) en el código por la tuya
- Haz clic en el botón Subir en el IDE de Arduino para subir el código al Arduino Nano ESP32
- Abre el Monitor Serial
- Revisa el resultado en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll
Clear output
9600 baud
Newline
- Verás una dirección IP, por ejemplo: 192.168.0.3. Esta es la dirección IP del servidor web Arduino Nano ESP32.
- Abre un navegador web e introduce uno de los tres formatos que se indican 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 a continuación en el Monitor Serial.
COM6
Connecting to WiFi...
Connected to WiFi
Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Arduino Nano ESP32 Web Server: New request recieved:
GET /
Arduino Nano ESP32 Web Server: New request recieved:
GET /relay1/on
Arduino Nano ESP32 Web Server: New request recieved:
GET /relay1/off
Autoscroll
Clear output
9600 baud
Newline
- Verificar el estado del relé
- Verás la página web de la placa Arduino Nano ESP32 en el navegador, como se muestra a continuación
- Ya puedes controlar el relé para encenderlo y apagarlo a través de la interfaz web
Código de Arduino Nano ESP32 - El contenido HTML está separado del código de Arduino Nano ESP32
Dado que una página web gráfica contiene una gran cantidad de código HTML, incrustarlo en el código del Arduino Nano ESP32 como antes resulta inconveniente. Para solucionar esto, necesitamos separar el código del Arduino Nano ESP32 y el código HTML en archivos diferentes:
- El código de Arduino Nano ESP32 se colocará en un archivo .ino.
- El código HTML (incluye HTML, CSS y JavaScript) se colocará en un archivo .h.
Pasos R\u00e1pidos
- Abra el IDE de Arduino y cree un nuevo sketch. Ponga un nombre, por ejemplo, newbiely.com.ino
- Copie el código a continuación y ábralo con el IDE de Arduino
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-relay-via-web
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h" // Include the index.h file
#define RELAY_PIN D2 // The Arduino Nano ESP32 pin connected to the 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("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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("Arduino Nano 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 el IDE de Arduino siguiendo estos pasos:
- 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.
- Escribe el nombre del archivo index.h y haz clic en el botón OK
- Copie el código de abajo y péguelo 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 Arduino Nano ESP32
- Accede a la página web de la placa Arduino Nano ESP32 a través de un navegador web en tu PC o teléfono inteligente, como antes. La verás similar 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 compiles y subas el código al ESP32, el IDE de Arduino no actualizará el contenido HTML.
- Para que el IDE de Arduino actualice el contenido HTML en este caso, haz un cambio en el archivo newbiely.com.ino (p. ej., añade una línea en blanco, añade un comentario...)
- Controlando varios relés a través de la web
- Rediseñando la interfaz de usuario web (UI)
/*
* Este código de Arduino Nano ESP32 fue desarrollado por es.newbiely.com
* Este código de Arduino Nano ESP32 se proporciona al público sin ninguna restricción.
* Para tutoriales completos y diagramas de cableado, visite:
* https://es.newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-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:
Puedes personalizar de forma rápida e innovadora el código anterior para lograr lo siguiente: