Ejemplo de servidor web multipágina para ESP32
Ejemplo de Servidor Web - Servidor Web multipágina
Visión general
Este ejemplo demuestra cómo crear un servidor web multipágina en ESP32 con varias páginas interconectadas para la página de inicio, la monitorización de temperatura y el control de LED.
Características
- Navegación entre múltiples páginas con transiciones de página fluidas
- Página de inicio con un menú de navegación y información del sistema
- Página de monitoreo de temperatura con visualización de la temperatura en tiempo real y capacidad de actualización
- Página de control de LED con la funcionalidad de encendido y apagado
- HTML basado en plantillas con reemplazo dinámico de contenido
- Funciones auxiliares para un código limpio y mantenible
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.
Instalación de la biblioteca
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usa el ESP32, consulte el tutorial sobre configurar el entorno para ESP32 en el IDE de Arduino.
- Conecta la placa ESP32 a tu computadora usando un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa ESP32 adecuada (p. ej., ESP32) y el puerto COM.
- Abre el Administrador de bibliotecas haciendo clic en el icono Administrador de bibliotecas ubicado en el lado izquierdo del IDE de Arduino.
- Busca Web Server for ESP32 y localiza el mWebSockets de DIYables.
- Haz clic en el botón Instalar para añadir la biblioteca mWebSockets.
Ejemplo de servidor web
- En el IDE de Arduino, vaya a Archivo Ejemplos Servidor web para ESP32 WebServer ejemplo para abrir el código de ejemplo
Conexión del circuito
No se requieren componentes externos - este ejemplo utiliza el LED incorporado en el pin 13.
Estructura del código
- home.h: Plantilla HTML de la página de inicio
- temperature.h: Plantilla de la página de monitoreo de temperatura
- led.h: Plantilla de la página de control del LED
- WebServer.ino: Lógica principal del servidor
Instrucciones de configuración
1. Configuración de la red
Edita directamente las credenciales de WiFi en el archivo WebServer.ino:
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
2. Subir código y monitorear la salida
- Conecta tu ESP32 a tu computadora
- Selecciona la placa y el puerto correctos en el IDE de Arduino
- Sube el sketch WebServer.ino
- Abre el Monitor Serial (9600 baudios)
- Espera la conexión WiFi
- Toma nota de la dirección IP mostrada
- Si no ves la dirección IP en el Monitor Serial, pulsa el botón de reinicio en la placa ESP32
Uso
Abre tu navegador web e introduce la dirección IP que se muestra en el Monitor Serial para acceder al servidor web ESP32.
Prueba la función de monitoreo de temperatura:
- Haz clic en el menú "Temperatura".
- Ver la pantalla de temperatura.
Prueba la función de control del LED:
- Haz clic en el menú "LED Control". Verás la interfaz web como la que se muestra a continuación:
- Alterna entre encender y apagar el LED usando los botones proporcionados.
- Observa el estado del LED integrado en la placa ESP32; se actualiza al instante.
Páginas disponibles
Página de inicio (`/`)
- URL: http://your-esp32-ip/
- Características:
- Mensaje de bienvenida con información del sistema
- Menú de navegación a todas las páginas
- Diseño limpio y profesional
Página de temperatura (`/temperature`)
- URL: http://your-esp32-ip/temperature
- Características:
- Visualización de la temperatura en tiempo real en grados Celsius
- Actualización automática cada 5 segundos
- Botón de actualización manual
- Volver a la navegación de inicio
Página de Control de LED (`/led`)
- URL: http://your-esp32-ip/led
- URL de encendido: http://your-esp32-ip/led/on
- URL de apagado: http://your-esp32-ip/led/off
- Características:
Pantalla del estado actual del LED
- Rutas separadas para las acciones de encendido y apagado
- Actualizaciones de estado inmediatas tras el cambio de estado
- Volver a la navegación de inicio
Explicación del código
Rutas del servidor
// Configure routes with custom handler functions
server.addRoute("/", handleHome);
server.addRoute("/temperature", handleTemperature);
server.addRoute("/led", handleLed);
server.addRoute("/led/on", handleLedOn);
server.addRoute("/led/off", handleLedOff);
// Handler function examples
void handleHome(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
server.sendResponse(client, HOME_PAGE);
}
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
float tempC = 25.5; // Simulated temperature value
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
void handleLedOn(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = HIGH;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
void handleLedOff(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
ledState = LOW;
digitalWrite(LED_PIN, ledState);
sendLedPage(client);
}
Sistema de plantillas
El ejemplo utiliza un sistema de reemplazo de marcadores de posición para contenido dinámico:
- %TEMP_C%: Reemplazado por el valor de la temperatura actual en grados Celsius
- %LED_STATUS%: Reemplazado por el estado actual del LED ("ON" o "OFF")
Funciones Auxiliares
// Helper function to send LED page with current status
void sendLedPage(WiFiClient& client) {
String ledStatus = (ledState == HIGH) ? "ON" : "OFF";
String response = LED_PAGE;
response.replace("%LED_STATUS%", ledStatus);
server.sendResponse(client, response.c_str());
}
// LED state tracking
int ledState = LOW; // Track LED state (LOW = OFF, HIGH = ON)
Personalización
Añadir nuevas páginas
- Crear una plantilla HTML en un nuevo archivo de encabezado
- Agregar un manejador de rutas en el bucle principal
- Actualizar el menú de navegación en las páginas existentes
Estilo
Modifica el CSS en las plantillas HTML para cambiar la apariencia:
<style>
body { font-family: Arial, sans-serif; margin: 40px; }
.container { max-width: 600px; margin: 0 auto; }
/* Add your custom styles here */
</style>
Añadir sensores
Reemplaza el valor de temperatura simulado por lecturas reales de sensores:
void handleTemperature(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
// Replace with actual sensor reading
// e.g., DHT22, DS18B20, etc.
float tempC = readActualTemperatureSensor(); // Your sensor function here
String response = TEMPERATURE_PAGE;
response.replace("%TEMP_C%", String(tempC, 1));
server.sendResponse(client, response.c_str());
}
Solución de problemas
Problemas comunes
Conexión Wi-Fi fallida
- Verificar el SSID y la contraseña en el archivo WebServer.ino
- Verificar la disponibilidad de la red WiFi
- Asegurar que el ESP32 esté dentro del alcance de la red WiFi
Las páginas no se cargan
- Verifica la dirección IP en el Monitor Serial
- Verifica que la URL del navegador coincida con la dirección IP del ESP32
- Intenta recargar la página
LED no responde
- Confirma que el LED está conectado al pin 13
- Verifica el Monitor Serial para mensajes de depuración
- Verifica que los manejadores de rutas estén registrados
Salida de depuración
Habilita depuración adicional añadiendo declaraciones Serial.println():
void handleLed(WiFiClient& client, const String& method, const String& request, const QueryParams& params, const String& jsonData) {
Serial.println("LED route accessed");
Serial.println("Method: " + method);
Serial.println("Request: " + request);
sendLedPage(client);
}
Próximos Pasos
- Explora el ejemplo WebServerJson.ino para el desarrollo de una API REST
- Prueba WebServerQueryStrings.ino para el manejo avanzado de parámetros
- Consulta WebServerWithWebSocket.ino para la comunicación en tiempo real