Ejemplo de Arduino WebRTC - Tutorial de la Interfaz de Reloj en Tiempo Real
Visión general
El ejemplo de WebRTC proporciona una interfaz integral de reloj en tiempo real para tus proyectos de Arduino. Diseñado para Arduino Uno R4 WiFi y DIYables STEM V4 IoT, plataforma educativa con capacidades RTC integradas, funciones mejoradas de gestión del tiempo y una integración fluida con el ecosistema educativo. Puedes mostrar información del reloj en tiempo real, sincronizar la hora desde el navegador web al Arduino y monitorear las diferencias de tiempo a través de una interfaz web intuitiva.
Características
- Visualización del reloj en tiempo real: Muestra la hora RTC actual de Arduino con actualizaciones automáticas
- Comparación de la hora del dispositivo: Muestra la hora del navegador web/dispositivo junto con la hora de Arduino
- Sincronización de hora con un clic: Sincroniza la RTC de Arduino con la hora del navegador web al instante
- Indicador visual de la diferencia de tiempo: Muestra la desviación de tiempo entre los dispositivos en minutos
- Formato de hora de dos líneas: Formato de 12 horas AM/PM con visualización completa de la fecha
- Interfaz de usuario moderna con gradiente: Diseño en tarjetas con diseño responsive
- Comunicación WebSocket: Actualizaciones bidireccionales en tiempo real sin recargar la página
- Con reconocimiento de zona horaria para la sincronización: Utiliza la hora local del dispositivo para una sincronización precisa
- Monitoreo del estado de la conexión: Indicadores visuales para el estado de la conexión WebSocket
- Solicitudes automáticas de hora: Solicita la hora actual de Arduino al cargar la página
- Plataforma extensible: Actualmente implementado para Arduino Uno R4 WiFi, pero puede ampliarse para 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.
Instrucciones de configuración
Pasos rápidos
Siga estas instrucciones paso a paso:
- Si es la primera vez que utiliza la placa Arduino Uno R4 WiFi/DIYables STEM V4 IoT, consulte el tutorial sobre configurar el entorno para Arduino Uno R4 WiFi/DIYables STEM V4 IoT en el IDE de Arduino.
- Conecte la placa Arduino Uno R4/DIYables STEM V4 IoT a su computadora mediante un cable USB.
- Inicie el IDE de Arduino en su computadora.
- Seleccione la placa Arduino Uno R4 adecuada (p. ej., Arduino Uno R4 WiFi) y el puerto COM.
- Vaya al icono Bibliotecas en la barra izquierda del IDE de Arduino.
- Busque "DIYables WebApps", luego localice la biblioteca DIYables WebApps de DIYables.
- Haga clic en el botón Instalar para instalar la biblioteca.
- Se le pedirá instalar 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 WebRTC ejemplo, o copie el código anterior y péguelo en el editor del IDE de Arduino
/*
* DIYables WebApp Library - Web RTC Example
*
* This example demonstrates the Web RTC feature:
* - Real-time clock display for both Arduino and client device
* - One-click time synchronization from web browser to Arduino
* - Hardware RTC integration for persistent timekeeping
* - Visual time difference monitoring
*
* Hardware: Arduino Uno R4 WiFi or DIYables STEM V4 IoT
*
* Setup:
* 1. Update WiFi credentials below
* 2. Upload the sketch to your Arduino
* 3. Open Serial Monitor to see the IP address
* 4. Navigate to http://[IP_ADDRESS]/web-rtc
*/
#include <DIYablesWebApps.h>
#include "RTC.h"
// WiFi credentials - UPDATE THESE WITH YOUR NETWORK
const char WIFI_SSID[] = "YOUR_WIFI_SSID";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
// Create WebApp server and page instances
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables WebApp - Web RTC Example");
// Initialize RTC
RTC.begin();
// Check if RTC is running and set initial time if needed
RTCTime savedTime;
RTC.getTime(savedTime);
if (!RTC.isRunning() || savedTime.getYear() == 2000) {
Serial.println("RTC is NOT running, setting initial time...");
// Set a default time - you can modify this to match current time
RTCTime startTime(28, Month::AUGUST, 2025, 12, 0, 0, DayOfWeek::THURSDAY, SaveLight::SAVING_TIME_ACTIVE);
RTC.setTime(startTime);
Serial.println("RTC initialized with default time");
} else {
Serial.println("RTC is already running");
}
// Print initial RTC time
RTCTime initialTime;
RTC.getTime(initialTime);
Serial.print("Initial RTC Time: ");
Serial.print(initialTime.getYear());
Serial.print("/");
Serial.print(Month2int(initialTime.getMonth()));
Serial.print("/");
Serial.print(initialTime.getDayOfMonth());
Serial.print(" - ");
if (initialTime.getHour() < 10) Serial.print("0");
Serial.print(initialTime.getHour());
Serial.print(":");
if (initialTime.getMinutes() < 10) Serial.print("0");
Serial.print(initialTime.getMinutes());
Serial.print(":");
if (initialTime.getSeconds() < 10) Serial.print("0");
Serial.print(initialTime.getSeconds());
Serial.println();
// Add pages to server
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRTCPage);
// Optional: Add 404 page for better user experience
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Set callback for time sync from web
webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived);
// Set callback for time request from web
webRTCPage.onTimeRequestToWeb(onTimeRequested);
// Start the WebApp server
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("Failed to connect to WiFi");
delay(1000);
}
}
}
void loop() {
// Handle web server
webAppsServer.loop();
// Send current time to web clients and print to Serial every 1 second
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
// Get current RTC time
RTCTime currentTime;
RTC.getTime(currentTime);
// Send time to web clients in human readable format
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds()); // Print time to Serial Monitor
Serial.print("RTC Time: ");
Serial.print(currentTime.getYear());
Serial.print("/");
Serial.print(Month2int(currentTime.getMonth()));
Serial.print("/");
Serial.print(currentTime.getDayOfMonth());
Serial.print(" - ");
if (currentTime.getHour() < 10) Serial.print("0");
Serial.print(currentTime.getHour());
Serial.print(":");
if (currentTime.getMinutes() < 10) Serial.print("0");
Serial.print(currentTime.getMinutes());
Serial.print(":");
if (currentTime.getSeconds() < 10) Serial.print("0");
Serial.print(currentTime.getSeconds());
Serial.println();
}
delay(10);
}
// Callback function called when web client sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Set RTC time
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
// Callback function called when web client requests current Arduino time
void onTimeRequested() {
// Get current RTC time and send to web in human readable format
RTCTime currentTime;
RTC.getTime(currentTime);
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds());
}
- 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 Arduino.
- Abre el Monitor Serie en el IDE de Arduino.
- Espera a la conexión a WiFi y a la información de WiFi que se imprime en el Monitor Serie.
- Consulta el resultado en el Monitor Serie. Como se muestra a continuación.
COM6
DIYables WebApp - Web RTC Example
RTC is already running
Initial RTC Time: 2025/8/28 - 12:00:08
INFO: Added app /
INFO: Added app /web-rtc
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 RTC: http://192.168.0.2/web-rtc
==========================================
Autoscroll
Clear output
9600 baud
Newline
- Si no ves nada, reinicia la placa Arduino.
Usando la interfaz web
- Abre un navegador web en tu ordenador o dispositivo móvil conectado a la misma red Wi‑Fi
- 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 de abajo:
- Haz clic en el enlace de WebRTC; verás la interfaz de usuario de la aplicación WebRTC como la que aparece a continuación:
- O también puede acceder a la página directamente mediante la dirección IP, seguida de /web-rtc. Por ejemplo: http://192.168.1.100/web-rtc
- Verá la interfaz WebRTC que se muestra:
- Tiempo de Arduino: Hora actual desde el RTC de Arduino
- Hora de tu dispositivo: La hora actual desde tu navegador/dispositivo
- Diferencia de tiempo: Diferencia entre los dos tiempos en minutos
- Botón para sincronizar la hora de Arduino: Haz clic para sincronizar la hora de Arduino con tu dispositivo
Sincronización de tiempo
- Haz clic en el "Sincronizar la hora de Arduino" botón para sincronizar el RTC del Arduino con la hora local de tu dispositivo
- El proceso de sincronización:
- Obtiene la hora local actual de su dispositivo (no UTC)
- Ajusta para el desplazamiento de la zona horaria para garantizar una sincronización precisa de la hora local
- Envía la marca de tiempo al Arduino vía WebSocket
- Arduino actualiza su RTC con la hora recibida
- La interfaz web se actualiza para mostrar la hora sincronizada
Después de la sincronización, la diferencia de tiempo debería ser mínima (usualmente 0-1 minutos)
El Arduino mantendrá la hora precisa incluso después de cerrar la interfaz web
Traduce el contenido a continuación del inglés al español, devuelve únicamente el resultado:
Explicación del código
Componentes clave
#include <DIYablesWebApps.h>
#include <RTC.h>
// Initialize web server and RTC page
DIYablesWebAppServer server;
DIYablesWebRTCPage rtcPage;
Función de Configuración
void setup() {
Serial.begin(9600);
// Initialize RTC
RTC.begin();
// Setup WiFi connection
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Add RTC page to server
server.addWebApp(rtcPage);
// Set up callback functions
rtcPage.onTimeSyncFromWeb(onTimeSyncReceived);
rtcPage.onTimeRequestToWeb(onTimeRequested);
// Start the server
server.begin();
}
Funciones de devolución de llamada
Función de devolución de llamada para la sincronización de tiempo:
// Called when web interface sends time sync command
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Convert Unix timestamp to RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Set RTC time
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
Devolución de llamada para la solicitud de tiempo:
// Called when web interface requests current Arduino time
void onTimeRequested() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Send current time to web interface
rtcPage.sendTimeToWeb(
currentTime.getYear(),
currentTime.getMonth(),
currentTime.getDayOfMonth(),
currentTime.getHour(),
currentTime.getMinutes(),
currentTime.getSeconds()
);
}
Bucle Principal
void loop() {
server.handleClient();
// Optional: Print current time every 10 seconds
static unsigned long lastPrint = 0;
if (millis() - lastPrint > 10000) {
RTCTime currentTime;
RTC.getTime(currentTime);
Serial.print("Current Arduino Time: ");
Serial.print(currentTime.getHour());
Serial.print(":");
if (currentTime.getMinutes() < 10) Serial.print("0");
Serial.print(currentTime.getMinutes());
Serial.print(":");
if (currentTime.getSeconds() < 10) Serial.print("0");
Serial.println(currentTime.getSeconds());
lastPrint = millis();
}
delay(10);
}
Métodos de la API
Métodos de la clase DIYablesWebRTCPage
onTimeSyncFromWeb(callback)
- Establece la función de callback para manejar la sincronización de la hora desde el navegador web
- Parámetro: void (*callback)(unsigned long unixTimestamp)
- Uso: Se llama cuando el usuario hace clic en el botón 'Sincronizar la hora de Arduino'
solicitudEnTiempoAWeb(callback)
- Establece la función de devolución de llamada para manejar las solicitudes de tiempo desde el navegador web
- Parámetro: void (*callback)()
- Uso: Se llama cuando la interfaz web solicita la hora actual de Arduino
sendTimeToWeb(año, mes, día, hora, minuto, segundo)
- Envía la hora actual de Arduino a la interfaz web
- Parámetros:
- year: año actual (p. ej., 2025)
- mes: Mes actual (1-12)
- día: Día actual del mes (1-31)
- hour: Hora actual (0-23)
- minute: Minuto actual (0-59)
- second: Segundo actual (0-59)
Comunicación WebSocket
Mensajes desde la Web hacia Arduino
- RTC:GET_TIME - Solicitar la hora actual de Arduino
- RTC:SYNC:[timestamp] - Sincronizar la hora de Arduino con la marca de tiempo Unix
Mensajes de Arduino a la Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Envía los componentes de la hora actual de Arduino
Solución de problemas
Problemas comunes
1. Diferencia horaria de varias horas
- Problema: Arduino muestra la hora con varias horas de diferencia respecto a la hora del dispositivo
- Causa: Por lo general un problema de zona horaria o la RTC no está inicializada correctamente
- Solución:
- Haz clic en el botón "Sincronizar la hora de Arduino" para volver a sincronizar
- Verifica si RTC está correctamente inicializado en setup()
- Verificar que la conexión WiFi esté estable
2. "No está conectado a Arduino" Error
- Problema: Error al hacer clic en el botón de sincronización
- Causa: La conexión WebSocket falló
- Solución:
- Verificar si la dirección IP del Arduino es correcta
- Actualiza la página web
- Verificar que Arduino esté conectado a la misma red Wi-Fi.
- Verificar la configuración del cortafuegos
3. El tiempo deja de actualizarse
- Problema: La visualización de la hora se congela o no se actualiza
- Causa: Se perdió la conexión WebSocket o el RTC dejó de funcionar
- Solución:
- Recargar la página web
- Verificar el estado de la conexión WebSocket
- Reinicia Arduino si el RTC deja de responder
4. Grandes diferencias de tiempo (días/meses)
- Issue: La diferencia de tiempo muestra miles de minutos
- Cause: RTC no estaba configurado correctamente o se ha desviado significativamente
- Solution: Haga clic en el botón de sincronización varias veces y verifique las funciones de devolución de llamada
Consejos de depuración
Activar la depuración por puerto serie:
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// ... rest of function
}
void onTimeRequested() {
Serial.println("Time request received from web");
// ... rest of function
}
Verificar la inicialización del RTC:
void setup() {
// ... other setup code
if (RTC.begin()) {
Serial.println("RTC initialized successfully");
} else {
Serial.println("RTC initialization failed!");
}
}
Uso Avanzado
Registro de datos con marcas de tiempo
void logSensorData(float temperature, float humidity) {
RTCTime currentTime;
RTC.getTime(currentTime);
String logEntry = String(currentTime.getYear()) + "-" +
String(currentTime.getMonth()) + "-" +
String(currentTime.getDayOfMonth()) + " " +
String(currentTime.getHour()) + ":" +
String(currentTime.getMinutes()) + ":" +
String(currentTime.getSeconds()) + " - " +
"Temp: " + String(temperature) + "°C, " +
"Humidity: " + String(humidity) + "%";
Serial.println(logEntry);
// Save to SD card, send to database, etc.
}
Acciones programadas
void checkScheduledActions() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Turn on LED every day at 6:00 AM
if (currentTime.getHour() == 6 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, HIGH);
Serial.println("Morning LED activated!");
}
// Turn off LED every day at 10:00 PM
if (currentTime.getHour() == 22 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, LOW);
Serial.println("Evening LED deactivated!");
}
}
Integración de múltiples aplicaciones web
// Combine WebRTC with other web apps
server.addWebApp(rtcPage); // Real-time clock
server.addWebApp(monitorPage); // Serial monitor with timestamps
server.addWebApp(plotterPage); // Data plotting with time axis
Aplicaciones y Casos de Uso
Proyectos educativos
- Aprendizaje de la gestión del tiempo: Enseñar a los estudiantes sobre RTC, la medición del tiempo y la sincronización
- Conceptos de tiempo en IoT: Demostrar la sincronización de tiempo en sistemas IoT
- Proyectos de registro de datos: Añadir marcas de tiempo a las lecturas de sensores y a los experimentos
- Sistemas de programación: Crear sistemas de automatización y control basados en el tiempo
Aplicaciones del mundo real
- Automatización del hogar: Programar luces, riego u otros dispositivos
- Adquisición de datos: Anotar las lecturas de sensores con marca de tiempo para su análisis
- Registro de eventos: Registrar cuándo ocurren eventos específicos con una temporización precisa
- Monitoreo remoto: Consultar el estado de los dispositivos y las últimas actualizaciones de forma remota
Beneficios de la educación STEM
- Conceptos de zonas horarias: Comprender la hora local frente a UTC y el manejo de zonas horarias
- Comunicación en red: Aprender la comunicación WebSocket y actualizaciones en tiempo real
- Integración de hardware: Combinar interfaces web con la funcionalidad de RTC del hardware
- Resolución de problemas: Depurar problemas de temporización y de sincronización
Especificaciones técnicas
Uso de memoria
- Memoria Flash: ~8KB para la funcionalidad de WebRTC
- SRAM: ~2KB durante la operación
- Buffer de WebSocket: ~1KB para el manejo de mensajes
Características de rendimiento
- Frecuencia de actualización: Actualizaciones en tiempo real a través de WebSocket
- Precisión de sincronización: Normalmente entre 1 y 2 segundos
- Sobrecarga de red: ~50 bytes por mensaje de actualización de tiempo
- Tiempo de respuesta: <100 ms para operaciones de sincronización de tiempo
Compatibilidad
- Placas Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Navegadores: Todos los navegadores modernos con soporte para WebSocket
- Dispositivos: Escritorio, tableta y dispositivos móviles
- Redes: Redes WiFi con acceso a Internet
Resumen
El ejemplo de WebRTC demuestra cómo:
- Crear una interfaz de reloj en tiempo real basada en la web
- Sincronizar el RTC de Arduino con la hora del navegador web
- Mostrar la información de la hora en un formato fácil de usar
- Monitorear las diferencias de hora y el estado de la conexión
- Integrar la funcionalidad de tiempo con otras aplicaciones web
- Construir proyectos educativos de IoT con funciones de gestión del tiempo
Este ejemplo es perfecto para proyectos que requieren una medición precisa del tiempo, registro de datos con marcas de tiempo, automatización programada y demostraciones educativas de conceptos de sincronización de tiempo en sistemas IoT.