Ejemplo de ESP32 WebTemperature - Tutorial de la Interfaz de un Termómetro Visual
Resumen
El ejemplo WebTemperature crea una interfaz de termómetro visual accesible desde cualquier navegador web. Diseñado para la plataforma educativa ESP32, con capacidades mejoradas de monitoreo de sensores, características de detección de temperatura integradas y una integración fluida con módulos educativos de monitoreo ambiental. Perfecto para monitorear sensores de temperatura, condiciones ambientales o cualquier medición basada en temperatura que requiera retroalimentación visual.
Características
- Visualización del termómetro: Termómetro interactivo a través de la interfaz web
- Rango de temperatura configurable: Temperaturas mínimas y máximas personalizadas con unidades
- Actualizaciones en tiempo real: Visualización de la temperatura en vivo con animación de mercurio
- Soporte para múltiples unidades: Celsius (°C), Fahrenheit (°F), Kelvin (K)
- Gestión automática de la configuración: Establece el rango y la unidad una vez en el constructor
- Comunicación WebSocket: Actualizaciones instantáneas sin recargar la página
- Diseño adaptable a dispositivos móviles: Funciona perfectamente en computadoras de escritorio, tabletas y dispositivos móviles
- Diseño profesional: Visualización limpia del termómetro con animaciones suaves
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.
Buy Note: Many DS18B20 sensors available in the market are unreliable. We strongly recommend buying the sensor from the DIYables brand using the link provided above. We tested it, and it worked reliably.
Instrucciones de Configuración
Pasos rápidos
Siga estas instrucciones paso a paso:
- Si esta es la primera vez que usas el ESP32, consulta el tutorial sobre configurar el entorno para ESP32 en el Arduino IDE.
- Conecta la placa ESP32 a tu computadora usando un cable USB.
- Abre el IDE de Arduino en tu computadora.
- Selecciona la placa ESP32 adecuada (por ejemplo ESP32 Dev Module) y el puerto COM.
- Navega hasta el icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables ESP32 WebApps", luego encuentra la Biblioteca DIYables ESP32 WebApps de DIYables
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar algunas dependencias de otras bibliotecas.
- Haga clic en el botón Instalar Todo para instalar todas las dependencias de la biblioteca.
- En el IDE de Arduino, vaya a Archivo Ejemplos DIYables ESP32 WebApps WebTemperature ejemplo, o copie el código anterior y péguelo en el editor del IDE de Arduino
/*
* This example demonstrates how to create a web-base Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());re display
* using the DIYables ESP32 WebApps Library with ESP32.
*
* The library automatically detects the ESP32 platform and
* includes the appropriate abstraction layer for seamless operation.
*
* The web page displays a thermometer visualization that shows temperature
* readings in real-time through WebSocket communication.
*
* Features:
* - Real-time temperature display with thermometer visualization
* - Configurable temperature range and units
* - Auto-connecting WebSocket for seamless communication
* - Mobile-responsive design with professional UI
* - Automatic platform detection and abstraction
* - Compatible with both WiFi and Ethernet connections
* Hardware: ESP32 Boards
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create web app instances
ESP32ServerFactory serverFactory;
DIYablesWebAppServer server(serverFactory, 80, 81); // HTTP port 80, WebSocket port 81
DIYablesHomePage homePage;
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // Min: -10°C, Max: 50°C
// Temperature simulation variables
float currentTemp = 25.0; // Starting temperature
unsigned long lastUpdate = 0;
void setup() {
Serial.begin(9600);
Serial.println("Starting Web Temperature Server...");
// Add web apps to server
server.addApp(&homePage);
server.addApp(&temperaturePage);
// Set 404 Not Found page (optional - for better user experience)
server.setNotFoundPage(DIYablesNotFoundPage());
// Set up temperature callback for value requests
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
// Start the server
server.begin(WIFI_SSID, WIFI_PASSWORD);
}
void loop() {
// Handle web server and WebSocket communications
server.loop();
// Simulate temperature readings
simulateTemperature();
// Send temperature update every 2 seconds
if (millis() - lastUpdate >= 2000) {
temperaturePage.sendTemperature(currentTemp);
// Print temperature to Serial Monitor
Serial.println("Temperature: " + String(currentTemp, 1) + "°C");
lastUpdate = millis();
}
delay(10); // Small delay for stability
}
void simulateTemperature() {
// Simple temperature simulation - slowly increases and decreases
static bool increasing = true;
if (increasing) {
currentTemp += 0.1; // Increase temperature slowly
if (currentTemp >= 35.0) {
increasing = false; // Start decreasing when it reaches 35°C
}
} else {
currentTemp -= 0.1; // Decrease temperature slowly
if (currentTemp <= 15.0) {
increasing = true; // Start increasing when it reaches 15°C
}
}
}
/**
* Callback function called when web interface requests temperature value
* Send current temperature value to web interface
*/
void onTemperatureValueRequested() {
Serial.println("Temperature value requested from web interface");
// Send current temperature value (config is automatically sent by the library)
temperaturePage.sendTemperature(currentTemp);
}
/*
* Alternative setup for real temperature sensor (DS18B20 example):
*
* #include <OneWire.h>
* #include <DallasTemperature.h>
*
* #define ONE_WIRE_BUS 2
* OneWire oneWire(ONE_WIRE_BUS);
* DallasTemperature sensors(&oneWire);
*
* void setup() {
* // ... existing setup code ...
* sensors.begin();
* }
*
* float readTemperature() {
* sensors.requestTemperatures();
* return sensors.getTempCByIndex(0);
* }
*
* // In loop(), replace simulateTemperature() with:
* // currentTemp = readTemperature();
*/
- Configura las credenciales de WiFi en el código actualizando estas líneas:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- 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. Se muestra a continuación
COM6
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
DIYables WebApp Library
Platform: ESP32
Network connected!
IP address: 192.168.0.2
HTTP server started on port 80
Configuring WebSocket server callbacks...
WebSocket server started on port 81
WebSocket URL: ws://192.168.0.2:81
WebSocket server started on port 81
==========================================
DIYables WebApp Ready!
==========================================
📱 Web Interface: http://192.168.0.2
🔗 WebSocket: ws://192.168.0.2:81
📋 Available Applications:
🏠 Home Page: http://192.168.0.2/
🌡️ Web Temperature: http://192.168.0.2/web-temperature
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa ESP32.
- Abre un navegador web en tu PC o teléfono móvil.
- Escribe la dirección IP que se muestra en el Monitor Serial en el navegador.
- Ejemplo: http://192.168.1.100
- Verás la página de inicio como en la imagen a continuación.
- Haz clic en el enlace de Web Temperature y verás la interfaz de usuario de la aplicación Web Temperature como la que se muestra a continuación:
- O también puede acceder a la página directamente mediante la dirección IP, seguida de /web-temperature. Por ejemplo: http://192.168.1.100/web-temperature
- Verá una visualización de termómetro que muestra lecturas de temperatura en tiempo real
Características de la interfaz web
Pantalla del termómetro
- Termómetro Visual: Diseño clásico de termómetro con animación de estilo mercurio
- Escala de temperatura: Marcas de escala claras con rango configurable
- Actualizaciones en tiempo real: Visualización de la temperatura en tiempo real con transiciones suaves
- Mostrar unidades: Muestra las unidades de temperatura configuradas (°C, °F, K)
- Diseño profesional: Visualización de termómetro limpia, con estilo educativo
Monitoreo en tiempo real
- Datos en tiempo real: Las actualizaciones de la temperatura se realizan automáticamente a través de la conexión WebSocket
- Animación suave: El nivel de mercurio se mueve suavemente entre lecturas
- Indicador de estado: Estado de la conexión
- Optimizado para dispositivos móviles: Interfaz táctil para todos los dispositivos
Configuración de código
Configuración de la temperatura
// Configure temperature range and units
DIYablesWebTemperaturePage temperaturePage(-10.0, 50.0, "°C"); // -10 to 50°C
// Set up temperature value request callback
temperaturePage.onTemperatureValueRequested(onTemperatureValueRequested);
Envío de valores de temperatura
void onTemperatureValueRequested() {
// Read temperature from sensor (example with simulation)
float currentTemp = readTemperatureSensor();
// Send to thermometer display
temperaturePage.sendTemperature(currentTemp);
}
Integración del sensor de temperatura
Sensor de temperatura digital DS18B20
#include <OneWire.h>
#include <DallasTemperature.h>
#define ONE_WIRE_BUS 2
OneWire oneWire(ONE_WIRE_BUS);
DallasTemperature sensors(&oneWire);
void setup() {
sensors.begin();
// Configure temperature page for sensor range
DIYablesWebTemperaturePage tempPage(-55.0, 125.0, "°C");
}
float readTemperatureSensor() {
sensors.requestTemperatures();
return sensors.getTempCByIndex(0);
}
Sensor de temperatura y humedad DHT22
#include <DHT.h>
#define DHT_PIN 2
#define DHT_TYPE DHT22
DHT dht(DHT_PIN, DHT_TYPE);
void setup() {
dht.begin();
// Configure for DHT22 range
DIYablesWebTemperaturePage tempPage(-40.0, 80.0, "°C");
}
float readTemperatureSensor() {
return dht.readTemperature(); // Returns °C
}
Sensor de temperatura analógico (TMP36)
#define TEMP_PIN A0
float readTemperatureSensor() {
int reading = analogRead(TEMP_PIN);
float voltage = reading * 5.0 / 1024.0;
float temperatureC = (voltage - 0.5) * 100.0; // TMP36 formula
return temperatureC;
}
Conversión de unidades
Soporte para múltiples unidades
// Temperature in different units
DIYablesWebTemperaturePage celsiusPage(-10.0, 50.0, "°C");
DIYablesWebTemperaturePage fahrenheitPage(14.0, 122.0, "°F");
DIYablesWebTemperaturePage kelvinPage(263.15, 323.15, "K");
// Conversion functions
float celsiusToFahrenheit(float celsius) {
return (celsius * 9.0/5.0) + 32.0;
}
float celsiusToKelvin(float celsius) {
return celsius + 273.15;
}
Opciones de personalización
Rango de temperatura
- Temperatura mínima: Establece la lectura más baja esperada
- Temperatura máxima: Establece la lectura más alta esperada
- Unidades: Mostrar la cadena de unidades (°C, °F, K o personalizada)
- Escala: La escala del termómetro se ajusta automáticamente al rango
Frecuencia de actualización
// Control update rate to avoid overwhelming the interface
unsigned long lastUpdate = 0;
const unsigned long UPDATE_INTERVAL = 1000; // 1 second
void loop() {
server.loop();
if (millis() - lastUpdate >= UPDATE_INTERVAL) {
// Update temperature display
lastUpdate = millis();
}
}
Casos de uso comunes
Proyectos educativos
- Monitoreo meteorológico: Seguimiento de la temperatura interior/exterior
- Experimentos de Física: Transferencia de calor, dinámica térmica
- Ciencias Ambientales: Monitoreo del clima, control de invernadero
- Aprendizaje de Electrónica: Interfaz de sensores, visualización de datos
Aplicaciones Prácticas
- Automatización del hogar: control de climatización, monitoreo de energía
- Control de invernadero: optimización del crecimiento de las plantas
- Seguridad alimentaria: monitoreo de temperatura para almacenamiento
- Industria: monitoreo de procesos, control de calidad
Solución de problemas
La temperatura no se está actualizando
- Verifique la conexión WiFi y el estado de WebSocket
- Verifique el cableado del sensor y la fuente de alimentación
- Asegúrese de que la función de devolución de llamada esté correctamente configurada
- Verifique el Monitor Serial para las lecturas del sensor
Valores de temperatura incorrectos
- Verificar la calibración y la precisión del sensor
- Verificar la referencia de voltaje para sensores analógicos
- Asegurar la inicialización adecuada del sensor
- Probar el sensor de forma independiente con código básico
Problemas de conexión del sensor
- Verificar las conexiones de cableado (alimentación, tierra, datos)
- Verificar resistencias pull-up para sensores digitales
- Probar el sensor con un multímetro para su correcto funcionamiento
- Verificar la instalación de la biblioteca del sensor y su compatibilidad
Funciones Avanzadas
Múltiples sensores de temperatura
Monitoree múltiples ubicaciones con termómetros separados:
DIYablesWebTemperaturePage indoorTemp(-10.0, 40.0, "°C");
DIYablesWebTemperaturePage outdoorTemp(-30.0, 50.0, "°C");
DIYablesWebTemperaturePage waterTemp(0.0, 100.0, "°C");
server.addApp(&indoorTemp);
server.addApp(&outdoorTemp);
server.addApp(&waterTemp);
Registro de temperatura
Combina con Web Plotter para datos históricos de temperatura:
// Send same value to both thermometer and plotter
temperaturePage.sendTemperature(currentTemp);
plotterPage.sendData("Temperature", currentTemp);
Sistema de alertas
Implementar alertas de temperatura:
void checkTemperatureAlerts(float temp) {
if (temp > 35.0) {
Serial.println("⚠️ High temperature alert!");
// Send alert via web interface
} else if (temp < 5.0) {
Serial.println("🧊 Low temperature alert!");
// Send alert via web interface
}
}
Integración educativa
Objetivos de Aprendizaje STEM
- Física de la temperatura: Comprender conceptos térmicos
- Tecnología de sensores: Aprendiendo sensores digitales y analógicos
- Visualización de datos: Técnicas de visualización de datos en tiempo real
- Programación: Funciones de devolución de llamada, integración de sensores
Actividades en el aula
- Comparación de sensores: Compara diferentes tipos de sensores de temperatura.
- Ejercicio de calibración: Aprende principios de precisión en la medición.
- Monitoreo ambiental: Realiza un seguimiento de los cambios de temperatura a lo largo del tiempo.
- Integración de sistemas: Combina con otros sensores ambientales.
Experimentos científicos
- Transferencia de calor: Monitorear cambios de temperatura durante los experimentos
- Cambios de fase: Observar la temperatura durante la fusión/ebullición
- Pruebas de aislamiento: Comparar la efectividad del aislamiento
- Estudio climático: Monitoreo de temperatura a largo plazo
Este ejemplo proporciona una base integral para el monitoreo y la visualización de la temperatura, perfecto para aplicaciones de monitoreo ambiental, tanto educativas como prácticas.