In dieser Anleitung zeigen wir Ihnen, wie Sie mit TouchGFX eine einfache GUI-Anwendung erstellen und diese auf drei verschiedenen STM32 Nucleo-Boards mit Riverdi-Displays ausführen. Die Anleitung ist vollständig in sich abgeschlossen, so dass Sie jeden Schritt nachvollziehen können, ohne sich das dazugehörige Video ansehen zu müssen.
Ganz gleich, ob Sie Riverdi-Module evaluieren oder TouchGFX zum ersten Mal ausprobieren, dieses Einsteigerprojekt zeigt Ihnen, wie schnell Sie interaktive Benutzeroberflächenlogik erstellen, Code generieren, in STM32CubeIDE integrieren und auf der Hardware ausführen können.
Verwendete Hardware
Wir verwenden drei STM32 Nucleo Boards, jedes gepaart mit einem Riverdi Display:
1. Nucleo-C092RC + Riverdi RVA15MD
Ein kompaktes, kostengünstiges STM32 Board, das sich hervorragend für einfache TouchGFX-Demos und einfache UX-Logik eignet. Zusammen mit dem runden 1,54-Zoll-Display RVA15MD ist es ein ideales Einstiegsgerät.
2. Nucleo-WBA65RI + Riverdi RVA15MD
Eine leistungsstärkere, brandneue drahtlose Nucleo-Plattform, die moderne Konnektivität und eine stärkere GUI-Leistung bietet – hervorragend geeignet für fortgeschrittene Riverdi-Anwendungen mit runden Displays.
3. Nucleo-H563ZI + Riverdi RVA35HI
Ein High-End-Hochleistungs-Nucleo-Board mit reichlich Speicher für reichhaltige TouchGFX-Grafiken, das hier ein 3,5″-RVA35HI-Display ansteuert.
Es wird kein externer ST-Link benötigt – alleBoards verfügen über einen integrierten ST-Link V3.
Erstellen Sie Ihr eigenes Beispiel von Grund auf
Anschließen der Hardware
Der Anschluss von Riverdi-Displays an Nucleo-Boards dauert nur einen Augenblick:
- Stecken Sie den FFC des Displays in den Nucleo-Adapter oder -Anschluss.
Das Flexkabel ist kodiert und passt nur in eine Richtung. - Schließen Sie das Board über den USB-C ST-LINK-Anschluss an.
Die grüne LED bestätigt die Stromversorgung und die Bereitschaft des Debuggers. - Keine externen Programmierer, Jumper oder Adapter erforderlich.
Sobald die Verbindung hergestellt ist, können wir direkt mit der Entwicklung der Benutzeroberfläche beginnen.
Erstellen der Benutzeroberfläche in TouchGFX Designer
Öffnen Sie TouchGFX Designer und beginnen Sie mit einem neuen Projekt:
Schritt für Schritt
- Klicken Sie auf Erstellen (die Plus-Schaltfläche auf dem Startbildschirm).
- Suchen Sie im Board Selector nach Ihrem Board (z.B. „H563“ oder „WBA65“).
- Wählen Sie den richtigen Nucleo mit Riverdi Display (RVA)
- Benennen Sie Ihr Projekt und bestätigen Sie mit CREATE.
- Designer öffnet sich mit einer leeren Leinwand, die Ihrer Bildschirmauflösung entspricht.
Aufbau der Demo UI
Um unser einfaches Beispiel für die Helligkeitsanpassung zu erstellen:
- Ziehen Sie in der oberen Symbolleiste einen Rahmen auf die Leinwand.
Vergrößern Sie ihn so, dass er den gesamten Bildschirm bedeckt – er dient dann als weißer Hintergrund. - Fügen Sie ein Slider-Widget hinzu.
Verschieben Sie es in die Mitte, indem Sie es auf der Leinwand ziehen. - Wählen Sie eine der TouchGFX-Standardvorgaben – im Video verwenden wir den kleinen gelben Schieberegler.
Schieberegler Konfiguration
Im Fenster Eigenschaften:
- Minimum = 0 setzen
- Maximum = 200 einstellen
- (Optional) Stellen Sie Anfangswert = 200 ein, um einen vollständig hellen Startbildschirm zu erhalten.
Alles, was Sie hinzugefügt haben, ist in der Widget-Struktur auf der linken Seite sichtbar.
Hinzufügen von Interaktionen in TouchGFX
Jetzt verknüpfen wir den Schieberegler mit einem Funktionsaufruf:
- Öffnen Sie die Registerkarte Interaktionen.
- Drücken Sie das + Symbol, um eine neue Interaktion hinzuzufügen.
- Wählen Sie Schiebereglerwert geändert als Auslöser.
- Wählen Sie Schieberegler1 als Widget.
- Für Aktion wählen Sie Neue virtuelle Funktion aufrufen.
- Benennen Sie die Funktion: sliderChanged
TouchGFX wird dies als virtuelle Methode in Screen1ViewBase generieren.
Als nächstes generieren wir den Code.
Erzeugen von Code und Öffnen des Projekts in CubeIDE
Navigieren Sie zu:
Anwendung → Benutzer → gui → Screen1View.cpp
TouchGFX hat den Callback-Aufruf bereits in der Basisklasse erzeugt.
Wir implementieren nun die Logik in Screen1View.cpp:
void Screen1View::sliderChange(int wert)
{
// Schiebereglerbereich (0-200) auf Alpha-Bereich (0-255) skalieren
uint8_t alpha = (Wert * 255) / 200;
box1.setAlpha(alpha);
box1.invalidate();
}
Fügen Sie die Deklaration unbedingt in Screen1View.hpp hinzu:
virtual void sliderChange(int value);
Das ist die gesamte benötigte Logik – keine Hardware-Treiber und kein HAL-Code.
Testen des Projekts: Simulator & Zielprogrammierung
Zurück in TouchGFX Designer:
- Klicken Sie auf Simulator ausführen (zweites rosa Symbol)
→ Sie können Ihren Helligkeitsregler sofort ohne Hardware testen. - Klicken Sie auf Program and Run Target (drittes rosa Symbol oder F6)
→ Dadurch wird die Firmware direkt auf Ihrem Nucleo-Board erstellt, geflasht und ausgeführt.
Zusammenfassung
Dieser Leitfaden zeigt Ihnen, wie schnell Sie das tun können:
- Erstellen Sie ein TouchGFX-Projekt
- UI-Elemente hinzufügen
- Widget-Interaktionen verbinden
- Einfache C++ Logik implementieren
- Code generieren und erstellen
- Flashen Sie direkt aus TouchGFX Designer
- Und lassen Sie es auf einem beliebigen Nucleo-Board in Verbindung mit einem Riverdi-Display laufen
Mit den STM32-basierten Modulen von Riverdi und dem Nucleo-Ökosystem von ST wird die Erstellung interaktiver GUIs schnell, vorhersehbar und entwicklerfreundlich.
ENTDECKEN SIE UNSER
Whitepaper
Erzielen Sie die perfekte Interaktion zwischen Benutzer und Display mit dem richtigen Touchsensor-IC. Hatten Sie jemals Probleme mit Phantomberührungen oder Zertifizierungen? Verbessern Sie Ihre Forschung und Entwicklung wie ein Profi mit unserem Whitepaper!
Schauen Sie sich unseren Produktkatalog an und sehen Sie, wie Sie durch Qualität und nicht an Qualität sparen können.
