ESP32 - Servidor web
En este tutorial paso a paso, te mostraremos cómo programar para que una placa ESP32 se convierta en un servidor web. Podrás acceder a las páginas web alojadas en el ESP32 utilizando un navegador web en tu ordenador o teléfono inteligente, lo que te permitirá ver datos del ESP32 y controlarlo. Para facilitarlo, trabajaremos desde pasos simples hasta pasos más desafiantes, como se indica a continuación:
- ESP32 Web Server - Mostrando texto simple en la página web.
- ESP32 Web Server - Monitoreando valores de sensores desde el ESP32 a través de una página web.
- ESP32 Web Server - Controlando el ESP32 a través de una página web.
- ESP32 Web Server - Separando el contenido HTML (HTML, CSS y JavaScript) del código del ESP32 y colocándolo en otros archivos en el IDE de Arduino.
- ESP32 Web Server - Creando varias páginas, como index.html, temperature.html, led.html, error_404.html y error_405.html, y más.
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.
Lectura del valor del sensor desde ESP32 a través de la Web
Esto es relativamente sencillo. El código del ESP32 realiza las siguientes tareas:
- Crear un servidor web que escuche solicitudes HTTP desde un navegador web.
- Al recibir una solicitud de un navegador web, el ESP32 responde con la siguiente información:
- Encabezado HTTP
- Cuerpo HTTP: Esto incluye contenido HTML y el valor leído del sensor.
- Si es la primera vez que usas ESP32, consulta cómo configurar el entorno para ESP32 en Arduino IDE.
- Conecta la placa ESP32 a tu PC mediante un cable micro USB.
- Abre Arduino IDE en tu PC.
- Selecciona la placa ESP32 adecuada (p. ej. ESP32 Dev Module) y el puerto COM.
- Abre el Gestor de Bibliotecas haciendo clic en el icono Library Manager en la barra de navegación izquierda de Arduino IDE.
- Busca “DIYables ESP32 WebServer”, luego encuentra la biblioteca WebServer creada por DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca WebServer.
- Copia el código anterior y ábrelo con el IDE de Arduino
- 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 ESP32
- Abre el Monitor Serial
- Consulta el resultado en el Monitor Serial.
- Tome nota de la dirección IP que se muestra y escriba esta dirección en la barra de direcciones de un navegador web en su teléfono inteligente o PC.
- Como resultado, verá la siguiente salida en el Monitor Serie.
- Una vez que acceda al navegador web usando la dirección IP, se le presentará una página web muy básica que mostrará "¡Hola, ESP32!". La página se verá como la siguiente:
A continuación se muestra el código ESP32 que realiza las tareas anteriores:
/*
* 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-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, "<html><body><h1>Hello, ESP32!</h1></body></html>");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Pasos R\u00e1pidos
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
Autoscroll
Clear output
9600 baud
Newline
COM6
Connecting to WiFi...
Connected to WiFi
ESP32 Web Server's IP address: 192.168.0.2
ESP32 Web Server: New request received:
GET /
Autoscroll
Clear output
9600 baud
Newline
Lectura del valor del sensor desde el ESP32 vía Web
A continuación se muestra el código ESP32 que imprime el valor de la temperatura en la página web:
/*
* 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-web-server
*/
#include <DIYables_ESP32_WebServer.h>
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// get temperature from sensor
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
String html = "<!DOCTYPE HTML>";
html += "<html>";
html += "<head>";
html += "<link rel=\"icon\" href=\"data:,\">";
html += "</head>";
html += "<p>";
html += "Temperature: <span style=\"color: red;\">";
html += temperature;
html += "°C</span>";
html += "</p>";
html += "</html>";
server.sendResponse(client, html.c_str());
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
// Start web server with WiFi connection
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
server.handleClient();
}
Pasos R\u00e1pidos
- 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
- Carga el código al ESP32
- Una vez que accedas al navegador web usando la dirección IP, se te mostrará una página web muy básica que muestra información sobre la placa ESP32. La página se verá como la siguiente:
Para que la página web luzca fantástica con una interfaz gráfica de usuario (GUI), consulta la sección final de este tutorial.
※ Nota:
Con el código proporcionado arriba, para obtener la actualización de la temperatura, tienes que recargar la página en el navegador web. En una próxima parte, aprenderemos cómo hacer que la página web actualice el valor de la temperatura en segundo plano sin recargar la página.
Controlando el ESP32 a través de la web
Controlar algo conectado al ESP32 es un poco más desafiante que simplemente leer un valor. Eso se debe a que el ESP32 tiene que entender la solicitud que recibe del navegador web para saber qué acción tomar.
Para un ejemplo más completo y detallado, recomiendo consultar los tutoriales que se enumeran a continuación:
Separar el contenido HTML en otro archivo en el IDE de Arduino
Si quieres crear una página web simple con contenido mínimo, puedes incrustar el HTML directamente en el código del ESP32, como se explicó anteriormente.
Sin embargo, si deseas crear una página web más sofisticada e impresionante con contenido más amplio, se vuelve incómodo incluir todo el HTML, CSS y JavaScript directamente en el código ESP32. En esta situación, puedes usar un enfoque diferente para gestionar el código:
- El código del ESP32 se colocará en un archivo .ino, como antes.
- El código HTML (HTML, CSS, JavaScript) se colocará en un archivo separado .h. Esto permite mantener el contenido de la página web separado del código del ESP32, lo que facilita su gestión y modificación.
Para ello, necesitamos realizar dos grandes pasos:
- Preparando contenido HTML
- Programación del ESP32
Preparando contenido HTML
- Crea un archivo HTML en tu PC local que contenga el contenido HTML (HTML, CSS y JavaScript) para tu diseño de interfaz de usuario.
- En el archivo HTML, donde se deben mostrar los datos del ESP32, utiliza un valor arbitrario.
- Prueba y modifícalo hasta que estés satisfecho.
- Colocaremos el contenido HTML en el archivo .h en el IDE de Arduino. Consulta el siguiente paso.
Programación de ESP32
- Abre el IDE de Arduino y crea un nuevo sketch. Ponle un nombre, por ejemplo, newbiely.com.ino.
- Copia el código que se proporciona a continuación y pégalo en el archivo creado.
/*
* 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-web-server
*/
#include <DIYables_ESP32_WebServer.h>
#include "index.h"
// WiFi credentials
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web server instance
DIYables_ESP32_WebServer server;
float getTemperature() {
// YOUR SENSOR IMPLEMENTATION HERE
// simulate the temperature value
float temp_x100 = random(0, 10000); // a ramdom value from 0 to 10000
return temp_x100 / 100; // return the simulated temperature value from 0 to 100 in float
}
// Page handlers
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, webpage);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float temperature = getTemperature();
// Format the temperature with two decimal places
String temperatureStr = String(temperature, 2);
server.sendResponse(client, temperatureStr.c_str(), "text/plain");
}
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("ESP32 Web Server");
// Configure routes
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
// 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 mediante:
- 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.
- Asigna el nombre al archivo index.h y haz clic en el botón Aceptar
- Copia el código de abajo y pégalo en index.h.
/*
* 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-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
REPLACE_YOUR_HTML_CONTENT_HERE
)=====";
#endif
- Reemplaza la línea REPLACE_YOUR_HTML_CONTENT_HERE por el contenido HTML que preparaste antes. No hay problema con el carácter de nueva línea. A continuación se muestra un ejemplo del archivo index.h:
/*
* 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-web-server
*/
#ifndef WEBPAGE_H
#define WEBPAGE_H
const char* webpage = R"=====(
<!DOCTYPE html>
<html>
<head>
<title>ESP32 Temperature</title>
</head>
<body>
<h1>ESP32 Temperature</h1>
<p>Temperature: <span style="color: red;"><span id="temperature">Loading...</span> ℃</span></p>
<script>
function fetchTemperature() {
fetch("/temperature")
.then(response => response.text())
.then(data => {
document.getElementById("temperature").textContent = data;
});
}
fetchTemperature();
setInterval(fetchTemperature, 4000); // Update temperature every 4 seconds
</script>
</body>
</html>
)=====";
#endif
- 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 subir el código al ESP32
- Accede a la página web de la placa ESP32 a través del navegador como antes. Verás que se muestra a continuación:
※ Nota:
En los códigos anteriores:
- El código HTML está diseñado para actualizar la temperatura en segundo plano a intervalos regulares, actualmente establecido cada 4 segundos en el código. Esto significa que el valor de la temperatura se actualiza automáticamente sin necesidad de recargar manualmente la página web. Puedes ajustar el intervalo de actualización en el código para adaptarlo a tus preferencias.
- El código ESP32 sirve dos solicitudes desde el navegador web.
- Una solicitud para devolver el contenido HTML de la página web
- La otra para devolver el valor de la temperatura solicitado por la página web en segundo plano
Para una ilustración más completa y detallada, consulte el tutorial ESP32 - DS18B20 Sensor de temperatura vía Web
※ Nota:
- Si haces cambios en el contenido HTML dentro del archivo index.h pero no modificas nada en el archivo newbiely.com.ino, el IDE de Arduino no actualizará ni refrescará el contenido HTML cuando compiles y cargues el código al ESP32.
- Para forzar que el IDE de Arduino actualice el contenido HTML en esta situación, necesitas hacer una modificación en el archivo newbiely.com.ino. Por ejemplo, puedes añadir una línea vacía o insertar un comentario. Esta acción hace que el IDE reconozca que ha habido cambios en el proyecto, asegurando que el contenido HTML actualizado quede incluido en la subida.
Servidor Web ESP32 - Varias Páginas
Consulta este ESP32 - Servidor Web con Múltiples Páginas tutorial.