Erste Schritte mit LVGL auf Riverdi STM32 Display – vollständige Anleitung

Diese Anleitung zeigt Ihnen, wie Sie ein Riverdi STM32H7-Display mit LVGL zum Leben erwecken – vom Klonen des Repositorys bis zum Ausführen Ihrer ersten benutzerdefinierten Oberfläche mit einem Bild und einer Schaltfläche.
Sie werden lernen, wie man:

• die Hardware anschließen,
• öffnen und erstellen Sie das Projekt in STM32CubeIDE,
• führen Sie die LVGL-Demo aus,
• und erstellen Sie eine einfache benutzerdefinierte Oberfläche mit dem Riverdi-Logo und einer interaktiven Schaltfläche.

Am Ende werden Sie eine funktionierende Grundlage für Ihr eigenes LVGL-basiertes GUI-Projekt auf den STM32 Embedded Displays von Riverdi haben.

Hardware

Verbindungen

Das STM32H7-Display verwendet zwei Molex-Anschlüsse:

• SWD (Programmierung) – schließen Sie hier Ihren ST-Link an.
• Power (12 V) – für externe Stromversorgung.

⚠️ Schalten Sie das Display nicht zum ersten Mal ein und schließen Sie ST-Link nicht gleichzeitig an, ohne die richtige Polarität zu überprüfen.

Software

Klonen Sie das Projekt

Mit dem LVGL Project Creator können Sie das Projekt für die von Ihnen verwendete Bildschirmgröße herunterladen. Geben Sie einfach Riverdi in die Suchleiste auf der linken Seite ein, wählen Sie das entsprechende Projekt aus und drücken Sie auf Download, wie Sie auf dem Bild unten sehen können.

Optional: Klonen Sie die neueste LVGL-Bibliothek

Wenn Sie sich nicht sicher sind, ob die LVGL-Bibliothek, die Sie in Ihrem Projekt haben, die neueste ist oder Sie sie einfach nur aktualisieren möchten, können Sie einfach den Inhalt des Verzeichnisses löschen und die Bibliothek manuell herunterladen. Geben Sie dazu einfach Folgendes in Ihr CLI ein:

cd riverdi-lvgl-101/Middlewares/Dritte/Partei/

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

Importieren des Projekts in STM32CubeIDE

1. Öffnen Sie STM32CubeIDE.
2. Gehen Sie zu Datei → Projekte aus dem Dateisystem öffnen…
3. Klicken Sie auf Verzeichnis…, wählen Sie das Unterverzeichnis STM32CubeIDE Ihres geklonten Ordners riverdi-lvgl-101.
4. Klicken Sie auf Fertig stellen.

Das Projekt wird nun im Projekt-Explorer angezeigt .

LVGL-Beispiel erstellen und ausführen

Öffnen Sie die Datei main.c, die sich in CM7/Application/User/Core befindet. Nach allen Initialisierungen sollte es eine Funktion lv_demo_widgets() geben, die vor PWM und Kernel aufgerufen wird.

Sie können das Projekt erstellen, indem Sie Strg+B oder das Hammersymbol oben links auf dem Bildschirm drücken. Der Erstellungsprozess sollte einige Zeit in Anspruch nehmen, bis zu ein paar Minuten. Wenn Sie irgendwelche Warnungen sehen, sollte alles in Ordnung sein. Dies kann durch neue Versionen der LVGL-Bibliothek oder von CubeIDE verursacht werden.

Wenn Sie sich weitere LVGL-Beispiele ansehen und deren Code analysieren möchten, müssen Sie nur Middlewares/LVGL/lvgl/examples öffnen und eines der Beispiele Ihrer Wahl an der Stelle aufrufen, an der lv_demo_widgets() aufgerufen wird.

Unser eigenes Beispiel erstellen

Wir werden unser eigenes Beispiel mit einem Bild und einer Schaltfläche erstellen, die die Farbe des Bildschirms in eine unserer Riverdi-Farben ändert.

Schritt 1 – Bereiten Sie das Riverdi-Logo vor

1. Laden Sie das Riverdi-Logo von der Riverdi-Website herunter.
2. Öffnen Sie den LVGL Image Converter.
3. Wählen Sie das Farbformat: RGB565
4. Klicken Sie auf „Konvertieren“ und laden Sie die generierte .c-Datei herunter.
5. Legen Sie sie neben Ihre Datei main.c.
6. Fügen Sie diese Zeile am Anfang von main.c ein:
   • extern const lv_image_dsc_t riverdi_logo;

Hinweis: Wenn Ihr Bild einen schwarzen Hintergrund hat, liegt das am .png Format – kein Hintergrund wird vom Image Converter in 0x00 – schwarze Farbe – übersetzt. Wenn Sie ihn weiß machen wollen, tauschen Sie in Ihrer IDE oder Ihrem Texteditor einfach alle 0x00 in 0xff aus.

Schritt 2 – Hinzufügen einer neuen Quelldatei

Erstellen Sie in STM32CubeIDE eine neue Datei:

Anwendung/Benutzer/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, farben[color_index], LV_PART_MAIN);
}

void ui_riverdi_logo_create(void)
{
farben[0] = lv_color_make(0, 0, 255); // Blau
colors[1] = lv_color_make(0, 255, 0); // Grün
colors[2] = lv_color_make(255, 0, 0); // Rot

scr = lv_obj_create(NULL);
lv_obj_set_style_bg_color(scr, farben[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, "Farbe ändern");
lv_obj_center(label);
}

Schritt 3 – Aufruf der Funktion

Öffnen Sie main.c erneut und ersetzen Sie lv_demo_widgets(); durch ui_riverdi_logo_create();

Erstellen Sie dann das Projekt und flashen Sie es.

Hinweis: Wenn ein Build-Fehler auftritt, bauen Sie neu auf – CubeIDE indiziert neue Dateien manchmal falsch.

Analyse unseres Codes

void color_btn_event_cb() – diese Funktion ist eine Ereignisfunktion, die aufgerufen wird, wenn die Schaltfläche gedrückt wird. In ihrem Body ändern wir die Hintergrundfarbe (bg) in eine der Farben aus dem Array colors[].

void ui_riverdi_logo_create() – diese Funktion ist unsere gesamte Benutzeroberfläche. Von oben nach unten:

• Wir erstellen den Bildschirm mit einer der Hintergrundfarben.
• Wir legen das Bild auf den Bildschirm und richten es an der Mitte aus. Die folgenden Zahlen sind X- und Y-Koordinaten von der Ausrichtungsposition. In diesem Beispiel bedeutet -40, dass wir das Bild 40 Pixel über der Mitte des Bildschirms platzieren.
• Dann erstellen wir die Schaltfläche – indem wir ihr keinen Stil geben, behält sie ihr Standardaussehen und -verhalten bei. Wir platzieren sie 100px unterhalb der Mitte, damit sie sich nicht mit dem Bild überschneidet.
• Als letztes erstellen wir die Beschriftung der Schaltfläche – „Farbe ändern“. Um sie auf der Schaltfläche anzubringen, übergeben wir einfach die Schaltfläche als Parameter in lv_label_create.

Nächste Schritte

Sie haben jetzt eine funktionierende LVGL-Umgebung auf der STM32H7-Plattform von Riverdi.
Von hier aus können Sie:

• Weitere Widgets hinzufügen (Etiketten, Schieberegler, Diagramme)
• Touch-Gesten einbinden
• Erkunden Sie Animationen und Themen

Zusammenfassung

Sie haben gerade:

1. Klonen und öffnen Sie das LVGL-Projekt für das Riverdi STM32H7-Display,
2. Führen Sie die LVGL-Demo-Anwendung aus,
3. Erstellen Sie Ihren eigenen benutzerdefinierten Bildschirm mit einem Bild und einer Schaltfläche.

Dieser Workflow ist die perfekte Grundlage für die Entwicklung professioneller GUIs auf den eingebetteten Displays von Riverdi unter Verwendung von LVGL.

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!

Whitepaper

Schauen Sie sich unseren Produktkatalog an und sehen Sie, wie Sie durch Qualität und nicht an Qualität sparen können.

Jetzt auschecken

Kontaktieren Sie uns jetzt, sparen Sie mit Qualität, nicht an Qualität.

Kontaktieren Sie uns jetzt