lvgl

Englisch | 中文 | Portugiesisch aus Brasilien | 日本語

Leichte und vielseitige Grafikbibliothek

Website | Dokumente | Forum | Demos | Dienstleistungen

? Überblick

Ausgereift und bekannt
LVGL ist die beliebteste kostenlose und quelloffene eingebettete Grafikbibliothek zum Erstellen schöner Benutzeroberflächen für alle MCUs, MPUs und Anzeigetypen. Es wird von branchenführenden Anbietern und Projekten wie Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit und vielen mehr unterstützt.

Reich an Funktionen
Es verfügt über alle Funktionen zum Erstellen moderner und schöner GUIs: über 30 integrierte Widgets, ein leistungsstarkes Stilsystem, webinspirierte Layout-Manager und ein Typografiesystem, das viele Sprachen unterstützt. Um LVGL in Ihre Plattform zu integrieren, benötigen Sie lediglich mindestens 32 KB RAM und 128 KB Flash, einen C-Compiler, einen Frame-Puffer und mindestens einen Puffer in der Größe von 1/10 des Bildschirms für das Rendering.

Dienstleistungen
Unser Team steht Ihnen gerne mit Grafikdesign, UI-Implementierung und Beratungsdiensten zur Seite. Kontaktieren Sie uns, wenn Sie Unterstützung bei der Entwicklung Ihres nächsten GUI-Projekts benötigen.

Merkmale

Kostenlos und tragbar

• Eine vollständig portable C-Bibliothek (C++-kompatibel) ohne externe Abhängigkeiten.
• Kann mit jedem (RT)OS auf jede MCU oder MPU kompiliert werden.
• Unterstützt Monochrom-, ePaper-, OLED- oder TFT-Displays oder sogar Monitore. Zeigt an
• Wird unter der MIT-Lizenz vertrieben, sodass Sie es problemlos auch in kommerziellen Projekten verwenden können.
• Benötigt nur 32 kB RAM und 128 kB Flash, einen Bildpuffer und mindestens einen Puffer von 1/10 Bildschirmgröße zum Rendern.
• Betriebssystem, externer Speicher und GPU werden unterstützt, sind aber nicht erforderlich.

Widgets, Stile, Layouts und mehr

• Über 30 integrierte Widgets: Schaltfläche, Beschriftung, Schieberegler, Diagramm, Tastatur, Messgerät, Bogen, Tabelle und viele mehr.
• Flexibles Stilsystem mit ca. 100 Stileigenschaften zum Anpassen jedes Teils der Widgets in jedem Zustand.
• Flexbox- und Grid-ähnliche Layout-Engines zur automatischen Größenanpassung und reaktionsschnellen Positionierung der Widgets.
• Texte werden mit UTF-8-Kodierung gerendert, die die Schriftsysteme CJK, Thai, Hindi, Arabisch und Persisch unterstützt.
• Zeilenumbruch, Kerning, Text-Scrolling, Subpixel-Rendering, chinesische Pinyin-IME-Eingabe, Emojis in Texten.
• Rendering-Engine, die Animationen, Anti-Aliasing, Deckkraft, sanftes Scrollen, Schatten, Bildtransformation usw. unterstützt
• Unterstützt Maus, Touchpad, Tastatur, Tastatur, externe Tasten und Encoder-Eingabegeräte.
• Unterstützung mehrerer Displays.

Bindungs- und Build-Unterstützung

• Die MicroPython-Bindung stellt die LVGL-API bereit
• PikaScript-Bindung von Python auf MCU leichter und einfacher.
• Es wird kein benutzerdefiniertes Build-System verwendet. Sie können LVGL erstellen, während Sie die anderen Dateien Ihres Projekts erstellen.
• Unterstützung für Make und CMake ist standardmäßig enthalten.
• Entwickeln Sie auf dem PC und verwenden Sie denselben UI-Code auf eingebetteter Hardware.
• Konvertieren Sie den C-UI-Code mit unserem Emscripten-Port in eine HTML-Datei.

Dokumente, Tools und Dienste

• Detaillierte Dokumentation mit über 100 einfachen Beispielen
• Dienstleistungen wie Benutzeroberflächendesign, Implementierung und Beratung, um die UI-Entwicklung einfacher und schneller zu machen.

❤️ Sponsor

Wenn Sie mit LVGL viel Zeit und Geld gespart haben oder es Ihnen einfach nur Spaß gemacht hat, es zu nutzen, sollten Sie darüber nachdenken, seine Entwicklung zu unterstützen.

Wie geben wir die Spenden aus?
Unser Ziel ist es, Menschen, die am meisten für LVGL tun, finanziell zu entschädigen. Das bedeutet, dass nicht nur die Betreuer, sondern jeder, der eine großartige Funktion implementiert, eine Zahlung aus dem angesammelten Geld erhalten sollte. Wir verwenden die Spenden, um unsere Betriebskosten wie Server und damit verbundene Dienstleistungen zu decken.

Wie spende ich?
Wir nutzen GitHub-Sponsoren, über die Sie problemlos einmalige oder wiederkehrende Spenden senden können. Außerdem können Sie alle unsere Ausgaben transparent einsehen.

Wie wird Ihr Beitrag bezahlt?
Wenn jemand ein als „Gesponsert“ gekennzeichnetes Problem umsetzt oder behebt, erhält er oder sie eine Vergütung für diese Arbeit. Wir schätzen den Zeitaufwand, die Komplexität und die Bedeutung des Anliegens ein und legen einen entsprechenden Preis fest. Um einzusteigen, kommentieren Sie einfach ein gesponsertes Problem mit den Worten „Hallo, ich würde mich gerne darum kümmern. So habe ich vor, es zu beheben/zu implementieren …“. Ein Werk gilt als fertig, wenn es von einem Betreuer genehmigt und zusammengeführt wird. Anschließend können Sie Ihre Kosten bei opencollective.com einreichen und erhalten die Zahlung in wenigen Tagen.

Organisationen, die LVGL unterstützen

Einzelpersonen, die LVGL unterstützen

? Pakete

LVGL ist verfügbar als:

• Arduino-Bibliothek
• PlatformIO-Paket
• Zephyr-Bibliothek
• ESP-IDF(ESP32)-Komponente
• NXP MCUXpresso-Komponente
• NuttX-Bibliothek
• RT-Thread RTOS
• CMSIS-Paket
• RIOT OS-Paket

? Beispiele

Sehen Sie sich einige Beispiele für die Erstellung von Widgets, die Verwendung von Layouts und die Anwendung von Stilen an. Sie finden C- und MicroPython-Code sowie Links zum Ausprobieren oder Bearbeiten der Beispiele in einem Online-MicroPython-Editor.

Weitere Beispiele finden Sie im Beispielordner.

Hallo Weltlabel

C-Code

 /*Change the active screen's background color*/
lv_obj_set_style_bg_color ( lv_screen_active (), lv_color_hex ( 0x003a57 ), LV_PART_MAIN );

/*Create a white label, set its text and align it to the center*/
lv_obj_t * label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( label , "Hello world" );
lv_obj_set_style_text_color ( label , lv_color_hex ( 0xffffff ), LV_PART_MAIN );
lv_obj_align ( label , LV_ALIGN_CENTER , 0 , 0 );

MicroPython-Code | Online-Simulator

 # Change the active screen's background color
scr = lv . screen_active ()
scr . set_style_bg_color ( lv . color_hex ( 0x003a57 ), lv . PART . MAIN )

# Create a white label, set its text and align it to the center
label = lv . label ( lv . screen_active ())
label . set_text ( "Hello world" )
label . set_style_text_color ( lv . color_hex ( 0xffffff ), lv . PART . MAIN )
label . align ( lv . ALIGN . CENTER , 0 , 0 )

Schaltfläche mit Klickereignis

C-Code

 lv_obj_t * button = lv_button_create ( lv_screen_active ());                   /*Add a button to the current screen*/
lv_obj_center ( button );                                             /*Set its position*/
lv_obj_set_size ( button , 100 , 50 );                                  /*Set its size*/
lv_obj_add_event_cb ( button , button_event_cb , LV_EVENT_CLICKED , NULL ); /*Assign a callback to the button*/

lv_obj_t * label = lv_label_create ( button );                        /*Add a label to the button*/
lv_label_set_text ( label , "Button" );                             /*Set the labels text*/
lv_obj_center ( label );                                           /*Align the label to the center*/
...

void button_event_cb ( lv_event_t * e )
{
  printf ( "Clickedn" );
}

MicroPython-Code | Online-Simulator

 def button_event_cb ( e ):
  print ( "Clicked" )

# Create a Button and a Label
button = lv . button ( lv . screen_active ())
button . center ()
button . set_size ( 100 , 50 )
button . add_event_cb ( button_event_cb , lv . EVENT . CLICKED , None )

label = lv . label ( button )
label . set_text ( "Button" )
label . center ()

Kontrollkästchen mit Layout

C-Code

 lv_obj_set_flex_flow ( lv_screen_active (), LV_FLEX_FLOW_COLUMN );
lv_obj_set_flex_align ( lv_screen_active (), LV_FLEX_ALIGN_CENTER , LV_FLEX_ALIGN_START , LV_FLEX_ALIGN_CENTER );

lv_obj_t * cb ;
cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Apple" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Banana" );
lv_obj_add_state ( cb , LV_STATE_CHECKED );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_checkbox_set_text ( cb , "Lemon" );
lv_obj_add_state ( cb , LV_STATE_DISABLED );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

cb = lv_checkbox_create ( lv_screen_active ());
lv_obj_add_state ( cb , LV_STATE_CHECKED | LV_STATE_DISABLED );
lv_checkbox_set_text ( cb , "Melonnand a new line" );
lv_obj_add_event_cb ( cb , event_handler , LV_EVENT_ALL , NULL );

MicroPython-Code | Online-Simulator

 def event_handler ( e ):
    code = e . get_code ()
    obj = e . get_target_obj ()
    if code == lv . EVENT . VALUE_CHANGED :
        txt = obj . get_text ()
        if obj . get_state () & lv . STATE . CHECKED :
            state = "Checked"
        else :
            state = "Unchecked"
        print ( txt + ":" + state )


lv . screen_active (). set_flex_flow ( lv . FLEX_FLOW . COLUMN )
lv . screen_active (). set_flex_align ( lv . FLEX_ALIGN . CENTER , lv . FLEX_ALIGN . START , lv . FLEX_ALIGN . CENTER )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Apple" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Banana" )
cb . add_state ( lv . STATE . CHECKED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . set_text ( "Lemon" )
cb . add_state ( lv . STATE . DISABLED )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

cb = lv . checkbox ( lv . screen_active ())
cb . add_state ( lv . STATE . CHECKED | lv . STATE . DISABLED )
cb . set_text ( "Melon" )
cb . add_event_cb ( event_handler , lv . EVENT . ALL , None )

Einen Slider gestalten

C-Code

 lv_obj_t * slider = lv_slider_create ( lv_screen_active ());
lv_slider_set_value ( slider , 70 , LV_ANIM_OFF );
lv_obj_set_size ( slider , 300 , 20 );
lv_obj_center ( slider );

/*Add local styles to MAIN part (background rectangle)*/
lv_obj_set_style_bg_color ( slider , lv_color_hex ( 0x0F1215 ), LV_PART_MAIN );
lv_obj_set_style_bg_opa ( slider , 255 , LV_PART_MAIN );
lv_obj_set_style_border_color ( slider , lv_color_hex ( 0x333943 ), LV_PART_MAIN );
lv_obj_set_style_border_width ( slider , 5 , LV_PART_MAIN );
lv_obj_set_style_pad_all ( slider , 5 , LV_PART_MAIN );

/*Create a reusable style sheet for the INDICATOR part*/
static lv_style_t style_indicator ;
lv_style_init ( & style_indicator );
lv_style_set_bg_color ( & style_indicator , lv_color_hex ( 0x37B9F5 ));
lv_style_set_bg_grad_color ( & style_indicator , lv_color_hex ( 0x1464F0 ));
lv_style_set_bg_grad_dir ( & style_indicator , LV_GRAD_DIR_HOR );
lv_style_set_shadow_color ( & style_indicator , lv_color_hex ( 0x37B9F5 ));
lv_style_set_shadow_width ( & style_indicator , 15 );
lv_style_set_shadow_spread ( & style_indicator , 5 );
4
/*Add the style sheet to the slider's INDICATOR part*/
lv_obj_add_style ( slider , & style_indicator , LV_PART_INDICATOR );

/*Add the same style to the KNOB part too and locally overwrite some properties*/
lv_obj_add_style ( slider , & style_indicator , LV_PART_KNOB );

lv_obj_set_style_outline_color ( slider , lv_color_hex ( 0x0096FF ), LV_PART_KNOB );
lv_obj_set_style_outline_width ( slider , 3 , LV_PART_KNOB );
lv_obj_set_style_outline_pad ( slider , -5 , LV_PART_KNOB );
lv_obj_set_style_shadow_spread ( slider , 2 , LV_PART_KNOB );

MicroPython-Code | Online-Simulator

 # Create a slider and add the style
slider = lv . slider ( lv . screen_active ())
slider . set_value ( 70 , lv . ANIM . OFF )
slider . set_size ( 300 , 20 )
slider . center ()

# Add local styles to MAIN part (background rectangle)
slider . set_style_bg_color ( lv . color_hex ( 0x0F1215 ), lv . PART . MAIN )
slider . set_style_bg_opa ( 255 , lv . PART . MAIN )
slider . set_style_border_color ( lv . color_hex ( 0x333943 ), lv . PART . MAIN )
slider . set_style_border_width ( 5 , lv . PART . MAIN )
slider . set_style_pad_all ( 5 , lv . PART . MAIN )

# Create a reusable style sheet for the INDICATOR part
style_indicator = lv . style_t ()
style_indicator . init ()
style_indicator . set_bg_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_bg_grad_color ( lv . color_hex ( 0x1464F0 ))
style_indicator . set_bg_grad_dir ( lv . GRAD_DIR . HOR )
style_indicator . set_shadow_color ( lv . color_hex ( 0x37B9F5 ))
style_indicator . set_shadow_width ( 15 )
style_indicator . set_shadow_spread ( 5 )

# Add the style sheet to the slider's INDICATOR part
slider . add_style ( style_indicator , lv . PART . INDICATOR )
slider . add_style ( style_indicator , lv . PART . KNOB )

# Add the same style to the KNOB part too and locally overwrite some properties
slider . set_style_outline_color ( lv . color_hex ( 0x0096FF ), lv . PART . KNOB )
slider . set_style_outline_width ( 3 , lv . PART . KNOB )
slider . set_style_outline_pad ( - 5 , lv . PART . KNOB )
slider . set_style_shadow_spread ( 2 , lv . PART . KNOB )

Englische, hebräische (gemischte LTR-RTL) und chinesische Texte

C-Code

 lv_obj_t * ltr_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( ltr_label , "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." );
lv_obj_set_style_text_font ( ltr_label , & lv_font_montserrat_16 , 0 );
lv_obj_set_width ( ltr_label , 310 );
lv_obj_align ( ltr_label , LV_ALIGN_TOP_LEFT , 5 , 5 );

lv_obj_t * rtl_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( rtl_label , "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)." );
lv_obj_set_style_base_dir ( rtl_label , LV_BASE_DIR_RTL , 0 );
lv_obj_set_style_text_font ( rtl_label , & lv_font_dejavu_16_persian_hebrew , 0 );
lv_obj_set_width ( rtl_label , 310 );
lv_obj_align ( rtl_label , LV_ALIGN_LEFT_MID , 5 , 0 );

lv_obj_t * cz_label = lv_label_create ( lv_screen_active ());
lv_label_set_text ( cz_label ,
                  "嵌入式系统（Embedded System），n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" );
lv_obj_set_style_text_font ( cz_label , & lv_font_simsun_16_cjk , 0 );
lv_obj_set_width ( cz_label , 310 );
lv_obj_align ( cz_label , LV_ALIGN_BOTTOM_LEFT , 5 , -5 );

MicroPython-Code | Online-Simulator

 ltr_label = lv . label ( lv . screen_active ())
ltr_label . set_text ( "In modern terminology, a microcontroller is similar to a system on a chip (SoC)." )
ltr_label . set_style_text_font ( lv . font_montserrat_16 , 0 );

ltr_label . set_width ( 310 )
ltr_label . align ( lv . ALIGN . TOP_LEFT , 5 , 5 )

rtl_label = lv . label ( lv . screen_active ())
rtl_label . set_text ( "מעבד, או בשמו המלא יחידת עיבוד מרכזית (באנגלית: CPU - Central Processing Unit)." )
rtl_label . set_style_base_dir ( lv . BASE_DIR . RTL , 0 )
rtl_label . set_style_text_font ( lv . font_dejavu_16_persian_hebrew , 0 )
rtl_label . set_width ( 310 )
rtl_label . align ( lv . ALIGN . LEFT_MID , 5 , 0 )

font_simsun_16_cjk = lv . font_load ( "S:../../assets/font/lv_font_simsun_16_cjk.fnt" )

cz_label = lv . label ( lv . screen_active ())
cz_label . set_style_text_font ( font_simsun_16_cjk , 0 )
cz_label . set_text ( "嵌入式系统（Embedded System）， n是一种嵌入机械或电气系统内部、具有专一功能和实时计算性能的计算机系统。" )
cz_label . set_width ( 310 )
cz_label . align ( lv . ALIGN . BOTTOM_LEFT , 5 , - 5 )

▶️ Fangen Sie an

Diese Liste führt Sie Schritt für Schritt durch den Einstieg in LVGL.

Machen Sie sich mit LVGL vertraut

1. Schauen Sie sich die Online-Demos an, um LVGL in Aktion zu sehen (3 Minuten).
2. Lesen Sie die Einführungsseite der Dokumentation (5 Minuten).
3. Machen Sie sich auf der Schnellübersichtsseite (15 Minuten) mit den Grundlagen vertraut.

Beginnen Sie mit der Verwendung von LVGL

4. Richten Sie einen Simulator ein (10 Minuten).
5. Probieren Sie einige Beispiele aus.
6. Portieren Sie LVGL auf einer Platine. Sehen Sie sich den Portierungsleitfaden an oder schauen Sie sich die gebrauchsfertigen Projekte an.

Werden Sie ein Profi

7. Lesen Sie die Seite „Hauptkomponenten“, um ein besseres Verständnis der Bibliothek zu erhalten (2–3 Stunden).
8. Sehen Sie sich die Dokumentation der Widgets an, um deren Funktionen und Verwendung zu erfahren

Holen Sie sich Hilfe und helfen Sie anderen

9. Wenn Sie Fragen haben, gehen Sie zum Forum
10. Lesen Sie den Beitragsleitfaden, um zu erfahren, wie Sie zur Verbesserung von LVGL beitragen können (15 Minuten)

? Dienstleistungen

LVGL LLC wurde gegründet, um einen soliden Hintergrund für die LVGL-Bibliothek bereitzustellen und verschiedene Arten von Diensten anzubieten, die Sie bei der UI-Entwicklung unterstützen. Mit mehr als 15 Jahren Erfahrung in der Benutzeroberflächen- und Grafikbranche können wir Ihnen helfen, Ihre Benutzeroberfläche auf die nächste Stufe zu bringen.

• Grafikdesign Unsere hauseigenen Grafikdesigner sind Experten für die Erstellung schöner moderner Designs, die zu Ihrem Produkt und den Ressourcen Ihrer Hardware passen.
• UI-Implementierung Wir können Ihr UI auch basierend auf dem von Ihnen oder uns erstellten Design implementieren. Sie können sicher sein, dass wir das Beste aus Ihrer Hardware und Ihrem LVGL herausholen. Wenn in LVGL eine Funktion oder ein Widget fehlt, machen Sie sich keine Sorgen, wir implementieren es für Sie.
• Beratung und Support Wir können Sie auch mit Beratung unterstützen, um kostspielige und zeitaufwändige Fehler bei der UI-Entwicklung zu vermeiden.
• Board-Zertifizierung Für Unternehmen, die Entwicklungsboards oder produktionsfertige Kits anbieten, führen wir eine Board-Zertifizierung durch, die zeigt, wie das Board LVGL ausführen kann.

Schauen Sie sich unsere Demos als Referenz an. Weitere Informationen finden Sie auf der Seite „Services“.

Kontaktieren Sie uns und teilen Sie uns mit, wie wir Ihnen helfen können.

? Mitwirken

LVGL ist ein offenes Projekt und Beiträge sind sehr willkommen. Es gibt viele Möglichkeiten, einen Beitrag zu leisten, angefangen beim einfachen Sprechen über Ihr Projekt über das Schreiben von Beispielen, das Verbessern der Dokumentation, das Beheben von Fehlern bis hin zum Hosten Ihres eigenen Projekts unter der LVGL-Organisation.

Eine detaillierte Beschreibung der Beitragsmöglichkeiten finden Sie im Abschnitt „Mitwirken“ der Dokumentation.

Mehr als 300 Menschen haben bereits ihren Fingerabdruck bei LVGL hinterlassen. Seien Sie einer von ihnen! Wir sehen uns hier! ?

... und viele andere.