Page d'accueil>Lié à la programmation>Code source C#
Télécharger
lvgl

Anglais | Chine | Português du Brésil | 日本語


Bibliothèque graphique légère et polyvalente



Site Web | Documents | Forum | Démos | Services


? Aperçu

Mature et connu
LVGL est la bibliothèque graphique intégrée gratuite et open source la plus populaire permettant de créer de superbes interfaces utilisateur pour tout type de MCU, MPU et d'affichage. Il est pris en charge par des fournisseurs et des projets leaders du secteur tels qu'Arm, STM32, NXP, Espressif, Nuvoton, Arduino, RT-Thread, Zephyr, NuttX, Adafruit et bien d'autres.

Riche en fonctionnalités
Il possède toutes les fonctionnalités nécessaires pour créer des interfaces graphiques modernes et esthétiques : plus de 30 widgets intégrés, un système de style puissant, des gestionnaires de mise en page inspirés du Web et un système de typographie prenant en charge de nombreuses langues. Pour intégrer LVGL dans votre plate-forme, tout ce dont vous avez besoin est d'au moins 32 Ko de RAM et 128 Ko de Flash, un compilateur C, un frame buffer et au moins un tampon de taille d'écran 1/10 pour le rendu.

Services
Notre équipe est prête à vous aider avec la conception graphique, la mise en œuvre de l’interface utilisateur et les services de conseil. Contactez-nous si vous avez besoin d'aide lors du développement de votre prochain projet GUI.

Caractéristiques

Gratuit et portable

  • Une bibliothèque C entièrement portable (compatible C++) sans dépendances externes.
  • Peut être compilé sur n’importe quel MCU ou MPU, avec n’importe quel système d’exploitation (RT).
  • Prend en charge les écrans monochromes, ePaper, OLED ou TFT, ou même les moniteurs. Affichages
  • Distribué sous licence MIT, vous pouvez donc facilement l'utiliser également dans des projets commerciaux.
  • Ne nécessite que 32 Ko de RAM et 128 Ko de Flash, un tampon d'image et au moins un tampon de taille d'écran 1/10 pour le rendu.
  • Le système d'exploitation, la mémoire externe et le GPU sont pris en charge mais ne sont pas obligatoires.

Widgets, styles, mises en page et plus encore

  • Plus de 30 widgets intégrés : bouton, étiquette, curseur, graphique, clavier, compteur, arc, tableau et bien d'autres.
  • Système de style flexible avec environ 100 propriétés de style pour personnaliser n'importe quelle partie des widgets dans n'importe quel état.
  • Moteurs de mise en page de type Flexbox et Grid pour dimensionner et positionner automatiquement les widgets de manière réactive.
  • Les textes sont rendus avec le codage UTF-8 prenant en charge les systèmes d'écriture CJK, thaïlandais, hindi, arabe et persan.
  • Retour à la ligne, crénage, défilement de texte, rendu sous-pixel, saisie chinoise Pinyin-IME, Emojis dans les textes.
  • Moteur de rendu prenant en charge les animations, l'anticrénelage, l'opacité, le défilement fluide, les ombres, la transformation d'image, etc.
  • Prend en charge la souris, le pavé tactile, le clavier, les boutons externes et les périphériques d'entrée d'encodeur.
  • Prise en charge de plusieurs affichages.

Liaison et prise en charge de la construction

  • MicroPython Binding expose l'API LVGL
  • PikaScript Binding python sur MCU plus léger et plus simple.
  • Aucun système de construction personnalisé n'est utilisé. Vous pouvez construire LVGL en même temps que vous construisez les autres fichiers de votre projet.
  • La prise en charge de Make et CMake est incluse dès la sortie de la boîte.
  • Développez sur PC et utilisez le même code d’interface utilisateur sur le matériel embarqué.
  • Convertissez le code C UI en fichier HTML avec notre port Emscripten.

Documents, outils et services

  • Documentation détaillée avec plus de 100 exemples simples
  • Des services tels que la conception, la mise en œuvre et le conseil de l'interface utilisateur pour rendre le développement de l'interface utilisateur plus simple et plus rapide.

❤️ Parrainer

Si LVGL vous a fait gagner beaucoup de temps et d'argent ou si vous avez simplement eu du plaisir à l'utiliser, pensez à soutenir son développement.

Comment dépensons-nous les dons ?
Notre objectif est de fournir une compensation financière aux personnes qui font le plus pour LVGL. Cela signifie que non seulement les responsables, mais aussi toute personne qui implémente une fonctionnalité intéressante devrait recevoir un paiement sur l'argent accumulé. Nous utilisons les dons pour couvrir nos coûts opérationnels comme les serveurs et les services associés.

Comment faire un don ?
Nous utilisons les sponsors GitHub où vous pouvez facilement envoyer des dons ponctuels ou récurrents. Vous pouvez également voir toutes nos dépenses de manière transparente.

Comment être rémunéré pour votre cotisation ?
Si quelqu'un implémente ou résout un problème marqué comme sponsorisé, il recevra un paiement pour ce travail. Nous estimons le temps nécessaire, la complexité et l'importance du problème et fixons un prix en conséquence. Pour intervenir, commentez simplement un problème sponsorisé en disant "Bonjour, j'aimerais m'en occuper. C'est ainsi que je prévois de le résoudre/de le mettre en œuvre...". Un travail est considéré comme prêt lorsqu'il est approuvé et fusionné par un responsable. Après cela, vous pouvez soumettre votre demande sur opencollective.com et vous recevrez le paiement dans quelques jours.

Organisations soutenant LVGL

Personnes soutenant LVGL

? Forfaits

LVGL est disponible en tant que :

  • Bibliothèque Arduino
  • Package PlateformeIO
  • Bibliothèque Zéphyr
  • Composant ESP-IDF(ESP32)
  • Composant NXP MCUXpresso
  • Bibliothèque NuttX
  • RTOS RT-Thread
  • Pack CMSIS
  • Package du système d'exploitation RIOT

? Exemples

Découvrez quelques exemples de création de widgets, d'utilisation de mises en page et d'application de styles. Vous trouverez du code C et MicroPython, ainsi que des liens pour essayer ou modifier les exemples dans un éditeur MicroPython en ligne.

Pour plus d'exemples, consultez le dossier Exemples.

Bonjour le monde

Exemple simple d'étiquette Hello World en LVGL

codeC 
 /*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 );
Code MicroPython | Simulateur en ligne 
 # 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 )

Bouton avec événement de clic

Bouton LVGL avec exemple d'étiquette

codeC 
 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" );
}
Code MicroPython | Simulateur en ligne 
 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 ()

Cases à cocher avec mise en page

Cases à cocher avec mise en page en LVGL

codeC 
 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 );
Code MicroPython | Simulateur en ligne 
 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 )

Styliser un curseur

Styliser un slider avec LVGL

codeC 
 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 );
Code MicroPython | Simulateur en ligne 
 # 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 )

Textes anglais, hébreu (mixte LTR-RTL) et chinois

Textes anglais, hébreu et chinois avec LVGL

codeC 
 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 );
Code MicroPython | Simulateur en ligne 
 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 )

▶️ Commencer

Cette liste vous guidera pour démarrer avec LVGL étape par étape.

Familiarisez-vous avec LVGL

  1. Consultez les démos en ligne pour voir LVGL en action (3 minutes).
  2. Lisez la page d'introduction de la documentation (5 minutes).
  3. Familiarisez-vous avec les bases sur la page Aperçu rapide (15 minutes).

Commencez à utiliser LVGL

  1. Configurer un simulateur (10 minutes).
  2. Essayez quelques exemples.
  3. Portez LVGL sur une carte. Consultez le guide de portage ou consultez les projets prêts à l'emploi.

Devenez un pro

  1. Lisez la page des composants principaux pour mieux comprendre la bibliothèque (2-3 heures)
  2. Consultez la documentation des Widgets pour voir leurs fonctionnalités et leur utilisation

Obtenez de l'aide et aidez les autres

  1. Si vous avez des questions, allez sur le forum
  2. Lisez le guide de contribution pour voir comment vous pouvez contribuer à améliorer LVGL (15 minutes)

? Services

LVGL LLC a été créée pour fournir une solide expérience pour la bibliothèque LVGL et offrir plusieurs types de services pour vous aider dans le développement de l'interface utilisateur. Avec plus de 15 ans d'expérience dans l'industrie des interfaces utilisateur et des graphiques, nous pouvons vous aider à faire passer votre interface utilisateur au niveau supérieur.

  • Conception graphique Nos graphistes internes sont experts dans la création de superbes designs modernes qui s'adaptent à votre produit et aux ressources de votre matériel.
  • Implémentation de l'interface utilisateur Nous pouvons également implémenter votre interface utilisateur en fonction du design que vous ou nous avons créé. Vous pouvez être sûr que nous tirerons le meilleur parti de votre matériel et de LVGL. Si une fonctionnalité ou un widget manque dans LVGL, ne vous inquiétez pas, nous l'implémenterons pour vous.
  • Conseil et assistance Nous pouvons également vous aider en matière de conseil pour éviter des erreurs coûteuses et chronophages lors du développement de l'interface utilisateur.
  • Certification de carte Pour les entreprises qui proposent des cartes de développement ou des kits prêts à la production, nous effectuons une certification de carte qui montre comment la carte peut exécuter LVGL.

Consultez nos démos comme référence. Pour plus d'informations, consultez la page Services.

Contactez-nous et dites-nous comment nous pouvons vous aider.

? Contribuer

LVGL est un projet ouvert et toute contribution est la bienvenue. Il existe de nombreuses façons de contribuer, depuis le simple fait de parler de votre projet, en écrivant des exemples, en améliorant la documentation, en corrigeant des bugs ou même en hébergeant votre propre projet sous l'organisation LVGL.

Pour une description détaillée des opportunités de contribution, visitez la section Contribuer de la documentation.

Plus de 300 personnes ont déjà laissé leur empreinte digitale à LVGL. Soyez l'un d'eux ! Rendez-vous ici! ?

... et bien d'autres.

Développer
Informations supplémentaires
Applications connexes
Recommandé pour vous
Actualités connexes Tout