Arduino WebRTC Voorbeeld - Real-Time Clock Interface Tutorial
Overzicht
Het WebRTC voorbeeld biedt een uitgebreide real-time klok interface voor uw Arduino projecten. Ontworpen voor Arduino Uno R4 WiFi en DIYables STEM V4 IoT educatief platform met ingebouwde RTC-mogelijkheden, verbeterde tijdbeheerfuncties, en naadloze integratie met het educatieve ecosysteem. U kunt real-time klokinformatie weergeven, tijd synchroniseren van webbrowser naar Arduino, en tijdsverschillen monitoren via een intuïtieve webinterface.
Functies
- Real-time Klok Weergave: Toont huidige Arduino RTC tijd met automatische updates
- Apparaat Tijd Vergelijking: Weergave van webbrowser/apparaat tijd naast Arduino tijd
- Eén-klik Tijdsynchronisatie: Synchroniseer Arduino RTC met webbrowser tijd direct
- Visuele Tijdsverschil Indicator: Toont tijdafwijking tussen apparaten in minuten
- Twee-regel Tijd Formaat: 12-uurs AM/PM formaat met volledige datumweergave
- Moderne Gradiënt UI: Kaart-stijl layout met responsief ontwerp
- WebSocket Communicatie: Real-time bidirectionele updates zonder pagina vernieuwen
- Tijdzone-bewuste Synchronisatie: Gebruikt lokale apparaat tijd voor accurate sync
- Verbindingsstatus Monitoring: Visuele indicatoren voor WebSocket verbindingsstatus
- Automatische Tijd Verzoeken: Vraagt huidige Arduino tijd bij pagina laden
- Platform Uitbreidbaar: Momenteel geïmplementeerd voor Arduino Uno R4 WiFi, maar kan uitgebreid worden voor andere hardware platforms. Zie DIYables_WebApps_ESP32
Benodigde Hardware
Of u kunt de volgende kits kopen:
| 1 | × | DIYables STEM V4 IoT Starterskit (Arduino inbegrepen) | |
| 1 | × | DIYables Sensorkit (30 sensoren/displays) | |
| 1 | × | DIYables Sensorkit (18 sensoren/displays) |
Openbaarmaking: Sommige van de links in deze sectie zijn Amazon-affiliate links. We kunnen een commissie ontvangen voor aankopen die via deze links worden gedaan, zonder extra kosten voor u. We waarderen uw steun.
Setup Instructies
Snelle Stappen
Volg deze instructies stap voor stap:
- Als dit uw eerste keer is met de Arduino Uno R4 WiFi/DIYables STEM V4 IoT, raadpleeg de tutorial over het instellen van de omgeving voor Arduino Uno R4 WiFi/DIYables STEM V4 IoT in de Arduino IDE.
- Verbind het Arduino Uno R4/DIYables STEM V4 IoT board met uw computer met een USB kabel.
- Start de Arduino IDE op uw computer.
- Selecteer het juiste Arduino Uno R4 board (bijv., Arduino Uno R4 WiFi) en COM poort.
- Navigeer naar het Libraries icoon in de linker balk van de Arduino IDE.
- Zoek "DIYables WebApps", vind vervolgens de DIYables WebApps bibliotheek van DIYables
- Klik op de Install knop om de bibliotheek te installeren.
- U wordt gevraagd om enkele andere bibliotheekafhankelijkheden te installeren
- Klik op de Install All knop om alle bibliotheekafhankelijkheden te installeren.
- In Arduino IDE, ga naar File Examples DIYables WebApps WebRTC voorbeeld, of kopieer de bovenstaande code en plak het in de editor van Arduino IDE
/*
* 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());
}
- Configureer WiFi inloggegevens in de code door deze regels bij te werken:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klik op de Upload knop in Arduino IDE om de code naar Arduino te uploaden.
- Open de Serial Monitor in Arduino IDE
- Wacht op de verbinding met WiFi en de prints van WiFi informatie op Serial Monitor.
- Bekijk het resultaat op Serial Monitor. Het ziet er als volgt uit
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
- Als u niets ziet, herstart het Arduino board.
Gebruik van de Web Interface
- Open een webbrowser op uw computer of mobiele apparaat verbonden met hetzelfde WiFi netwerk
- Type het IP adres getoond in de Serial Monitor in de webbrowser
- Voorbeeld: http://192.168.1.100
- U ziet de homepage zoals onderstaande afbeelding:
- Klik op de Web RTC link, u ziet de Web RTC app's UI zoals hieronder:
- Of u kunt ook direct naar de pagina gaan via IP adres gevolgd door /web-rtc. Bijvoorbeeld: http://192.168.1.100/web-rtc
- U ziet de Web RTC interface met:
- Arduino Tijd: Huidige tijd van de Arduino's RTC
- Uw Apparaat Tijd: Huidige tijd van uw webbrowser/apparaat
- Tijdsverschil: Verschil tussen de twee tijden in minuten
- Synchroniseer Arduino Tijd Knop: Klik om Arduino tijd te synchroniseren met uw apparaat
Tijdsynchronisatie
- Klik op de "Sync Arduino Time" knop om de Arduino's RTC te synchroniseren met uw apparaat's lokale tijd
- Het synchronisatieproces:
- Haalt uw apparaat's huidige lokale tijd op (niet UTC)
- Past aan voor tijdzone offset om accurate lokale tijd sync te verzekeren
- Stuurt timestamp naar Arduino via WebSocket
- Arduino werkt zijn RTC bij met de ontvangen tijd
- Web interface werkt bij om de gesynchroniseerde tijd te tonen
Na synchronisatie zou het tijdsverschil minimaal moeten zijn (meestal 0-1 minuten)
De Arduino houdt accurate tijd aan zelfs nadat de web interface gesloten is
Code Uitleg
Belangrijkste Componenten
#include <DIYablesWebApps.h>
#include <RTC.h>
// Initialiseer web server en RTC pagina
DIYablesWebAppServer server;
DIYablesWebRTCPage rtcPage;
Setup Functie
void setup() {
Serial.begin(9600);
// Initialiseer RTC
RTC.begin();
// Setup WiFi verbinding
server.setupWiFi(WIFI_SSID, WIFI_PASSWORD);
// Voeg RTC pagina toe aan server
server.addWebApp(rtcPage);
// Stel callback functies in
rtcPage.onTimeSyncFromWeb(onTimeSyncReceived);
rtcPage.onTimeRequestToWeb(onTimeRequested);
// Start de server
server.begin();
}
Callback Functies
Tijdsynchronisatie Callback:
// Aangeroepen wanneer web interface tijd sync commando stuurt
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// Converteer Unix timestamp naar RTCTime
RTCTime newTime;
newTime.setUnixTime(unixTimestamp);
// Stel RTC tijd in
RTC.setTime(newTime);
Serial.println("Arduino RTC synchronized!");
}
Tijd Verzoek Callback:
// Aangeroepen wanneer web interface huidige Arduino tijd vraagt
void onTimeRequested() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Stuur huidige tijd naar web interface
rtcPage.sendTimeToWeb(
currentTime.getYear(),
currentTime.getMonth(),
currentTime.getDayOfMonth(),
currentTime.getHour(),
currentTime.getMinutes(),
currentTime.getSeconds()
);
}
Main Loop
void loop() {
server.handleClient();
// Optioneel: Print huidige tijd elke 10 seconden
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);
}
API Methoden
DIYablesWebRTCPage Klasse Methoden
onTimeSyncFromWeb(callback)
- Stelt de callback functie in om tijdsynchronisatie van webbrowser af te handelen
- Parameter: void (*callback)(unsigned long unixTimestamp)
- Gebruik: Aangeroepen wanneer gebruiker op "Sync Arduino Time" knop klikt
onTimeRequestToWeb(callback)
- Stelt de callback functie in om tijd verzoeken van webbrowser af te handelen
- Parameter: void (*callback)()
- Gebruik: Aangeroepen wanneer web interface huidige Arduino tijd vraagt
sendTimeToWeb(year, month, day, hour, minute, second)
- Stuurt huidige Arduino tijd naar web interface
- Parameters:
- year: Huidig jaar (bijv., 2025)
- month: Huidige maand (1-12)
- day: Huidige dag van maand (1-31)
- hour: Huidig uur (0-23)
- minute: Huidige minuut (0-59)
- second: Huidige seconde (0-59)
WebSocket Communicatie
Berichten van Web naar Arduino
- RTC:GET_TIME - Vraag huidige Arduino tijd
- RTC:SYNC:[timestamp] - Synchroniseer Arduino tijd met Unix timestamp
Berichten van Arduino naar Web
- DATETIME:YYYY,MM,DD,HH,MM,SS - Stuur huidige Arduino tijd componenten
Probleemoplossing
Veelvoorkomende Problemen
1. Tijdsverschil van Meerdere Uren
- Probleem: Arduino toont tijd meerdere uren verschillend van apparaat tijd
- Oorzaak: Meestal een tijdzone probleem of RTC niet correct geïnitialiseerd
- Oplossing:
- Klik op "Sync Arduino Time" knop om te hersynchroniseren
- Controleer of RTC correct geïnitialiseerd is in setup()
- Verifieer of WiFi verbinding stabiel is
- Probleem: Fout bij klikken op sync knop
- Oorzaak: WebSocket verbinding mislukt
- Oplossing:
- Controleer of Arduino IP adres correct is
- Vernieuw de webpagina
- Verifieer dat Arduino verbonden is met hetzelfde WiFi netwerk
- Controleer firewall instellingen
- Probleem: Tijd weergave bevriest of werkt niet bij
- Oorzaak: WebSocket verbinding verloren of RTC gestopt
- Oplossing:
- Vernieuw de webpagina
- Controleer WebSocket verbindingsstatus
- Herstart Arduino als RTC niet meer reageert
- Probleem: Tijdsverschil toont duizenden minuten
- Oorzaak: RTC was niet correct ingesteld of heeft aanzienlijk afgeweken
- Oplossing: Klik meerdere keren op sync knop en verifieer callback functies
2. "Not connected to Arduino" Fout
3. Tijd Stopt met Bijwerken
4. Grote Tijdsverschillen (Dagen/Maanden)
Debug Tips
Schakel Serial Debugging in:
void onTimeSyncReceived(unsigned long unixTimestamp) {
Serial.print("Time sync received: ");
Serial.println(unixTimestamp);
// ... rest van functie
}
void onTimeRequested() {
Serial.println("Time request received from web");
// ... rest van functie
}
Controleer RTC Initialisatie:
void setup() {
// ... andere setup code
if (RTC.begin()) {
Serial.println("RTC initialized successfully");
} else {
Serial.println("RTC initialization failed!");
}
}
Geavanceerd Gebruik
Data Logging met Timestamps
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);
// Opslaan op SD kaart, sturen naar database, etc.
}
Geplande Acties
void checkScheduledActions() {
RTCTime currentTime;
RTC.getTime(currentTime);
// Zet LED aan elke dag om 6:00 AM
if (currentTime.getHour() == 6 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, HIGH);
Serial.println("Morning LED activated!");
}
// Zet LED uit elke dag om 10:00 PM
if (currentTime.getHour() == 22 && currentTime.getMinutes() == 0) {
digitalWrite(LED_BUILTIN, LOW);
Serial.println("Evening LED deactivated!");
}
}
Meerdere Web Apps Integratie
// Combineer WebRTC met andere web apps
server.addWebApp(rtcPage); // Real-time klok
server.addWebApp(monitorPage); // Serial monitor met timestamps
server.addWebApp(plotterPage); // Data plotting met tijd as
Toepassingen en Gebruiksscenario's
Educatieve Projecten
- Tijdbeheer Leren: Leer studenten over RTC, tijdmeting en synchronisatie
- IoT Tijd Concepten: Demonstreer netwerk tijdsynchronisatie in IoT systemen
- Data Logging Projecten: Voeg timestamps toe aan sensor metingen en experimenten
- Plannningssystemen: Creëer tijd-gebaseerde automatisering en controle systemen
Echte Toepassingen
- Domotica: Plan verlichting, irrigatie, of andere apparaten
- Data Acquisitie: Timestamp sensor metingen voor analyse
- Event Logging: Registreer wanneer specifieke gebeurtenissen plaatsvinden met accurate timing
- Remote Monitoring: Controleer apparaat status en laatste update tijden op afstand
STEM Onderwijs Voordelen
- Tijdzone Concepten: Begrijp lokale tijd vs. UTC en tijdzone afhandeling
- Netwerk Communicatie: Leer WebSocket communicatie en real-time updates
- Hardware Integratie: Combineer web interfaces met hardware RTC functionaliteit
- Probleem Oplossen: Debug timing problemen en synchronisatie problemen
Technische Specificaties
Geheugengebruik
- Flash Memory: ~8KB voor WebRTC functionaliteit
- SRAM: ~2KB tijdens werking
- WebSocket Buffer: ~1KB voor bericht afhandeling
Prestatie Kenmerken
- Update Frequentie: Real-time updates via WebSocket
- Sync Nauwkeurigheid: Meestal binnen 1-2 seconden
- Netwerk Overhead: ~50 bytes per tijd update bericht
- Respons Tijd: <100ms voor tijd sync operaties
Compatibiliteit
- Arduino Boards: Arduino Uno R4 WiFi, DIYables STEM V4 IoT
- Browsers: Alle moderne browsers met WebSocket ondersteuning
- Apparaten: Desktop, tablet, en mobiele apparaten
- Netwerken: WiFi netwerken met internet toegang
Samenvatting
Het WebRTC voorbeeld demonstreert hoe u:
- Een web-gebaseerde real-time klok interface creëert
- Arduino RTC synchroniseert met webbrowser tijd
- Tijd informatie weergeeft in gebruiksvriendelijk formaat
- Tijdsverschillen en verbindingsstatus monitort
- Tijd functionaliteit integreert met andere web applicaties
- Educatieve IoT projecten bouwt met tijdbeheerfuncties
Dit voorbeeld is perfect voor projecten die accurate tijdmeting vereisen, data logging met timestamps, geplande automatisering, en educatieve demonstraties van tijdsynchronisatie concepten in IoT systemen.