Table des matières
Introduction
Lors de la construction d’interfaces graphiques intégrées, la cohérence du style et l’architecture propre sont importantes.
LVGL fournit un moyen puissant de contrôler l’ensemble de l’aspect et de la convivialité de votre application en utilisant des styles globaux et un système de thème personnalisé.
Cet article explique comment.. :
- définir des styles globaux,
- les rattacher à un thème personnalisé,
- mettre à jour l’ensemble de l’interface en un seul appel de fonction,
- et pourquoi cette approche améliore le flux de travail des ingénieurs, en particulier dans les projets d’interface graphique de grande envergure ou en pleine croissance.
Et tout cela en utilisant notre écran standard Riverdi 10″.
Comment cela fonctionne-t-il ?
LVGL vous permet de :
- Définir les styles (lv_style_t),
- Créez un thème personnalisé,
- Attribuez un rappel qui applique des styles en fonction du type d’objet,
- Dites à LVGL de reconstruire le thème et de rafraîchir tous les objets.
Il s’agit d’une architecture adaptée à l’ingénierie : un seul endroit change tout.
Exemple de code - Thème global réutilisable
Vous trouverez ci-dessous l’exemple complet de démonstration :
- des styles globaux pour les boutons et les curseurs,
- changement de palette dynamique,
- le remodelage automatique de tous les objets.
Variables de style globales
static lv_style_t style_common_main ;
static lv_style_t style_slider_main ;
static lv_style_t style_slider_indicator ;
static lv_style_t style_slider_knob ;
static lv_palette_t current_palette = LV_PALETTE_ORANGE ;
Rappel d’application du thème
Applique automatiquement des styles aux widgets par classe. Peut être facilement étendu à d’autres types de widgets.
static void theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
if(lv_obj_check_type(obj, &lv_button_class)) {
lv_obj_add_style(obj, &style_common_main, 0) ;
}
if(lv_obj_check_type(obj, &lv_slider_class)) {
lv_obj_add_style(obj, &style_slider_main, LV_PART_MAIN) ;
lv_obj_add_style(obj, &style_slider_indicator, LV_PART_INDICATOR) ;
lv_obj_add_style(obj, &style_slider_knob, LV_PART_KNOB) ;
}
}
Thème de la reconstruction (astuce d’ingénierie de base)
Cela permet de reconstruire les styles, de les attacher à un thème et de forcer un rafraîchissement global.
static void rebuild_theme(void)
{
lv_style_reset(&style_common_main) ;
lv_style_reset(&style_slider_main) ;
lv_style_reset(&style_slider_indicator) ;
lv_style_reset(&style_slider_knob) ;
/* Style de bouton */
lv_style_init(&style_common_main) ;
lv_style_set_bg_color(&style_common_main, lv_palette_main(current_palette)) ;
lv_style_set_border_color(&style_common_main, lv_palette_darken(LV_PALETTE_BLUE, 3)) ;
lv_style_set_border_width(&style_common_main, 3) ;
lv_style_set_radius(&style_common_main, 6) ;
/* Styles de curseur */
lv_style_init(&style_slider_main) ;
lv_style_set_bg_color(&style_slider_main, lv_palette_lighten(current_palette, 2)) ;
lv_style_set_bg_opa(&style_slider_main, LV_OPA_COVER) ;
lv_style_init(&style_slider_indicator) ;
lv_style_set_bg_color(&style_slider_indicator, lv_palette_darken(current_palette, 2)) ;
lv_style_init(&style_slider_knob) ;
lv_style_set_bg_color(&style_slider_knob, lv_color_white()) ;
/* Attacher un thème */
lv_theme_t * th_act = lv_display_get_theme(NULL) ;
static lv_theme_t th_new ;
th_new = *th_act ;
lv_theme_set_parent(&th_new, th_act) ;
lv_theme_set_apply_cb(&th_new, theme_apply_cb) ;
lv_display_set_theme(NULL, &th_new) ;
lv_obj_report_style_change(NULL) ;
}
Changer la couleur du thème
Ici, nous avons la fonction qui change la couleur du thème actuellement utilisé lorsque vous appuyez sur le bouton. Il s’agit simplement de présenter la facilité avec laquelle on peut le faire. Pour plus de couleurs, je vous recommande d’utiliser un tableau.
static void color_change_event_cb(lv_event_t * e)
{
if(current_palette == LV_PALETTE_ORANGE)
current_palette = LV_PALETTE_GREEN ;
else if(current_palette == LV_PALETTE_GREEN)
current_palette = LV_PALETTE_BLUE ;
else
current_palette = LV_PALETTE_ORANGE ;
rebuild_theme() ;
}
Démonstration finale
Ici, nous créons le bouton par défaut en haut du centre d’affichage. Nous appelons ensuite la fonction rebuild_theme() pour modifier le style principal des widgets que nous utilisons. Nous pouvons maintenant créer un autre bouton en dessous du premier et un curseur en dessous. Vous devriez pouvoir voir les différents styles entre les boutons. De plus, après avoir appuyé sur le bouton, nous changeons la couleur du style des nouveaux widgets, alors que le style par défaut reste inchangé.
void lv_example_style_change(void)
{
lv_obj_t * btn_default = lv_button_create(lv_screen_active()) ;
lv_obj_align(btn_default, LV_ALIGN_CENTER, 0, -100) ;
lv_label_set_text(lv_label_create(btn_default), « Bouton par défaut ») ;
rebuild_theme() ;
lv_obj_t * btn_themed = lv_button_create(lv_screen_active()) ;
lv_obj_align(btn_themed, LV_ALIGN_CENTER, 0, 100) ;
lv_obj_add_event_cb(btn_themed, color_change_event_cb, LV_EVENT_CLICKED, NULL) ;
lv_label_set_text(lv_label_create(btn_themed), « Change Theme Color ») ;
lv_obj_t * slider = lv_slider_create(lv_screen_active()) ;
lv_obj_align(slider, LV_ALIGN_CENTER, 0, 200) ;
lv_obj_set_width(slider, 250) ;
lv_slider_set_value(slider, 40, LV_ANIM_OFF) ;
}
Pourquoi les styles globaux sont-ils utiles ?
La plupart des ingénieurs découvrent rapidement que le style de l’interface graphique devient désordonné lorsque chaque bouton, curseur ou widget possède son propre code de style.
Les thèmes globaux permettent de résoudre plusieurs problèmes d’ingénierie :
- Contrôle visuel centralisé
Toute la logique de stylisation est regroupée en un seul endroit. Vous n’avez pas besoin de visiter 10 fichiers pour modifier un bouton ou un curseur.
- Modifications plus rapides de l’interface utilisateur
Le changement de couleur de la marque est instantané.
Le service marketing demande « du vert au lieu de l’orange » ?
Changez une variable → l’ensemble de l’interface graphique est mis à jour.
- Architecture évolutive pour les grands projets
Lorsque l’interface utilisateur se développe au-delà de quelques écrans, le style local devient ingérable.
Garantie de thèmes globaux :
- des marges cohérentes,
- des rayons cohérents,
- utilisation cohérente de la palette,
- un comportement cohérent des widgets.
- Pas de style copier-coller
Sans thèmes, les ingénieurs dupliquent le code de style sur tous les écrans.
Les styles globaux éliminent les doublons et réduisent la taille du code.
- Le thème de l’exécution change comme :
- Mode sombre/clair,
- Thèmes sélectionnables par l’utilisateur,
- Modes de sécurité (par exemple, l’interface utilisateur « Avertissement » utilise un thème rouge),
- Marquage OEM (un micrologiciel, plusieurs habillages visuels).
Pour en savoir plus, visitez le site web de LVGL.
DÉCOUVREZ NOTRE
Livre blanc
Réalisez l’interaction parfaite entre l’utilisateur et l’écran avec le bon circuit intégré pour capteur tactile. Vous avez déjà été confronté à des problèmes d’événements tactiles fantômes ou de certification ? Boostez votre R&D comme un pro grâce à notre livre blanc !
Consultez notre catalogue de produits et voyez comment vous pouvez économiser sur la qualité, et non sur la qualité.
