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 Démarrage DIYables STEM V4B IoT (Arduino inclus) | |
| 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.
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Uno R4 WiFi' on 'COM15')
New Line
9600 baud
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
==========================================
- 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
Tutoriel vidéo
La démo vidéo ci-dessous utilise le code ci-dessous :
/*
* Ce code Arduino UNO R4 a été développé par newbiely.fr
* Ce code Arduino UNO R4 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/arduino-uno-r4/diyables-web-apps-web-rtc
*/
/**
* @file SmartPillReminder.ino
* @brief IoT Medication Reminder System using Arduino Uno R4 WiFi hardware RTC.
* * This firmware integrates an asynchronous Web Server for RTC synchronization,
* a MAX7219 8x32 LED Matrix driven by SPI, and a discrete GPIO active buzzer.
* Memory safety is enforced via static buffer allocation to prevent runtime heap corruption.
* * Hardware Connections:
* - MAX7219 VCC -> 5V
* - MAX7219 GND -> GND
* - MAX7219 DIN -> Pin 11 (COPI/MOSI)
* - MAX7219 CLK -> Pin 13 (SCK)
* - MAX7219 CS -> Pin 10 (SS)
* - Active Buzzer -> Pin 8 (GPIO Output)
*/
#include <DIYablesWebApps.h>
#include "RTC.h"
#include <MD_Parola.h>
#include <MD_MAX72xx.h>
// --- NETWORK PERIPHERAL CONFIGURATION ---
const char WIFI_SSID[] = "Nhuan 3";
const char WIFI_PASSWORD[] = "15671108";
// --- DISPLAY SUBSYSTEM CONFIGURATION ---
#define HARDWARE_TYPE MD_MAX72XX::FC16_HW // Hardware register layout variant for physical modules
#define MAX_DEVICES 4 // Number of cascaded 8x8 matrix blocks
#define CS_PIN 9 // SPI Chip Select active-low hardware pin
MD_Parola ledMatrix = MD_Parola(HARDWARE_TYPE, CS_PIN, MAX_DEVICES);
// --- ALARM SUBSYSTEM ARCHITECTURE ---
const int BUZZER_PIN = 8;
bool isAlarming = false; // State flag to prevent redundant re-initialization of display buffers
struct AlarmTime {
int hour;
int minute;
};
// Scheduled alarm matrices for daily medication dispatch
const int TOTAL_ALARMS = 3;
AlarmTime medicationAlarms[TOTAL_ALARMS] = {
{12, 11}, // Slot 1: Morning Dose
{12, 12}, // Slot 2: Noon Dose
{12, 13} // Slot 3: Evening Dose
};
// Fixed-size static allocation to prevent dangling pointers during stack deallocation
char AlertMsg[50] = "";
// --- WEB SERVER ROUTING ENGINE ---
UnoR4ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
// --- ISR AND CALLBACK FUNCTION PROTOTYPES ---
void onTimeSyncReceived(unsigned long unixTimestamp);
void onTimeRequested();
/**
* @brief Hardware initialization routine.
*/
void setup() {
Serial.begin(9600);
delay(1000);
// Configure GPIO peripherals
pinMode(BUZZER_PIN, OUTPUT);
digitalWrite(BUZZER_PIN, LOW);
// Initialize SPI-driven LED Matrix
ledMatrix.begin();
ledMatrix.setIntensity(3); // Brightness optimization register value to prevent camera sensor overexposure
ledMatrix.displayClear();
// Set initial boot token into display queue
ledMatrix.displayText("Medicine Reminder System READY", PA_LEFT, 60, 2000, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
Serial.println("[SYS] System initializing in production hardware mode...");
// Initialize internal Renesas RA4W1 hardware RTC module
RTC.begin();
RTCTime savedTime;
RTC.getTime(savedTime);
// Verify internal register state; apply fallback parameters if clock counters are reset
if (!RTC.isRunning() || savedTime.getYear() == 2000) {
// Synchronize to 20:19:45 for quick demonstration testing (15-second delay to Slot 3 trigger)
RTCTime startTime(24, Month::MAY, 2026, 20, 19, 45, DayOfWeek::SUNDAY, SaveLight::SAVING_TIME_ACTIVE);
RTC.setTime(startTime);
Serial.println("[RTC] Hardware clock initialized with localized test vector.");
}
// Construct Web App HTTP server routing layers
webAppsServer.addApp(&homePage);
webAppsServer.addApp(&webRTCPage);
webAppsServer.setNotFoundPage(DIYablesNotFoundPage());
// Bind async event listeners to the network stack callbacks
webRTCPage.onTimeSyncFromWeb(onTimeSyncReceived);
webRTCPage.onTimeRequestToWeb(onTimeRequested);
// Initialize network link layer socket connection
if (!webAppsServer.begin(WIFI_SSID, WIFI_PASSWORD)) {
while (1) {
Serial.println("[ERR] Fatal: Local network connection timed out.");
delay(1000);
}
}
Serial.print("[NET] Infrastructure active. Device IP: ");
Serial.println(WiFi.localIP());
}
/**
* @brief Infinite execution control loop.
*/
void loop() {
// Process inbound TCP/IP socket packets for the Web UI
webAppsServer.loop();
// Non-blocking shift engine: Calculates next step pixel translations on every pass
if (ledMatrix.displayAnimate()) {
ledMatrix.displayReset();
}
// Time-sliced task execution block running at a strict 1000ms polling interval
static unsigned long lastUpdate = 0;
if (millis() - lastUpdate >= 1000) {
lastUpdate = millis();
// Fetch snapshot of current counter states from the hardware RTC registers
RTCTime currentTime;
RTC.getTime(currentTime);
int currentH = currentTime.getHour();
int currentM = currentTime.getMinutes();
int currentS = currentTime.getSeconds();
// Send data to system diagnostics terminal
Serial.print("[LOG] Time: ");
Serial.print(currentH); Serial.print(":");
Serial.print(currentM); Serial.print(":");
Serial.println(currentS);
// Sequential search scan across active alarm vectors
for (int i = 0; i < TOTAL_ALARMS; i++) {
if (currentH == medicationAlarms[i].hour &&
currentM == medicationAlarms[i].minute &&
currentS == 0) {
// Conditional gate to prevent continuous buffer overwrites within the same second
if (!isAlarming) {
isAlarming = true;
// Low-level buffer formatting to map runtime integers into locked memory space
// %02d pads leading zeros to preserve fixed structural layout formatting [HH:MM]
sprintf(AlertMsg, "TAKE MEDICATION ! [%02d:%02d] ", currentH, currentM);
ledMatrix.displayClear();
// Link the safe static memory pointer directly into the display rendering core
ledMatrix.displayText(AlertMsg, PA_LEFT, 60, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
Serial.print("[ALARM] Array index match detected at slot ID: ");
Serial.println(i + 1);
}
}
}
// Auto-timeout block: Clears state metrics after 30 elapsed duty seconds
if (currentS >= 20 && isAlarming) {
isAlarming = false;
ledMatrix.displayClear();
ledMatrix.displayText("Medicine Reminder System With WEB RTC", PA_LEFT, 60, 0, PA_SCROLL_LEFT, PA_SCROLL_LEFT);
Serial.println("[ALARM] Trigger window expired. Display registers reset to default state.");
}
// Synchronize current timing matrices with remote HTTP client dashboards
// Placed after display execution logic to avoid bus contention or bus noise interference
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentH, currentM, currentS);
}
// Asynchronous Active Buzzer Duty Cycle Control (50% duty cycle, 1Hz rate square-wave generator)
if (isAlarming) {
static unsigned long lastBuzzerToggle = 0;
if (millis() - lastBuzzerToggle >= 500) {
lastBuzzerToggle = millis();
digitalWrite(BUZZER_PIN, !digitalRead(BUZZER_PIN)); // Invert state logic
}
} else {
digitalWrite(BUZZER_PIN, LOW); // Enforce noise suppression when system state is idle
}
delay(10); // System cycle stabilizer trashing delay
}
/**
* @brief Async event parser executed on receipt of a valid browser UNIX timestamp token.
* @param unixTimestamp Incoming epoch time from the remote client.
*/
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("[NET] Inbound synchronization frame detected: ");
Serial.println(unixTimestamp);
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
RTC.setTime(newTime); // Commit new parameter metrics into hardware counter arrays
Serial.println("[RTC] Hardware clock sync cycle completed.");
}
/**
* @brief Async service routine parsing internal clock metrics to outgoing polling requests.
*/
void onTimeRequested() {
RTCTime currentTime;
RTC.getTime(currentTime);
webRTCPage.sendTimeToWeb(currentTime.getYear(), Month2int(currentTime.getMonth()),
currentTime.getDayOfMonth(), currentTime.getHour(),
currentTime.getMinutes(), currentTime.getSeconds());
}
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.