Pierwsze kroki z Lopaka: zbuduj swoje pierwsze GUI dla Arduino w 10 minut

Opublikowano na Lopaka.app — bezpłatny webowy kreator GUI LVGL dla programistów systemów wbudowanych

Wprowadzenie

Jeśli kiedykolwiek próbowałeś zbudować graficzny interfejs użytkownika dla wyświetlacza TFT Arduino, znasz ten ból: pozycjonowanie każdego piksela ręcznie, zgadywanie współrzędnych, wgrywanie na sprzęt, widzenie, że jest źle, poprawianie, ponowne wgrywanie i powtarzanie cyklu, aż chcesz rzucić płytką stykową przez pokój.

Jest lepszy sposób.

W tym samouczku zbudujesz swoje pierwsze GUI dla Arduino w mniej niż 10 minut przy użyciu Lopaka — bezpłatnego, webowego narzędzia, które pozwala projektować interfejsy LVGL metodą przeciągania i upuszczania, a następnie eksportuje czysty kod C gotowy do twojego projektu Arduino.

Bez pobierania. Bez instalacji. Bez konfiguracji środowiska. Po prostu otwórz przeglądarkę i zacznij budować.

Co zbudujesz

Prosty, ale funkcjonalny wyświetlacz czujnika, który pokazuje:

• Odczyt temperatury z dużym wyświetlaczem numerycznym
• Wskaźnik statusu (OK / Ostrzeżenie / Błąd)
• Przycisk do przełączania między stopniami Celsjusza a Fahrenheita
• Pasek postępu pokazujący poziom baterii

To rodzaj interfejsu, który znajdziesz w ręcznym urządzeniu z czujnikiem, stacji pogodowej lub monitorze baterii.

Wymagania wstępne

• Przeglądarka internetowa (Chrome, Firefox, Safari lub Edge)
• Płytka Arduino z wyświetlaczem TFT (jako przykładu użyjemy Arduino Uno + ILI9341 2,8")
• Podstawowa znajomość Arduino IDE
• To wszystko.

Krok 1: Utwórz projekt

1. Otwórz lopaka.app w przeglądarce
2. Kliknij „Nowy projekt”
3. Wybierz swoją platformę: Arduino
4. Wybierz swój wyświetlacz: ILI9341 (320x240)
5. Nadaj projektowi nazwę: „Wyświetlacz czujnika”
6. Kliknij „Utwórz”

Zobaczysz pusty obszar rysowania z panelem widżetów po lewej stronie i panelem właściwości po prawej. Jeśli jesteś tu po raz pierwszy, wycieczka wprowadzająca poprowadzi cię po interfejsie — poświęć 60 sekund, aby ją śledzić, lub pomiń ją, jeśli wolisz eksplorować samodzielnie.

Krok 2: Dodaj etykietę tytułu

1. Z panelu widżetów przeciągnij etykietę na obszar rysowania
2. Umieść ją blisko górnego środka
3. W panelu właściwości:
   • Tekst: Sensor Monitor
   • Czcionka: LV_FONT_DEFAULT_24 (lub największa dostępna)
   • Wyrównanie: Do środka
   • Kolor: Biały (lub preferowany przez ciebie kolor tekstu)

Powinieneś zobaczyć duży tytuł na górze podglądu wyświetlacza.

Krok 3: Dodaj wyświetlacz temperatury

1. Przeciągnij kolejną etykietę na obszar rysowania
2. Umieść ją w górnej środkowej części
3. Właściwości:
   • Tekst: 25.6°C
   • Czcionka: LV_FONT_DEFAULT_36 (bardzo duża)
   • Wyrównanie: Do środka
   • Kolor: Jasna zieleń lub cyjan (coś, co się wyróżnia)

Będzie to twój główny odczyt czujnika. W kodzie produkcyjnym będziesz aktualizować tę wartość z prawdziwego czujnika.

Krok 4: Dodaj wskaźnik statusu

1. Przeciągnij etykietę poniżej temperatury
2. Właściwości:
   • Tekst: STATUS: OK
   • Czcionka: LV_FONT_DEFAULT_16
   • Kolor: Zielony

Aby uzyskać bardziej wizualny wskaźnik, możesz też dodać widżet LED (jeśli jest dostępny w twojej wersji LVGL) obok tekstu statusu.

Krok 5: Dodaj przycisk przełączania jednostek

1. Przeciągnij przycisk na obszar rysowania
2. Umieść go poniżej wskaźnika statusu
3. Właściwości:
   • Tekst przycisku: Switch to °F
   • Szerokość: 160px
   • Wysokość: 40px
   • Styl: Zaokrąglone rogi, kontrastowy kolor

Ten przycisk pozwoli użytkownikom przełączać się między jednostkami temperatury. W kodzie Arduino podepniesz obsługę zdarzeń przycisku, aby konwertować i wyświetlać wartość.

Krok 6: Dodaj pasek postępu baterii

1. Przeciągnij widżet paska (paska postępu) na obszar rysowania
2. Umieść go blisko dołu
3. Właściwości:
   • Szerokość: 280px
   • Wysokość: 20px
   • Wartość: 75 (na 100)
   • Kolor: Zielony (lub żółty/pomarańczowy dla niższych wartości)
4. Dodaj małą etykietę nad nim: Battery: 75%

Krok 7: Styl i dopracowanie

Teraz spraw, aby wyglądał profesjonalnie:

1. Tło: Ustaw tło ekranu na ciemny kolor (ciemnoszary lub granatowy) dla lepszego kontrastu
2. Odstępy: Zapewnij spójne marginesy między elementami (przerwy 10-15px)
3. Wyrównanie: Wyrównaj do środka wszystkie elementy tekstowe
4. Kolory: Używaj spójnego schematu kolorów — zielony dla statusu OK, czerwony dla ostrzeżeń, biały dla etykiet

Twój interfejs powinien wyglądać mniej więcej tak:

┌─────────────────────────────┐
│                             │
│       Sensor Monitor        │
│                             │
│         25.6°C              │
│                             │
│       STATUS: OK            │
│                             │
│    [  Switch to °F  ]       │
│                             │
│   Battery: 75%              │
│   ██████████████░░░░        │
│                             │
└─────────────────────────────┘

Krok 8: Wyeksportuj kod

1. Kliknij przycisk „Eksportuj” na górnym pasku narzędzi
2. Wybierz Arduino jako platformę docelową
3. Wybierz format wyjściowy (pojedynczy plik .c lub pełny projekt)
4. Kliknij „Pobierz”

Otrzymasz czysty, czytelny kod C LVGL, który możesz wstawić bezpośrednio do swojego szkicu Arduino.

Krok 9: Zintegruj z kodem Arduino

Oto, jak użyć wyeksportowanego kodu:

#include <TFT_eSPI.h>
#include <lvgl.h>
#include "ui_SensorDisplay.h"  // Your exported file

TFT_eSPI tft = TFT_eSPI();

void setup() {
  // Initialize display
  tft.begin();
  tft.setRotation(1);

  // Initialize LVGL
  lv_init();
  lv_tft_init();

  // Create the UI from Lopaka
  ui_SensorDisplay_init();

  // Initialize your sensor
  dht.begin();
}

void loop() {
  // Read sensor
  float temp = dht.readTemperature();

  // Update the label (use the variable name from exported code)
  lv_label_set_text_fmt(ui_TempLabel, "%.1f°C", temp);

  // Update battery bar (example value)
  lv_bar_set_value(ui_BatteryBar, 75, LV_ANIM_ON);

  // Handle button events (auto-wired from Lopaka)
  lv_timer_handler();
  delay(5);
}

Krok 10: Przetestuj na sprzęcie

1. Wgraj szkic na swoje Arduino
2. Sprawdź, czy wyświetlacz poprawnie pokazuje twój interfejs
3. Przetestuj interakcję z przyciskiem
4. Potwierdź, że odczyty czujnika aktualizują się w czasie rzeczywistym

Co dalej?

Zbudowałeś swoje pierwsze GUI w mniej niż 10 minut. Teraz spróbuj:

• Dodawać więcej ekranów: Utwórz stronę ustawień lub widok danych historycznych
• Własne widżety: Dodaj mierniki, wykresy lub elementy rysowane własnoręcznie
• Udostępnij swój projekt: Użyj linków do udostępniania Lopaka, aby pokazać swoją pracę innym
• Eksploruj zaawansowane funkcje: Animacje, style i wywołania zwrotne zdarzeń

Dlaczego Lopaka?

• Brak konfiguracji: Działa w całości w przeglądarce — bez pobierania, bez instalacji
• Projektowanie wizualne: Widzisz swój interfejs podczas budowania, bez zgadywania współrzędnych
• Czysty eksport kodu: Gotowy do produkcji kod C LVGL, a nie runtime w czarnej skrzynce
• Możliwość udostępniania: Wysyłaj swoje projekty współpracownikom lub społeczności za pomocą linku
• Za darmo na start: Bez wymaganej karty kredytowej

Zasoby

• Lopaka.app — Zacznij budować teraz
• Dokumentacja LVGL — Dowiedz się więcej o widżetach LVGL
• Biblioteki TFT dla Arduino — Konfiguracja sterownika wyświetlacza
• Discord Lopaka — Dołącz do społeczności

Masz pytania? Zostaw je w komentarzach poniżej lub dołącz do nas na Discordzie. Miłego budowania!