W tym poradniku pokażemy, jak stworzyć prostą aplikację z GUI przy użyciu TouchGFX i uruchomić ją na trzech różnych płytkach STM32 Nucleo połączonych z wyświetlaczami Riverdi. Ten przewodnik jest w pełni samowystarczalny, więc możesz wykonać każdy krok bez oglądania dołączonego filmiku.
Niezależnie od tego, czy sprawdzasz moduły Riverdi, czy dopiero zaczynasz przygodę z TouchGFX, ten projekt startowy pokazuje, jak szybko możesz stworzyć interaktywną logikę interfejsu użytkownika, wygenerować kod, zintegrować go z STM32CubeIDE i uruchomić na sprzęcie.
Używany sprzęt
Używamy trzech płytek STM32 Nucleo, z których każda jest połączona z wyświetlaczem Riverdi:
1. Nucleo-C092RC + Riverdi RVA15MD
Kompaktowa, niedroga płytka STM32, świetna do podstawowych prezentacji TouchGFX i prostej logiki UX. W połączeniu z okrągłym wyświetlaczem RVA15MD o przekątnej 1,54” to idealny zestaw dla początkujących.
2. Nucleo-WBA65RI + Riverdi RVA15MD
Nowa, jeszcze wydajniejsza bezprzewodowa platforma Nucleo, która zapewnia nowoczesną łączność i lepszą wydajność GUI — idealna do bardziej zaawansowanych zastosowań z okrągłymi wyświetlaczami Riverdi.
3. Nucleo-H563ZI + Riverdi RVA35HI
Wysokiej klasy, wydajna płytka Nucleo z dużą ilością pamięci, która pozwala na wyświetlanie bogatszej grafiki TouchGFX – w tym przypadku steruje 3,5-calowym wyświetlaczem RVA35HI.
Nie potrzebujesz zewnętrznego modułu ST-Link– wszystkie płytki mają wbudowany ST-Link V3.
Tworzenie własnego przykładu od podstaw
Podłączanie sprzętu
Podłączenie wyświetlaczy Riverdi do płytek Nucleo zajmuje tylko chwilę:
- Podłącz kabel FFC wyświetlacza do adaptera lub złącza Nucleo.
Kabel elastyczny ma wyprofilowany profil i pasuje tylko w jednym kierunku. - Podłącz płytkę przez port USB-C ST-LINK.
Zielona dioda LED sygnalizuje zasilanie i gotowość debuggera do pracy. - Nie potrzebujesz żadnego zewnętrznego programatora, zworek ani adapterów.
Jak tylko się połączymy, od razu zabieramy się za tworzenie interfejsu użytkownika.
Tworzenie interfejsu użytkownika w programie TouchGFX Designer
Otwórz program TouchGFX Designer i zacznij od nowego projektu:
Krok po kroku
- Kliknij „Utwórz” (przycisk z plusem na ekranie startowym).
- W selektorze płyt poszukaj swojej płyty (np. „H563” lub „WBA65”).
- Wybierz odpowiedni model Nucleo z wyświetlaczem Riverdi (RVA)
- Nadaj nazwę projektowi i zatwierdź, naciskając CREATE.
- Program Designer otwiera się, wyświetlając puste pole o rozmiarze dopasowanym do rozdzielczości twojego wyświetlacza.
Tworzenie interfejsu użytkownika wersji demonstracyjnej
Aby stworzyć nasz prosty przykład regulacji jasności:
- Z górnego paska narzędzi przeciągnij prostokąt na obszar roboczy.
Zmieniaj jego rozmiar tak, żeby zajmował cały ekran — będzie to białe tło. - Dodaj widżet „Slider ”.
Przesuń go na środek, przeciągając go po obszarze roboczym. - Wybierz jedno z domyślnych ustawień TouchGFX — w filmiku używamy małego żółtego suwaka.
Konfiguracja suwaka
W panelu „Właściwości ”:
- Ustaw minimalną wartość na 0
- Ustaw wartość maksymalną na 200
- (Opcjonalnie) Ustaw wartość początkową na 200, żeby ekran startowy był w pełni jasny.
Wszystko, co dodasz, będzie widoczne w drzewie widżetów po lewej stronie.
Dodawanie interakcji w TouchGFX
Teraz połączymy suwak z wywołaniem funkcji:
- Otwórz zakładkę „Interakcje ”.
- Naciśnij ikonę +, aby dodać nową interakcję.
- Wybierz jako wyzwalacz opcję „Zmiana wartości suwaka ”.
- Wybierz „slider1” jako widżet.
- Jako akcję wybierz opcję „Wywołaj nową funkcję wirtualną”.
- Nazwij tę funkcję: sliderChanged
TouchGFX wygeneruje to jako metodę wirtualną w klasie Screen1ViewBase.
Następnie generujemy kod.
Generowanie kodu i otwarcie projektu w CubeIDE
Przejdź do:
Aplikacja → Użytkownik → GUI → Screen1View.cpp
TouchGFX już wygenerowało wywołanie funkcji zwrotnej w klasie bazowej.
Teraz zaimplementujemy tę logikę w pliku Screen1View.cpp:
void Screen1View::sliderChange(int value)
{
// Przekształć zakres suwaka (0–200) na zakres wartości alfa (0–255)
uint8_t alpha = (value * 255) / 200;
box1.setAlpha(alpha);
box1.invalidate();
}
Pamiętaj, żeby dodać tę deklarację w pliku Screen1View.hpp:
virtual void sliderChange(int value);
To cała potrzebna logika – żadnych sterowników sprzętowych ani kodu HAL.
Testowanie projektu: symulator i programowanie układu docelowego
Powrót do TouchGFX Designer:
- Kliknij „Uruchom symulator” (druga różowa ikona)
→ Możesz od razu przetestować suwak jasności bez użycia sprzętu. - Kliknij „Program” i „Run Target” (trzecia różowa ikona lub klawisz F6)
→ Spowoduje to skompilowanie, wgranie i uruchomienie firmware bezpośrednio na twojej płytce Nucleo.
Podsumowanie
W tym poradniku pokażemy, jak szybko możesz:
- Utwórz projekt TouchGFX
- Dodaj elementy interfejsu użytkownika
- Połącz interakcje z widżetami
- Zaimplementuj prostą logikę w C++
- Generuj i kompiluj kod
- Wpisuj kod bezpośrednio z programu TouchGFX Designer
- I uruchom to na dowolnej płytce Nucleo połączonej z wyświetlaczem Riverdi
Dzięki modułom firmy Riverdi opartym na STM32 oraz ekosystemowi Nucleo firmy ST tworzenie interaktywnych GUI staje się szybkie, przewidywalne i przyjazne dla programistów.
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!
Przejdź do naszego katalogu produktów i zobacz, jak możesz oszczędzać dzięki jakości, nie na jakości.
