[lvgl] API functions for setting, changing and deleting styles of components

Give the decorated object decoration parameters to decorate

be based on LVGL Articles written in the manual ！

All official documents of styles and attributes are provided

LVGL Basically borrowing CSS The style of .

The style is a lv_style_t Variable , It can save the border width 、 Text color and other attributes . It is similar to CSS Medium class

LVGL A complete list of properties https://docs.lvgl.io/master/overview/style-props.html

LVGL Style setting introduction page https://docs.lvgl.io/master/overview/style.html

---

Catalog

Style usage needs to be initialized

Set the properties of the style

Attribute set function ：

Delete attribute interface function ：

Get the value of the property ：

Reset style

add to / Delete style

state (States)

part (Part)

Add the style

Delete style

Delete all styles

Delete a specific style

Report style changes

Gets the property value of the object

Local style

Style transition effect

Style theme

---

Style usage needs to be initialized

The style variable should be static 、 Global or dynamic allocation . Before using styles , Should be initialized , After initialization, attributes can be added or changed

static lv_style_t style_obj;
lv_style_init(&style_obj);

---

Set the properties of the style

Attribute set function ：

lv_style_set_<property_name>(&style, <value>);

// Set the background color 
lv_style_set_bg_color(&style, lv_color_hex(0x115588));

Delete attribute interface function ：

// Delete the background color setting 
lv_style_remove_prop(&style, LV_STYLE_BG_COLOR);

Get the value of the property ：

lv_style_value_t v;// Define a parameter to store 
lv_res_t res = lv_style_get_prop(&style, LV_STYLE_BG_COLOR, &v);// Read its background color 
if(res == LV_RES_OK) {	// Judge reading success 
	do_something(v.color);// For other purposes 
}

About lv_style_value_t ：

/**
 * A common type to handle all the property types in the same way.
 */
typedef union {
    int32_t num;         /**< Number integer number (opacity, enums, booleans or "normal" numbers)*/
    const void * ptr;    /**< Constant pointers  (font, cone text, etc)*/
    lv_color_t color;    /**< Colors*/
} lv_style_value_t;

• num： Integers 、 Boolean 、 Opacity attribute
• ptr： Pointer properties
• color： color property

Reset style

Release all its data 、

lv_style_reset(&style);

also const Methods to build styles , Not here , Or read the official manual .

---

add to / Delete style

state (States)

The third parameter of setting style

give an example ：

• LV_STATE_DEFAULT (0x0000) normal , Release status  
• LV_STATE_CHECKED (0x0001) Switch or check the status  
• LV_STATE_FOCUSED (0x0002) Focus through keyboard or encoder or touch pad / Mouse click  
• LV_STATE_FOCUS_KEY (0x0004) Focus by keyboard or encoder , But not through the touch pad / Mouse focus  
• LV_STATE_EDITED (0x0008) Edited by encoder  
• LV_STATE_HOVERED (0x0010) Mouse hovering （ Not now ） 
• LV_STATE_PRESSED (0x0020) Pressed  
• LV_STATE_SCROLLED (0x0040) Rolling  
• LV_STATE_DISABLED (0x0080) Disabled state  
• LV_STATE_USER_1 (0x1000) Custom state  
• LV_STATE_USER_2 (0x2000) Custom state  
• LV_STATE_USER_3 (0x4000) Custom state  
• LV_STATE_USER_4 (0x8000) Custom state

part (Part)

Objects can have parts (parts) , They can also have their own styles .LVGL The following predefined sections exist in ：

• LV_PART_MAIN  A rectangular background
• LV_PART_SCROLLBAR  Scroll bar
• LV_PART_INDICATOR  indicators , For example, for sliders 、 strip 、 Check box of switch or check box
• LV_PART_KNOB  It can grasp the adjustment value like a handle
• LV_PART_SELECTED  Indicates the currently selected option or part
• LV_PART_ITEMS  If the widget has multiple similar elements （ For example, table cells ）
• LV_PART_TICKS  The scale on the scale , For example, for charts or meters
• LV_PART_CURSOR  Mark a specific place , For example, the cursor of a text area or chart
• LV_PART_CUSTOM_FIRST You can add custom parts here .

Add the style

among ,<selector> Part is the part and state that should be added with style OR-ed value . Set the state and part of the object , Set multiple parameters , Take or calculate .

Many styles can be given , Then give different parts of the object 、 Use in different states .

lv_obj_add_style(obj, &style, <selector>);

Delete style

Delete all styles

lv_obj_remove_style_all(obj);

Delete a specific style

Only when the selector And lv_obj_add_style Used in selector When the match , This function will delete style.

lv_obj_remove_style(obj, style, selector);

Report style changes

If the style assigned to the object changes （ That is, add or change attributes ）, Then the object using this style should be notified . Yes 3 Options to do this ：

// If you know the changed attributes, you can simply redraw （ For example, color or opacity changes ） application , Just call 
lv_obj_invalidate(obj)  or  lv_obj_invalidate(lv_scr_act()).

// If you change or add more complex style attributes , And you know which objects are affected by this style , Call 
lv_obj_refresh_style(obj, part, property).
// To refresh all parts and attributes , Please use  
lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY).

// Must let  LVGL  Check whether all objects use this style and refresh them if necessary , Please call 
lv_obj_report_style_change(&style).
// If  style  by  NULL, All objects receive notification of style changes .

Gets the property value of the object

lv_obj_get_style_<property_name>(obj, <part>);

for example ：

These functions use the current state of the object , If there is no better candidate , Returns the default value .

lv_color_t color = lv_obj_get_style_bg_color(btn, LV_PART_MAIN);

---

Local style

Set the local style function interface ：

lv_obj_set_style_<property_name>(obj, <value>, <selector>);

Other aspects are similar to ordinary styles . There is no structure , One by one .

LVGL Local styles can be assigned to States （pseudo-classes） And parts （pseudo-elements）.

When setting both local style and normal style , Local styles have higher priority ！ It has nothing to do with the program location .

---

Style transition effect

By default , When an object changes state （ For example, it is pressed ） when , The new properties of the new state will be set immediately .

however , Use transitions to play animations when the state changes . for example , When the button is pressed , Its background color can be in 300 It is animated into the pressed color in milliseconds .

The parameters of the transition are stored in the style , You can set ：

• period of transition
• The delay before starting the transition
• Animation path （ Also known as timing or jog function ）
• The properties of animation

It needs to be initialized lv_transition_dsc_t Type and add to the style .

static const lv_style_prop_t trans_props[] = {
    LV_STYLE_BG_OPA, LV_STYLE_BG_COLOR,
	0, /* End mark r*/
};

static lv_transition_dsc_t trans1;
lv_style_transition_dsc_init(&trans1, trans_props, lv_anim_path_ease_out, duration_ms, delay_ms);

lv_style_set_transition(&style1, &trans1);

Style theme

A theme is a collection of styles . If there is an activity theme ,LVGL Apply it to every part you create ( object ). This will be UI Provide a default appearance , Then you can modify it by adding more styles .

To set a theme for the display , Two steps are required ：

1. Initialize a topic
2. Assign the initialized topic to the display

lv_theme_t * th = lv_theme_default_init
   (display,  /* Use this monitor DPI、SIZE etc. */
    LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN,   /* Primary and secondary colors */
    false,    /* Light dark mode */
    &lv_font_montserrat_10, &lv_font_montserrat_14, &lv_font_montserrat_18 /* Small font 、 Plain Fonts 、 Big font */
   ); 

lv_disp_set_theme(display, th); /*  Assign a theme to the display  */

And some scattered things that are not mentioned .

OK ~  Style setting is over ！

What functions will be added later ！