Link copiato negli appunti!

LVGL – Usare gli stili globali

Indice dei contenuti

    Introduzione

    Quando si realizzano delle GUI integrate, la coerenza dello stile e l’architettura pulita sono importanti.
    LVGL offre un modo potente per controllare l’intero look & feel della tua applicazione utilizzando stili globali e un sistema di temi personalizzati.
    Questo articolo spiega come fare:

    • definire gli stili globali,
    • collegarli a un tema personalizzato,
    • aggiornare l’intera interfaccia con un’unica chiamata di funzione,
    • e perché questo approccio migliora il flusso di lavoro dell’ingegneria, soprattutto nei progetti GUI di grandi dimensioni o in crescita.

    Il tutto utilizzando il nostro display standard Riverdi da 10″.

    Come funziona

    LVGL ti permette di:

    1. Definire gli stili (lv_style_t),
    2. Crea un tema personalizzato,
    3. Assegna un callback che applica gli stili in base al tipo di oggetto,
    4. Dì a LVGL di ricostruire il tema e di aggiornare tutti gli oggetti.

    Si tratta di un’architettura di tipo ingegneristico: un posto cambia tutto.

    Esempio di codice - Tema globale riutilizzabile

    Di seguito è riportato l’esempio completo di dimostrazione:

    • stili globali per pulsanti e cursori,
    • commutazione dinamica della tavolozza,
    • restyling automatico di tutti gli oggetti.

    Variabili di stile globali

    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;

    Richiamo dell’applicazione del tema

    Applica automaticamente gli stili ai widget in base alla classe. Può essere facilmente esteso ad altri tipi di widget.

    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);
    }
    }

    Ricostruisci il tema (trucco ingegneristico di base)

    Questo ricostruisce gli stili, li collega a un tema e forza un aggiornamento globale.

    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);

    /* Stile del pulsante */
    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)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);

    /* Stili del cursore */
    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());

    /* Allega il tema */
    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);
    }

    Cambia il colore del tema

    Qui abbiamo la funzione che cambia il colore del tema attualmente utilizzato quando si preme il pulsante. È solo per presentare la facilità di esecuzione. Per un maggior numero di colori, ti consiglio di utilizzare un array.

    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();
    }

    Dimostrazione finale

    Qui creiamo il pulsante predefinito in alto dal centro di visualizzazione. Poi chiamiamo la funzione rebuild_theme() per cambiare lo stile principale dei widget che utilizziamo. Ora possiamo creare un altro pulsante sotto il primo e anche un cursore sotto di esso. Dovresti essere in grado di vedere i diversi stili tra i pulsanti. Inoltre, dopo aver premuto il pulsante, cambiamo il colore dello stile dei nuovi widget, mentre quello predefinito rimane invariato.

    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), “Pulsante predefinito”);

    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), “Cambia colore del tema”);

    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);
    }

    Perché gli stili globali sono utili

    La maggior parte degli ingegneri scopre rapidamente che lo stile della GUI diventa disordinato quando ogni pulsante, cursore o widget ha il proprio codice di stile.

    I temi globali risolvono diversi problemi di ingegneria:

    1. Controllo visivo centralizzato

    Tutta la logica dello stile è in un unico posto. Non dovrai visitare 10 file per modificare un pulsante o un cursore.

    1. Modifiche dell’interfaccia utente più rapide

    Il cambio dei colori del marchio è immediato.
    Il marketing chiede “verde invece di arancione”?
    Cambia una variabile → l’intera GUI si aggiorna.

    1. Architettura scalabile per grandi progetti

    Quando l’interfaccia utente cresce oltre le poche schermate, lo stile locale diventa ingestibile.
    Garanzia dei temi globali:

    • margini consistenti,
    • raggi coerenti,
    • utilizzo coerente della tavolozza,
    • comportamento coerente del widget.

     

    1. Niente copia-incolla dello stile

    Senza temi, gli ingegneri duplicano il codice di stile nelle varie schermate.

    Gli stili globali eliminano le duplicazioni e riducono le dimensioni del codice.

    1. Il tema di runtime che cambia tipo:
      • Modalità scuro/luminoso,
      • Temi selezionabili dall’utente,
      • Modalità di sicurezza (ad esempio, l’interfaccia utente “Attenzione” utilizza il tema rosso),
      • Marchio OEM (un firmware, più skin visive).

     

    Se vuoi saperne di più, visita il sito web di LVGL.

    SCOPRI IL NOSTRO

    Carta bianca

    Ottieni un’interazione perfetta tra utente e display con il giusto IC per sensore tattile. Hai mai avuto problemi con eventi di tocco fantasma o con la certificazione? Potenzia la tua ricerca e sviluppo come un professionista con il nostro Whitepaper!

    Carta bianca

    Consulta il nostro catalogo prodotti e scopri come puoi risparmiare sulla qualità, non sulla qualità.

    Scopri subito

    Contattaci subito, risparmia con la qualità, non sulla qualità.

    Contattaci ora