Pulpit smart home ESP32: kompletny tutorial projektowania interfejsu

Opublikowano na Lopaka.app — bezpłatnym internetowym kreatorze GUI LVGL dla deweloperów embedded

Wprowadzenie

Pulpity smart home to jeden z najpopularniejszych projektów ESP32 — i z dobrego powodu. Łączą dane czujników, kontrolki użytkownika i informację zwrotną w czasie rzeczywistym w jeden satysfakcjonujący interfejs.

W tym kompleksowym tutorialu zaprojektujesz kompletny interfejs pulpitu smart home przy użyciu Lopaka — bezpłatnego internetowego kreatora GUI LVGL — a potem wdrożysz go na ESP32 z wyświetlaczem TFT 3,5". Pulpit będzie zawierał:

• Wyświetlanie temperatury i wilgotności z żywymi odczytami czujników
• Kontrolki oświetlenia z przełącznikami włącz/wyłącz i suwakami jasności
• Panel statusu bezpieczeństwa ze wskaźnikami drzwi/okien
• Widżet pogody pokazujący bieżące warunki
• Nawigację między wieloma ekranami

Szacowany czas ukończenia: 45-60 minut na projekt interfejsu plus czas konfiguracji sprzętu.

Poziom trudności: średni

Wymagania sprzętowe

Komponent	Zalecany	Alternatywa
Mikrokontroler	ESP32 DevKit V1	ESP32-S3, ESP32-C3
Wyświetlacz	3,5" ILI9488 TFT (480x320)	2,8" ILI9341 (320x240)
Temperatura/wilgotność	DHT22 (AM2302)	BME280, SHT30
Czujnik światła	BH1750	LDR + ADC
Moduł przekaźnika	4-kanałowy przekaźnik 5V	Moduł MOSFET do pasków LED
Zasilanie	Zasilacz USB 5V 2A	3,7V LiPo + przetwornica boost
Obudowa	Obudowa drukowana w 3D	Puszka projektowa

Całkowity szacowany koszt: 25-45 USD w zależności od tego, co już masz.

Wymagania programowe

• Lopaka — bezpłatny internetowy kreator GUI (lopaka.app)
• Arduino IDE lub PlatformIO — do programowania ESP32
• Biblioteka LVGL — v8.x lub v9.x
• Biblioteka sterownika wyświetlacza TFT — zalecana TFT_eSPI
• Biblioteki czujników — DHT, BH1750 itd.

Krok 1: Zaplanuj układ pulpitu

Zanim otworzysz Lopaka, naszkicuj układ pulpitu na papierze. Dobry pulpit smart home kieruje się tymi zasadami:

• Najważniejsze informacje najpierw — temperatura i czas powinny być wyraziste
• Grupowanie logiczne — powiązane kontrolki razem (całe oświetlenie w jednym miejscu)
• Przyjazność dla dotyku — przyciski i suwaki powinny mieć co najmniej 40x40 pikseli
• Spójne odstępy — użyj systemu siatki do wyrównania
• Kodowanie kolorami — używaj kolorów do wskazywania statusu (zielony = włączone, czerwony = alert, szary = wyłączone)

Dla wyświetlacza 480x320 zaprojektujemy ten układ:

+-----------------------------------------------------+
| [=] 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     |                 |
|  +--------------+  +--------------+                 |
|                                                     |
+-----------------------------------------------------+

Krok 2: Utwórz projekt w Lopaka

1. Otwórz lopaka.app w przeglądarce
2. Kliknij „New Project”
3. Wybierz ESP32 jako platformę docelową
4. Wpisz rozdzielczość wyświetlacza: 480 x 320 (lub wymiary swojego wyświetlacza)
5. Nazwij projekt: „Smart Home Dashboard”
6. Kliknij „Create”

Masz teraz pusty obszar rysowania we właściwej rozdzielczości.

Krok 3: Zaprojektuj pasek nagłówka

Nagłówek zapewnia kontekst i informacje szybkiego dostępu.

1. Prostokąt tła:

   • Przeciągnij widżet Rectangle na górę
   • Pozycja: (0, 0), rozmiar: (480, 40)
   • Kolor tła: #1e293b (ciemny łupkowy)

2. Ikona menu:

   • Przeciągnij widżet Button
   • Pozycja: (10, 8), rozmiar: (24, 24)
   • Kolor tła: przezroczysty
   • Dodaj dziecko Label z tekstem "=", rozmiar czcionki 18, kolor #94a3b8

3. Tytuł:

   • Przeciągnij widżet Label
   • Pozycja: (44, 10), rozmiar: (250, 20)
   • Tekst: "Smart Home Dashboard"
   • Czcionka: LV_FONT_DEFAULT_16, kolor: #e2e8f0

4. Widżet pogody:

   • Przeciągnij widżet Label
   • Pozycja: (340, 10), rozmiar: (130, 20)
   • Tekst: "72 deg F"
   • Czcionka: LV_FONT_DEFAULT_14, kolor: #94a3b8
   • Wyrównany do prawej

Krok 4: Utwórz karty czujników

Karty czujników wyświetlają dane środowiskowe w czasie rzeczywistym.

Karta temperatury

1. Tło karty:

   • Przeciągnij widżet Rectangle
   • Pozycja: (20, 55), rozmiar: (210, 80)
   • Kolor tła: #0f172a
   • Promień obramowania: 12
   • Kolor obramowania: #334155, szerokość: 1

2. Ikona temperatury:

   • Przeciągnij widżet Label
   • Pozycja: (30, 65), rozmiar: (30, 30)
   • Tekst: "T", rozmiar czcionki 24

3. Wartość temperatury:

   • Przeciągnij widżet Label
   • Pozycja: (70, 65), rozmiar: (140, 36)
   • Tekst: "72.5 deg F"
   • Czcionka: duża (28 px lub LV_FONT_DEFAULT_28), kolor: #f97316 (pomarańczowy)

4. Etykieta lokalizacji:

   • Przeciągnij widżet Label
   • Pozycja: (70, 100), rozmiar: (140, 20)
   • Tekst: "Living Room"
   • Czcionka: LV_FONT_DEFAULT_12, kolor: #64748b

Karta wilgotności

Zduplikuj kartę temperatury i zmodyfikuj:

1. Skopiuj kartę temperatury (zaznacz wszystkie widżety, kopiuj, wklej)
2. Przesuń do pozycji (250, 55)
3. Zmień ikonę na "H"
4. Zmień wartość na "45% RH", kolor: #06b6d4 (cyjan)
5. Zmień lokalizację na "Living Room"

Krok 5: Utwórz panel sterowania oświetleniem

Ta sekcja łączy przełączniki i suwaki do sterowania światłem.

1. Tło panelu:

   • Przeciągnij widżet Rectangle
   • Pozycja: (20, 150), rozmiar: (440, 100)
   • Kolor tła: #0f172a
   • Promień obramowania: 12
   • Kolor obramowania: #334155, szerokość: 1

2. Tytuł panelu:

   • Przeciągnij widżet Label
   • Pozycja: (35, 158), rozmiar: (200, 20)
   • Tekst: "Lighting"
   • Czcionka: LV_FONT_DEFAULT_16, kolor: #e2e8f0

3. Wiersz światła kuchennego:

   • Etykieta: "Kitchen:" w punkcie (35, 185), kolor: #94a3b8
   • Slider: pozycja (120, 185), rozmiar: (200, 16)
     • Tło: #334155, wskaźnik: #fbbf24 (żółty)
     • Ustaw wartość początkową na 60%
   • Przełącznik: pozycja (340, 182), rozmiar: (40, 22)
     • Tło po włączeniu: #22c55e
     • Ustaw stan ON
   • Etykieta: "60%" w punkcie (390, 185), kolor: #94a3b8

4. Wiersz światła sypialni:

   • Zduplikuj wiersz kuchenny, przesuń do pozycji y 215
   • Zmień etykietę na "Bedroom:"
   • Ustaw suwak na 20%
   • Ustaw przełącznik na stan OFF
   • Zmień etykietę na "20%"

5. Wiersz światła werandy:

   • Etykieta: "Porch:" w punkcie (35, 242), kolor: #94a3b8
   • Tylko przełącznik: pozycja (120, 239), rozmiar: (40, 22)
   • Ustaw stan ON
   • Etykieta: "ON" w punkcie (175, 242), kolor: #22c55e

Krok 6: Utwórz karty statusu

Dwie mniejsze karty na dole do monitorowania bezpieczeństwa i energii.

Karta bezpieczeństwa

1. Tło karty:

   • Prostokąt w punkcie (20, 265), rozmiar: (210, 50)
   • Tło: #0f172a, promień obramowania: 12, obramowanie: #334155

2. Ikona bezpieczeństwa:

   • Etykieta: "LOCK", pozycja (30, 273), rozmiar 30x30, czcionka 20

3. Tekst statusu:

   • Etykieta: "All Clear", pozycja (65, 275), rozmiar 150x20
   • Czcionka: LV_FONT_DEFAULT_14, kolor: #22c55e (zielony)

4. Tekst szczegółów:

   • Etykieta: "3 doors, 2 windows", pozycja (65, 293), rozmiar 150x16
   • Czcionka: LV_FONT_DEFAULT_10, kolor: #64748b

Karta energii

1. Tło karty:

   • Prostokąt w punkcie (250, 265), rozmiar: (210, 50)
   • Tło: #0f172a, promień obramowania: 12, obramowanie: #334155

2. Ikona energii:

   • Etykieta: "PWR", pozycja (260, 273), rozmiar 30x30, czcionka 20

3. Wartość zużycia:

   • Etykieta: "1.2 kWh", pozycja (295, 275), rozmiar 150x20
   • Czcionka: LV_FONT_DEFAULT_14, kolor: #e2e8f0

4. Tekst szczegółów:

   • Etykieta: "Today - $0.18", pozycja (295, 293), rozmiar 150x16
   • Czcionka: LV_FONT_DEFAULT_10, kolor: #64748b

Krok 7: Dodaj drugi ekran — ustawienia

Pulpit smart home potrzebuje ekranu ustawień do konfiguracji.

1. W Lopaka kliknij „Add Screen” w panelu ekranów
2. Nazwij go "Settings"
3. Zaprojektuj ekran ustawień z:
   • Nagłówkiem (ten sam styl co ekran główny)
   • Sekcją ustawień WiFi z SSID i siłą sygnału
   • Polami konfiguracji MQTT
   • Opcjami kalibracji czujników
   • Suwakiem jasności wyświetlacza
   • Selektorem motywu (przełącznik trybu ciemnego/jasnego)

Krok 8: Dodaj nawigację między ekranami

Połącz przycisk menu, żeby nawigować między ekranami.

1. Zaznacz przycisk menu na ekranie głównym
2. W panelu Events dodaj zdarzenie Click
3. Akcja: Navigate to screen -> "Settings"
4. Na ekranie ustawień dodaj przycisk wstecz, który nawiguje do ekranu głównego

Krok 9: Eksportuj kod

1. Kliknij Export na górnym pasku narzędzi
2. Wybierz LVGL C code for ESP32
3. Pobierz wygenerowane pliki

Eksport zawiera:

• dashboard_ui.c — kod tworzenia ekranu głównego
• settings_ui.c — kod ekranu ustawień
• ui.h — wspólne deklaracje i odwołania do ekranów
• ui_helpers.c — funkcje pomocnicze do nawigacji i stylizacji

Krok 10: Podłącz dane czujników

Wyeksportowany interfejs jest statyczny — teraz podłącz prawdziwe dane czujników.

#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);
}

Krok 11: Dodaj wejście dotykowe

Połącz zdarzenia suwaka i przełącznika, żeby sterować przekaźnikami.

// 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);
}

Kompletna lista części z linkami

Część	Orientacyjna cena	Gdzie kupić
ESP32 DevKit V1	6-8 USD	Amazon, AliExpress, Adafruit
3,5" ILI9488 TFT	10-15 USD	Amazon, AliExpress
Czujnik DHT22	4-6 USD	Amazon, Adafruit
Czujnik światła BH1750	2-3 USD	Amazon, AliExpress
4-kanałowy przekaźnik	4-6 USD	Amazon, AliExpress
Przewody połączeniowe	3-5 USD	Dowolny dostawca elektroniki
Płytka prototypowa	3-5 USD	Dowolny dostawca elektroniki

Rozwiązywanie problemów

Wyświetlacz nie działa

• Zweryfikuj, czy User_Setup.h TFT_eSPI pasuje do pinów twojego wyświetlacza
• Sprawdź połączenia SPI (MOSI, MISO, SCK, CS, DC, RST)
• Upewnij się, że zasilacz może dostarczyć wystarczający prąd (wyświetlacze TFT mogą pobierać 200-300 mA)

Dotyk nie reaguje

• Zweryfikuj typ kontrolera dotyku (XPT2046 jest popularny w modułach ILI9488)
• Skalibruj dotyk przy użyciu szkicu kalibracji dotyku TFT_eSPI
• Sprawdź, czy pin CS dotyku jest poprawnie zdefiniowany

Problemy z pamięcią LVGL

• Zwiększ LV_MEM_SIZE w lv_conf.h (spróbuj 48 KB lub 64 KB)
• Zmniejsz liczbę jednoczesnych widżetów
• Użyj LV_MEM_CUSTOM=1, żeby użyć alokacji na stercie

Niewiarygodne odczyty czujników

• Dodaj rezystor podciągający 10K do pinu danych DHT22
• Użyj kabla ekranowanego do połączeń czujników powyżej 1 metra
• Dodaj filtrowanie programowe (średnia ruchoma) dla gładszych odczytów

Kolejne kroki

Teraz, gdy twój pulpit smart home działa, rozważ te ulepszenia:

• Integracja MQTT — połącz z Home Assistant lub OpenHAB
• Aktualizacje OTA — włącz bezprzewodowe aktualizacje firmware
• Wiele pokoi — dodaj nawigację kartami dla różnych pokoi
• Wykresy — wyświetlaj historię temperatury w czasie
• Sterowanie głosowe — zintegruj z Alexa lub Google Home
• Obudowa — wydrukuj w 3D własną obudowę dla dopracowanego wyglądu

Dlaczego Lopaka?

Lopaka sprawia, że projektowanie interfejsu embedded jest dostępne dla każdego. Zamiast spędzać godziny na pozycjonowaniu widżetów metodą prób i błędów, możesz:

• Projektować wizualnie metodą „przeciągnij i upuść” w przeglądarce
• Widzieć zmiany od razu bez kompilowania i wgrywania
• Eksportować czysty kod LVGL gotowy do wdrożenia na ESP32
• Szybko iterować — wypróbowuj różne układy w minuty, nie godziny
• Za darmo na zawsze — bez ograniczeń, bez znaków wodnych, bez rejestracji

Zacznij projektować swój pulpit smart home na lopaka.app — bez pobierania.

Dołącz do społeczności

• Discord: Dołącz do społeczności Lopaka po pomoc i dzielenie się projektami
• GitHub: Oznacz projekt gwiazdką i wnoś wkład
• Twitter: Obserwuj @lopaka_app po wskazówki i aktualizacje

Podziel się z nami swoimi projektami pulpitu smart home — uwielbiamy widzieć, co buduje społeczność!

Ten tutorial został napisany dla Lopaka.app — bezpłatnego internetowego kreatora GUI LVGL. Zbudowany przez deweloperów embedded, dla deweloperów embedded.