ESP32 Smart Home Dashboard: Komplettes Tutorial zum UI-Design

Veröffentlicht auf Lopaka.app — Der kostenlose webbasierte LVGL GUI-Builder für Embedded-Entwickler

Einführung

Smart-Home-Dashboards gehören zu den beliebtesten ESP32-Projekten – und das aus gutem Grund. Sie verbinden Sensordaten, Nutzersteuerungen und Echtzeit-Feedback in einer einzigen, befriedigenden Oberfläche.

In diesem umfassenden Tutorial gestaltest du ein komplettes Smart-Home-Dashboard mit Lopaka — dem kostenlosen, webbasierten LVGL GUI-Builder — und bringst es dann auf einen ESP32 mit einem 3,5"-TFT-Display. Das Dashboard enthält:

• Temperatur- und Luftfeuchtigkeitsanzeige mit Live-Sensormesswerten
• Beleuchtungssteuerung mit Ein/Aus-Schaltern und Helligkeits-Schiebereglern
• Sicherheitsstatus-Panel mit Tür-/Fensteranzeigen
• Wetter-Widget mit den aktuellen Bedingungen
• Navigation zwischen mehreren Screens

Geschätzte Fertigstellungszeit: 45–60 Minuten für das UI-Design, plus Zeit für das Hardware-Setup.

Schwierigkeitsgrad: Mittelstufe

Hardware-Anforderungen

Komponente	Empfohlen	Alternative
Mikrocontroller	ESP32 DevKit V1	ESP32-S3, ESP32-C3
Display	3.5" ILI9488 TFT (480x320)	2.8" ILI9341 (320x240)
Temperatur/Luftfeuchtigkeit	DHT22 (AM2302)	BME280, SHT30
Lichtsensor	BH1750	LDR + ADC
Relais-Modul	4-Kanal 5V Relais	MOSFET-Modul für LED-Streifen
Stromversorgung	5V 2A USB-Netzteil	3.7V LiPo + Boost Converter
Gehäuse	3D-gedrucktes Gehäuse	Projektbox

Geschätzte Gesamtkosten: 25–45 USD, je nachdem, was du bereits hast.

Software-Anforderungen

• Lopaka — kostenloser webbasierter GUI-Builder (lopaka.app)
• Arduino IDE oder PlatformIO — für die ESP32-Programmierung
• LVGL-Bibliothek — v8.x oder v9.x
• Bibliothek für den TFT-Display-Treiber — TFT_eSPI empfohlen
• Sensor-Bibliotheken — DHT, BH1750 usw.

Schritt 1: Plane dein Dashboard-Layout

Bevor du Lopaka öffnest, skizziere dein Dashboard-Layout auf Papier. Ein gutes Smart-Home-Dashboard folgt diesen Prinzipien:

• Wichtigste Informationen zuerst — Temperatur und Zeit sollten prominent sein
• Logische Gruppierung — zusammengehörige Steuerungen zusammen (alle Beleuchtung in einem Bereich)
• Touch-freundlich — Buttons und Schieberegler sollten mindestens 40x40 Pixel groß sein
• Konsistente Abstände — nutze ein Rastersystem für die Ausrichtung
• Farbcodierung — nutze Farben, um den Status anzuzeigen (Grün = an, Rot = Alarm, Grau = aus)

Für ein 480x320-Display gestalten wir dieses Layout:

+-----------------------------------------------------+
| [=] Smart Home Dashboard              [72 deg F]    |  <- Header (40px)
+-----------------------------------------------------+
|                                                     |
|  +--------------+  +--------------+                 |
|  |  TEMP 72.5F  |  |  HUM 45% RH  |  <- Sensor cards
|  |   Living Room|  |   Living Room|                 |
|  +--------------+  +--------------+                 |
|                                                     |
|  +-------------------------------------------+      |
|  |  LIGHTING                                 |      |
|  |  Kitchen: [====|=====] 60% [ON]           |      |  <- Controls
|  |  Bedroom: [==|=======] 20% [OFF]          |      |
|  |  Porch:   [ON]                            |      |
|  +-------------------------------------------+      |
|                                                     |
|  +--------------+  +--------------+                 |
|  |  SECURITY     |  |  ENERGY      |  <- Status cards
|  |  All Clear    |  |  1.2 kWh     |                 |
|  +--------------+  +--------------+                 |
|                                                     |
+-----------------------------------------------------+

Schritt 2: Erstelle das Projekt in Lopaka

1. Öffne lopaka.app in deinem Browser
2. Klicke auf „New Project“
3. Wähle ESP32 als Zielplattform aus
4. Gib die Display-Auflösung ein: 480 x 320 (oder deine Display-Abmessungen)
5. Nenne dein Projekt: „Smart Home Dashboard“
6. Klicke auf „Create“

Jetzt hast du eine leere Zeichenfläche in der richtigen Auflösung.

Schritt 3: Gestalte die Kopfleiste

Die Kopfleiste liefert Kontext und Schnellzugriffsinformationen.

1. Hintergrundrechteck:

   • Ziehe ein Rectangle-Widget nach oben
   • Position: (0, 0), Größe: (480, 40)
   • Hintergrundfarbe: #1e293b (dunkles Schiefergrau)

2. Menü-Icon:

   • Ziehe ein Button-Widget
   • Position: (10, 8), Größe: (24, 24)
   • Hintergrundfarbe: transparent
   • Füge eine untergeordnete Label mit dem Text "=" hinzu, Schriftgröße 18, Farbe #94a3b8

3. Titel:

   • Ziehe ein Label-Widget
   • Position: (44, 10), Größe: (250, 20)
   • Text: "Smart Home Dashboard"
   • Schriftart: LV_FONT_DEFAULT_16, Farbe: #e2e8f0

4. Wetter-Widget:

   • Ziehe ein Label-Widget
   • Position: (340, 10), Größe: (130, 20)
   • Text: "72 deg F"
   • Schriftart: LV_FONT_DEFAULT_14, Farbe: #94a3b8
   • Rechtsbündig

Schritt 4: Erstelle Sensorkarten

Sensorkarten zeigen Umgebungsdaten in Echtzeit an.

Temperaturkarte

1. Kartenhintergrund:

   • Ziehe ein Rectangle-Widget
   • Position: (20, 55), Größe: (210, 80)
   • Hintergrundfarbe: #0f172a
   • Eckradius: 12
   • Rahmenfarbe: #334155, Breite: 1

2. Temperatur-Icon:

   • Ziehe ein Label-Widget
   • Position: (30, 65), Größe: (30, 30)
   • Text: "T", Schriftgröße 24

3. Temperaturwert:

   • Ziehe ein Label-Widget
   • Position: (70, 65), Größe: (140, 36)
   • Text: "72.5 deg F"
   • Schriftart: groß (28px oder LV_FONT_DEFAULT_28), Farbe: #f97316 (Orange)

4. Ortsbeschriftung:

   • Ziehe ein Label-Widget
   • Position: (70, 100), Größe: (140, 20)
   • Text: "Living Room"
   • Schriftart: LV_FONT_DEFAULT_12, Farbe: #64748b

Luftfeuchtigkeitskarte

Dupliziere die Temperaturkarte und passe sie an:

1. Kopiere die Temperaturkarte (wähle alle Widgets aus, kopiere, füge ein)
2. Bewege sie auf Position (250, 55)
3. Ändere das Icon zu "H"
4. Ändere den Wert zu "45% RH", Farbe: #06b6d4 (Cyan)
5. Ändere den Ort zu "Living Room"

Schritt 5: Erstelle das Beleuchtungssteuerungs-Panel

Dieser Abschnitt kombiniert Schalter und Schieberegler für die Lichtsteuerung.

1. Panel-Hintergrund:

   • Ziehe ein Rectangle-Widget
   • Position: (20, 150), Größe: (440, 100)
   • Hintergrundfarbe: #0f172a
   • Eckradius: 12
   • Rahmenfarbe: #334155, Breite: 1

2. Panel-Titel:

   • Ziehe ein Label-Widget
   • Position: (35, 158), Größe: (200, 20)
   • Text: "Lighting"
   • Schriftart: LV_FONT_DEFAULT_16, Farbe: #e2e8f0

3. Zeile für das Küchenlicht:

   • Label: "Kitchen:" bei (35, 185), Farbe: #94a3b8
   • Slider: Position (120, 185), Größe: (200, 16)
     • Hintergrund: #334155, Indikator: #fbbf24 (Gelb)
     • Stelle den Anfangswert auf 60 %
   • Kippschalter: Position (340, 182), Größe: (40, 22)
     • Hintergrund im eingeschalteten Zustand: #22c55e
     • Auf EIN-Zustand stellen
   • Label: "60%" bei (390, 185), Farbe: #94a3b8

4. Zeile für das Schlafzimmerlicht:

   • Dupliziere die Küchenzeile, bewege sie auf y-Position 215
   • Ändere die Beschriftung zu "Bedroom:"
   • Stelle den Schieberegler auf 20 %
   • Stelle den Schalter auf AUS-Zustand
   • Ändere die Beschriftung zu "20%"

5. Zeile für das Verandalicht:

   • Label: "Porch:" bei (35, 242), Farbe: #94a3b8
   • Nur Kippschalter: Position (120, 239), Größe: (40, 22)
   • Auf EIN-Zustand stellen
   • Label: "ON" bei (175, 242), Farbe: #22c55e

Schritt 6: Erstelle Statuskarten

Zwei kleinere Karten unten für Sicherheits- und Energieüberwachung.

Sicherheitskarte

1. Kartenhintergrund:

   • Rechteck bei (20, 265), Größe: (210, 50)
   • Hintergrund: #0f172a, Eckradius: 12, Rahmen: #334155

2. Sicherheits-Icon:

   • Label: "LOCK", Position (30, 273), Größe 30x30, Schriftgröße 20

3. Statustext:

   • Label: "All Clear", Position (65, 275), Größe 150x20
   • Schriftart: LV_FONT_DEFAULT_14, Farbe: #22c55e (Grün)

4. Detailtext:

   • Label: "3 doors, 2 windows", Position (65, 293), Größe 150x16
   • Schriftart: LV_FONT_DEFAULT_10, Farbe: #64748b

Energiekarte

1. Kartenhintergrund:

   • Rechteck bei (250, 265), Größe: (210, 50)
   • Hintergrund: #0f172a, Eckradius: 12, Rahmen: #334155

2. Energie-Icon:

   • Label: "PWR", Position (260, 273), Größe 30x30, Schriftgröße 20

3. Verbrauchswert:

   • Label: "1.2 kWh", Position (295, 275), Größe 150x20
   • Schriftart: LV_FONT_DEFAULT_14, Farbe: #e2e8f0

4. Detailtext:

   • Label: "Today - $0.18", Position (295, 293), Größe 150x16
   • Schriftart: LV_FONT_DEFAULT_10, Farbe: #64748b

Schritt 7: Füge einen zweiten Screen hinzu – Einstellungen

Ein Smart-Home-Dashboard braucht einen Einstellungs-Screen für die Konfiguration.

1. Klicke in Lopaka im Screen-Panel auf „Add Screen“
2. Nenne ihn "Settings"
3. Gestalte den Einstellungs-Screen mit:
   • Kopfleiste (gleicher Stil wie der Haupt-Screen)
   • WiFi-Einstellungen-Abschnitt mit SSID und Signalstärke
   • MQTT-Konfiguration-Feldern
   • Sensor-Kalibrierung-Optionen
   • Display-Helligkeit-Schieberegler
   • Theme-Auswahl (Umschalter für Dunkel-/Hellmodus)

Schritt 8: Füge Screen-Navigation hinzu

Verbinde den Menü-Button, um zwischen Screens zu navigieren.

1. Wähle den Menü-Button auf dem Haupt-Screen aus
2. Füge im Events-Panel ein Click-Event hinzu
3. Aktion: Navigate to screen -> "Settings"
4. Füge auf dem Einstellungs-Screen einen Zurück-Button hinzu, der zum Haupt-Screen navigiert

Schritt 9: Exportiere den Code

1. Klicke in der oberen Toolbar auf Export
2. Wähle LVGL C code for ESP32
3. Lade die generierten Dateien herunter

Der Export enthält:

• dashboard_ui.c — Code zum Erstellen des Haupt-Screens
• settings_ui.c — Code für den Einstellungs-Screen
• ui.h — gemeinsame Deklarationen und Screen-Referenzen
• ui_helpers.c — Hilfsfunktionen für Navigation und Styling

Schritt 10: Verdrahte Sensordaten

Die exportierte UI ist statisch – verbinde jetzt echte Sensordaten.

#include <lvgl.h>
#include <DHT.h>
#include "ui.h"

#define DHTPIN 4
#define DHTTYPE DHT22

DHT dht(DHTPIN, DHTTYPE);

// Reference to UI labels (declared in ui.h)
extern lv_obj_t *ui_TempValue;
extern lv_obj_t *ui_HumidValue;

void update_sensor_data(lv_timer_t *timer) {
    float temp = dht.readTemperature();
    float humid = dht.readHumidity();

    if (!isnan(temp)) {
        char buf[16];
        snprintf(buf, sizeof(buf), "%.1f deg F", temp * 9.0/5.0 + 32);
        lv_label_set_text(ui_TempValue, buf);
    }

    if (!isnan(humid)) {
        char buf[16];
        snprintf(buf, sizeof(buf), "%.0f%% RH", humid);
        lv_label_set_text(ui_HumidValue, buf);
    }
}

void setup() {
    Serial.begin(115200);
    dht.begin();

    // Initialize LVGL and display
    lv_init();
    // ... display driver setup ...

    // Create the UI from Lopaka export
    ui_init();

    // Create a timer to update sensor data every 2 seconds
    lv_timer_create(update_sensor_data, 2000, NULL);
}

void loop() {
    lv_timer_handler();
    delay(5);
}

Schritt 11: Füge Touch-Eingabe hinzu

Verbinde die Schieberegler- und Schalter-Events, um Relais zu steuern.

// Event callback for kitchen light slider
void kitchen_slider_event(lv_event_t *e) {
    lv_obj_t *slider = lv_event_get_target(e);
    int value = lv_slider_get_value(slider);

    // Update PWM output for dimming
    ledcWrite(KITCHEN_PWM_CHANNEL, value * 255 / 100);

    // Update percentage label
    char buf[8];
    snprintf(buf, sizeof(buf), "%d%%", value);
    lv_label_set_text(ui_KitchenPercentLabel, buf);
}

// Event callback for toggle switch
void porch_toggle_event(lv_event_t *e) {
    lv_obj_t *toggle = lv_event_get_target(e);
    bool state = lv_obj_has_state(toggle, LV_STATE_CHECKED);

    digitalWrite(PORCH_RELAY_PIN, state ? HIGH : LOW);
    lv_label_set_text(ui_PorchStatusLabel, state ? "ON" : "OFF");
}

void setup() {
    // ... previous setup code ...

    // Register event callbacks
    lv_obj_add_event_cb(ui_KitchenSlider, kitchen_slider_event, LV_EVENT_VALUE_CHANGED, NULL);
    lv_obj_add_event_cb(ui_PorchToggle, porch_toggle_event, LV_EVENT_VALUE_CHANGED, NULL);
}

Komplette Teileliste mit Links

Teil	Ca. Preis	Wo kaufen
ESP32 DevKit V1	6–8 USD	Amazon, AliExpress, Adafruit
3.5" ILI9488 TFT	10–15 USD	Amazon, AliExpress
DHT22 Sensor	4–6 USD	Amazon, Adafruit
BH1750 Light Sensor	2–3 USD	Amazon, AliExpress
4-Channel Relay	4–6 USD	Amazon, AliExpress
Jumper wires	3–5 USD	Jeder Elektronikhändler
Breadboard	3–5 USD	Jeder Elektronikhändler

Fehlerbehebung

Display funktioniert nicht

• Prüfe, ob die TFT_eSPI User_Setup.h zu deinen Display-Pins passt
• Prüfe die SPI-Verbindungen (MOSI, MISO, SCK, CS, DC, RST)
• Stelle sicher, dass die Stromversorgung genug Strom liefern kann (TFT-Displays können 200–300 mA ziehen)

Touch reagiert nicht

• Prüfe den Typ des Touch-Controllers (XPT2046 ist bei ILI9488-Modulen üblich)
• Kalibriere den Touch mit dem TFT_eSPI-Touch-Kalibrierungs-Sketch
• Prüfe, ob der Touch-CS-Pin korrekt definiert ist

LVGL-Speicherprobleme

• Erhöhe LV_MEM_SIZE in lv_conf.h (versuche 48 KB oder 64 KB)
• Verringere die Anzahl gleichzeitiger Widgets
• Nutze LV_MEM_CUSTOM=1, um Heap-Allokation zu verwenden

Sensormesswerte sind unzuverlässig

• Füge einen 10K Pull-up-Widerstand zum DHT22-Datenpin hinzu
• Nutze abgeschirmtes Kabel für Sensorverbindungen über 1 Meter
• Füge Software-Filterung (gleitender Durchschnitt) für glattere Messwerte hinzu

Nächste Schritte

Jetzt, da dein Smart-Home-Dashboard läuft, denk über diese Erweiterungen nach:

• MQTT-Integration – verbinde dich mit Home Assistant oder OpenHAB
• OTA-Updates – aktiviere drahtlose Firmware-Updates
• Mehrere Räume – füge Tab-Navigation für verschiedene Räume hinzu
• Grafiken und Diagramme – zeige die Temperaturhistorie über die Zeit an
• Sprachsteuerung – integriere Alexa oder Google Home
• Gehäuse – drucke ein benutzerdefiniertes Gehäuse in 3D für einen polierten Look

Warum Lopaka?

Lopaka macht Embedded-UI-Design für alle zugänglich. Statt Stunden damit zu verbringen, Widgets durch Ausprobieren zu positionieren, kannst du:

• Visuell gestalten per Drag-and-drop in deinem Browser
• Änderungen sofort sehen, ohne zu kompilieren oder zu flashen
• Sauberen LVGL-Code exportieren, bereit für den ESP32-Einsatz
• Schnell iterieren – probiere verschiedene Layouts in Minuten, nicht Stunden
• Für immer kostenlos – keine Einschränkungen, keine Wasserzeichen, keine Anmeldung

Beginne mit dem Gestalten deines Smart-Home-Dashboards auf lopaka.app — kein Download nötig.

Schließe dich der Community an

• Discord: Schließe dich der Lopaka-Community an für Hilfe und zum Teilen von Projekten
• GitHub: Gib dem Projekt einen Stern und trage dazu bei
• Twitter: Folge @lopaka_app für Tipps und Updates

Teile deine Smart-Home-Dashboard-Projekte mit uns – wir lieben es zu sehen, was die Community baut!

Dieses Tutorial wurde für Lopaka.app geschrieben – den kostenlosen webbasierten LVGL GUI-Builder. Gebaut von Embedded-Entwicklern, für Embedded-Entwickler.