Exemple Arduino WebRTC - Tutoriel sur l'interface d'une horloge en temps réel
Vue d'ensemble
L'exemple WebRTC fournit une interface complète d'horloge en temps réel pour vos projets Arduino. Conçu pour Arduino Uno R4 WiFi et DIYables STEM V4 IoT, plateforme éducative dotée de capacités RTC intégrées, de fonctionnalités de gestion du temps améliorées et d'une intégration transparente avec l'écosystème éducatif. Vous pouvez afficher les informations de l'horloge en temps réel, synchroniser l'heure depuis le navigateur Web vers Arduino et surveiller les écarts de temps via une interface Web intuitive.
Fonctionnalités
- Affichage de l'horloge en temps réel: Affiche l'heure RTC actuelle de l'Arduino avec des mises à jour automatiques
- Comparaison de l'heure du périphérique: Affiche l'heure du navigateur Web et celle de l'Arduino
- Synchronisation de l'heure en un clic: Synchroniser l'horloge RTC de l'Arduino avec l'heure du navigateur Web instantanément
- Indicateur visuel de l'écart temporel: Affiche le décalage entre les horloges des appareils en minutes
- Format sur deux lignes: format 12 heures AM/PM avec affichage complet de la date
- Interface moderne avec dégradé: Mise en page en carte et design réactif
- Communication WebSocket: Mises à jour bidirectionnelles en temps réel sans rafraîchissement de la page
- Synchronisation tenant compte du fuseau horaire: Utilise l'heure locale de l'appareil pour une synchronisation précise
- Surveillance de l'état de la connexion: Indicateurs visuels de l'état de la connexion WebSocket
- Requêtes automatiques de l'heure: Effectue des requêtes automatiques de l'heure lors du chargement de la page
- Plateforme extensible: Actuellement implémentée pour Arduino Uno R4 WiFi, mais peut être étendue à d'autres plates-formes matérielles. Voir DIYables_WebApps_ESP32
Préparation du matériel
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables STEM V4 IoT (Arduino inclus) | |
| 1 | × | Kit de Capteurs DIYables (30 capteurs/écrans) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Instructions d'installation
Étapes rapides
Suivez ces instructions étape par étape :
- Si c'est votre première utilisation de l'Arduino Uno R4 WiFi/DIYables STEM V4 IoT, reportez-vous au tutoriel sur Arduino UNO R4 - Installation du logiciel..
- Connectez la carte Arduino Uno R4/DIYables STEM V4 IoT à votre ordinateur à l'aide d'un câble USB.
- Lancez l'IDE Arduino sur votre ordinateur.
- Sélectionnez la carte Arduino Uno R4 appropriée (par exemple, Arduino Uno R4 WiFi) et le port COM.
- Accédez à l'icône Libraries dans la barre de gauche de l'IDE Arduino.
- Recherchez "DIYables WebApps", puis trouvez la bibliothèque DIYables WebApps par DIYables
- Cliquez sur le bouton Install pour installer la bibliothèque.
- Vous serez invité à installer d'autres dépendances logicielles
- Cliquez sur le bouton Tout installer pour installer toutes les dépendances logicielles.
- Dans l'IDE Arduino, allez dans Fichier Exemples DIYables WebApps WebRTC exemple, ou copiez le code ci-dessus et collez-le dans l'éditeur de l'IDE 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());
}
- Configurez les identifiants WiFi dans le code en mettant à jour ces lignes:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Cliquez sur le bouton Upload dans l'IDE Arduino pour téléverser le code sur l'Arduino.
- Ouvrez le Moniteur série dans l'IDE Arduino.
- Attendez la connexion au Wi-Fi et l'affichage des informations Wi-Fi dans le Moniteur série.
- Vérifiez le résultat dans le Moniteur série. Il ressemble à ce qui suit.
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 vous ne voyez rien, redémarrez la carte Arduino.
Utilisation de l'interface Web
- Ouvrez un navigateur web sur votre ordinateur ou votre appareil mobile connecté au même réseau Wi‑Fi
- Saisissez l'adresse IP affichée dans le Moniteur série dans le navigateur web
- Exemple : http://192.168.1.100
- Vous verrez la page d'accueil comme sur l'image ci-dessous :
- Cliquez sur le lien Web RTC, vous verrez l'interface utilisateur de l'application Web RTC comme ci-dessous :
- Ou vous pouvez également accéder directement à la page en utilisant l'adresse IP suivie de /web-rtc. Par exemple : http://192.168.1.100/web-rtc
- Vous verrez l'interface Web RTC s'afficher :
- Temps Arduino : l'heure actuelle du RTC de l'Arduino
- L'heure de votre appareil: Heure actuelle affichée par votre navigateur/appareil
- Écart de temps: Différence entre les deux temps en minutes
- Bouton de synchronisation de l'heure Arduino: Cliquez pour synchroniser l'heure de l'Arduino avec votre appareil
Synchronisation de l'heure
- Cliquez sur le bouton "Synchroniser l'heure de l'Arduino" pour synchroniser l'horloge RTC de l'Arduino avec l'heure locale de votre appareil.
- Le processus de synchronisation :
- Obtenir l'heure locale actuelle de votre appareil (et non UTC)
- Ajuste le décalage horaire pour assurer une synchronisation précise de l'heure locale
- Envoie l'horodatage à l'Arduino via WebSocket
- L'Arduino met à jour son RTC avec l'heure reçue
- L'interface Web se met à jour pour afficher l'heure synchronisée
Après la synchronisation, la différence d'heure devrait être minimale (généralement entre 0 et 1 minute)
L'Arduino conservera une heure précise même après la fermeture de l'interface Web
Explication du code
Composants clés
#include <DIYablesWebApps.h>
#include <RTC.h>
// Initialize web server and RTC page
DIYablesWebAppServer server;
DIYablesWebRTCPage rtcPage;
Fonction de configuration
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();
}
Fonctions de rappel
Rappel de synchronisation de l'heure:
// 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!");
}
Rappel de la demande de temps :
// 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()
);
}
Boucle principale
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éthodes de l'API
Méthodes de la classe DIYablesWebRTCPage
onTimeSyncFromWeb(callback)
- Définit la fonction de rappel pour gérer la synchronisation de l'heure à partir du navigateur Web
- Paramètre: void (*callback)(unsigned long unixTimestamp)
- Utilisation: Appelé lorsque l'utilisateur clique sur le bouton « Synchroniser l'heure Arduino »
onTimeRequestToWeb(callback)
- Définit la fonction de rappel pour gérer les demandes de temps provenant du navigateur Web.
- Paramètre : void (*callback)()
- Utilisation : Appelée lorsque l'interface Web demande l'heure actuelle de l'Arduino.
envoyerTempsVersLeWeb(année, mois, jour, heure, minute, seconde)
- Envoie l'heure actuelle d'Arduino à l'interface Web
- Paramètres:
- year: Année en cours (par exemple, 2025)
- month: Mois en cours (1-12)
- jour: Jour actuel du mois (1-31)
- hour : Heure actuelle (0-23)
- minute: Minute actuelle (0-59)
- second: Seconde actuelle (0-59)
Communication WebSocket
Messages du Web vers Arduino
- RTC:GET_TIME - Obtenir l'heure actuelle d'Arduino
- RTC:SYNC:[timestamp] - Synchroniser l'heure d'Arduino avec l'horodatage Unix
Messages d'Arduino vers le Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Envoyer les composants de l'heure actuelle d'Arduino
Dépannage
Problèmes courants
- Décalage de plusieurs heures
- Problème: L'Arduino affiche une heure qui diffère de plusieurs heures par rapport à l'heure de l'appareil
- Cause: Généralement un problème de fuseau horaire ou le RTC n'est pas correctement initialisé
- Solution:
- Cliquez sur le bouton « Synchroniser l'heure de l'Arduino » pour résynchroniser
- Vérifie si le RTC est correctement initialisé dans setup()
- Vérifier que la connexion Wi-Fi est stable
2. "Non connecté à Arduino" Erreur
- Problème: Erreur lors du clic sur le bouton de synchronisation
- Cause: La connexion WebSocket a échoué
- Solution:
- Vérifier si l'adresse IP de l'Arduino est correcte
- Actualiser la page
- Vérifiez que l'Arduino est connecté au même réseau Wi-Fi
- Vérifiez les paramètres du pare-feu
3. Le temps cesse de se mettre à jour
- Problème: L'affichage de l'heure se fige ou ne se met pas à jour
- Cause: Connexion WebSocket perdue ou RTC arrêté
- Solution:
- Actualiser la page web
- Vérifier l'état de la connexion WebSocket
- Redémarrez l'Arduino si le RTC ne répond plus.
4. Grandes différences temporelles (jours/mois)
- Problème: La différence de temps affiche des milliers de minutes
- Cause: La RTC n'était pas correctement réglée ou a dérivé de manière significative
- Solution: Cliquez sur le bouton de synchronisation à plusieurs reprises et vérifiez les fonctions de rappel
Conseils de débogage
Activer le débogage série :
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
}
Vérifier l'initialisation de la RTC:
void setup() {
// ... other setup code
if (RTC.begin()) {
Serial.println("RTC initialized successfully");
} else {
Serial.println("RTC initialization failed!");
}
}
Utilisation avancée
Journalisation des données avec horodatages
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.
}
Actions planifiées
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!");
}
}
Intégration de plusieurs applications 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
Applications et cas d'utilisation
Projets éducatifs
- Apprentissage de la gestion du temps: enseigner aux étudiants le RTC, la chronométrie et la synchronisation
- Notions de temps pour l'IoT: démontrer la synchronisation du temps réseau dans les systèmes IoT
- Projets d'enregistrement de données: ajouter des horodatages aux lectures des capteurs et aux expériences
- Systèmes de planification: créer des systèmes d'automatisation et de contrôle basés sur le temps
Applications du monde réel
- Domotique: Planifier les lumières, l'irrigation ou d'autres appareils
- Acquisition de données: Horodatage des relevés de capteurs pour l'analyse
- Journalisation des événements: Enregistrer le moment où des événements spécifiques se produisent avec un horodatage précis
- Surveillance à distance: Vérifier l'état des appareils et les horodatages des dernières mises à jour
Avantages de l'éducation STEM
- Concepts de fuseaux horaires: Comprendre l'heure locale par rapport à l'UTC et la gestion des fuseaux horaires
- Communication réseau: Apprendre la communication WebSocket et les mises à jour en temps réel
- Intégration matérielle: Combiner les interfaces web avec la fonctionnalité RTC matérielle
- Résolution de problèmes: Déboguer les problèmes de temporisation et de synchronisation
Spécifications techniques
Utilisation de la mémoire
- Mémoire Flash: ~8 Ko pour la fonctionnalité WebRTC
- SRAM: ~2 Ko pendant le fonctionnement
- Tampon WebSocket: ~1 Ko pour la gestion des messages
Caractéristiques de performance
- Fréquence de mise à jour : mises à jour en temps réel via WebSocket
- Précision de synchronisation : typiquement entre 1 et 2 secondes
- Surcharge réseau : environ 50 octets par message de mise à jour de l'heure
- Temps de réponse : <100 ms pour les opérations de synchronisation de l'heure
Compatibilité
- Cartes Arduino: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Navigateurs: Tous les navigateurs modernes prenant en charge WebSocket
- Périphériques: Ordinateur de bureau, tablette et appareils mobiles
- Réseaux: Réseaux Wi‑Fi avec accès à Internet
Résumé
L'exemple WebRTC montre comment :
- Créer une interface d'horloge en temps réel basée sur le Web
- Synchroniser le RTC Arduino avec l'heure du navigateur web
- Afficher les informations sur l'heure dans un format convivial
- Surveiller les écarts de temps et l'état de la connexion
- Intégrer les fonctionnalités liées au temps avec d'autres applications web
- Concevoir des projets IoT éducatifs avec des fonctionnalités de gestion du temps
Cet exemple est parfait pour les projets nécessitant une mesure du temps précise, l’enregistrement des données avec horodatages, une automatisation programmée et des démonstrations pédagogiques des concepts de synchronisation du temps dans les systèmes IoT.