Link in die Zwischenablage kopiert!

LVGL – Globale Stile verwenden

Inhaltsübersicht

    Einführung

    Bei der Entwicklung eingebetteter grafischer Benutzeroberflächen kommt es auf einen einheitlichen Stil und eine saubere Architektur an.
    LVGL bietet eine leistungsstarke Möglichkeit, das gesamte Erscheinungsbild Ihrer Anwendung mithilfe globaler Stile und eines benutzerdefinierten Themensystems zu steuern.
    Dieser Artikel erklärt, wie Sie

    • globale Stile definieren,
    • sie mit einem benutzerdefinierten Thema verbinden,
    • die gesamte Schnittstelle mit einem einzigen Funktionsaufruf aktualisieren,
    • und warum dieser Ansatz den technischen Workflow verbessert, insbesondere bei großen oder wachsenden GUI-Projekten.

    Und das alles mit unserem standardmäßigen Riverdi 10″-Display.

    Wie es funktioniert

    LVGL ermöglicht es Ihnen:

    1. Definieren Sie Stile (lv_style_t),
    2. Erstellen Sie ein benutzerdefiniertes Thema,
    3. Weisen Sie einen Callback zu, der Stile basierend auf dem Objekttyp anwendet,
    4. Weisen Sie LVGL an, das Thema neu zu erstellen und alle Objekte zu aktualisieren.

    Dies ist eine ingenieursfreundliche Architektur: ein Ort ändert alles.

    Codebeispiel - Wiederverwendbares globales Theme

    Nachfolgend finden Sie das vollständige Beispiel zur Demonstration:

    • globale Stile für Schaltflächen und Schieberegler,
    • dynamischer Palettenwechsel,
    • automatische Neugestaltung aller Objekte.

    Globale Stilvariablen

    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;

    Theme anwenden Rückruf

    Wendet automatisch Stile auf Widgets nach Klasse an. Kann leicht auf weitere Widget-Typen erweitert werden.

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

    Thema wiederherstellen (zentraler technischer Trick)

    Dadurch werden die Stile neu erstellt, mit einem Thema verknüpft und eine globale Aktualisierung erzwungen.

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

    /* Schaltflächenstil */
    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);

    /* Schieberegler-Stile */
    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());

    /* Thema anhängen */
    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);
    }

    Farbe des Themas wechseln

    Hier haben wir die Funktion, die die Farbe des aktuell verwendeten Themas ändert, wenn Sie die Taste drücken. Sie soll nur zeigen, wie einfach das geht. Für mehr Farben empfehle ich die Verwendung eines Arrays.

    static void color_change_event_cb(lv_event_t * e)
    {
    if(current_palette == LV_PALETTE_ORANGE)
    current_palette = LV_PALETTE_GREEN;
    sonst if(aktuelle_palette == LV_PALETTE_GREEN)
    aktuelle_palette = LV_PALETTE_BLUE;
    sonst
    aktuelle_palette = LV_PALETTE_ORANGE;

    rebuild_theme();
    }

    Letzte Demonstration

    Hier erstellen wir die Standardschaltfläche oben im Anzeigezentrum. Dann rufen wir die Funktion rebuild_theme() auf, um den Hauptstil der von uns verwendeten Widgets zu ändern. Jetzt können wir eine weitere Schaltfläche unter der ersten erstellen und auch einen Schieberegler darunter anlegen. Sie sollten die unterschiedlichen Stile zwischen den Schaltflächen sehen können. Außerdem ändern wir nach dem Drücken der Schaltfläche die Stilfarbe der neuen Widgets, während die Standardfarbe unverändert bleibt.

    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), „Default button“);

    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), „Theme Farbe ändern“);

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

    Warum globale Stile nützlich sind

    Die meisten Entwickler stellen schnell fest, dass das GUI-Styling unübersichtlich wird, wenn jede Schaltfläche, jeder Schieberegler oder jedes Widget seinen eigenen Style-Code hat.

    Globale Themen lösen verschiedene technische Probleme:

    1. Zentralisierte visuelle Kontrolle

    Die gesamte Logik für die Gestaltung befindet sich an einem Ort. Sie müssen nicht 10 Dateien aufrufen, um eine Schaltfläche oder einen Schieberegler zu ändern.

    1. Schnellere UI-Änderungen

    Der Wechsel der Markenfarben erfolgt sofort.
    Marketing fragt nach „grün statt orange“?
    Ändern Sie eine Variable → die gesamte GUI wird aktualisiert.

    1. Skalierbare Architektur für große Projekte

    Wenn die Benutzeroberfläche über ein paar Bildschirme hinauswächst, wird das lokale Styling unüberschaubar.
    Globale Themen garantieren:

    • konsistente Margen,
    • einheitliche Radien,
    • konsistente Verwendung von Paletten,
    • konsistentes Widget-Verhalten.

     

    1. Kein Copy-Paste-Styling

    Ohne Themes duplizieren die Entwickler den Stilcode auf allen Bildschirmen.

    Globale Stile vermeiden Doppelarbeit und reduzieren die Codegröße.

    1. Laufzeitthemenwechsel wie:
      • Dunkel-/Hell-Modus,
      • Vom Benutzer auswählbare Themen,
      • Sicherheitsmodi (z. B. verwendet die Benutzeroberfläche „Warnung“ ein rotes Thema),
      • OEM-Branding (eine Firmware, mehrere visuelle Skins).

     

    Wenn Sie mehr erfahren möchten, besuchen Sie die LVGL-Website.

    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!

    Whitepaper

    Schauen Sie sich unseren Produktkatalog an und sehen Sie, wie Sie durch Qualität und nicht an Qualität sparen können.

    Jetzt auschecken

    Kontaktieren Sie uns jetzt, sparen Sie mit Qualität, nicht an Qualität.

    Kontaktieren Sie uns jetzt