Arduino Nano ESP32 Web-RTC mit DIYables ESP32 WebApps Bibliothek
Überblick
Dieses Tutorial behandelt die Klasse DIYablesWebRTCPage aus der DIYables ESP32 WebApps Bibliothek. Die Browserseite zeigt die aktuelle RTC-Zeit von Arduino Nano ESP32 neben der lokalen Zeit des Browsers an und berechnet die Abweichung zwischen ihnen. Ein einzelner Button sendet die lokale Zeit des Browsers an das Board, das sein RTC-Modul aktualisiert.
Das Board erfordert ein DS3231-Hardware-RTC-Modul, das über I2C verbunden ist. Die RTClib-Bibliothek von Adafruit verwaltet das Lesen und Schreiben der Zeit auf der Board-Seite.
Was dieses Tutorial behandelt
- Verdrahtung eines DS3231-RTC-Moduls mit dem Arduino Nano ESP32
- Installation der RTClib-Abhängigkeit
- Lesen und Anzeigen der RTC-Zeit im Browser
- Synchronisierung des Board-RTC vom Browser mit einem Tastendruck
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Schaltplan
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Arduino Nano ESP32 - DS3231 RTC Modul
| DS1307 RTC Module | Arduino Nano ESP32 |
|---|---|
| Vin | 3.3V |
| GND | GND |
| SDA | GPIO21 |
| SCL | GPIO22 |
Schritte
Folgen Sie diesen Anweisungen Schritt für Schritt:
- Wenn Sie die Arduino Nano ESP32 zum ersten Mal verwenden, lesen Sie das Tutorial zum Einrichten der Arduino Nano ESP32-Entwicklungsumgebung.
- Verbinden Sie das Arduino Nano ESP32 Board mit Ihrem Computer über ein USB-Kabel.
- Starten Sie die Arduino IDE auf Ihrem Computer.
- Wählen Sie das entsprechende Board (z.B. Arduino Nano ESP32) und den COM-Port.
- Navigieren Sie zum Symbol Bibliotheken in der linken Leiste der Arduino IDE.
- Suchen Sie "DIYables ESP32 WebApps", dann finden Sie die DIYables ESP32 WebApps Bibliothek von DIYables
- Klicken Sie auf die Schaltfläche Installieren, um die Bibliothek zu installieren.
- Search for DIYables ESP32 WebApps created by DIYables and click the Install button.
1
void setup() {
- Sie werden aufgefordert, einige andere Bibliothekenabhängigkeiten zu installieren
- Klicken Sie auf die Schaltfläche Alle installieren, um alle Bibliothekenabhängigkeiten zu installieren.
- Suchen Sie "RTClib", dann finden Sie die RTC-Bibliothek von Adafruit
- Klicken Sie auf die Schaltfläche Installieren, um die RTC-Bibliothek zu installieren.
- Search for RTClib created by Adafruit and click the Install button.
1
void setup() {
- Sie werden möglicherweise aufgefordert, Abhängigkeiten für die Bibliothek zu installieren
- Installieren Sie alle Abhängigkeiten für die Bibliothek, indem Sie auf die Schaltfläche Alle installieren klicken.
- Gehen Sie in der Arduino IDE zu Datei Beispiele DIYables ESP32 WebApps WebRTC Beispiel, oder kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Arduino IDE ein
/*
* DIYables WebApp Library - Web RTC Example
*
* This example demonstrates the Web RTC feature:
* - Real-time clock display for both ESP32 and client device
* - One-click time synchronization from web browser to ESP32
* - Hardware RTC integration for persistent timekeeping
* - Visual time difference monitoring
*
* Hardware Required:
* - ESP32 development board
* - DS3231 RTC module (connected via I2C)
*
* Required Libraries:
* - RTClib library (install via Library Manager)
*
* Setup:
* 1. Connect DS3231 RTC module to ESP32 I2C pins (SDA/SCL)
* 2. Install RTClib library in Arduino IDE
* 3. Update WiFi credentials below
* 4. Upload the sketch to your ESP32
* 5. Open Serial Monitor to see the IP address
* 6. Navigate to http://[IP_ADDRESS]/web-rtc
*/
#include <DIYables_ESP32_Platform.h>
#include <DIYablesWebApps.h>
#include <RTClib.h>
// RTC object
RTC_DS3231 rtc;
char daysOfWeek[7][12] = {
"Sunday",
"Monday",
"Tuesday",
"Wednesday",
"Thursday",
"Friday",
"Saturday"
};
// 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
ESP32ServerFactory serverFactory;
DIYablesWebAppServer webAppsServer(serverFactory, 80, 81);
DIYablesHomePage homePage;
DIYablesWebRTCPage webRTCPage;
void setup() {
Serial.begin(9600);
delay(1000);
Serial.println("DIYables ESP32 WebApp - Web RTC Example");
// Initialize RTC
if (!rtc.begin()) {
Serial.println("RTC module is NOT found");
Serial.flush();
while (1);
}
// Check if RTC lost power and if so, set the time
if (rtc.lostPower()) {
Serial.println("RTC lost power, setting time!");
// When time needs to be set on a new device, or after a power loss, the
// following line sets the RTC to the date & time this sketch was compiled
rtc.adjust(DateTime(F(__DATE__), F(__TIME__)));
// This line sets the RTC with an explicit date & time, for example to set
// January 21, 2021 at 3am you would call:
// rtc.adjust(DateTime(2021, 1, 21, 3, 0, 0));
}
// Print initial RTC time
DateTime initialTime = rtc.now();
Serial.print("Initial RTC Time: ");
Serial.print(initialTime.year(), DEC);
Serial.print("/");
Serial.print(initialTime.month(), DEC);
Serial.print("/");
Serial.print(initialTime.day(), DEC);
Serial.print(" (");
Serial.print(daysOfWeek[initialTime.dayOfTheWeek()]);
Serial.print(") ");
if (initialTime.hour() < 10) Serial.print("0");
Serial.print(initialTime.hour(), DEC);
Serial.print(":");
if (initialTime.minute() < 10) Serial.print("0");
Serial.print(initialTime.minute(), DEC);
Serial.print(":");
if (initialTime.second() < 10) Serial.print("0");
Serial.print(initialTime.second(), DEC);
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
DateTime currentTime = rtc.now();
// Send time to web clients in human readable format
webRTCPage.sendTimeToWeb(currentTime.year(), currentTime.month(),
currentTime.day(), currentTime.hour(),
currentTime.minute(), currentTime.second());
// Print time to Serial Monitor
Serial.print("RTC Time: ");
Serial.print(currentTime.year(), DEC);
Serial.print("/");
Serial.print(currentTime.month(), DEC);
Serial.print("/");
Serial.print(currentTime.day(), DEC);
Serial.print(" (");
Serial.print(daysOfWeek[currentTime.dayOfTheWeek()]);
Serial.print(") ");
if (currentTime.hour() < 10) Serial.print("0");
Serial.print(currentTime.hour(), DEC);
Serial.print(":");
if (currentTime.minute() < 10) Serial.print("0");
Serial.print(currentTime.minute(), DEC);
Serial.print(":");
if (currentTime.second() < 10) Serial.print("0");
Serial.print(currentTime.second(), DEC);
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 DateTime and set RTC time
DateTime newTime(unixTimestamp);
rtc.adjust(newTime);
Serial.println("ESP32 RTC synchronized!");
}
// Callback function called when web client requests current ESP32 time
void onTimeRequested() {
// Get current RTC time and send to web in human readable format
DateTime currentTime = rtc.now();
webRTCPage.sendTimeToWeb(currentTime.year(), currentTime.month(),
currentTime.day(), currentTime.hour(),
currentTime.minute(), currentTime.second());
}
- Aktualisieren Sie die WiFi-Anmeldedaten in der Skizze:
const char WIFI_SSID[] = "YOUR_WIFI_NETWORK";
const char WIFI_PASSWORD[] = "YOUR_WIFI_PASSWORD";
- Klicken Sie auf die Schaltfläche Upload in der Arduino IDE, um den Code auf Arduino Nano ESP32 hochzuladen
- Öffnen Sie den Seriellen Monitor
- Die Ausgabe des Seriellen Monitors sollte wie folgt aussehen:
8
Serial.println("Hello World!");
Message (Enter to send message to 'Arduino Nano ESP32' on 'COM15')
New Line
9600 baud
DIYables ESP32 WebApp - Web RTC Example
Initial RTC Time: 2025/8/28 (Thursday) 12:00:08
INFO: Added app /
INFO: Added app /web-rtc
DIYables WebApp Library
Platform: Arduino Nano ESP32
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
==========================================
- Wenn nichts angezeigt wird, drücken Sie die Reset-Taste auf dem Board.
- Geben Sie die IP-Adresse aus dem Seriellen Monitor in einen Browser im selben Netzwerk ein.
- Beispiel: http://192.168.0.2
- Die Startseite zeigt eine Karte für die RTC-Anwendung:
- Wählen Sie die Web RTC Karte, um die Uhroberfläche zu öffnen:
- Die Seite ist auch direkt unter http://192.168.0.2/web-rtc erreichbar.
Verwendung der Web-Oberfläche
Die RTC-Seite zeigt drei Abschnitte:
- Arduino-Zeit — die aktuelle Zeit aus dem DS3231-Modul des Boards
- Ihre Gerätezeit — die aktuelle lokale Zeit, die vom Browser gemeldet wird
- Zeitdifferenz — der Unterschied zwischen den beiden in Minuten
Zeitsynchronisierung
Klicken Sie auf die Schaltfläche Sync ESP32 Time, um die lokale Zeit des Browsers auf das Board zu übertragen:
Der Synchronisierungsprozess:
- Der Browser liest seine lokale Zeit (mit Berücksichtigung des lokalen Zeitzonenoffsets)
- Der Zeitstempel wird über WebSocket an das Board gesendet
- Die Skizze schreibt die empfangene Zeit an den DS3231
- Die Seite wird aktualisiert, um die aktualisierte Board-Zeit anzuzeigen
Nach der Synchronisierung beträgt der Zeitunterschied typischerweise 0–1 Minuten.
Fehlerbehebung
RTC-Zeit zeigt falschen Wert
- Der DS3231 behält die Zeit aus seiner Batterie, auch wenn das Board ausgeschaltet ist
- Führen Sie eine Synchronisierung vom Browser durch, um die richtige Zeit einzustellen
- Überprüfen Sie, dass die CR2032-Batterie im RTC-Modul installiert ist
I2C nicht erkannt
- Überprüfen Sie, dass die SDA- und SCL-Verdrahtung der obigen Tabelle entspricht
- Bestätigen Sie, dass der DS3231-VCC auf 3,3 V und nicht auf 5 V angeschlossen ist
- Fügen Sie eine Serial.println(rtc.isrunning())-Überprüfung im Setup hinzu
WebSocket wird häufig getrennt
- Bestätigen Sie, dass webAppsServer.loop() in jeder Iteration von loop() aufgerufen wird
- Vermeiden Sie lange blockierende Verzögerungen nach dem Starten des Servers
Kann auf die Seite nicht zugreifen
- Überprüfen Sie die IP-Adresse im Seriellen Monitor
- Stellen Sie sicher, dass das Browser-Gerät und das Board im selben 2,4-GHz-WiFi-Netzwerk verbunden sind