[LVGL] "Add Style" and "Remove Style" in LVGL action

[fietser28]

Is your feature request related to a problem? Please describe.
No, just a limitation.

Describe the solution you'd like
Add the option ‘apply theme’ to the LVGL widget. This needs 2 selections the widget the theme should be applied to and the theme that should be applied.
Only the set properties in the style (and parents of the style) should be applied, allowing for changing specific properties.

A common example is to allow for more colors depending on some kind of status/value. E.g. green/yellow/red

Describe alternatives you've considered
Currently the selection of themes is limited to states of the widget. In some cases you want to have more possibilities or is doesn’t align with the state (e.g. disabled).

Other option is to have multiple instances of the widget with different styles and show only the one you want. This is very cumbersome and not efficient.

Additional context
I’m not sure how to handle widgets inside user widgets:

• Apply to all instances or select a specific instance?
  Or maybe allow the user to choose by presenting individual instances and the user widget in the dropdownlist.
• if called from within a user widget only widgets in this user widget (and children) should be selectable and when executed it will only apply to this instance.

[mvladic]

I understand there is a need to dynamically change the style properties of the widget but I don't understand your proposition. I'm confused with the usage of term theme since we still don't support themes in LVGL projects.

[fietser28]

I should have used the term 'style' and not 'theme'. My bad.

[mverch67]

LVGL v9 supports a dynamic function to add a style to a widget which would allow dynamic changing of colors and styles in a way that changing a single style may change the look of all derived widgets that are using this style.
This way one could implement a kind of "theme" e.g. light and dark that could be applied at runtime, which is not possible right now.

// lvgl style definition for a user defined style
static lv_style_t style_btn;
lv_style_init(&style_btn);
lv_style_set_bg_color(&style_btn, lv_color_hex(0x115588));
lv_style_set_bg_opa(&style_btn, LV_OPA_50);
lv_style_set_border_width(&style_btn, 2);
lv_style_set_border_color(&style_btn, lv_color_black());

// add style to widget
lv_obj_add_style(btn, &style_btn, LV_PART_MAIN | LV_STATE_DEFAULT);

Basically what we need is

1. generate a tree of styles accessible via a global object (using lv_style_set_xxx instead of lv_obj_set_style_xxx)
2. add the style to the widget (lv_obj_add_style) instead of calling the generated apply functions for local style.
   This allows to change styles and layout at runtime. Currently, widget styles are kinda hard-coded without an easy way to change at runtime.

[mvladic]

1. generate a tree of styles accessible via a global object (using lv_style_set_xxx instead of lv_obj_set_style_xxx)

We already have this:

2. add the style to the widget (lv_obj_add_style) instead of calling the generated apply functions for local style.
   This allows to change styles and layout at runtime. Currently, widget styles are kinda hard-coded without an easy way to change at runtime.

I agree, so the plan is to move from local widget styles to style objects and add a new action types (Add Style and Remove Style) to the LVGL action:

[mvladic]

Implemented.

I added "Add Style" and "Remove Style" in LVGL action as explained in my previous comment.