Ejemplo de Arduino WebTemperature - Tutorial de Interfaz Visual de Termómetro
Visión general
El ejemplo WebTemperature crea una interfaz visual de termómetro accesible desde cualquier navegador web. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT, plataforma educativa con capacidades mejoradas de monitoreo de sensores, características de detección de temperatura integradas y una integración sin fisuras 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 una 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)
- Manejo automático de configuración: Establece el rango y la unidad una vez en el constructor
- Comunicación WebSocket: Actualizaciones instantáneas sin recargar la página
- Responsive para móviles: Funciona perfectamente en escritorio, tableta y dispositivos móviles
- Diseño profesional: Visualización limpia del termómetro con animaciones suaves
- Extensible para plataformas: Actualmente implementado para Arduino Uno R4 WiFi, pero puede ampliarse a otras plataformas de hardware. Ver DIYables_WebApps_ESP32
Hardware Requerido
Or you can buy the following kits:
| 1 | × | DIYables STEM V4 IoT Starter Kit (Arduino 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 instalación
Pasos Rápidos
Sigue estas instrucciones paso a paso:
- Si es la primera vez que usas el Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulta el tutorial sobre la configuración del entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecta la placa Arduino Uno R4/DIYables STEM V4 IoT a tu computadora usando un cable USB.
- Inicia el IDE de Arduino en tu computadora.
- Selecciona la placa adecuada de Arduino Uno R4 (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Dirígete al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busca "DIYables WebApps", y luego encuentra la biblioteca DIYables WebApps de DIYables.
- Haz clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá que instale algunas otras dependencias de la biblioteca
- 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 WebApps WebTemperature ejemplo, o copie el código anterior y péguelo en el editor de Arduino IDE
/*
* 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 WebApps library with Arduino Uno R4 WiFi.
*
* The library automatically detects the Arduino Uno R4 WiFi 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: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*/
#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
UnoR4ServerFactory 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 código al Arduino UNO R4/DIYables STEM V4 IoT
- Abre el Monitor serie
- Consulta el resultado en el Monitor serie. Como se muestra a continuación
COM6
Starting Web Temperature Server...
INFO: Added app /
INFO: Added app /web-temperature
DIYables WebApp Library
Platform: Arduino Uno R4 WiFi
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 Arduino.
- 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 web.
- 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 se muestra a continuación.
- O también puedes acceder a la página directamente usando la dirección IP, seguida de /web-temperature. Por ejemplo: http://192.168.1.100/web-temperature
- Verás 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 al estilo mercurio
- Escala de temperatura: Marcas de escala claras y rango configurable
- Actualizaciones en tiempo real: Lectura de temperatura en tiempo real con transiciones suaves
- Visualización de unidades: Muestra las unidades de temperatura configuradas (°C, °F, K)
- Diseño profesional: Visualización de termómetro limpia y de estilo educativo
Monitoreo en tiempo real
- Datos en tiempo real: Las actualizaciones de temperatura se realizan automáticamente a través de una conexión WebSocket
- Animación suave: El nivel de mercurio se mueve suavemente entre lecturas
- Indicador de estado: Indicador del estado de la conexión
- Optimizado para móviles: Interfaz táctil para todos los dispositivos
Configuración de código
Configuración de 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 de sensores 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: Establecer la lectura esperada más baja
- Temperatura máxima: Establecer la lectura esperada más alta
- Unidades: Mostrar cadena de unidades (°C, °F, K o personalizado)
- 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 temperaturas interiores y exteriores
- Experimentos de física: Transferencia de calor, dinámica térmica
- Ciencias ambientales: Monitoreo del clima, control del invernadero
- Aprendizaje de electrónica: Interfaz con sensores, visualización de datos
Aplicaciones Prácticas
- Automatización del hogar: control de climatización, monitorización de energía
- Control de invernadero: optimización del crecimiento de las plantas
- Seguridad alimentaria: monitorización de la temperatura para almacenamiento
- Industria: monitorización de procesos, control de calidad
Solución de problemas
La temperatura no se está actualizando
- Verificar la conexión WiFi y el estado de WebSocket
- Verificar el cableado del sensor y la fuente de alimentación
- Asegurar que la función de devolución de llamada esté correctamente configurada
- Verificar 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 las resistencias de pull-up para sensores digitales
- Probar el sensor con un multímetro para verificar su correcto funcionamiento
- Verificar la instalación y compatibilidad de la biblioteca del sensor
Funciones avanzadas
Múltiples sensores de temperatura
Monitorear varias 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
Combine 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 de STEM
- Física térmica: Comprender conceptos térmicos
- Tecnología de sensores: Aprender 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: Comparar diferentes tipos de sensores de temperatura
- Ejercicio de calibración: Aprender principios de precisión en la medición
- Monitoreo ambiental: Rastrear cambios de temperatura a lo largo del tiempo
- Integración de sistemas: Combinar 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 y la ebullición
- Pruebas de aislamiento: Comparar la eficacia del aislamiento
- Estudio climático: Monitoreo de la temperatura a largo plazo
Este ejemplo ofrece una base integral para el monitoreo de la temperatura y su visualización, perfecta para ambas aplicaciones educativas y prácticas de monitoreo ambiental.