Digitaler Bilderrahmen mit ESP32
In diesem Projekt bauen wir einen intelligenten und vernetzten digitalen Bilderrahmen.
Benötigte Komponente
- ESP32 NodeMcu Entwicklungsboard
- 2x Breadboard 400
- 2,4" TFT LCD Display
- Jumper Wire Kabel
- Netzteil für Raspberry Pi DC 5V
Sofort verfügbar
Sofort verfügbar
Schaltungsaufbau
Der Aufbau des Systems ist unkompliziert, erfordert jedoch ein wichtiges Detail: Um die Breite des ESP32 passgenau unterzubringen, müssen zwei Breadboards miteinander verbunden werden. Da der ESP32 im Zentrum steht, können wir die Stromversorgung (3V3/Vin und GND) anschließend bequem über die seitlichen Schienen verteilen.
Wichtig: Da das Display und seine Hintergrundbeleuchtung (Backlight) eine stabile Stromzufuhr benötigen, sorgt die direkte Versorgung über diese Schienen für einen zuverlässigen Betrieb und hält die Verkabelung übersichtlich. Hier ist die kompakte Übersicht der Pin-Belegung für die Verkabelung:
| Komponente | Pin (Modul) | Anschluss (ESP32 / System) |
|---|---|---|
| ILI9341 Display | VCC | 3V3 (oder Vin) |
| GND | GND | |
| CS | GPIO 15 (D15) | |
| RESET (RST) | GPIO 4 (D4) | |
| DC (RS) | GPIO 2 (D2) | |
| SDI (MOSI) | GPIO 23 (D23) | |
| SCK (CLK) | GPIO 18 (D18) | |
| LED (BLK) | 3V3 |
zum Vergrößern auf Bilder klicken
Vollständiges Verbindungsschema
realer Aufbau
Software & Bibliotheken
Für den ESP32 nutzen wir die Arduino IDE (mit installiertem ESP32-Boardpaket). Über den Bibliotheksverwalter lassen sich einfach diese beiden Bibliotheken suchen und installieren:
- Adafruit ILI9341
- TJpg_Decoder
Wichtiger Hinweis: Wenn die Arduino IDE beim Installieren dieser Bibliotheken fragt, ob auch fehlende Abhängigkeiten (Dependencies wie z. B. die „Adafruit GFX Library“ oder „Adafruit BusIO“) installiert werden sollen,
ist dies unbedingt mit "Install All" (Alle installieren) zu bestätigen.
Code & Upload
Um das Projekt professionell und übersichtlich zu halten, haben wir die Software in zwei Dateien aufgeteilt: Die eigentliche Steuerungslogik für den ESP32 (C++) und das moderne, responsive Web-Dashboard für den Bilder-Upload (HTML/CSS/JS in der Datei pag.h). Anstatt hier hunderte Zeilen Code einzufügen, haben wir ein fertiges, sofort einsatzbereites Software-Paket vorbereitet.
Hier klicken, um den vollständigen Quellcode herunterzuladen.
Funktionsweise und Bedienung
Es ist darauf zu achten, den Namen des WLAN-Netzwerks und das Passwort einzugeben, damit sich das System mit dem Netzwerk verbinden kann. Dazu wird der folgende Abschnitt im Code angepasst:
Code anzeigen / einklappen
const char* ssid = "DEIN_WLAN_NAME";
const char* password = "DEIN_WLAN_PASSWORT";Nach dem erfolgreichen Hochladen auf das Board stellt dieses die Verbindung her. Anschließend wird auf dem Display eine IP-Adresse angezeigt (wie in Abbildung 3 dargestellt). Diese IP-Adresse muss im Webbrowser aufgerufen werden, um Fotos an das Display zu senden.
Hinweis: Die IP-Adresse aus dem Beispielbild nicht kopieren, da dies nicht funktioniert. Jedes Board erhält vom Router eine eigene, spezifische IP-Adresse. Ausschließlich die Adresse verwenden, die auf dem eigenen Display angezeigt wird.
.jpg?ts=1786024111 "Bild3_(1)")
Beim Aufrufen der Webseite lassen sich Fotos hochladen, vorhandene Bilder löschen und nun auch zwischen zwei Betriebsarten wählen: einer automatischen „Diashow“ (mit wählbarer Anzeigedauer von 5, 10 oder 30 Sekunden) und einem „manuellen“ Modus.
Im manuellen Modus bleibt das aktuelle Bild auf dem Bildschirm stehen, bis es über die Schaltflächen „Vor“ oder „Zurück“ gewechselt wird. Die folgende Abbildung zeigt die entsprechende Web-Oberfläche.
.jpg?ts=1786026096 "Bild5_(4)")
.jpg?ts=1786024191 "Bild4-2")
Fazit
Wir sind am Ende dieses Projekts angelangt!
Mit diesem ESP32-basierten digitalen IoT-Bilderrahmen haben Sie nicht nur gelernt, wie man Displays ansteuert und Bilder dekodiert, sondern auch, wie man einen lokalen Webserver zur praktischen Dateiverwaltung einrichtet.
Dieses Wissen bildet eine hervorragende Grundlage für zukünftige Automatisierungs- und IoT-Projekte. Wir hoffen, dass der Aufbau Spaß gemacht hat und die vielfältigen Möglichkeiten des ESP32 weiter erforscht werden!