Styles(风格样式)

查看原文

Styles are used to set the appearance of objects. Styles in lvgl are heavily inspired by CSS. The concept in a nutshell is as follows:

  • A style is an lv_style_t variable which can hold properties like border width, text color and so on. It's similar to a class in CSS.

  • Styles can be assigned to objects to change their appearance. Upon assignment, the target part (pseudo-element in CSS) and target state (pseudo class) can be specified.For example one can add style_blue to the knob of a slider when it's in pressed state.

  • The same style can be used by any number of objects.

  • Styles can be cascaded which means multiple styles may be assigned to an object and each style can have different properties. Therefore, not all properties have to be specified in a style. LVGL will search for a property until a style defines it or use a default if it's not specified by any of the styles.For example style_btn can result in a default gray button and style_btn_red can add only a background-color=red to overwrite the background color.

  • The most recently added style has higher precedence. This means if a property is specified in two styles the newest style in the object will be used.

  • Some properties (e.g. text color) can be inherited from a parent(s) if it's not specified in an object.

  • Objects can also have local styles with higher precedence than "normal" styles.

  • Unlike CSS (where pseudo-classes describe different states, e.g. :focus), in LVGL a property is assigned to a given state.

  • Transitions can be applied when the object changes state.

Styles 用于设置对象的外观。 lvgl 中的样式很大程度上受到 CSS 的启发。简而言之,其概念如下:

  • 样式是一个 lv_style_t 变量,它可以保存边框宽度、文本颜色等属性。它类似于 CSS 中的“类”。

  • 可以将样式分配给对象以更改其外观。在赋值过程中,可以指定目标部分(CSS 中的pseudo element)和目标状态(pseudo class)。例如,当滑块处于按下状态时,可以将“style_blue”添加到滑块的旋钮。

  • 任何数量的对象都可以使用相同的样式。

  • 样式可以级联,这意味着可以将多个样式分配给一个对象,并且每个样式可以具有不同的属性。因此,并非所有属性都必须在样式中指定。 LVLG 将寻找一个属性,直到一个样式定义它,或者如果它没有被任何样式指定,则使用默认值。例如,style_btn 可以导致默认的灰色按钮,而style_btn_red 只能添加一个background-color=red 来覆盖背景颜色。

  • 后来添加的样式具有更高的优先级。这意味着如果在两种样式中指定了一个属性,则将使用稍后添加的样式。

  • 如果对象中未指定某些属性(例如文本颜色),则可以从父级继承。

  • 对象可以具有比“正常”样式具有更高优先级的本地样式。

  • 与 CSS(伪类描述不同的状态,例如:focus)不同,在 LVGL 中,属性被分配给给定的状态。

  • 当对象改变状态时可以应用转换。

States(状态)

查看原文

The objects can be in the combination of the following states:

  • LV_STATE_DEFAULT (0x0000) Normal, released state

  • LV_STATE_CHECKED (0x0001) Toggled or checked state

  • LV_STATE_FOCUSED (0x0002) Focused via keypad or encoder or clicked via touchpad/mouse

  • LV_STATE_FOCUS_KEY (0x0004) Focused via keypad or encoder but not via touchpad/mouse

  • LV_STATE_EDITED (0x0008) Edit by an encoder

  • LV_STATE_HOVERED (0x0010) Hovered by mouse (not supported now)

  • LV_STATE_PRESSED (0x0020) Being pressed

  • LV_STATE_SCROLLED (0x0040) Being scrolled

  • 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

The combination states the object can be focused and pressed at the same time. This is represented as LV_STATE_FOCUSED | LV_STATE_PRESSED.

The style can be added to any state and state combination. For example, setting a different background color for default and pressed state. If a property is not defined in a state the best matching state's property will be used. Typically this means the property with LV_STATE_DEFAULT is used.˛ If the property is not set even for the default state the default value will be used. (See later)

对象可以处于以下状态的组合:

  • LV_STATE_DEFAULT (0x0000) 正常,释放状态

  • LV_STATE_CHECKED (0x0001) 切换或检查状态

  • LV_STATE_FOCUSED (0x0002) 通过键盘或编码器聚焦或通过触摸板/鼠标点击

  • LV_STATE_FOCUS_KEY (0x0004) 通过键盘或编码器聚焦,但不通过触摸板/鼠标聚焦

  • LV_STATE_EDITED (0x0008) 由编码器编辑

  • LV_STATE_HOVERED (0x0010) 鼠标悬停(现在不支持)

  • LV_STATE_PRESSED (0x0020) 被按下

  • LV_STATE_SCROLLED (0x0040) 正在滚动

  • LV_STATE_DISABLED (0x0080) 禁用状态

  • LV_STATE_USER_1 (0x1000) 自定义状态

  • LV_STATE_USER_2 (0x2000) 自定义状态

  • LV_STATE_USER_3 (0x4000) 自定义状态

  • LV_STATE_USER_4 (0x8000) 自定义状态

该组合表示可以同时聚焦和按下对象。这表示为LV_STATE_FOCUSED | LV_STATE_PRESSED

样式可以添加到任何状态和状态组合。 例如,为默认和按下状态设置不同的背景颜色。 如果属性未在状态中定义,则将使用 最佳匹配状态的属性 。通常这意味着使用带有 LV_STATE_DEFAULT 的属性。 如果是默认状态但是没有设置他的属性,那么将会使用默认值。 (见后)

查看原文

But what does the "best matching state's property" really mean? States have a precedence which is shown by their value (see in the above list). A higher value means higher precedence. To determine which state's property to use let's take an example. Imagine the background color is defined like this:

  • LV_STATE_DEFAULT: white

  • LV_STATE_PRESSED: gray

  • LV_STATE_FOCUSED: red

  1. By the default the object is in default state, so it's a simple case: the property is perfectly defined in the object's current state as white.

  2. When the object is pressed there are 2 related properties: default with white (default is related to every state) and pressed with gray. The pressed state has 0x0020 precedence which is higher than the default state's 0x0000 precedence, so gray color will be used.

  3. When the object is focused the same thing happens as in pressed state and red color will be used. (Focused state has higher precedence than default state).

  4. When the object is focused and pressed both gray and red would work, but the pressed state has higher precedence than focused so gray color will be used.

  5. It's possible to set e.g rose color for AALV_STATE_PRESSED | LV_STATE_FOCUSED. In this case, this combined state has 0x0020 + 0x0002 = 0x0022 precedence, which is higher than the pressed state's precedence so rose color would be used.

  6. When the object is in checked state there is no property to set the background color for this state. So for lack of a better option, the object remains white from the default state's property.

但是 “最佳匹配状态的属性” 到底是什么意思呢? 状态具有优先级,由它们的值显示(参见上面的列表)。更高的值意味着更高的优先级。 为了确定使用哪个状态的属性,让我们举个例子。想象一下,背景颜色是这样定义的:

  • LV_STATE_DEFAULT:白色

  • LV_STATE_PRESSED:灰色

  • LV_STATE_FOCUSED:红色

  1. 默认情况下,对象处于默认状态,所以这是一个简单的情况:属性在对象当前状态下完美定义为白色。

  2. 当对象被按下时有2个相关属性:默认为白色(默认与每个状态相关)和按下为灰色。 按下状态的优先级为 0x0020,高于默认状态的 0x0000 优先级,因此将使用灰色。

  3. 当物体聚焦时,发生与按下状态相同的事情,将使用红色。 (焦点状态比默认状态具有更高的优先级)。

  4. 当物体聚焦并按下时,灰色和红色都可以工作,但按下状态的优先级高于聚焦状态,因此将使用灰色。

  5. 可以为 LV_STATE_PRESSED | LV_STATE_FOCUSED 设置例如玫瑰色。 。 在这种情况下,此组合状态的优先级为 0x0020 + 0x0002 = 0x0022,高于按下状态的优先级,因此将使用玫瑰色。

  6. 当对象处于选中状态时,没有设置此状态的背景颜色的属性。因此,由于缺乏更好的选择,对象从默认状态的属性中保持白色。

查看原文

Some practical notes:

  • The precedence (value) of states is quite intuitive and it's something the user would expect naturally. E.g. if an object is focused the user will still want to see if it's pressed, therefore pressed state has a higher precedence. If the focused state had a higher precedence it would overwrite the pressed color.

  • If you want to set a property for all states (e.g. red background color) just set it for the default state. If the object can't find a property for its current state it will fall back to the default state's property.

  • Use ORed states to describe the properties for complex cases. (E.g. pressed + checked + focused)

  • It might be a good idea to use different style elements for different states. For example, finding background colors for released, pressed, checked + pressed, focused, focused + pressed, focused + pressed + checked, etc states is quite difficult. Instead, for example, use the background color for pressed and checked states and indicate the focused state with a different border color.

一些实用的注意事项:

  • 状态的优先级(值)非常直观,这是用户自然期望的。例如。如果一个对象被聚焦,用户仍然希望查看它是否被按下,因此按下状态具有更高的优先级。 如果聚焦状态具有更高的优先级,它将覆盖按下的颜色。

  • 如果您想为所有状态设置一个属性(例如红色背景色),只需将其设置为默认状态即可。如果对象找不到当前状态的属性,它将回退到默认状态的属性。

  • 使用 ORed 状态来描述复杂情况的属性。 (例如按下 + 选中 + 聚焦)

  • 为不同的状态使用不同的样式元素可能是个好主意。 例如,为released、pressed、checked+pressed、focused、focused+pressed、focused+pressed+checked等状态寻找背景颜色是相当困难的。 相反,例如,对按下和选中状态使用背景颜色,并使用不同的边框颜色指示聚焦状态。

Cascading styles(层叠样式)

查看原文

It's not required to set all the properties in one style. It's possible to add more styles to an object and let the later added style to modify or extend appearance. For example, create a general gray button style and create a new for red buttons where only the new background color is set.

This is much like in CSS when used classes are listed like <div class=".btn .btn-red">.

Styles added later have precedence over ones set earlier. So in the gray/red button example above, the normal button style should be added first and the red style second. However, the precedence coming from states are still taken into account. So let's examine the following case:

  • the basic button style defines dark-gray color for default state and light-gray color pressed state

  • the red button style defines the background color as red only in the default state

In this case, when the button is released (it's in default state) it will be red because a perfect match is found in the most recently added style (red). When the button is pressed the light-gray color is a better match because it describes the current state perfectly, so the button will be light-gray.

不需要在一种样式中设置所有属性。可以向对象添加更多样式,并让稍后添加的样式修改或扩展外观。 例如,创建一个通用的灰色按钮样式并创建一个新的红色按钮,其中只设置了新的背景颜色。

这与CSS中使用的类类似,如“<div class=“.btn.btn red”>”。

后来添加的样式优先于之前设置的样式。所以在上面的灰色/红色按钮示例中,应该首先添加普通按钮样式,然后添加红色样式。 然而,还要考虑 “最佳匹配状态的属性“ (优先级)。 因此,让我们来研究以下情况:

  • 基本按钮样式定义了默认状态的深灰色和浅灰色按下状态

  • 红色按钮样式仅在默认状态下将背景颜色定义为红色

在这种情况下,当按钮被释放(处于默认状态)时,它将是红色的,因为在最近添加的样式(红色)中找到了最佳匹配。 当按下按钮时,浅灰色更适合,因为它完美地描述了当前状态,所以按钮将是浅灰色(改变了最佳匹配状态的属性)。

Inheritance(继承)

查看原文

Some properties (typically that are related to texts) can be inherited from the parent object's styles. Inheritance is applied only if the given property is not set in the object's styles (even in default state). In this case, if the property is inheritable, the property's value will be searched in the parents too until an object specifies a value for the property. The parents will use their own state to detemine the value. So if a button is pressed, and the text color comes from here, the pressed text color will be used.

某些属性(通常与文本相关)可以从父对象的样式继承。 仅当未在对象的样式中设置给定属性时(即使在默认状态下),才应用继承。 在这种情况下,如果该属性是可继承的,则该属性的值也将在父项中搜索,直到一个对象为该属性指定了一个值。父母将使用自己的状态来确定该值。 因此,如果按下按钮,并且文本颜色来自此处,则将使用按下的文本颜色。

Parts

查看原文

Objects can have parts which can have their own styles.

The following predefined parts exist in LVGL:

  • LV_PART_MAIN A background like rectangle*/

  • LV_PART_SCROLLBAR The scrollbar(s)

  • LV_PART_INDICATOR Indicator, e.g. for slider, bar, switch, or the tick box of the checkbox

  • LV_PART_KNOB Like a handle to grab to adjust the value*/

  • LV_PART_SELECTED Indicate the currently selected option or section

  • LV_PART_ITEMS Used if the widget has multiple similar elements (e.g. table cells)*/

  • LV_PART_TICKS Ticks on scales e.g. for a chart or meter

  • LV_PART_CURSOR Mark a specific place e.g. text area's or chart's cursor

  • LV_PART_CUSTOM_FIRST Custom parts can be added from here.

For example a Slider has three parts:

  • Background

  • Indiactor

  • Knob

It means the all three parts of the slider can have their own styles. See later how to add style styles to objects and parts.

对象可以有 部分(parts) ,它们可以有自己的样式。

LVGL 中存在以下预定义部分:

  • LV_PART_MAIN 类似矩形的背景*/

  • LV_PART_SCROLLBAR 滚动条

  • LV_PART_INDICATOR 指标,例如用于滑块、条、开关或复选框的勾选框

  • LV_PART_KNOB 像手柄一样可以抓取调整值*/

  • LV_PART_SELECTED 表示当前选择的选项或部分

  • LV_PART_ITEMS 如果小部件具有多个相似元素(例如表格单元格)*/

  • LV_PART_TICKS 刻度上的刻度,例如对于图表或仪表

  • LV_PART_CURSOR 标记一个特定的地方,例如文本区域或图表的光标

  • LV_PART_CUSTOM_FIRST 可以从这里添加自定义部件。

例如一个 Slider 包含三个部分:

  • 背景

  • 指标

  • 旋钮

这意味着滑块的所有三个部分都可以有自己的样式。稍后请参阅如何向对象和部件添加样式样式。

Initialize styles and set/get properties(初始化样式和设置/获取属性)

查看原文

Styles are stored in lv_style_t variables. Style variables should be static, global or dynamically allocated. In other words they can not be local variables in functions which are destroyed when the function exists. Before using a style it should be initialized with lv_style_init(&my_style). After initializing the style properties can be set or added to it.

Property set functions looks like this: lv_style_set_<property_name>(&style, <value>); For example:

样式存储在 lv_style_t 变量中。样式变量应该是 静态 、全局或动态分配的。 换句话说,它们不能是函数中的局部变量,当函数结束时它们会被销毁。 在使用样式之前,它应该用 lv_style_init(&my_style) 进行初始化。 初始化后,可以设置或添加样式属性。

属性集函数看起来像这样:lv_style_set_<property_name>(&style, <value>); 例如:

static lv_style_t style_btn;
lv_style_init(&style_btn);
lv_style_set_bg_color(&style_btn, lv_color_grey());
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());

static lv_style_t style_btn_red;
lv_style_init(&style_btn_red);
lv_style_set_bg_color(&style_btn_red, lv_color_red());
lv_style_set_bg_opa(&style_btn_red, LV_OPA_COVER);
查看原文

To remove a property use:

要删除属性,请使用:

lv_style_remove_prop(&style, LV_STYLE_BG_COLOR);
查看原文

To get a property's value from a style:

从样式中获取属性的值:

lv_style_value_t v;
lv_res_t res = lv_style_rget_prop(&style, LV_STYLE_BG_COLOR, &v);
if(res == LV_RES_OK) {	/*Found*/
	do_something(v.color);
}
查看原文

lv_style_value_t has 3 fields:

  • num for integer, boolean and opacity properties

  • color for color properties

  • ptr for pointer properties

To reset a style (free all its data) use

lv_style_value_t 有 3 个字段:

  • num 用于整数、布尔值和不透明度属性

  • color 颜色属性

  • ptr 指针属性

要重置样式(释放其所有数据),请使用

lv_style_reset(&style);

Add and remove styles to a widget(向部件添加和删除样式)

查看原文

A style on its own is not that useful, it needs to be assigned to an object to take effect.

一个样式本身并没有那么有用,它需要分配给一个对象才能生效。

Add styles(添加样式)

查看原文

To add a style to an object use lv_obj_add_style(obj, &style, <selector>). <selector> is an OR-ed value of parts and state to which the style should be added. Some examples:

  • LV_PART_MAIN | LV_STATE_DEFAULT

  • LV_STATE_PRESSED: The main part in pressed state. LV_PART_MAIN can be omitted

  • LV_PART_SCROLLBAR: The scrollbar part in the default state. LV_STATE_DEFAULT can be omitted.

  • LV_PART_SCROLLBAR | LV_STATE_SCROLLED: The scrollbar part when the object is being scrolled

  • 0 Same as LV_PART_MAIN | LV_STATE_DEFAULT.

  • LV_PART_INDICATOR | LV_STATE_PRESSED | LV_STATE_CHECKED The indicator part when the object is pressed and checked at the same time.

Using lv_obj_add_style:

要向对象添加样式,请使用 lv_obj_add_style(obj, &style, <selector>)<selector> 是应添加样式的部分和状态的 OR-ed 值,例如:

  • LV_PART_MAIN | LV_STATE_DEFAULT

  • LV_STATE_PRESSED:按下状态的主要部分。 LV_PART_MAIN 可以省略

  • LV_PART_SCROLLBAR:默认状态下的滚动条部分。 LV_STATE_DEFAULT 可以省略。

  • LV_PART_SCROLLBAR | LV_STATE_SCROLLED:对象滚动时的滚动条部分

  • 0LV_PART_MAIN | 相同LV_STATE_DEFAULT

  • LV_PART_INDICATOR | LV_STATE_PRESSED | LV_STATE_CHECKED 同时按下和检查对象时的指示器部分。

使用 lv_obj_add_style 的示例:

lv_obj_add_style(btn, &style_btn, 0);      				  /*Default button style*/
lv_obj_add_style(btn, &btn_red, LV_STATE_PRESSED);  /*Overwrite only a some colors to red when pressed*/

Remove styles(删除样式)

查看原文

To remove all styles from an object use lv_obj_remove_style_all(obj).

To remove specific styles use lv_obj_remove_style(obj, style, selector). This function will remove style only if the selector matches with the selector used in lv_obj_add_style. style can be NULL to check only the selector and remove all matching styles. The selector can use the LV_STATE_ANY and LV_PART_ANY values to remove the style with any state or part.

要从对象中删除所有样式,请使用 lv_obj_remove_style_all(obj)

要删除特定样式,请使用 lv_obj_remove_style(obj, style, selector)

仅当 selectorlv_obj_add_style 中使用的 selector 匹配时,此函数才会删除 style

style 可以是 NULL 只检查 selector 并删除所有匹配的样式。 selector 可以使用 LV_STATE_ANYLV_PART_ANY 值来删除具有任何状态或部分的样式。

Report style changes(通知样式更改)

查看原文

If a style which is already assigned to object changes (i.e. a property is added or changed) the objects using that style should be notified. There are 3 options to do this:

  1. If you know that the changed properties can be applied by a simple redraw (e.g. color or opacity changes) just call lv_obj_invalidate(obj) or lv_obj_invalideate(lv_scr_act()).

  2. If more complex style properties were changed or added, and you know which object(s) are affected by that style call lv_obj_refresh_style(obj, part, property). To refresh all parts and properties use lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY).

  3. To make LVGL check all objects to see whether they use the style and refresh them when needed call lv_obj_report_style_change(&style). If style is NULL all objects will be notified about the style change.

如果已分配给对象的样式发生更改(即添加或更改属性),则应通知使用该样式的对象。有 3 个选项可以执行此操作:

  1. 如果您知道更改的属性可以通过简单的重绘(例如颜色或不透明度更改)应用,只需调用 lv_obj_invalidate(obj)lv_obj_invalidate(lv_scr_act())

  2. 如果更改或添加了更复杂的样式属性,并且您知道哪些对象受该样式影响,则调用 lv_obj_refresh_style(obj, part, property)。 要刷新所有部件和属性,请使用 lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY)

  3. 要让 LVGL 检查所有对象是否使用该样式并在需要时刷新它们,请调用 lv_obj_report_style_change(&style)。如果 styleNULL,所有对象都会收到有关样式更改的通知。

Get a property's value on an object(获取对象的属性值)

查看原文

To get a final value of property - considering cascading, inheritance, local styles and transitions (see below) - get functions like this can be used: lv_obj_get_style_<property_name>(obj, <part>). These functions uses the object's current state and if no better candidate returns a default value.   For example:

要获取属性的最终值(考虑级联、继承、本地样式和转换(请参见下文),可以使用如下的 get 函数:

lv_obj_get_style_<property_name>(obj, <part>)

这些函数使用对象的当前状态,如果没有更好的候选对象,则返回默认值。 例如:

lv_color_t color = lv_obj_get_style_bg_color(btn, LV_PART_MAIN);

Local styles(本地样式)

查看原文

In addition to "normal" styles, objects can also store local styles. This concept is similar to inline styles in CSS (e.g. <div style="color:red">) with some modification.

Local styles are like normal styles, but they can't be shared among other objects. If used, local styles are allocated automatically, and freed when the object is deleted. They are useful to add local customization to an object.

Unlike in CSS, LVGL local styles can be assigned to states (pseudo-classes) and parts (pseudo-elements).

To set a local property use functions like lv_obj_set_style_<property_name>(obj, <value>, <selector>);   For example:

除了“普通” 样式,对象还可以存储本地样式。这个概念类似于 CSS 中的内联样式(例如 <div style="color:red">),但做了一些修改。

本地样式与普通样式类似,但不能在其他对象之间共享。本地样式会自动分配空间,并在对象被删除时释放。 本地样式在向对象添加本地自定义样式时很有用。

与 CSS 不同,LVGL 本地样式可以分配给状态(pseudo-classes)和部件(pseudo-elements)。

要设置本地属性,请使用 lv_obj_set_style_<property_name>(obj, <value>, <selector>);

例如:

lv_obj_set_style_local_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED);

Properties(属性)

查看原文

For the full list of style properties click here.

有关样式属性的完整列表,请单击 此处 查看。

Typical background properties(典型的背景属性)

查看原文

In the documentation of the widgets you will see sentences like "The widget use the typical background properties". The "typical background properties" are the ones related to:

  • Background

  • Border

  • Outline

  • Shadow

  • Padding

  • Width and height transformation

  • X and Y translation

在小部件的文档中,您将看到“小部件使用典型的背景属性”这样的句子。“典型背景属性”与以下相关:

  • 背景(Background)

  • 边界(Border)

  • 轮廓(Outline)

  • 阴影(Shadow)

  • 填充(Padding)

  • 宽度和高度变换

  • X和Y变换

Transitions(过渡特效)

查看原文

By default, when an object changes state (e.g. it's pressed) the new properties from the new state are set immediately. However, with transitions it's possible to play an animation on state change. For example, on pressing a button its background color can be animated to the pressed color over 300 ms.

The parameters of the transitions are stored in the styles. It's possible to set

  • the time of the transition

  • the delay before starting the transition

  • the animation path (also known as timing or easing function)

  • the properties to animate

The transition properties can be defined for each state. For example, setting 500 ms transition time in default state will mean that when the object goes to the default state a 500 ms transition time will be applied. Setting 100 ms transition time in the pressed state will mean a 100 ms transition time when going to pressed state. So this example configuration will result in going to pressed state quickly and then going back to default slowly.

To describe a transition an lv_transition_dsc_t variable needs to initialized and added to a style:

默认情况下,当一个对象改变状态(例如它被按下)时,新状态的新属性会立即设置。但是,通过转换,可以在状态更改时播放动画。 例如,按下按钮时,其背景颜色可以在 300 毫秒内动画显示为按下的颜色。

过渡的参数存储在样式中。可以设置

  • 过渡时期

  • 开始过渡前的延迟

  • 动画路径(也称为计时或缓动功能)

  • 动画的属性

可以为每个状态定义转换属性。例如,在默认状态下设置 500 ms 转换时间意味着当对象进入默认状态时,将应用 500 ms 转换时间。 在按下状态设置 100 ms 转换时间将意味着在进入按下状态时有 100 ms 转换时间。 因此,此示例配置将导致快速进入按下状态,然后缓慢返回默认状态。

要描述转换,需要初始化 lv_transition_dsc_t 变量并将其添加到样式中:

/*Only its pointer is saved so must static, global or dynamically allocated */
static const lv_style_prop_t trans_props[] = {
											LV_STYLE_BG_OPA, LV_STYLE_BG_COLOR,
											0, /*End marker*/
};

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

Color filter(色彩过滤)

TODO

Themes(主题)

查看原文

Themes are a collection of styles. If there is an active theme LVGL applies it on every created widget. This will give a default appearance to the UI which can then be modified by adding further styles.

Every display can have a different theme. For example you could have a colorful theme on a TFT and monochrome theme on a secondary monochrome display.

To set a theme for a display, 2 steps are required:

  1. Initialize a theme

  2. Assign the initialized theme to a display.

Theme initialization functions can have different prototype. This example shows how to set the "default" theme:

主题是风格的集合。如果存在活动主题,LVGL将其应用于每个创建的部件(对象)。 这将为UI提供一个默认外观,然后可以通过添加更多样式对其进行修改。

每个显示器都可以有不同的主题。例如,您可以在 TFT 上使用彩色主题,在辅助单色显示器上使用单色主题。

要为显示设置主题,需要 2 个步骤:

  1. 初始化一个主题

  2. 将初始化的主题分配给显示器。

主题初始化函数可以有不同的原型。此示例显示如何设置“默认”主题:

lv_theme_t * th = lv_theme_default_init(display,  /*Use the DPI, size, etc from this display*/ 
                                        LV_COLOR_PALETTE_BLUE, LV_COLOR_PALETTE_CYAN,   /*Primary and secondary palette*/
                                        false,    /*Light or dark mode*/ 
                                        &lv_font_montserrat_10, &lv_font_montserrat_14, &lv_font_montserrat_18); /*Small, normal, large fonts*/
                                        
lv_disp_set_theme(display, th); /*Assign the theme to the display*/
查看原文

The themes can be enabled in lv_conf.h. If the default theme is enabled by LV_USE_THEME_DEFAULT 1 LVGL automatically initializes and sets it when a display is created.

可以在 lv_conf.h 中启用主题。如果默认主题由 LV_USE_THEME_DEFAULT 1 启用,LVGL 会在创建显示时自动初始化并设置它。

Extending themes(扩展主题)

查看原文

Built-in themes can be extended. If a custom theme is created a parent theme can be selected. The parent theme's styles will be added before the custom theme's styles. Any number of themes can be chained this way. E.g. default theme -> custom theme -> dark theme.

lv_theme_set_parent(new_theme, base_theme) extends the base_theme with the new_theme.

There is an example for it below.

内置主题可以扩展。 如果创建了自定义主题,则可以选择父主题。父主题的样式将添加在自定义主题的样式之前。 可以通过这种方式链接任意数量的主题。例如。默认主题 -> 自定义主题 -> 深色主题。

lv_theme_set_parent(new_theme, base_theme) 使用 new_theme 扩展了 base_theme

下面的是示例:

Examples

Size styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

/**
 * Using the Size, Position and Padding style properties
 */
void lv_example_style_1(void)
{
     static lv_style_t style;
     lv_style_init(&style);
     lv_style_set_radius(&style, 5);

     /*Make a gradient*/
     lv_style_set_width(&style, 150);
     lv_style_set_height(&style, LV_SIZE_CONTENT);

     lv_style_set_pad_ver(&style, 20);
     lv_style_set_pad_left(&style, 5);

     lv_style_set_x(&style, lv_pct(50));
     lv_style_set_y(&style, 80);

     /*Create an object with the new style*/
     lv_obj_t * obj = lv_obj_create(lv_scr_act());
     lv_obj_add_style(obj, &style, 0);

     lv_obj_t * label = lv_label_create(obj);
     lv_label_set_text(label, "Hello");
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the Size, Position and Padding style properties
#
style = lv.style_t()
style.init()
style.set_radius(5)

# Make a gradient
style.set_width(150)
style.set_height(lv.SIZE.CONTENT)

style.set_pad_ver(20)
style.set_pad_left(5)

style.set_x(lv.pct(50))
style.set_y(80)

# Create an object with the new style
obj = lv.obj(lv.scr_act())
obj.add_style(style, 0)

label = lv.label(obj)
label.set_text("Hello")


Background styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * Using the background style properties
 */
void lv_example_style_2(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_radius(&style, 5);

    /*Make a gradient*/
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));
    lv_style_set_bg_grad_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_bg_grad_dir(&style, LV_GRAD_DIR_VER);

    /*Shift the gradient to the bottom*/
    lv_style_set_bg_main_stop(&style, 128);
    lv_style_set_bg_grad_stop(&style, 192);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the background style properties
#
style = lv.style_t()
style.init()
style.set_radius(5)

# Make a gradient
style.set_bg_opa(lv.OPA.COVER)
style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))
style.set_bg_grad_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_bg_grad_dir(lv.GRAD_DIR.VER)

# Shift the gradient to the bottom
style.set_bg_main_stop(128)
style.set_bg_grad_stop(192)

# Create an object with the new style
obj = lv.obj(lv.scr_act())
obj.add_style(style, 0)
obj.center()

Border styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * Using the border style properties
 */
void lv_example_style_3(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    /*Set a background color and a radius*/
    lv_style_set_radius(&style, 10);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

    /*Add border to the bottom+right*/
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_border_width(&style, 5);
    lv_style_set_border_opa(&style, LV_OPA_50);
    lv_style_set_border_side(&style, LV_BORDER_SIDE_BOTTOM | LV_BORDER_SIDE_RIGHT);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the border style properties
#
style = lv.style_t()
style.init()

# Set a background color and a radius
style.set_radius(10)
style.set_bg_opa(lv.OPA.COVER)
style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))

# Add border to the bottom+right
style.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_border_width(5)
style.set_border_opa(lv.OPA._50)
style.set_border_side(lv.BORDER_SIDE.BOTTOM | lv.BORDER_SIDE.RIGHT)

# Create an object with the new style
obj = lv.obj(lv.scr_act())
obj.add_style(style, 0)
obj.center()

Outline styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * Using the outline style properties
 */
void lv_example_style_4(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    /*Set a background color and a radius*/
    lv_style_set_radius(&style, 5);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

    /*Add outline*/
    lv_style_set_outline_width(&style, 2);
    lv_style_set_outline_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_outline_pad(&style, 8);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the outline style properties
#

style = lv.style_t()
style.init()

# Set a background color and a radius
style.set_radius(5)
style.set_bg_opa(lv.OPA.COVER)
style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))

# Add outline
style.set_outline_width(2)
style.set_outline_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_outline_pad(8)

# Create an object with the new style
obj = lv.obj(lv.scr_act())
obj.add_style(style, 0)
obj.center()

Shadow styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES

/**
 * Using the Shadow style properties
 */
void lv_example_style_5(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    /*Set a background color and a radius*/
    lv_style_set_radius(&style, 5);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 1));

    /*Add a shadow*/
    lv_style_set_shadow_width(&style, 55);
    lv_style_set_shadow_color(&style, lv_palette_main(LV_PALETTE_BLUE));
//    lv_style_set_shadow_ofs_x(&style, 10);
//    lv_style_set_shadow_ofs_y(&style, 20);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the Shadow style properties
#

style = lv.style_t()
style.init()

# Set a background color and a radius
style.set_radius(5)
style.set_bg_opa(lv.OPA.COVER)
style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 1))

# Add a shadow
style.set_shadow_width(8)
style.set_shadow_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_shadow_ofs_x(10)
style.set_shadow_ofs_y(20)

# Create an object with the new style
obj = lv.obj(lv.scr_act())
obj.add_style(style, 0)
obj.center()

Image styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

/**
 * Using the Image style properties
 */
void lv_example_style_6(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    /*Set a background color and a radius*/
    lv_style_set_radius(&style, 5);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 3));
    lv_style_set_border_width(&style, 2);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));

    lv_style_set_img_recolor(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_img_recolor_opa(&style, LV_OPA_50);
    lv_style_set_transform_angle(&style, 300);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_img_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);

    LV_IMG_DECLARE(img_cogwheel_argb);
    lv_img_set_src(obj, &img_cogwheel_argb);

    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
from imagetools import get_png_info, open_png
# Register PNG image decoder
decoder = lv.img.decoder_create()
decoder.info_cb = get_png_info
decoder.open_cb = open_png

# Create an image from the png file
try:
    with open('../assets/img_cogwheel_argb.png', 'rb') as f:
        png_data = f.read()
except:
    print("Could not find img_cogwheel_argb.png")
    sys.exit()
    
img_cogwheel_argb = lv.img_dsc_t({
  'data_size': len(png_data),
  'data': png_data 
})

#
# Using the Image style properties
#
style = lv.style_t()
style.init()

# Set a background color and a radius
style.set_radius(5)
style.set_bg_opa(lv.OPA.COVER)
style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3))
style.set_border_width(2)
style.set_border_color(lv.palette_main(lv.PALETTE.BLUE))

style.set_img_recolor(lv.palette_main(lv.PALETTE.BLUE))
style.set_img_recolor_opa(lv.OPA._50)
# style.set_transform_angle(300)

# Create an object with the new style
obj = lv.img(lv.scr_act())
obj.add_style(style, 0)

obj.set_src(img_cogwheel_argb)

obj.center()

Arc styles

C code  

 GitHub
Error encountered while trying to open /home/runner/work/100ask_lvgl_docs_8.x/100ask_lvgl_docs_8.x/examples/style/lv_example_style_7.c

MicroPython code  

 GitHub Simulator
Error encountered while trying to open /home/runner/work/100ask_lvgl_docs_8.x/100ask_lvgl_docs_8.x/examples/style/lv_example_style_7.py

Text styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LABEL

/**
 * Using the text style properties
 */
void lv_example_style_8(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_radius(&style, 5);
    lv_style_set_bg_opa(&style, LV_OPA_COVER);
    lv_style_set_bg_color(&style, lv_palette_lighten(LV_PALETTE_GREY, 2));
    lv_style_set_border_width(&style, 2);
    lv_style_set_border_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_pad_all(&style, 10);

    lv_style_set_text_color(&style, lv_palette_main(LV_PALETTE_BLUE));
    lv_style_set_text_letter_space(&style, 5);
    lv_style_set_text_line_space(&style, 20);
    lv_style_set_text_decor(&style, LV_TEXT_DECOR_UNDERLINE);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_label_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);
    lv_label_set_text(obj, "Text of\n"
                            "a label");

    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the text style properties
#

style = lv.style_t()
style.init()

style.set_radius(5)
style.set_bg_opa(lv.OPA.COVER)
style.set_bg_color(lv.palette_lighten(lv.PALETTE.GREY, 3))
style.set_border_width(2)
style.set_border_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_pad_all(10)

style.set_text_color(lv.palette_main(lv.PALETTE.BLUE))
style.set_text_letter_space(5)
style.set_text_line_space(20)
style.set_text_decor(lv.TEXT_DECOR.UNDERLINE)

# Create an object with the new style
obj = lv.label(lv.scr_act())
obj.add_style(style, 0)
obj.set_text("Text of\n"
             "a label")

obj.center()


Line styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_LINE

/**
 * Using the line style properties
 */
void lv_example_style_9(void)
{
    static lv_style_t style;
    lv_style_init(&style);

    lv_style_set_line_color(&style, lv_palette_main(LV_PALETTE_GREY));
    lv_style_set_line_width(&style, 6);
    lv_style_set_line_rounded(&style, true);

    /*Create an object with the new style*/
    lv_obj_t * obj = lv_line_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);

    static lv_point_t p[] = {{10, 30}, {30, 50}, {100, 0}};
    lv_line_set_points(obj, p, 3);

    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using the line style properties
#

style = lv.style_t()
style.init()

style.set_line_color(lv.palette_main(lv.PALETTE.GREY))
style.set_line_width(6)
style.set_line_rounded(True)

# Create an object with the new style
obj = lv.line(lv.scr_act())
obj.add_style(style, 0)
p =  [ {"x":10, "y":30}, 
       {"x":30, "y":50}, 
       {"x":100, "y":0}]

obj.set_points(p, 3)

obj.center()

Transition

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

/**
 * Creating a transition
 */
void lv_example_style_10(void)
{
    static const lv_style_prop_t props[] = {LV_STYLE_BG_COLOR, LV_STYLE_BORDER_COLOR, LV_STYLE_BORDER_WIDTH, 0};

    /* A default transition
     * Make it fast (100ms) and start with some delay (200 ms)*/
    static lv_style_transition_dsc_t trans_def;
    lv_style_transition_dsc_init(&trans_def, props, lv_anim_path_linear, 100, 200, NULL);

    /* A special transition when going to pressed state
     * Make it slow (500 ms) but start  without delay*/
    static lv_style_transition_dsc_t trans_pr;
    lv_style_transition_dsc_init(&trans_pr, props, lv_anim_path_linear, 500, 0, NULL);

    static lv_style_t style_def;
    lv_style_init(&style_def);
    lv_style_set_transition(&style_def, &trans_def);

    static lv_style_t style_pr;
    lv_style_init(&style_pr);
    lv_style_set_bg_color(&style_pr, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_border_width(&style_pr, 6);
    lv_style_set_border_color(&style_pr, lv_palette_darken(LV_PALETTE_RED, 3));
    lv_style_set_transition(&style_pr, &trans_pr);

    /*Create an object with the new style_pr*/
    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style_def, 0);
    lv_obj_add_style(obj, &style_pr, LV_STATE_PRESSED);

    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Creating a transition
#

props = [lv.STYLE.BG_COLOR, lv.STYLE.BORDER_COLOR, lv.STYLE.BORDER_WIDTH, 0]

# A default transition
# Make it fast (100ms) and start with some delay (200 ms)

trans_def =  lv.style_transition_dsc_t()
trans_def.init(props, lv.anim_t.path_linear, 100, 200, None)

# A special transition when going to pressed state
# Make it slow (500 ms) but start  without delay

trans_pr = lv.style_transition_dsc_t()
trans_pr.init(props, lv.anim_t.path_linear, 500, 0, None)

style_def = lv.style_t()
style_def.init()
style_def.set_transition(trans_def)

style_pr = lv.style_t()
style_pr.init()
style_pr.set_bg_color(lv.palette_main(lv.PALETTE.RED))
style_pr.set_border_width(6)
style_pr.set_border_color(lv.palette_darken(lv.PALETTE.RED, 3))
style_pr.set_transition(trans_pr)

# Create an object with the new style_pr
obj = lv.obj(lv.scr_act())
obj.add_style(style_def, 0)
obj.add_style(style_pr, lv.STATE.PRESSED)

obj.center()

Using multiple styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

/**
 * Using multiple styles
 */
void lv_example_style_11(void)
{
    /*A base style*/
    static lv_style_t style_base;
    lv_style_init(&style_base);
    lv_style_set_bg_color(&style_base, lv_palette_main(LV_PALETTE_LIGHT_BLUE));
    lv_style_set_border_color(&style_base, lv_palette_darken(LV_PALETTE_LIGHT_BLUE, 3));
    lv_style_set_border_width(&style_base, 2);
    lv_style_set_radius(&style_base, 10);
    lv_style_set_shadow_width(&style_base, 10);
    lv_style_set_shadow_ofs_y(&style_base, 5);
    lv_style_set_shadow_opa(&style_base, LV_OPA_50);
    lv_style_set_text_color(&style_base, lv_color_white());
    lv_style_set_width(&style_base, 100);
    lv_style_set_height(&style_base, LV_SIZE_CONTENT);

    /*Set only the properties that should be different*/
    static lv_style_t style_warning;
    lv_style_init(&style_warning);
    lv_style_set_bg_color(&style_warning, lv_palette_main(LV_PALETTE_YELLOW));
    lv_style_set_border_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 3));
    lv_style_set_text_color(&style_warning, lv_palette_darken(LV_PALETTE_YELLOW, 4));

    /*Create an object with the base style only*/
    lv_obj_t * obj_base = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_base, &style_base, 0);
    lv_obj_align(obj_base, LV_ALIGN_LEFT_MID, 20, 0);

    lv_obj_t * label = lv_label_create(obj_base);
    lv_label_set_text(label, "Base");
    lv_obj_center(label);

    /*Create an other object with the base style and earnings style too*/
    lv_obj_t * obj_warning = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj_warning, &style_base, 0);
    lv_obj_add_style(obj_warning, &style_warning, 0);
    lv_obj_align(obj_warning, LV_ALIGN_RIGHT_MID, -20, 0);

    label = lv_label_create(obj_warning);
    lv_label_set_text(label, "Warning");
    lv_obj_center(label);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Using multiple styles
#
# A base style

style_base = lv.style_t()
style_base.init()
style_base.set_bg_color(lv.palette_main(lv.PALETTE.LIGHT_BLUE))
style_base.set_border_color(lv.palette_darken(lv.PALETTE.LIGHT_BLUE, 3))
style_base.set_border_width(2)
style_base.set_radius(10)
style_base.set_shadow_width(10)
style_base.set_shadow_ofs_y(5)
style_base.set_shadow_opa(lv.OPA._50)
style_base.set_text_color(lv.color_white())
style_base.set_width(100)
style_base.set_height(lv.SIZE.CONTENT)

# Set only the properties that should be different
style_warning = lv.style_t()
style_warning.init()
style_warning.set_bg_color(lv.palette_main(lv.PALETTE.YELLOW))
style_warning.set_border_color(lv.palette_darken(lv.PALETTE.YELLOW, 3))
style_warning.set_text_color(lv.palette_darken(lv.PALETTE.YELLOW, 4))

# Create an object with the base style only
obj_base = lv.obj(lv.scr_act())
obj_base.add_style(style_base, 0)
obj_base.align(lv.ALIGN.LEFT_MID, 20, 0)

label = lv.label(obj_base)
label.set_text("Base")
label.center()

# Create an other object with the base style and earnings style too
obj_warning = lv.obj(lv.scr_act())
obj_warning.add_style(style_base, 0)
obj_warning.add_style(style_warning, 0)
obj_warning.align(lv.ALIGN.RIGHT_MID, -20, 0)

label = lv.label(obj_warning)
label.set_text("Warning")
label.center()

Local styles

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

/**
 * Local styles
 */
void lv_example_style_12(void)
{
    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREEN));
    lv_style_set_border_color(&style, lv_palette_lighten(LV_PALETTE_GREEN, 3));
    lv_style_set_border_width(&style, 3);

    lv_obj_t * obj = lv_obj_create(lv_scr_act());
    lv_obj_add_style(obj, &style, 0);

    /*Overwrite the background color locally*/
    lv_obj_set_style_bg_color(obj,lv_palette_main(LV_PALETTE_ORANGE), LV_PART_MAIN);

    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Local styles
#

style = lv.style_t()
style.init()
style.set_bg_color(lv.palette_main(lv.PALETTE.GREEN))
style.set_border_color(lv.palette_lighten(lv.PALETTE.GREEN, 3))
style.set_border_width(3)

obj = lv.obj(lv.scr_act())
obj.add_style(style, 0)

# Overwrite the background color locally
obj.set_style_bg_color(lv.palette_main(lv.PALETTE.ORANGE), lv.PART.MAIN)

obj.center()

Add styles to parts and states

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

/**
 * Add styles to parts and states
 */
void lv_example_style_13(void)
{
    static lv_style_t style_indic;
    lv_style_init(&style_indic);
    lv_style_set_bg_color(&style_indic, lv_palette_lighten(LV_PALETTE_RED, 3));
    lv_style_set_bg_grad_color(&style_indic, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_bg_grad_dir(&style_indic, LV_GRAD_DIR_HOR);

    static lv_style_t style_indic_pr;
    lv_style_init(&style_indic_pr);
    lv_style_set_shadow_color(&style_indic_pr, lv_palette_main(LV_PALETTE_RED));
    lv_style_set_shadow_width(&style_indic_pr, 10);
    lv_style_set_shadow_spread(&style_indic_pr, 3);

    /*Create an object with the new style_pr*/
    lv_obj_t * obj = lv_slider_create(lv_scr_act());
    lv_obj_add_style(obj, &style_indic, LV_PART_INDICATOR);
    lv_obj_add_style(obj, &style_indic_pr, LV_PART_INDICATOR | LV_STATE_PRESSED);
    lv_slider_set_value(obj, 70, LV_ANIM_OFF);
    lv_obj_center(obj);
}

#endif

MicroPython code  

 GitHub Simulator
#
# Add styles to parts and states
#

style_indic = lv.style_t()
style_indic.init()
style_indic.set_bg_color(lv.palette_lighten(lv.PALETTE.RED, 3))
style_indic.set_bg_grad_color(lv.palette_main(lv.PALETTE.RED))
style_indic.set_bg_grad_dir(lv.GRAD_DIR.HOR)

style_indic_pr = lv.style_t()
style_indic_pr.init()
style_indic_pr.set_shadow_color(lv.palette_main(lv.PALETTE.RED))
style_indic_pr.set_shadow_width(10)
style_indic_pr.set_shadow_spread(3)

# Create an object with the new style_pr
obj = lv.slider(lv.scr_act())
obj.add_style(style_indic, lv.PART.INDICATOR)
obj.add_style(style_indic_pr, lv.PART.INDICATOR | lv.STATE.PRESSED)
obj.set_value(70, lv.ANIM.OFF)
obj.center()

Extending the current theme

C code  

 GitHub
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG


static lv_style_t style_btn;

/*Will be called when the styles of the base theme are already added
  to add new styles*/
static void new_theme_apply_cb(lv_theme_t * th, lv_obj_t * obj)
{
    LV_UNUSED(th);

    if(lv_obj_check_type(obj, &lv_btn_class)) {
        lv_obj_add_style(obj, &style_btn, 0);
    }
}

static void new_theme_init_and_set(void)
{
    /*Initialize the styles*/
    lv_style_init(&style_btn);
    lv_style_set_bg_color(&style_btn, lv_palette_main(LV_PALETTE_GREEN));
    lv_style_set_border_color(&style_btn, lv_palette_darken(LV_PALETTE_GREEN, 3));
    lv_style_set_border_width(&style_btn, 3);

    /*Initialize the new theme from the current theme*/
    lv_theme_t * th_act = lv_disp_get_theme(NULL);
    static lv_theme_t th_new;
    th_new = *th_act;

    /*Set the parent theme and the style apply callback for the new theme*/
    lv_theme_set_parent(&th_new, th_act);
    lv_theme_set_apply_cb(&th_new, new_theme_apply_cb);

    /*Assign the new theme the the current display*/
    lv_disp_set_theme(NULL, &th_new);
}



/**
 * Extending the current theme
 */
void lv_example_style_14(void)
{
    lv_obj_t * btn;
    lv_obj_t * label;

    btn = lv_btn_create(lv_scr_act());
    lv_obj_align(btn, LV_ALIGN_TOP_MID, 0, 20);

    label = lv_label_create(btn);
    lv_label_set_text(label, "Original theme");

    new_theme_init_and_set();

    btn = lv_btn_create(lv_scr_act());
    lv_obj_align(btn, LV_ALIGN_BOTTOM_MID, 0, -20);

    label = lv_label_create(btn);
    lv_label_set_text(label, "New theme");
}

#endif

MicroPython code  

 GitHub Simulator
# Will be called when the styles of the base theme are already added
# to add new styles


class NewTheme(lv.theme_t):
    def __init__(self):
        super().__init__()
        # Initialize the styles
        self.style_btn = lv.style_t()
        self.style_btn.init()
        self.style_btn.set_bg_color(lv.palette_main(lv.PALETTE.GREEN))
        self.style_btn.set_border_color(lv.palette_darken(lv.PALETTE.GREEN, 3))
        self.style_btn.set_border_width(3)

        # This theme is based on active theme 
        th_act = lv.theme_get_from_obj(lv.scr_act())
        # This theme will be applied only after base theme is applied
        self.set_parent(th_act)        


class ExampleStyle_14:
    
    def __init__(self):
        # 
        # Extending the current theme
        #

        btn = lv.btn(lv.scr_act())
        btn.align(lv.ALIGN.TOP_MID, 0, 20)

        label = lv.label(btn)
        label.set_text("Original theme")
        
        self.new_theme_init_and_set()
        
        btn = lv.btn(lv.scr_act())
        btn.align(lv.ALIGN.BOTTOM_MID, 0, -20)
        
        label = lv.label(btn)
        label.set_text("New theme")
        
    def new_theme_apply_cb(self, th, obj):
        print(th,obj)
        if obj.get_class() == lv.btn_class:
            obj.add_style(self.th_new.style_btn, 0)
        
    def new_theme_init_and_set(self):
        print("new_theme_init_and_set")
        # Initialize the new theme from the current theme        
        self.th_new = NewTheme()
        self.th_new.set_apply_cb(self.new_theme_apply_cb)
        lv.disp_get_default().set_theme(self.th_new)


exampleStyle_14 = ExampleStyle_14()

API

Typedefs

typedef uint8_t lv_blend_mode_t
typedef uint8_t lv_text_decor_t
typedef uint8_t lv_border_side_t
typedef uint8_t lv_grad_dir_t

Enums

enum [anonymous]

Possible options how to blend opaque drawings

Values:

enumerator LV_BLEND_MODE_NORMAL

Simply mix according to the opacity value

enumerator LV_BLEND_MODE_ADDITIVE

Add the respective color channels

enumerator LV_BLEND_MODE_SUBTRACTIVE

Subtract the foreground from the background

enumerator LV_BLEND_MODE_MULTIPLY

Multiply the foreground and background

enum [anonymous]

Some options to apply decorations on texts. 'OR'ed values can be used.

Values:

enumerator LV_TEXT_DECOR_NONE
enumerator LV_TEXT_DECOR_UNDERLINE
enumerator LV_TEXT_DECOR_STRIKETHROUGH
enum [anonymous]

Selects on which sides border should be drawn 'OR'ed values can be used.

Values:

enumerator LV_BORDER_SIDE_NONE
enumerator LV_BORDER_SIDE_BOTTOM
enumerator LV_BORDER_SIDE_TOP
enumerator LV_BORDER_SIDE_LEFT
enumerator LV_BORDER_SIDE_RIGHT
enumerator LV_BORDER_SIDE_FULL
enumerator LV_BORDER_SIDE_INTERNAL

FOR matrix-like objects (e.g. Button matrix)

enum [anonymous]

The direction of the gradient.

Values:

enumerator LV_GRAD_DIR_NONE

No gradient (the grad_color property is ignored)

enumerator LV_GRAD_DIR_VER

Vertical (top to bottom) gradient

enumerator LV_GRAD_DIR_HOR

Horizontal (left to right) gradient

enum lv_style_prop_t

Enumeration of all built in style properties

Values:

enumerator LV_STYLE_PROP_INV
enumerator LV_STYLE_WIDTH
enumerator LV_STYLE_MIN_WIDTH
enumerator LV_STYLE_MAX_WIDTH
enumerator LV_STYLE_HEIGHT
enumerator LV_STYLE_MIN_HEIGHT
enumerator LV_STYLE_MAX_HEIGHT
enumerator LV_STYLE_X
enumerator LV_STYLE_Y
enumerator LV_STYLE_ALIGN
enumerator LV_STYLE_TRANSFORM_WIDTH
enumerator LV_STYLE_TRANSFORM_HEIGHT
enumerator LV_STYLE_TRANSLATE_X
enumerator LV_STYLE_TRANSLATE_Y
enumerator LV_STYLE_TRANSFORM_ZOOM
enumerator LV_STYLE_TRANSFORM_ANGLE
enumerator LV_STYLE_PAD_TOP
enumerator LV_STYLE_PAD_BOTTOM
enumerator LV_STYLE_PAD_LEFT
enumerator LV_STYLE_PAD_RIGHT
enumerator LV_STYLE_PAD_ROW
enumerator LV_STYLE_PAD_COLUMN
enumerator LV_STYLE_BG_COLOR
enumerator LV_STYLE_BG_COLOR_FILTERED
enumerator LV_STYLE_BG_OPA
enumerator LV_STYLE_BG_GRAD_COLOR
enumerator LV_STYLE_BG_GRAD_COLOR_FILTERED
enumerator LV_STYLE_BG_GRAD_DIR
enumerator LV_STYLE_BG_MAIN_STOP
enumerator LV_STYLE_BG_GRAD_STOP
enumerator LV_STYLE_BG_IMG_SRC
enumerator LV_STYLE_BG_IMG_OPA
enumerator LV_STYLE_BG_IMG_RECOLOR
enumerator LV_STYLE_BG_IMG_RECOLOR_FILTERED
enumerator LV_STYLE_BG_IMG_RECOLOR_OPA
enumerator LV_STYLE_BG_IMG_TILED
enumerator LV_STYLE_BORDER_COLOR
enumerator LV_STYLE_BORDER_COLOR_FILTERED
enumerator LV_STYLE_BORDER_OPA
enumerator LV_STYLE_BORDER_WIDTH
enumerator LV_STYLE_BORDER_SIDE
enumerator LV_STYLE_BORDER_POST
enumerator LV_STYLE_OUTLINE_WIDTH
enumerator LV_STYLE_OUTLINE_COLOR
enumerator LV_STYLE_OUTLINE_COLOR_FILTERED
enumerator LV_STYLE_OUTLINE_OPA
enumerator LV_STYLE_OUTLINE_PAD
enumerator LV_STYLE_SHADOW_WIDTH
enumerator LV_STYLE_SHADOW_OFS_X
enumerator LV_STYLE_SHADOW_OFS_Y
enumerator LV_STYLE_SHADOW_SPREAD
enumerator LV_STYLE_SHADOW_COLOR
enumerator LV_STYLE_SHADOW_COLOR_FILTERED
enumerator LV_STYLE_SHADOW_OPA
enumerator LV_STYLE_IMG_OPA
enumerator LV_STYLE_IMG_RECOLOR
enumerator LV_STYLE_IMG_RECOLOR_FILTERED
enumerator LV_STYLE_IMG_RECOLOR_OPA
enumerator LV_STYLE_LINE_WIDTH
enumerator LV_STYLE_LINE_DASH_WIDTH
enumerator LV_STYLE_LINE_DASH_GAP
enumerator LV_STYLE_LINE_ROUNDED
enumerator LV_STYLE_LINE_COLOR
enumerator LV_STYLE_LINE_COLOR_FILTERED
enumerator LV_STYLE_LINE_OPA
enumerator LV_STYLE_ARC_WIDTH
enumerator LV_STYLE_ARC_ROUNDED
enumerator LV_STYLE_ARC_COLOR
enumerator LV_STYLE_ARC_COLOR_FILTERED
enumerator LV_STYLE_ARC_OPA
enumerator LV_STYLE_ARC_IMG_SRC
enumerator LV_STYLE_TEXT_COLOR
enumerator LV_STYLE_TEXT_COLOR_FILTERED
enumerator LV_STYLE_TEXT_OPA
enumerator LV_STYLE_TEXT_FONT
enumerator LV_STYLE_TEXT_LETTER_SPACE
enumerator LV_STYLE_TEXT_LINE_SPACE
enumerator LV_STYLE_TEXT_DECOR
enumerator LV_STYLE_TEXT_ALIGN
enumerator LV_STYLE_RADIUS
enumerator LV_STYLE_CLIP_CORNER
enumerator LV_STYLE_OPA
enumerator LV_STYLE_COLOR_FILTER_DSC
enumerator LV_STYLE_COLOR_FILTER_OPA
enumerator LV_STYLE_ANIM_TIME
enumerator LV_STYLE_ANIM_SPEED
enumerator LV_STYLE_TRANSITION
enumerator LV_STYLE_BLEND_MODE
enumerator LV_STYLE_LAYOUT
enumerator LV_STYLE_BASE_DIR
enumerator _LV_STYLE_LAST_BUILT_IN_PROP
enumerator LV_STYLE_PROP_ANY

Functions

LV_EXPORT_CONST_INT(LV_IMG_ZOOM_NONE)
void lv_style_init(lv_style_t *style)

Initialize a style

注解

Do not call lv_style_init on styles that already have some properties because this function won't free the used memory, just sets a default state for the style. In other words be sure to initialize styles only once!

参数

style -- pointer to a style to initialize

void lv_style_reset(lv_style_t *style)

Clear all properties from a style and free all allocated memories.

参数

style -- pointer to a style

lv_style_prop_t lv_style_register_prop(void)
bool lv_style_remove_prop(lv_style_t *style, lv_style_prop_t prop)

Remove a property from a style

参数
  • style -- pointer to a style

  • prop -- a style property ORed with a state.

返回

true: the property was found and removed; false: the property wasn't found

void lv_style_set_prop(lv_style_t *style, lv_style_prop_t prop, lv_style_value_t value)

Set the value of property in a style. This function shouldn't be used directly by the user. Instead use lv_style_set_<prop_name>(). E.g. lv_style_set_bg_color()

参数
  • style -- pointer to style

  • prop -- the ID of a property (e.g. LV_STYLE_BG_COLOR)

  • value -- lv_style_value_t variable in which a field is set according to the type of prop

lv_res_t lv_style_get_prop(lv_style_t *style, lv_style_prop_t prop, lv_style_value_t *value)

Get the value of a property

注解

For performance reasons there are no sanity check on style

参数
  • style -- pointer to a style

  • prop -- the ID of a property

  • value -- pointer to a lv_style_value_t variable to store the value

返回

LV_RES_INV: the property wasn't found in the style (value is unchanged) LV_RES_OK: the property was fond, and value is set accordingly

static inline lv_res_t lv_style_get_prop_inlined(lv_style_t *style, lv_style_prop_t prop, lv_style_value_t *value)

Get the value of a property

注解

For performance reasons there are no sanity check on style

注解

This function is the same as lv_style_get_prop but inlined. Use it only on performance critical places

参数
  • style -- pointer to a style

  • prop -- the ID of a property

  • value -- pointer to a lv_style_value_t variable to store the value

返回

LV_RES_INV: the property wasn't found in the style (value is unchanged) LV_RES_OK: the property was fond, and value is set accordingly

void lv_style_transition_dsc_init(lv_style_transition_dsc_t *tr, const lv_style_prop_t props[], lv_anim_path_cb_t path_cb, uint32_t time, uint32_t delay, void *user_data)
lv_style_value_t lv_style_prop_get_default(lv_style_prop_t prop)

Get the default value of a property

参数

prop -- the ID of a property

返回

the default value

bool lv_style_is_empty(const lv_style_t *style)

Checks if a style is empty (has no properties)

参数

style -- pointer to a style

返回

uint8_t _lv_style_get_prop_group(lv_style_prop_t prop)

Tell the group of a property. If the a property from a group is set in a style the (1 << group) bit of style->has_group is set. It allows early skipping the style if the property is not exists in the style at all.

参数

prop -- a style property

返回

the group [0..7] 7 means all the custom properties with index > 112

static inline void lv_style_set_pad_all(lv_style_t *style, lv_coord_t value)
static inline void lv_style_set_pad_hor(lv_style_t *style, lv_coord_t value)
static inline void lv_style_set_pad_ver(lv_style_t *style, lv_coord_t value)
static inline void lv_style_set_pad_gap(lv_style_t *style, lv_coord_t value)
static inline void lv_style_set_size(lv_style_t *style, lv_coord_t value)
union lv_style_value_t
#include <lv_style.h>

A common type to handle all the property types in the same way.

Public Members

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

struct lv_style_transition_dsc_t
#include <lv_style.h>

Descriptor for style transitions

Public Members

const lv_style_prop_t *props

An array with the properties to animate.

void *user_data

A custom user data that will be passed to the animation's user_data

lv_anim_path_cb_t path_xcb

A path for the animation.

uint32_t time

Duration of the transition in [ms]

uint32_t delay

Delay before the transition in [ms]

struct lv_style_const_prop_t
#include <lv_style.h>

Descriptor of a constant style property.

Public Members

lv_style_prop_t prop
lv_style_value_t value
struct lv_style_t
#include <lv_style.h>

Descriptor of a style (a collection of properties and values).

Public Members

uint32_t sentinel
lv_style_value_t value1
uint8_t *values_and_props
const lv_style_const_prop_t *const_props
union lv_style_t::[anonymous] v_p
uint16_t prop1
uint16_t is_const
uint8_t has_group
uint8_t prop_cnt

Typedefs

typedef void (*lv_theme_apply_cb_t)(struct _lv_theme_t*, lv_obj_t*)
typedef struct _lv_theme_t lv_theme_t

Functions

lv_theme_t *lv_theme_get_from_obj(lv_obj_t *obj)

Get the theme assigned to the display of the object

参数

obj -- pointer to object

返回

the theme of the object's display (can be NULL)

void lv_theme_apply(lv_obj_t *obj)

Apply the active theme on an object

参数

obj -- pointer to an object

void lv_theme_set_parent(lv_theme_t *new_theme, lv_theme_t *parent)

Set a base theme for a theme. The styles from the base them will be added before the styles of the current theme. Arbitrary long chain of themes can be created by setting base themes.

参数
  • new_theme -- pointer to theme which base should be set

  • parent -- pointer to the base theme

void lv_theme_set_apply_cb(lv_theme_t *theme, lv_theme_apply_cb_t apply_cb)

Set an apply callback for a theme. The apply callback is used to add styles to different objects

参数
  • theme -- pointer to theme which callback should be set

  • apply_cb -- pointer to the callback

const lv_font_t *lv_theme_get_font_small(lv_obj_t *obj)

Get the small font of the theme

返回

pointer to the font

const lv_font_t *lv_theme_get_font_normal(lv_obj_t *obj)

Get the normal font of the theme

返回

pointer to the font

const lv_font_t *lv_theme_get_font_large(lv_obj_t *obj)

Get the subtitle font of the theme

返回

pointer to the font

lv_color_t lv_theme_get_color_primary(lv_obj_t *obj)

Get the primary color of the theme

返回

the color

lv_color_t lv_theme_get_color_secondary(lv_obj_t *obj)

Get the secondary color of the theme

返回

the color

struct _lv_theme_t

Public Members

lv_theme_apply_cb_t apply_cb
struct _lv_theme_t *parent

Apply the current theme's style on top of this theme.

void *user_data
struct _lv_disp_t *disp
lv_color_t color_primary
lv_color_t color_secondary
const lv_font_t *font_small
const lv_font_t *font_normal
const lv_font_t *font_large
uint32_t flags

Functions

static inline lv_coord_t lv_obj_get_style_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_min_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_max_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_height(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_min_height(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_max_height(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_x(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_y(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_align_t lv_obj_get_style_align(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_transform_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_transform_height(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_translate_x(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_translate_y(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_transform_zoom(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_transform_angle(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_pad_top(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_pad_bottom(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_pad_left(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_pad_right(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_pad_row(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_pad_column(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_radius(const struct _lv_obj_t *obj, uint32_t part)
static inline bool lv_obj_get_style_clip_corner(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline const lv_color_filter_dsc_t *lv_obj_get_style_color_filter_dsc(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_color_filter_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline uint32_t lv_obj_get_style_anim_time(const struct _lv_obj_t *obj, uint32_t part)
static inline uint32_t lv_obj_get_style_anim_speed(const struct _lv_obj_t *obj, uint32_t part)
static inline const lv_style_transition_dsc_t *lv_obj_get_style_transition(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_blend_mode_t lv_obj_get_style_blend_mode(const struct _lv_obj_t *obj, uint32_t part)
static inline uint16_t lv_obj_get_style_layout(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_base_dir_t lv_obj_get_style_base_dir(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_bg_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_bg_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_bg_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_bg_grad_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_bg_grad_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_grad_dir_t lv_obj_get_style_bg_grad_dir(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_bg_main_stop(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_bg_grad_stop(const struct _lv_obj_t *obj, uint32_t part)
static inline const void *lv_obj_get_style_bg_img_src(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_bg_img_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_bg_img_recolor(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_bg_img_recolor_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_bg_img_recolor_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline bool lv_obj_get_style_bg_img_tiled(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_border_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_border_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_border_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_border_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_border_side_t lv_obj_get_style_border_side(const struct _lv_obj_t *obj, uint32_t part)
static inline bool lv_obj_get_style_border_post(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_text_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_text_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_text_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline const lv_font_t *lv_obj_get_style_text_font(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_text_letter_space(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_text_line_space(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_text_decor_t lv_obj_get_style_text_decor(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_text_align_t lv_obj_get_style_text_align(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_img_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_img_recolor(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_img_recolor_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_img_recolor_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_outline_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_outline_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_outline_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_outline_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_outline_pad(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_shadow_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_shadow_ofs_x(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_shadow_ofs_y(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_shadow_spread(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_shadow_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_shadow_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_shadow_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_line_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_line_dash_width(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_line_dash_gap(const struct _lv_obj_t *obj, uint32_t part)
static inline bool lv_obj_get_style_line_rounded(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_line_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_line_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_line_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_coord_t lv_obj_get_style_arc_width(const struct _lv_obj_t *obj, uint32_t part)
static inline bool lv_obj_get_style_arc_rounded(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_arc_color(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_color_t lv_obj_get_style_arc_color_filtered(const struct _lv_obj_t *obj, uint32_t part)
static inline lv_opa_t lv_obj_get_style_arc_opa(const struct _lv_obj_t *obj, uint32_t part)
static inline const void *lv_obj_get_style_arc_img_src(const struct _lv_obj_t *obj, uint32_t part)
void lv_obj_set_style_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_min_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_max_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_height(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_min_height(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_max_height(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_x(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_y(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_align(struct _lv_obj_t *obj, lv_align_t value, lv_style_selector_t selector)
void lv_obj_set_style_transform_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_transform_height(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_translate_x(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_translate_y(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_transform_zoom(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_transform_angle(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_top(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_bottom(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_left(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_right(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_row(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_pad_column(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_radius(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_clip_corner(struct _lv_obj_t *obj, bool value, lv_style_selector_t selector)
void lv_obj_set_style_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_color_filter_dsc(struct _lv_obj_t *obj, const lv_color_filter_dsc_t *value, lv_style_selector_t selector)
void lv_obj_set_style_color_filter_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_anim_time(struct _lv_obj_t *obj, uint32_t value, lv_style_selector_t selector)
void lv_obj_set_style_anim_speed(struct _lv_obj_t *obj, uint32_t value, lv_style_selector_t selector)
void lv_obj_set_style_transition(struct _lv_obj_t *obj, const lv_style_transition_dsc_t *value, lv_style_selector_t selector)
void lv_obj_set_style_blend_mode(struct _lv_obj_t *obj, lv_blend_mode_t value, lv_style_selector_t selector)
void lv_obj_set_style_layout(struct _lv_obj_t *obj, uint16_t value, lv_style_selector_t selector)
void lv_obj_set_style_base_dir(struct _lv_obj_t *obj, lv_base_dir_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_grad_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_grad_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_grad_dir(struct _lv_obj_t *obj, lv_grad_dir_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_main_stop(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_grad_stop(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_img_src(struct _lv_obj_t *obj, const void *value, lv_style_selector_t selector)
void lv_obj_set_style_bg_img_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_img_recolor(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_img_recolor_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_img_recolor_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_bg_img_tiled(struct _lv_obj_t *obj, bool value, lv_style_selector_t selector)
void lv_obj_set_style_border_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_border_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_border_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_border_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_border_side(struct _lv_obj_t *obj, lv_border_side_t value, lv_style_selector_t selector)
void lv_obj_set_style_border_post(struct _lv_obj_t *obj, bool value, lv_style_selector_t selector)
void lv_obj_set_style_text_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_text_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_text_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_text_font(struct _lv_obj_t *obj, const lv_font_t *value, lv_style_selector_t selector)
void lv_obj_set_style_text_letter_space(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_text_line_space(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_text_decor(struct _lv_obj_t *obj, lv_text_decor_t value, lv_style_selector_t selector)
void lv_obj_set_style_text_align(struct _lv_obj_t *obj, lv_text_align_t value, lv_style_selector_t selector)
void lv_obj_set_style_img_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_img_recolor(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_img_recolor_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_img_recolor_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_outline_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_outline_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_outline_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_outline_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_outline_pad(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_ofs_x(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_ofs_y(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_spread(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_shadow_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_line_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_line_dash_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_line_dash_gap(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_line_rounded(struct _lv_obj_t *obj, bool value, lv_style_selector_t selector)
void lv_obj_set_style_line_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_line_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_line_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_arc_width(struct _lv_obj_t *obj, lv_coord_t value, lv_style_selector_t selector)
void lv_obj_set_style_arc_rounded(struct _lv_obj_t *obj, bool value, lv_style_selector_t selector)
void lv_obj_set_style_arc_color(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_arc_color_filtered(struct _lv_obj_t *obj, lv_color_t value, lv_style_selector_t selector)
void lv_obj_set_style_arc_opa(struct _lv_obj_t *obj, lv_opa_t value, lv_style_selector_t selector)
void lv_obj_set_style_arc_img_src(struct _lv_obj_t *obj, const void *value, lv_style_selector_t selector)

Functions

void lv_style_set_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_min_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_max_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_height(lv_style_t *style, lv_coord_t value)
void lv_style_set_min_height(lv_style_t *style, lv_coord_t value)
void lv_style_set_max_height(lv_style_t *style, lv_coord_t value)
void lv_style_set_x(lv_style_t *style, lv_coord_t value)
void lv_style_set_y(lv_style_t *style, lv_coord_t value)
void lv_style_set_align(lv_style_t *style, lv_align_t value)
void lv_style_set_transform_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_transform_height(lv_style_t *style, lv_coord_t value)
void lv_style_set_translate_x(lv_style_t *style, lv_coord_t value)
void lv_style_set_translate_y(lv_style_t *style, lv_coord_t value)
void lv_style_set_transform_zoom(lv_style_t *style, lv_coord_t value)
void lv_style_set_transform_angle(lv_style_t *style, lv_coord_t value)
void lv_style_set_pad_top(lv_style_t *style, lv_coord_t value)
void lv_style_set_pad_bottom(lv_style_t *style, lv_coord_t value)
void lv_style_set_pad_left(lv_style_t *style, lv_coord_t value)
void lv_style_set_pad_right(lv_style_t *style, lv_coord_t value)
void lv_style_set_pad_row(lv_style_t *style, lv_coord_t value)
void lv_style_set_pad_column(lv_style_t *style, lv_coord_t value)
void lv_style_set_radius(lv_style_t *style, lv_coord_t value)
void lv_style_set_clip_corner(lv_style_t *style, bool value)
void lv_style_set_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_color_filter_dsc(lv_style_t *style, const lv_color_filter_dsc_t *value)
void lv_style_set_color_filter_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_anim_time(lv_style_t *style, uint32_t value)
void lv_style_set_anim_speed(lv_style_t *style, uint32_t value)
void lv_style_set_transition(lv_style_t *style, const lv_style_transition_dsc_t *value)
void lv_style_set_blend_mode(lv_style_t *style, lv_blend_mode_t value)
void lv_style_set_layout(lv_style_t *style, uint16_t value)
void lv_style_set_base_dir(lv_style_t *style, lv_base_dir_t value)
void lv_style_set_bg_color(lv_style_t *style, lv_color_t value)
void lv_style_set_bg_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_bg_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_bg_grad_color(lv_style_t *style, lv_color_t value)
void lv_style_set_bg_grad_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_bg_grad_dir(lv_style_t *style, lv_grad_dir_t value)
void lv_style_set_bg_main_stop(lv_style_t *style, lv_coord_t value)
void lv_style_set_bg_grad_stop(lv_style_t *style, lv_coord_t value)
void lv_style_set_bg_img_src(lv_style_t *style, const void *value)
void lv_style_set_bg_img_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_bg_img_recolor(lv_style_t *style, lv_color_t value)
void lv_style_set_bg_img_recolor_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_bg_img_recolor_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_bg_img_tiled(lv_style_t *style, bool value)
void lv_style_set_border_color(lv_style_t *style, lv_color_t value)
void lv_style_set_border_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_border_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_border_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_border_side(lv_style_t *style, lv_border_side_t value)
void lv_style_set_border_post(lv_style_t *style, bool value)
void lv_style_set_text_color(lv_style_t *style, lv_color_t value)
void lv_style_set_text_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_text_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_text_font(lv_style_t *style, const lv_font_t *value)
void lv_style_set_text_letter_space(lv_style_t *style, lv_coord_t value)
void lv_style_set_text_line_space(lv_style_t *style, lv_coord_t value)
void lv_style_set_text_decor(lv_style_t *style, lv_text_decor_t value)
void lv_style_set_text_align(lv_style_t *style, lv_text_align_t value)
void lv_style_set_img_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_img_recolor(lv_style_t *style, lv_color_t value)
void lv_style_set_img_recolor_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_img_recolor_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_outline_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_outline_color(lv_style_t *style, lv_color_t value)
void lv_style_set_outline_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_outline_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_outline_pad(lv_style_t *style, lv_coord_t value)
void lv_style_set_shadow_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_shadow_ofs_x(lv_style_t *style, lv_coord_t value)
void lv_style_set_shadow_ofs_y(lv_style_t *style, lv_coord_t value)
void lv_style_set_shadow_spread(lv_style_t *style, lv_coord_t value)
void lv_style_set_shadow_color(lv_style_t *style, lv_color_t value)
void lv_style_set_shadow_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_shadow_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_line_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_line_dash_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_line_dash_gap(lv_style_t *style, lv_coord_t value)
void lv_style_set_line_rounded(lv_style_t *style, bool value)
void lv_style_set_line_color(lv_style_t *style, lv_color_t value)
void lv_style_set_line_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_line_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_arc_width(lv_style_t *style, lv_coord_t value)
void lv_style_set_arc_rounded(lv_style_t *style, bool value)
void lv_style_set_arc_color(lv_style_t *style, lv_color_t value)
void lv_style_set_arc_color_filtered(lv_style_t *style, lv_color_t value)
void lv_style_set_arc_opa(lv_style_t *style, lv_opa_t value)
void lv_style_set_arc_img_src(lv_style_t *style, const void *value)