Pierwsze kroki z LVGL na wyświetlaczu Riverdi STM32 – kompletny przewodnik

W tym poradniku dowiesz się, jak uruchomić wyświetlacz Riverdi STM32H7 za pomocą LVGL — od sklonowania repozytorium po uruchomienie pierwszego własnego interfejsu z obrazkiem i przyciskiem.
Nauczysz się:

• podłącz sprzęt,
• otwórz i skompiluj projekt w STM32CubeIDE,
• uruchom demo LVGL,
• i stwórz prosty, spersonalizowany interfejs użytkownika z logo Riverdi i interaktywnym przyciskiem.

Na koniec będziesz miał gotową podstawę do stworzenia własnego projektu GUI opartego na LVGL na STM32 Embedded Displays Riverdi.

Sprzęt komputerowy

Powiązania

Wyświetlacz STM32H7 ma dwa złącza Molex:

• SWD (programowanie) – podłącz tu swoje urządzenie ST-Link.
• Zasilanie (12 V) – do podłączenia zewnętrznego źródła zasilania.

⚠️ Nie podłączaj zasilania do wyświetlacza i nie podłączaj ST-Linka jednocześnie przy pierwszym uruchomieniu, nie sprawdziwszy wcześniej prawidłowej polaryzacji.

Oprogramowanie

Sklonuj projekt

Skorzystaj z LVGL Project Creator i pobierz projekt dostosowany do rozmiaru ekranu, z którego korzystasz. Wystarczy, że wpiszesz „Riverdi” w pasku wyszukiwania po lewej stronie, wybierzesz odpowiedni projekt i klikniesz „Pobierz”, tak jak widać na poniższym obrazku.

Opcjonalnie: sklonuj najnowszą bibliotekę LVGL

Jeśli nie masz pewności, czy biblioteka LVGL, którą masz w projekcie, jest najnowsza, albo po prostu chcesz ją zaktualizować, możesz po prostu usunąć zawartość katalogu i ręcznie pobrać bibliotekę. Żeby to zrobić, wpisz w wierszu poleceń:

cd Riverdi-LVGL-101/Middlewares/Third_Party/

git clone https://github.com/lvgl/lvgl.git lvgl

Importowanie projektu do STM32CubeIDE

1. Otwórz STM32CubeIDE.
2. Przejdź do Plik → Otwórz projekty z systemu plików…
3. Kliknij „Katalog…”, a potem wybierz podkatalog „STM32CubeIDE” w sklonowanym folderze „riverdi-lvgl-101”.
4. Kliknij „Zakończ”.

Projekt pojawi się teraz w Eksploratorze projektów.

Skompiluj i uruchom przykładowy program LVGL

Otwórz plik main.c, który znajduje się w katalogu CM7/Application/User/Core. Po wszystkich inicjalizacjach powinna pojawić się funkcja lv_demo_widgets(), która jest wywoływana przed PWM i jądrem.

Możesz skompilować projekt, naciskając Ctrl+B albo ikonę młotka w lewym górnym rogu ekranu. Kompilacja może trochę potrwać – nawet kilka minut. Jeśli pojawią się jakieś ostrzeżenia, to nic się nie stało – mogą one wynikać z nowych wersji biblioteki LVGL lub programu CubeIDE.

Jeśli chcesz zapoznać się z kolejnymi przykładami LVGL i przeanalizować ich kod, wystarczy, że otworzysz katalog Middlewares/LVGL/lvgl/examples i wywołasz wybrany przykład w miejscu, gdzie wywoływana jest funkcja lv_demo_widgets().

Stwórzmy własny przykład

Stworzymy własny przykład zawierający obrazek i przycisk, który zmienia kolor ekranu na jeden z naszych kolorów Riverdi.

Krok 1 – Przygotuj logo Riverdi

1. Pobierz logo Riverdi ze strony internetowej Riverdi.
2. Uruchom program LVGL Image Converter.
3. Wybierz format kolorów: RGB565
4. Kliknij „Konwertuj” i pobierz wygenerowany plik .c.
5. Umieść go obok pliku main.c.
6. Dodaj ten wiersz na początku pliku main.c:
   • extern const lv_image_dsc_t riverdi_logo;

Uwaga: Jeśli twoje zdjęcie ma czarne tło – wynika to z formatu .png – brak tła jest przez Image Converter przekształcany na 0x00, czyli kolor czarny. Jeśli chcesz, żeby tło było białe, po prostu zamień wszystkie wartości 0x00 na 0xff w swoim IDE lub edytorze tekstowym.

Krok 2 – Dodaj nowy plik źródłowy

W STM32CubeIDE utwórz nowy plik:

Application/User/Core/ui_riverdi_logo.c

#include "lvgl.h"
extern const lv_image_dsc_t riverdi_logo;

static lv_color_t colors[3];
static uint8_t color_index = 0;
static lv_obj_t * scr;

static void color_btn_event_cb(lv_event_t * e)
{
color_index = (color_index + 1) % 3;
lv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN);
}

void ui_riverdi_logo_create(void)
{
colors[0] = lv_color_make(0, 0, 255); // Niebieski
colors[1] = lv_color_make(0, 255, 0); // Zielony
colors[2] = lv_color_make(255, 0, 0); // Czerwony

scr = lv_obj_create(NULL);
lv_obj_set_style_bg_color(scr, colors[color_index], LV_PART_MAIN);
lv_screen_load(scr);

lv_obj_t * img = lv_image_create(scr);
lv_image_set_src(img, &riverdi_logo);
lv_obj_align(img, LV_ALIGN_CENTER, 0, -40);

lv_obj_t * btn = lv_button_create(scr);
lv_obj_align(btn, LV_ALIGN_CENTER, 0, 100);
lv_obj_add_event_cb(btn, color_btn_event_cb, LV_EVENT_CLICKED, NULL);

lv_obj_t * label = lv_label_create(btn);
lv_label_set_text(label, „Zmień kolor”);
lv_obj_center(label);
}

Krok 3 – Wywołaj funkcję

Otwórz znowu plik main.c i zamień lv_demo_widgets(); na ui_riverdi_logo_create();

Następnie skompiluj i wgraj projekt.

Uwaga: Jeśli pojawi się błąd kompilacji, skompiluj jeszcze raz — CubeIDE czasami nieprawidłowo indeksuje nowe pliki.

Analiza naszego kodu

void color_btn_event_cb() – ta funkcja to funkcja obsługi zdarzenia, która jest wywoływana po naciśnięciu przycisku. W jej treści zmieniamy kolor tła (bg) na jeden z kolorów z tablicy colors[].

void ui_riverdi_logo_create() – ta funkcja to cały nasz interfejs użytkownika. Od góry:

• Tworzymy ekran, używając jednego z kolorów tła.
• Umieszczamy obraz na ekranie i wyrównujemy go do środka. Poniższe liczby to współrzędne X i Y od punktu wyrównania. W tym przykładzie wartość -40 oznacza, że umieszczamy obraz 40 pikseli powyżej środka ekranu.
• Następnie tworzymy przycisk – nie nadając mu żadnego stylu, zachowuje on domyślny wygląd i działanie. Umieszczamy go 100 pikseli poniżej środka, żeby nie nakładał się na zdjęcie.
• Na koniec tworzymy etykietę przycisku – „Zmień kolor”. Żeby umieścić ją na przycisku, po prostu przekazujemy przycisk jako parametr w funkcji lv_label_create.

Kolejne kroki

Masz teraz działające środowisko LVGL na platformie STM32H7 firmy Riverdi.
Stąd możesz:

• Dodaj więcej widżetów (etykiety, suwaki, wykresy)
• Zintegruj gesty dotykowe
• Zobacz animacje i motywy

Podsumowanie

Właśnie:

1. Sklonowałem i otworzyłem projekt LVGL dla wyświetlacza Riverdi STM32H7,
2. Uruchom aplikację demonstracyjną LVGL,
3. Stworzyłeś własny ekran na zamówienie z obrazkiem i przyciskiem.

Ten proces stanowi idealną podstawę do tworzenia profesjonalnych GUI na wbudowanych wyświetlaczach firmy Riverdi przy użyciu biblioteki LVGL.

ODKRYJ NASZĄ

Whitepaper

Osiągnij idealną interakcję użytkownika z wyświetlaczem dzięki odpowiedniemu czujnikowi Touch Sensor IC. Czy kiedykolwiek zmagałeś się z problemami związanymi z fantomowymi dotknięciami lub certyfikacją? Rozwiń swoje prace B+R jak profesjonalista dzięki naszemu Whitepaperowi!

Whitepaper

Przejdź do naszego katalogu produktów i zobacz, jak możesz oszczędzać dzięki jakości, nie na jakości.

Sprawdź teraz

Skontaktuj się z nami już teraz, oszczędzaj dzięki jakości, nie na jakości.

Skontaktuj się z nami