So lässt du LVGL auf dem Riverdi EVE-Display laufen
Eine moderne grafische Benutzeroberfläche auf einem Mikrocontroller zu betreiben, bedeutet in der Regel, sich mit Framebuffern, Speicherbeschränkungen und Kompromissen bei der Leistung auseinanderzusetzen.
Mit EVE von unserem Partner Bridgetek werden die Darstellung von HQ-HMI-Grafiken, Audio und die Touch-Steuerung auf die GPU verlagert. Gleichzeitig bietet LVGL, ebenfalls ein Riverdi-Partner, ein flexibles und weit verbreitetes UI-Framework.
Der Effekt: Mit diesem Aufbau kannst du komplexe Benutzeroberflächen erstellen, ohne die MCU an ihre Grenzen zu bringen, und es ermöglicht kostengünstigen Prozessoren, fortschrittliche, professionell aussehende Farbdisplays mit nur minimaler Belastung anzusteuern.
In dieser Anleitung wird erklärt, wie man LVGL auf einem intelligenten Riverdi EVE4-Display mithilfe des Riverdi-Evaluierungsboards auf Basis des STM32F4 ausführt.
In diesem Beispiel wird das 7-Zoll-Display Riverdi RVT70HSBNWC00-B verwendet, das über die RiBUS-Schnittstelle per SPI angeschlossen ist .
Das Ziel dieses Tutorials ist es, zu zeigen, wie man:
- LVGL auf der Host-MCU initialisieren
- LVGL mit der EVE-Grafik-Engine verbinden
- LVGL-Widgets auf dem Display darstellen
- Touch-Interaktion aktivieren
Im Gegensatz zu herkömmlichen Embedded-Displays muss die Host-MCU bei der EVE-Architektur keinen vollständigen Framebuffer rendern. Stattdessen sendet der Host Zeichnungsbefehle an die EVE-GPU, die das endgültige Bild rendert.
Dadurch werden der Speicherbedarf und die CPU-Auslastung der MCU deutlich reduziert.
Verwendete Hardware
In diesem Tutorial verwenden wir EVE4 (BT817Q). Laut der LVGL-Dokumentation sollte das auch mit anderen EVE-Versionen funktionieren, wurde aber noch nicht getestet.
In diesem Tutorial werden die folgenden Hardwarekomponenten verwendet.
Riverdi RVT70HSBNWC00-B
- 7-Zoll-EVE4-Smart-Display
- Auflösung: 1280 × 600
- Integrierte BT817Q-Grafikengine
- Projiziert-kapazitiver Touchscreen
Riverdi Evaluation Board
- STM32F4-Mikrocontroller
ST-Link
- wird zum Programmieren und Debuggen verwendet
RiBUS Flachkabel
- wird für die SPI-Kommunikation zwischen dem Host und dem EVE-Modul verwendet
Micro-USB-Kabel
- eines für ST-Link
- eines, um das Evaluierungsboard mit Strom zu versorgen
Softwareanforderungen
Bevor du mit der Integration beginnst, müssen einige Softwarekomponenten vorbereitet werden. Das Projekt wird mit STM32CubeIDE als Entwicklungsumgebung erstellt, wobei LVGL das Framework für die grafische Benutzeroberfläche bereitstellt. Die Kommunikation mit der EVE-Grafik-Engine erfolgt über die Riverdi-EVE-Unterstützungsbibliotheken, die die Low-Level-Schnittstelle zwischen der Host-MCU und der BT817-GPU implementieren.
In dieser Konfiguration rendert LVGL die Pixel nicht direkt in einen Framebuffer. Stattdessen werden die LVGL-Zeichenoperationen in EVE-Befehle übersetzt, die über SPI an die GPU gesendet werden. Das EVE-Gerät führt diese Befehle dann aus, um das endgültige Bild auf dem Display darzustellen.
Die folgenden Software-Tools werden benötigt:
STM32CubeIDE (oder eine andere IDE)
- Entwicklungsumgebung für STM32-Projekte
- dient dazu, Peripheriegeräte zu konfigurieren, das Projekt zu erstellen und die MCU zu programmieren
LVGL-Grafikbibliothek
- eingebettetes GUI-Framework zur Erstellung der Benutzeroberfläche
- bietet Widgets, ein Layout-System und Ereignisbehandlung
Riverdi EVE-Unterstützungsbibliotheken
- [eine Low-Level-Kommunikation mit der EVE-GPU ermöglichen]
- SPI-Transaktionen und den Zugriff auf den Befehls-FIFO verarbeiten
Git
- dient zum Herunterladen von Repositories und Beispielprojekten
Um das Projekt zu finden, schau bitte auf Riverdi Github vorbei und suche nach dem EVE-LVGL -Repository.
Die EVE-Rendering-Architektur verstehen
Ein wesentlicher Unterschied zwischen EVE-Displays und herkömmlichen Embedded-Displays besteht in der Art und Weise, wie Bilder generiert werden. In den meisten Embedded-Systemen rendert die MCU Pixel in einen Framebuffer, der dann kontinuierlich vom Display-Controller ausgelesen wird, um das Display zu aktualisieren
EVE-Geräte verfolgen einen anderen Ansatz. Anstatt einen Framebuffer zu senden, übermittelt die Host-MCU Zeichnungsbefehle an die GPU. Diese Befehle beschreiben, was auf dem Display dargestellt werden soll, während die EVE-Grafik-Engine die endgültigen Pixel intern generiert.
Dadurch werden der Speicherbedarf und die Bandbreitenanforderungen an die MCU deutlich reduziert.
Der gerenderte Frame wird durch eine Struktur definiert, die als „Display List“ bezeichnet wird. Die Display List ist eine Abfolge von GPU-Befehlen, die in jedem Frame ausgeführt werden, um das endgültige Bild zu erzeugen.
Eine vereinfachte Display-Pipeline sieht daher so aus:
MCU → Zeichenbefehle → EVE-GPU → LCD-Display
Diese befehlsbasierte Architektur ist der Grund dafür, dass komplexe grafische Benutzeroberflächen auf relativ kleinen Mikrocontrollern laufen können.
Wichtige EVE-Speicherblöcke
Intern nutzt die EVE-GPU mehrere Speicherbereiche, um Grafikbefehle zu verarbeiten.
RAM_DL
- speichert die Display-Liste, die zum Rendern des aktuellen Frames verwendet wird
RAM_G
- Allgemeiner Grafikspeicher für Bilder, Schriftarten und andere Elemente
Befehls-FIFO
- Puffer, den der Coprozessor nutzt, um Befehle von der MCU zu empfangen
Die Host-MCU schreibt Befehle in den Befehls-FIFO. Der EVE-Coprozessor interpretiert diese Befehle und erstellt die Display-Liste, die in RAM_DL gespeichert wird. Während des Bildschirmaktualisierungszyklus führt die GPU die Display-Liste aus und erzeugt das endgültige Bild.
Wie sich LVGL in die Pipeline einfügt
Wenn LVGL mit herkömmlichen Displays verwendet wird, werden die Pixel in einen Framebuffer im MCU-Speicher gerendert. Bei EVE-Displays läuft der Vorgang anders ab.
LVGL-Zeichenoperationen werden in EVE-GPU-Befehle übersetzt, die über SPI an das Gerät gesendet werden. Die GPU erstellt dann die Display-Liste und rendert das Bild intern.
Der daraus resultierende Ablauf sieht so aus:
Dadurch kann LVGL komplexe Benutzeroberflächen ausführen und gleichzeitig den Speicherverbrauch der MCU sehr gering halten.
Das STM32-Projekt erstellen
Der nächste Schritt ist die Vorbereitung des Entwicklungsprojekts für das Riverdi Evaluation Board. Die Host-MCU wird das LVGL-Framework ausführen und über SPI mit der EVE-GPU kommunizieren.
Erstelle zunächst in der STM32CubeIDE ein neues STM32-Projekt für den Mikrocontroller, der auf dem Evaluierungsboard zum Einsatz kommt. Sobald das Projekt angelegt ist, konfiguriere die Peripheriegeräte, die für die Kommunikation mit dem EVE-Gerät erforderlich sind.
Die wichtigste Schnittstelle ist SPI, über die Befehle und Daten zwischen der MCU und dem EVE-Grafikcontroller übertragen werden.
Neben SPI müssen noch einige Steuersignale als GPIO-Pins konfiguriert werden. Diese Signale dienen dazu, den Energiezustand des EVE-Geräts zu steuern und die Kommunikation mit der GPU zu verwalten.
Zu den typischen Signalen, die von der EVE-Schnittstelle benötigt werden, gehören:
CS
- Chip-Select-Signal für die SPI-Kommunikation
PD
- Steuerpin zum Herunterfahren, der zum Zurücksetzen oder zum Aus- und Wiedereinschalten des EVE-Geräts verwendet wird
INT
- Interrupt-Leitung, über die die GPU Ereignisse an die Host-MCU meldet
Sobald die SPI-Schnittstelle und die GPIO-Signale konfiguriert sind, kann das Projekt kompiliert und auf das Board geflasht werden, um zu überprüfen, ob die grundlegende Hardwarekonfiguration funktioniert.
LVGL und den EVE-Display-Treiber initialisieren
Sobald die Projektumgebung eingerichtet ist, muss die LVGL-Bibliothek initialisiert werden. Dieser Schritt bereitet die internen LVGL-Strukturen vor und aktiviert das Grafik-Framework.
lv_init();
LVGL stellt einen speziellen Treiber für das Display der EVE-GPUs bereit. Dieser Treiber wandelt LVGL-Zeichenoperationen in Befehle um, die von der EVE-Grafik-Engine verstanden werden.
Der Display-Treiber wird mit der Funktion lv_draw_eve_display_create() erstellt.
lv_display_t * disp = lv_draw_eve_display_create( 1280, 600, LV_DISPLAY_RENDER_MODE_DIRECT );
Die Parameter legen die Display-Auflösung fest. In diesem Beispiel verwenden wir die Auflösung 1280×600 des Riverdi RVT70HSBNWC00-B-Displays.
Touch-Eingabe aktivieren
Das Riverdi EVE-Display verfügt über einen integrierten kapazitiven Touch-Controller, auf den über die EVE-GPU-Schnittstelle zugegriffen werden kann.
LVGL bietet eine Hilfsfunktion, die einen Treiber für ein Eingabegerät erstellt, das mit der EVE-Touch-Engine verbunden ist.
lv_draw_eve_touch_create(disp);
Sobald diese Funktion aufgerufen wird, werden die vom EVE-Controller erfassten Berührungskoordinaten automatisch an LVGL weitergeleitet und in Eingabeereignisse umgewandelt.
Dadurch können LVGL-Widgets wie Schaltflächen, Schieberegler und Listen auf Benutzeraktionen reagieren.
Die erste LVGL-Demo ausführen
Nachdem die Display- und Eingabetreiber initialisiert wurden, ist das System bereit, die erste grafische Benutzeroberfläche darzustellen.
Eine einfache Möglichkeit, die Integration zu überprüfen, besteht darin, ein Display mit mehreren Standard-LVGL-Widgets zu erstellen. Den Demo-Code findest du unten:
static void create_test_ui(void)
{
lv_obj_t * scr = lv_screen_active();
/* Hintergrund */
lv_obj_set_style_bg_color(scr, COLOR_BG, 0);
lv_obj_set_style_bg_opa(scr, LV_OPA_COVER, 0);
/* Titel */
lv_obj_t * title = lv_label_create(scr);
lv_label_set_text(title, "LVGL auf Riverdi EVE");
lv_obj_set_style_text_font(title, &lv_font_montserrat_44, 0);
lv_obj_set_style_text_color(title, COLOR_TEXT, 0);
lv_obj_align(title, LV_ALIGN_TOP_MID, 0, 48);
/* Untertitel */
lv_obj_t * subtitle = lv_label_create(scr);
lv_label_set_text(subtitle, „Einfacher Kompatibilitätstest für Widgets“);
lv_obj_set_style_text_font(subtitle, &lv_font_montserrat_24, 0);
lv_obj_set_style_text_color(subtitle, COLOR_TEXT, 0);
lv_obj_align(subtitle, LV_ALIGN_TOP_MID, 0, 100);
/* --- Layout-Anker --- */
int start_y = 170;
int col_left = 180;
int col_right = 640;
/* Schaltfläche */
lv_obj_t * btn = lv_button_create(scr);
lv_obj_set_size(btn, 200, 60);
lv_obj_align(btn, LV_ALIGN_TOP_LEFT, col_left, start_y);
lv_obj_set_style_bg_color(btn, COLOR_ACCENT, 0);
lv_obj_t * btn_label = lv_label_create(btn);
lv_label_set_text(btn_label, "Button");
lv_obj_center(btn_label);
/* Slider */
lv_obj_t * slider = lv_slider_create(scr);
lv_obj_set_width(slider, 260);
lv_obj_align(slider, LV_ALIGN_TOP_LEFT, col_right, start_y + 15);
lv_slider_set_value(slider, 45, LV_ANIM_OFF);
lv_obj_set_style_bg_color(slider, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(slider, COLOR_ACCENT, LV_PART_INDICATOR);
/* Umschalten */
lv_obj_t * sw = lv_switch_create(scr);
lv_obj_align(sw, LV_ALIGN_TOP_LEFT, col_left, start_y + 120);
lv_obj_t * sw_label = lv_label_create(scr);
lv_label_set_text(sw_label, „Schalter“);
lv_obj_set_style_text_color(sw_label, COLOR_TEXT, 0);
lv_obj_align_to(sw_label, sw, LV_ALIGN_OUT_RIGHT_MID, 20, 0);
/* Kontrollkästchen */
lv_obj_t * cb = lv_checkbox_create(scr);
lv_checkbox_set_text(cb, „Checkbox“);
lv_obj_set_style_text_color(cb, COLOR_TEXT, 0);
lv_obj_align(cb, LV_ALIGN_TOP_LEFT, col_right, start_y + 120);
/* Bar */
lv_obj_t * bar = lv_bar_create(scr);
lv_obj_set_size(bar, 500, 20);
lv_obj_align(bar, LV_ALIGN_TOP_MID, 0, start_y + 220);
lv_bar_set_value(bar, 70, LV_ANIM_OFF);
lv_obj_set_style_bg_color(bar, COLOR_WIDGET, LV_PART_MAIN);
lv_obj_set_style_bg_color(bar, COLOR_ACCENT, LV_PART_INDICATOR);
lv_obj_t * bar_label = lv_label_create(scr);
lv_label_set_text(bar_label, "Bar");
lv_obj_set_style_text_color(bar_label, COLOR_TEXT, 0);
lv_obj_align_to(bar_label, bar, LV_ALIGN_OUT_TOP_MID, 0, -8);
}
Schlussfolgerung
In dieser Anleitung haben wir gezeigt, wie man LVGL auf einem Riverdi EVE4-Display ausführt, wobei das Riverdi-Evaluierungsboard als Host-Plattform dient.
Anstatt einen herkömmlichen Framebuffer auf der MCU zu rendern, nutzt das System die EVE-Grafik-Engine, um das endgültige Bild zu erzeugen. Der Host-Mikrocontroller sendet Zeichnungsbefehle über SPI, während die BT817-GPU die Display-Liste erstellt und das Bild auf dem Display rendert.
Diese Architektur ermöglicht es, komplexe grafische Benutzeroberflächen auf relativ kleinen Mikrocontrollern auszuführen und dabei den Speicherbedarf und die CPU-Auslastung gering zu halten.
Sobald der Treiber für das Display korrekt initialisiert ist, kannst du mit LVGL vollständige grafische Anwendungen erstellen – genauso wie mit anderen unterstützten Display-Treibern.
Ab diesem Punkt können Entwickler damit beginnen, ihre eigenen Benutzeroberflächen mithilfe von LVGL-Widgets, Layouts und Mechanismen zur Ereignisbehandlung zu erstellen.
Weitere Schritte können Folgendes umfassen:
- Integration von benutzerdefinierten Displays und Anwendungslogik
- Bilder und Schriftarten hinzufügen, die im EVE RAM_G gespeichert sind
- Optimierung der SPI-Kommunikation für eine höhere Rendering-Leistung
Um das zu tun, schau dir die LVGL-Dokumentation an und stöbere in unserem Riverdi-GitHub-Repo.
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.
