From eaed66057bada58f91aa724a2e9edd2d23ac7a97 Mon Sep 17 00:00:00 2001 From: Gabor Kiss-Vamosi Date: Fri, 23 Apr 2021 10:35:36 +0200 Subject: [PATCH] refactor(style) rename LV_STYLE_PROP_ALL to LV_STYLE_PROP_ANY --- docs/misc/boxmodel.png | Bin 0 -> 14553 bytes docs/overview/object.md | 16 +- docs/overview/style.md | 256 ++++++++++++++-------- scripts/style_api_gen.py | 456 +++++++++++++++++++++++++++++++-------- src/core/lv_obj.c | 2 +- src/core/lv_obj_style.c | 18 +- src/core/lv_obj_style.h | 7 +- src/misc/lv_style.c | 3 - src/misc/lv_style.h | 3 +- 9 files changed, 557 insertions(+), 204 deletions(-) create mode 100644 docs/misc/boxmodel.png diff --git a/docs/misc/boxmodel.png b/docs/misc/boxmodel.png new file mode 100644 index 0000000000000000000000000000000000000000..be3fe4f3ef7514e8a2ed8bf6637b4ff030721b2b GIT binary patch literal 14553 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 literal 0 HcmV?d00001 diff --git a/docs/overview/object.md b/docs/overview/object.md index 23599d27f..3fa3d5577 100644 --- a/docs/overview/object.md +++ b/docs/overview/object.md @@ -93,20 +93,20 @@ lv_obj_set_x(obj1, -30); /*Move the child a little bit off the parent*/ ### Create and delete objects -In LVGL objects can be created and deleted dynamically in run time. It means only the currently created (exisiting) objects consume RAM. +In LVGL objects can be created and deleted dynamically in run time. It means only the currently created (existing) objects consume RAM. It allows to create a screen just when a button is clicked to open it. A delete the screen when a new screen is loaded. -Or the UI can be created based on the current enviroment of the device. For example create meter, charts, bars, slider etc according to the currently attached sensors. +Or the UI can be created based on the current environment of the device. For example create meter, charts, bars, slider etc according to the currently attached sensors. -Every widget has its own **create** function with a protype like this: +Every widget has its own **create** function with a prototype like this: ```c lv_obj_t * lv__create(lv_obj_t * parent, ); ``` -In most of the cases the create functions have only a *parent* paramter that tells on which object create the new widget. +In most of the cases the create functions have only a *parent* parameter that tells on which object create the new widget. -The return value is a poinr to the created oject with `lv_obj_t *` type. +The return value is a pointer to the created object with `lv_obj_t *` type. There is a common **delete** function for all object types. It deletes the object and all of its children. @@ -163,7 +163,7 @@ Visit [Multi-display support](/overview/display) to learn more. ## Parts -The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main aand scrollbar parts but a [Slider](/widgets/slider) uses the main, the indicator and the knob parts. +The widgets are built from multiple parts. For example a [Base object](/widgets/obj) uses the main and scroll bar parts but a [Slider](/widgets/slider) uses the main, the indicator and the knob parts. Parts are similar to *pseudo elements* in CSS. The following predefined parts exist in LVGL: @@ -177,8 +177,8 @@ The following predefined parts exist in LVGL: - `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. -The main purpose of parts to allow styleing the "components" of the widgets. -Therefore the parts are described in more dteal in the [Style overview](/overview/style) section. +The main purpose of parts to allow styling the "components" of the widgets. +Therefore the parts are described in more detail in the [Style overview](/overview/style) section. ## States The object can be in a combinations of the following states: diff --git a/docs/overview/style.md b/docs/overview/style.md index 18030825b..b3d5697c1 100644 --- a/docs/overview/style.md +++ b/docs/overview/style.md @@ -6,32 +6,40 @@ *Styles* are used to set the appearance of the objects. Styles in lvgl are heavily inspired by CSS. The concept in nutshell is the following: -- A style is an `lv_style_t` variable which can hold properties, for example border width, text color and so on. It's similar to `class` in CSS. -- Not all properties have to be specified. Unspecified properties will use a default value. -- Styles can be assigned to objects to change their appearance. -- A style can be used by any number of objects. -- Styles can be cascaded which means multiple styles can be assigned to an object and each style can have different properties.   +- A style is an `lv_style_t` variable which can hold properties, for example 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. During the assignment the target part (*pseudo element* in CSS) and target state (*pseudo class*) can be specified. +For example 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 can be assigned to an object and each style can have different properties. +Therefore not all properties have to be specified in style. LVLG will look for a property until a style defines it or use a default if it's not spefied 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. - Later added styles have higher precedence. It means if a property is specified in two styles the later added will be used. - Some properties (e.g. text color) can be inherited from the parent(s) if it's not specified in the object. - Objects can have local styles that have higher precedence than "normal" styles. -- Unlike CSS (where pseudo-classes describes different states, e.g. `:hover`), in lvgl a property is assigned to a given state. (I.e. not the "class" is related to state but every single property has a state) +- 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. ## States -The objects can be in the following states: -- **LV_STATE_DEFAULT** (0x00): Normal, released -- **LV_STATE_CHECKED** (0x01): Toggled or checked -- **LV_STATE_FOCUSED** (0x02): Focused via keypad or encoder or clicked via touchpad/mouse -- **LV_STATE_EDITED**  (0x04): Edit by an encoder -- **LV_STATE_HOVERED** (0x08): Hovered by mouse (not supported now) -- **LV_STATE_PRESSED** (0x10): Pressed -- **LV_STATE_DISABLED** (0x20): Disabled or inactive +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 -Combination of states is also possible, for example `LV_STATE_FOCUSED | LV_STATE_PRESSED`. +The combination states the object can be focused and pressed at the same time. It represented as `LV_STATE_FOCUSED | LV_STATE_PRESSED`. -The style properties can be defined in every state and state combination. For example, setting a different background color for default and pressed state. +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 it means the property with `LV_STATE_DEFAULT` state.˛ If the property is not set even for the default state the default value will be used. (See later) @@ -42,16 +50,18 @@ To determine which state's property to use let's use an example. Let's see the b - `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 +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 0x10 precedence which is higher than the default state's 0x00 precedence, so gray color will be used. +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 `LV_STATE_PRESSED | LV_STATE_FOCUSED`. In this case, this combined state has 0x02 + 0x10 = 0x12 precedence, which higher than the pressed states precedence so rose color would be used. -6. When the object is checked there is no property to set the background color for this state. So in lack of a better option, the object remains white from the default state's property. +6. When the object is in checked state there is no property to set the background color for this state. So in lack of a better option, the object remains white from the default state's property. Some practical notes: +- The precedence (value) of states is quite intuitve and it's somthing the user would expect naturally. E.g. if an object is focused, the user still want to see if it's pressed, therefore pressed state has a higher perecedence. +If the foced state had higer precedence it would overwrite the pressed color. - If you want to set a property for all state (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. @@ -59,7 +69,7 @@ For example, finding background colors for released, pressed, checked + pressed, Instead, for example, use the background color for pressed and checked states and indicate the focused state with a different border color. ## 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 the properties in the other 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. It's the same concept when in CSS all the used classes are listed like `
`. @@ -74,105 +84,134 @@ In this case, when the button is released (it's in default state) it will be 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. ## 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 parent too until a part can tell a value for the property. The parents will use their own state to tell the value. -So is button is pressed, and text color comes from here, the pressed text color will be used. +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 can tell a value for the property. The parents will use their own state to tell 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 style. For example a [page](/widgets/page) has four 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. tabel 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](/widgets/slider) has three parts: - Background -- Scrollable -- Scrollbar -- Edge flash +- Indiactor +- Knob -There is three types of object parts **main**, **virtual** and **real**. - -The main part is usually the background and largest part of the object. Some object has only a main part. For example, a button has only a background. - -The virtual parts are additional parts just drawn on the fly to the main part. There is no "real" object behind them. -For example, the page's scrollbar is not a real object, it's just drawn when the page's background is drawn. -The virtual parts always have the same state as the main part. -If the property can be inherited, the main part will be also considered before going to the parent. - -The real parts are real objects created and managed by the main object. For example, the page's scrollable part is real object. -Real parts can be in different state than the main part. - -To see which parts an object has visit their documentation page. +It means the all three parts of teh slider can have their own styles. See later how to add style styles to objects and parts. ## 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. +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_(&style, , );` -For example the [above mentioned](#states) example looks like this: -```c -static lv_style_t style1; -lv_style_set_bg_color(&style1, LV_STATE_DEFAULT, LV_COLOR_WHITE); -lv_style_set_bg_color(&style1, LV_STATE_PRESSED, LV_COLOR_GRAY); -lv_style_set_bg_color(&style1, LV_STATE_FOCUSED, LV_COLOR_RED); -lv_style_set_bg_color(&style1, LV_STATE_FOCUSED | LV_STATE_PRESSED, lv_color_hex(0xf88)); -``` -It's possible to copy a style with `lv_style_copy(&style_destination, &style_source)`. After copy properties still can be added freely. +Property set functions looks like this: `lv_style_set_(&style, );` For example: +```c +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: ```c -lv_style_remove_prop(&style, LV_STYLE_BG_COLOR | (LV_STATE_PRESSED << LV_STYLE_STATE_POS)); +lv_style_remove_prop(&style, LV_STYLE_BG_COLOR); ``` -To get the value from style in a given state functions with the following prototype are available: `_lv_style_get_color/int/opa/ptr(&style, , );`. -The best matching property will be selected and it's precedence will be returned. `-1` will be returned if the property is not found. - -The form of the function (`...color/int/opa/ptr`) should be used according to the type of ``. - -For example: - +To get a properties value from style: ```c -lv_color_t color; -int16_t res; -res = _lv_style_get_color(&style1, LV_STYLE_BG_COLOR | (LV_STATE_PRESSED << LV_STYLE_STATE_POS), &color); -if(res >= 0) { - //the bg_color is loaded into `color` +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); } ``` -To reset a style (free all it's data) use +`lv_style_value_t` has 3 fields: +- `num` for integer, boolean and opacity prpperties +- `color` for color properies +- `ptr` for pointer properties + +To reset a style (free all its data) use ```c lv_style_reset(&style); ``` -## Managing style list +## Add and remove styles to a widget A style on its own not that useful. It should be assigned to an object to take its effect. -Every part of the objects stores a *style list* which is the list of assigned styles. -To add a style to an object use `lv_obj_add_style(obj, , &style)` -For example: +### Add styles +To add a style to an object use `lv_obj_add_style(obj, &style, )`. `` 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 omited +- `LV_PART_SCROLLBAR`: The scrollbar part in the default state. `LV_STATE_DEFAULT` can be omited. +- `LV_PART_SCROLLBAR | LV_STATE_SCROLLED`: The scrollbar part when the obejct 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 obejct is pressed and checked at the same time. + +Using `lv_obj_add_style`: ```c -lv_obj_add_style(btn, LV_BTN_PART_MAIN, &btn); /*Default button style*/ -lv_obj_add_style(btn, LV_BTN_PART_MAIN, &btn_red);  /*Overwrite only a some colors to red*/ +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*/ ``` -An objects style list can be reset with `lv_obj_reset_style_list(obj, )` +### Remove styles +To remove all styles from an object use `lv_obj_reove_style_all(obj)`. -If a style which is already assigned to an object changes (i.e. one of it's property is set to a new value) the objects using that style should be notified with `lv_obj_refresh_style(obj, part, property)`. To refresh all parts and proeprties use `lv_obj_refresh_style(obj, LV_OBJ_PART_ALL, LV_STYLE_PROP_ALL)`. +To remove specific styles use `lv_obj_remoev_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. -To get a final value of property, including cascading, inheritance, local styles and transitions (see below), get functions like this can be used: `lv_obj_get_style_(obj, )`. + +### Report style changes +If a style - which is already assigned to objecty - changes (i.e. one of it's property is set to a new value) the objects using that style should be notified. There are 3 options to do this: +1. If you know that the changed proeprties can be applied by a simple (e.g. color or opacity changes) redraw just call `lv_obj_invalidate(obj)`, `lv_obj_invalideate(lv_scr_act())`. +2. If something more complex change happened on a style and you know which object(s) are affacted 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. No make LVGL check all object wheter thy use the style and refresh them use `lv_obj_report_style_change(&style)`. If `style` is `NULL` all object's will be notified. + +### Get a property's value on an object +To get a final value of property - cosidering cascading, inheritance, local styles and transitions (see below) - get functions like this can be used: +`lv_obj_get_style_(obj, )`. These functions uses the object's current state and if no better candidate returns a default value.   For example: ```c -lv_color_t color = lv_obj_get_style_bg_color(btn, LV_BTN_PART_MAIN); +lv_color_t color = lv_obj_get_style_bg_color(btn, LV_PART_MAIN); ``` ## Local styles -In the object's style lists, so-called local properties can be stored as well. It's the same concept than CSS's `
`. -The local style is the same as a normal style, but it belongs only to a given object and can not be shared with other objects. -To set a local property use functions like `lv_obj_set_style_local_(obj, , , );`   +Besides "normal" styles, the objects can store local styles too. This concept is similar to inline styles in CSS (e.g. `
`) with some modification. + +So local styles are like normal styles but they can't be shared among other objects. If used, local styles are allocated automatically, and freed whe nthe object is deleted. +They are usuful to add local customizations to the object. + +Unlike in CSS, in LVGL local styles can be assiged to states (*pseudo-classes*) and parts (pseudo-elements). + +To set a local property use functions like `lv_obj_set_style_local_(obj, , );`   For example: ```c -lv_obj_set_style_local_bg_color(btn, LV_BTN_PART_MAIN, LV_STATE_DEFAULT, LV_COLOR_RED); +lv_obj_set_style_local_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED); ``` ## Transitions @@ -182,27 +221,64 @@ For example, on pressing a button its background color can be animated to the pr 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 function) +- 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 default state 500 ms transition time will be applied. +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 default state 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 presses state. So this example configuration will result in fast going to presses state and slow going back to default. +To describe a transition an `lv_transition_dsc_t` variable needs to initialized and added to a style: +```c +/*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_easeout, duration_ms, delay_ms); + +lv_style_set_transition(&style1, &trans1); +``` + ## Properties The following properties can be used in the styles. + + + ### Mixed properties -- **radius** (`lv_style_int_t`): Set the radius of the background. 0: no radius, `LV_RADIUS_CIRCLE`: maximal radius. Default value: 0. -- **clip_corner** (`bool`): `true`: enable to clip the overflowed content on the rounded (radius > 0) corners. Default value: `false`. -- **size** (`lv_style_int_t`): Size of internal elements of the widgets. See the documentation of the widgets if this property is used or not. Default value: `LV_DPI / 20`. -- **transform_width**  (`lv_style_int_t`): Make the object wider on both sides with this value. Default value: 0. -- **transform_height**  (`lv_style_int_t`) Make the object higher on both sides with this value. Default value: 0. -- **transform_angle**  (`lv_style_int_t`): Rotate the image-like objects. It's uinit is 0.1 deg, for 45 deg use 450. Default value: 0. -- **transform_zoom**  (`lv_style_int_t`) Zoom image-like objects. 256 (or `LV_IMG_ZOOM_NONE`) for normal size, 128 half size, 512 double size, ans so on. Default value: `LV_IMG_ZOOM_NONE`. -- **opa_scale** (`lv_style_int_t`): Inherited. Scale down all opacity values of the object by this factor. As it's inherited the children objects will be affected too. Default value: `LV_OPA_COVER`. +| Name | Description | Values | Default | Inherited | Layout | Ext. draw | +|------|--------|---------|-------------|------------|--------|-----------| +| **radius** | Set the radius on every corner | px (>= 0) or `LV_RADIUS_CIRCLE` for max. radius | 0 | No | No | No | +| **clip_corner** | Enable to clip the overflowed content on the rounded corners | `true`, `false` | `false` | No | No | No | +| **transform_width** | Make the object wider on both sides with this value. Percentage values are relative to the object's width. | px or `lv_pct()` | 0 | No | Yes | No | +| **transform_height** | Make the object higher on both sides with this value. Percentage values are relative to the object's height. | `px or `lv_pct()` | 0 | No | Yes | No | +| **translate_x** | Move the object with this value in X direction. Applied after layouts positioning. Percentage values are relative to the object's width. | `px or `lv_pct()` | 0 | Yes | No | No | +| **translate_y** | Move the object with this value in Y direction. Applied after layouts positioning. Percentage values are relative to the object's height. | `px or `lv_pct()` | 0 | Yes | No | No | +| **transform_angle** | Rotate image-like objects. Multiplied with the zoom set on the object. Added to the rotation set on the object.| 0.1 degree, e.g. 45 deg. = 450 | 0 | Yes | No | No | +| **transform_zoom** | Zoom image-like objects. Multiplied with the zoom set on the object. | 256 (or `LV_IMG_ZOOM_NONE`): normal size, 128: half size, 512: double size, and so on | 256 | Yes | No | No | +| **opa** | Scale down all opacity values of the object by this factor. | 0..255 or `LV_OPA_...` | `LV_OPA_COVER` | Yes | No | Yes | + +### radius +Set the radius on every corner. It's value can be in px (>= 0) or `LV_RADIUS_CIRCLE` for maximal radius + +| Default | Inherited | Layout | Ext. draw | +|---------|------------|--------|-----------| +| 0 | No | No | No | + + +| **clip_corner** | Enable to clip the overflowed content on the rounded corners | `true`, `false` | `false` | No | No | No | +| **transform_width** | Make the object wider on both sides with this value. Percentage values are relative to the object's width. | px or `lv_pct()` | 0 | No | Yes | No | +| **transform_height** | Make the object higher on both sides with this value. Percentage values are relative to the object's height. | `px or `lv_pct()` | 0 | No | Yes | No | +| **translate_x** | Move the object with this value in X direction. Applied after layouts positioning. Percentage values are relative to the object's width. | `px or `lv_pct()` | 0 | Yes | No | No | +| **translate_y** | Move the object with this value in Y direction. Applied after layouts positioning. Percentage values are relative to the object's height. | `px or `lv_pct()` | 0 | Yes | No | No | +| **transform_angle** | Rotate image-like objects. Multiplied with the zoom set on the object. Added to the rotation set on the object.| 0.1 degree, e.g. 45 deg. = 450 | 0 | Yes | No | No | +| **transform_zoom** | Zoom image-like objects. Multiplied with the zoom set on the object. | 256 (or `LV_IMG_ZOOM_NONE`): normal size, 128: half size, 512: double size, and so on | 256 | Yes | No | No | +| **opa** | Scale down all opacity values of the object by this factor. | 0..255 or `LV_OPA_...` | `LV_OPA_COVER` | Yes | No | Yes | + ### Padding and margin properties *Padding* sets the space on the inner sides of the edges. It means "I don't want my children too close to my sides, so keep this space". diff --git a/scripts/style_api_gen.py b/scripts/style_api_gen.py index adb41ccd8..56966d80f 100755 --- a/scripts/style_api_gen.py +++ b/scripts/style_api_gen.py @@ -3,93 +3,342 @@ import sys, os props = [ -{'name': 'RADIUS', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'CLIP_CORNER', 'style_type': 'num', 'var_type': 'bool' }, -{'name': 'TRANSFORM_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TRANSFORM_HEIGHT', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TRANSLATE_X', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TRANSLATE_Y', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TRANSFORM_ZOOM', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TRANSFORM_ANGLE', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'COLOR_FILTER_DSC', 'style_type': 'ptr', 'var_type': 'const lv_color_filter_dsc_t *' }, -{'name': 'COLOR_FILTER_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'ANIM_TIME', 'style_type': 'num', 'var_type': 'uint32_t' }, -{'name': 'TRANSITION', 'style_type': 'ptr', 'var_type': 'const lv_style_transition_dsc_t *' }, -{'name': 'BLEND_MODE', 'style_type': 'num', 'var_type': 'lv_blend_mode_t' }, -{'name': 'PAD_TOP', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'PAD_BOTTOM', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'PAD_LEFT', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'PAD_RIGHT', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'PAD_ROW', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'PAD_COLUMN', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'MIN_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'MAX_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'HEIGHT', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'MIN_HEIGHT', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'MAX_HEIGHT', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'X', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'Y', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'ALIGN', 'style_type': 'num', 'var_type': 'lv_align_t' }, -{'name': 'LAYOUT', 'style_type': 'num', 'var_type': 'uint16_t' }, -{'name': 'BG_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BG_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BG_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'BG_GRAD_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BG_GRAD_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BG_GRAD_DIR', 'style_type': 'num', 'var_type': 'lv_grad_dir_t' }, -{'name': 'BG_MAIN_STOP', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'BG_GRAD_STOP', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'BG_IMG_SRC', 'style_type': 'ptr', 'var_type': 'const void *' }, -{'name': 'BG_IMG_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'BG_IMG_RECOLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BG_IMG_RECOLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BG_IMG_RECOLOR_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'BG_IMG_TILED', 'style_type': 'num', 'var_type': 'bool' }, -{'name': 'BORDER_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BORDER_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'BORDER_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'BORDER_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'BORDER_SIDE', 'style_type': 'num', 'var_type': 'lv_border_side_t' }, -{'name': 'BORDER_POST', 'style_type': 'num', 'var_type': 'bool' }, -{'name': 'TEXT_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'TEXT_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'TEXT_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'TEXT_FONT', 'style_type': 'ptr', 'var_type': 'const lv_font_t *' }, -{'name': 'TEXT_LETTER_SPACE', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TEXT_LINE_SPACE', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'TEXT_DECOR', 'style_type': 'num', 'var_type': 'lv_text_decor_t' }, -{'name': 'TEXT_ALIGN', 'style_type': 'num', 'var_type': 'lv_text_align_t' }, -{'name': 'IMG_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'IMG_RECOLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'IMG_RECOLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'IMG_RECOLOR_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'OUTLINE_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'OUTLINE_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'OUTLINE_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'OUTLINE_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'OUTLINE_PAD', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'SHADOW_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'SHADOW_OFS_X', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'SHADOW_OFS_Y', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'SHADOW_SPREAD', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'SHADOW_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'SHADOW_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'SHADOW_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'LINE_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'LINE_DASH_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'LINE_DASH_GAP', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'LINE_ROUNDED', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'LINE_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'LINE_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'LINE_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'ARC_WIDTH', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'ARC_ROUNDED', 'style_type': 'num', 'var_type': 'lv_coord_t' }, -{'name': 'ARC_COLOR', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'ARC_COLOR_FILTERED', 'style_type': 'color', 'var_type': 'lv_color_t' }, -{'name': 'ARC_OPA', 'style_type': 'num', 'var_type': 'lv_opa_t' }, -{'name': 'ARC_IMG_SRC', 'style_type': 'ptr', 'var_type': 'const void *' }, +{'name': 'RADIUS', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the radius on every corner. The value is interpreted in pixel (>= 0) or `LV_RADIUS_CIRCLE` for max. radius"}, + +{'name': 'CLIP_CORNER', + 'style_type': 'num', 'var_type': 'bool', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Enable to clip the overflowed content on the rounded corner. Can be `true` or `false`." }, + +{'name': 'TRANSFORM_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Make the object wider on both sides with this value. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's width." }, + +{'name': 'TRANSFORM_HEIGHT', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Make the object higher on both sides with this value. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height." }, + +{'name': 'TRANSLATE_X', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Move the object with this value in X direction. Applied after layouts, aligns and other positionings. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's width." }, + +{'name': 'TRANSLATE_Y', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Move the object with this value in Y direction. Applied after layouts, aligns and other positionings. Pixel and percentage (with `lv_pct(x)`) values can be used. Percentage values are relative to the object's height." }, + +{'name': 'TRANSFORM_ZOOM', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Zoom image-like objects. Multiplied with the zoom set on the object. The value 256 (or `LV_IMG_ZOOM_NONE`) maens normal size, 128 half size, 512 double size, and so on" }, + +{'name': 'TRANSFORM_ANGLE', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': " Rotate image-like objects. Added to the rotation set on the object. The value is interpreted in 0.1 degree unit. E.g. 45 deg. = 450 " }, + +{'name': 'OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Scale down all opacity values of the object by this factor. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency." }, + +{'name': 'COLOR_FILTER_DSC', + 'style_type': 'ptr', 'var_type': 'const lv_color_filter_dsc_t *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Mix a color to all colors of the object." }, + +{'name': 'COLOR_FILTER_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "The intensity of mixing of color filter."}, + +{'name': 'ANIM_TIME', + 'style_type': 'num', 'var_type': 'uint32_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "The animation time in milliseconds. It's meaning is widget specific. E.g. blink time of the cursor on the text area or scroll speed of a roller. See the widgets' documentation to learn more."}, + +{'name': 'TRANSITION', + 'style_type': 'ptr', 'var_type': 'const lv_style_transition_dsc_t *' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "An initialized `lv_style_transition_dsc_t` to describe a transition."}, + +{'name': 'BLEND_MODE', + 'style_type': 'num', 'var_type': 'lv_blend_mode_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Describes how to blend the colors to the background. The possibel values are `LV_BLEND_MODE_NORMAL/ADDITIVE/SUBTRACTIVE`"}, + +{'name': 'PAD_TOP', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the padding on the top. It makes the content arae smaller in this direction."}, + +{'name': 'PAD_BOTTOM', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the padding on the bottom. It makes the content arae smaller in this direction."}, + +{'name': 'PAD_LEFT', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the padding on the left. It makes the content arae smaller in this direction."}, + +{'name': 'PAD_RIGHT', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the padding on the right. It makes the content arae smaller in this direction."}, + +{'name': 'PAD_ROW', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the padding between the rows. Used by the layouts."}, + +{'name': 'PAD_COLUMN', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the padding between the columns. Used by the layouts."}, + +{'name': 'WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the width of object. Pixel, percentage and `LV_SIZE_CONTENT` values can be used. Percentage values are relative to the width of the parent's content area."}, + +{'name': 'MIN_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets a minimal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area."}, + +{'name': 'MAX_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets a maximal width. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area."}, + +{'name': 'HEIGHT', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the height of object. Pixel, percentage and `LV_SIZE_CONTENT` can be used. Percentage values are relative to the height of the parent's content area."}, + +{'name': 'MIN_HEIGHT', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets a minimal height. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area."}, + +{'name': 'MAX_HEIGHT', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets a maximal height. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area."}, + +{'name': 'X', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the X coordinate of the object considering the set `align`. Pixel and percentage values can be used. Percentage values are relative to the width of the parent's content area."}, + +{'name': 'Y', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the Y coordinate of the object considering the set `align`. Pixel and percentage values can be used. Percentage values are relative to the height of the parent's content area."}, + +{'name': 'ALIGN', + 'style_type': 'num', 'var_type': 'lv_align_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the alignment whcih tells from which point of teh aprent the X and Y coordinates should be interptreted. The possibel values are: `LV_ALIGN_TOP_LEFT/MID/RIGHT`, `LV_ALIGN_BOTTOM_LEFT/MID/RIGHT`, `LV_ALIGN_LEFT/RIGHT_MID`, `LV_ALIGN_CENTER`"}, + +{'name': 'LAYOUT', + 'style_type': 'num', 'var_type': 'uint16_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the layout if the object. The children will be repositioned and resized according to the policies set for the layout. For the possible values see the documentation of the layouts."}, + +{'name': 'BG_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the background color of the object."}, + +{'name': 'BG_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t' }, +{'name': 'BG_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of the bacground. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'BG_GRAD_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the gradien color of the background. Used only if `grad_dir` is not `LV_GRAD_DIR_NONE`"}, + +{'name': 'BG_GRAD_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t' }, + +{'name': 'BG_GRAD_DIR', + 'style_type': 'num', 'var_type': 'lv_grad_dir_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the direction of the gradient of the background. The possible values are `LV_GRAD_DIR_NONE/HOR/VER`."}, + +{'name': 'BG_MAIN_STOP', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the point from which the backround color should start for gradients. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on"}, + +{'name': 'BG_GRAD_STOP', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the point from which the backround's gradient color should start. 0 means to top/left side, 255 the bottom/right side, 128 the center, and so on"}, + +{'name': 'BG_IMG_SRC', + 'style_type': 'ptr', 'var_type': 'const void *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set a background image. Can be a pointer to `lv_img_dsc_t`, a path to a file or an `LV_SYMBOL_...`"}, + +{'name': 'BG_IMG_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of the background image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'BG_IMG_RECOLOR', + 'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set a color to mix to the background image."}, + +{'name': 'BG_IMG_RECOLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t'}, + +{'name': 'BG_IMG_RECOLOR_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the intensity of background image recoloring. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means no mixing, 256, `LV_OPA_100` or `LV_OPA_COVER` means full recoloring, other values or LV_OPA_10, LV_OPA_20, etc are interpreted proportinally."}, + +{'name': 'BG_IMG_TILED', + 'style_type': 'num', 'var_type': 'bool', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "If enbaled the background image will be tiled. The possible values are `ture` or `false`."}, + +{'name': 'BORDER_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the color of the border"}, + +{'name': 'BORDER_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t' }, + +{'name': 'BORDER_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opcitiy of the border. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'BORDER_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set hte width of the border. Only pixel values can be used."}, + +{'name': 'BORDER_SIDE', + 'style_type': 'num', 'var_type': 'lv_border_side_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set ony which side(s) the border should be drawn. The possible values are `LV_BORDER_SIDE_NONE/TOP/BOTTOM/LEFT/RIGHT/INTERNAL`. OR-ed calues an be used as well, e.g. `LV_BORDER_SIDE_TOP | LV_BORDER_SIDE_LEFT`."}, + +{'name': 'BORDER_POST', +'style_type': 'num', 'var_type': 'bool' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets wheter the the border should be drawn before or after the children ar drawn. `true`: after children, `false`: before children"}, + +{'name': 'TEXT_COLOR', +'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Sets the color of the text."}, + +{'name': 'TEXT_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t'}, + +{'name': 'TEXT_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opícity of the text. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'TEXT_FONT', + 'style_type': 'ptr', 'var_type': 'const lv_font_t *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the font of the text (a pointer `lv_font_t *`). "}, + +{'name': 'TEXT_LETTER_SPACE', +'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the letter space in pixels"}, + +{'name': 'TEXT_LINE_SPACE', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the line space in pixels."}, + +{'name': 'TEXT_DECOR', + 'style_type': 'num', 'var_type': 'lv_text_decor_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set decoration for the text. The possible values are `LV_TEXT_DECOR_NONE/UNDERLINE/STRIKETHROUGH`. OR-ed values can be used as well." }, + +{'name': 'TEXT_ALIGN', +'style_type': 'num', 'var_type': 'lv_text_align_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set how to align the lines of the text. Note that it doesn't align the object itself, only the lines inside the obejct. The possibel values are `LV_TEXT_ALIGN_LEFT/CENTER/RIGHT/AUTO`. `LV_TEXT_ALIGN_AUTO` detect the text base direction and uses left or right alignment accordingly"}, + +{'name': 'IMG_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of an image. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'IMG_RECOLOR', + 'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set color to mixt to the image."}, + +{'name': 'IMG_RECOLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t'}, + +{'name': 'IMG_RECOLOR_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the intensity of the color mixing. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'OUTLINE_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the width of the outline in pixels. "}, + +{'name': 'OUTLINE_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the color of the outline."}, + +{'name': 'OUTLINE_COLOR_FILTERED', +'style_type': 'color', 'var_type': 'lv_color_t'}, + +{'name': 'OUTLINE_OPA', +'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of the outline. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'OUTLINE_PAD', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the padding of the outline, i.e. the gap between object and the outline."}, + +{'name': 'SHADOW_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the width of the shadow in pixels. The value should be >= 0."}, + +{'name': 'SHADOW_OFS_X', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set an offset on the shadow in pixels in X direction. "}, + +{'name': 'SHADOW_OFS_Y', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set an offset on the shadow in pixels in Y direction. "}, + +{'name': 'SHADOW_SPREAD', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Make the shadow calcuation to use a larger or smaller rectangle as base. The value can be in pixel t make the area larger/smaller"}, + +{'name': 'SHADOW_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the color of the shadow"}, + +{'name': 'SHADOW_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t'}, + +{'name': 'SHADOW_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of the shadow. Value 0, `LV_OPA_0` or `LV_OPA_TRANSP` means fully transparent, 256, `LV_OPA_100` or `LV_OPA_COVER` means fully covering, other values or LV_OPA_10, LV_OPA_20, etc means semi transparency."}, + +{'name': 'LINE_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the width of the lines in pixel."}, + +{'name': 'LINE_DASH_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the width of dashes in pixel. Note that dash works only on horizontal and vertical lines"}, + +{'name': 'LINE_DASH_GAP', + 'style_type': 'num', 'var_type': 'lv_coord_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the gap between dashes in pixel. Note that dash works only on horizontal and vertical lines"}, + +{'name': 'LINE_ROUNDED', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Make the end points of the lines rounded. `true`: rounded, `false`: perpadicular line ending "}, + +{'name': 'LINE_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the color fo the lines."}, + +{'name': 'LINE_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t'}, + +{'name': 'LINE_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of the lines."}, + +{'name': 'ARC_WIDTH', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the width (ticjkness) of the arcs in pixel."}, + +{'name': 'ARC_ROUNDED', + 'style_type': 'num', 'var_type': 'lv_coord_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Make the end points of the arcs rounded. `true`: rounded, `false`: perpadicular line ending "}, + +{'name': 'ARC_COLOR', + 'style_type': 'color', 'var_type': 'lv_color_t', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the color of the arc."}, + +{'name': 'ARC_COLOR_FILTERED', + 'style_type': 'color', 'var_type': 'lv_color_t' }, + +{'name': 'ARC_OPA', + 'style_type': 'num', 'var_type': 'lv_opa_t' , 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set the opacity of the arcs."}, + +{'name': 'ARC_IMG_SRC', + 'style_type': 'ptr', 'var_type': 'const void *', 'default':0, 'inherited': 0, 'layout': 0, 'ext_draw': 0, + 'dsc': "Set an image from which the arc will be masked out. It's useful to display complex exxects on the arcs. Can be a pointer to `lv_img_dsc_t` or a path to a file"}, ] def style_get_cast(style_type, var_type): @@ -135,6 +384,31 @@ def local_style_set(p): print("}") print("") +def docs(p): + if "dsc" not in p: return + + d = str(p["default"]) + + i = "No" + if p["inherited"]: i = "Yes" + + l = "No" + if p["layout"]: l = "Yes" + + e = "No" + if p["ext_draw"]: e = "Yes" + + print("### " + p["name"]) + print(p["dsc"]) + + print("
    ") + print("
  • Default " + d + "
    • ") + print("
  • Inherited " + i + "
    • ") + print("
  • Layout " + l + "
    • ") + print("
  • Ext. draw " + e + "
    • ") + print("
") + print("") + base_dir = os.path.abspath(os.path.dirname(__file__)) sys.stdout = open(base_dir + '/../src/core/lv_obj_style_gen.h', 'w') @@ -148,3 +422,11 @@ sys.stdout = open(base_dir + '/../src/misc/lv_style_gen.h', 'w') for p in props: style_set(p) + +sys.stdout = open(base_dir + '/style_props.md', 'w') + +for p in props: + docs(p) + + + diff --git a/src/core/lv_obj.c b/src/core/lv_obj.c index 7dcbe6e3f..6b018b364 100644 --- a/src/core/lv_obj.c +++ b/src/core/lv_obj.c @@ -1030,7 +1030,7 @@ static void lv_obj_set_state(lv_obj_t * obj, lv_state_t new_state) lv_obj_invalidate(obj); if(cmp_res == _LV_STYLE_STATE_CMP_DIFF_LAYOUT) { - lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ALL); + lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY); } else if(cmp_res == _LV_STYLE_STATE_CMP_DIFF_DRAW_PAD) { lv_obj_refresh_ext_draw_size(obj); diff --git a/src/core/lv_obj_style.c b/src/core/lv_obj_style.c index 2c1892354..9faa10105 100644 --- a/src/core/lv_obj_style.c +++ b/src/core/lv_obj_style.c @@ -75,7 +75,7 @@ void _lv_obj_style_init(void) void lv_obj_add_style(struct _lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector) { - trans_del(obj, selector, LV_STYLE_PROP_ALL, NULL); + trans_del(obj, selector, LV_STYLE_PROP_ANY, NULL); uint32_t i; /*Go after the transition and local styles*/ @@ -100,7 +100,7 @@ void lv_obj_add_style(struct _lv_obj_t * obj, lv_style_t * style, lv_style_selec obj->styles[i].style = style; obj->styles[i].selector = selector; - lv_obj_refresh_style(obj, selector, LV_STYLE_PROP_ALL); + lv_obj_refresh_style(obj, selector, LV_STYLE_PROP_ANY); } void lv_obj_remove_style(lv_obj_t * obj, lv_style_t * style, lv_style_selector_t selector) @@ -121,7 +121,7 @@ void lv_obj_remove_style(lv_obj_t * obj, lv_style_t * style, lv_style_selector_t } if(obj->styles[i].is_trans) { - trans_del(obj, part, LV_STYLE_PROP_ALL, NULL); + trans_del(obj, part, LV_STYLE_PROP_ANY, NULL); } if(obj->styles[i].is_local || obj->styles[i].is_trans) { @@ -144,7 +144,7 @@ void lv_obj_remove_style(lv_obj_t * obj, lv_style_t * style, lv_style_selector_t *Therefore it doesn't needs to be incremented*/ } if(deleted) { - lv_obj_refresh_style(obj, part, LV_STYLE_PROP_ALL); + lv_obj_refresh_style(obj, part, LV_STYLE_PROP_ANY); } } @@ -172,11 +172,11 @@ void lv_obj_refresh_style(lv_obj_t * obj, lv_style_selector_t selector, lv_style lv_part_t part = lv_obj_style_get_selector_part(selector); - if((part == LV_PART_ANY || part == LV_PART_MAIN) && (prop == LV_STYLE_PROP_ALL || (prop & LV_STYLE_PROP_LAYOUT_REFR))) { + if((part == LV_PART_ANY || part == LV_PART_MAIN) && (prop == LV_STYLE_PROP_ANY || (prop & LV_STYLE_PROP_LAYOUT_REFR))) { lv_event_send(obj, LV_EVENT_STYLE_CHANGED, NULL); /*To update layout*/ if(obj->parent) obj->parent->layout_inv = 1; } - if((part == LV_PART_ANY || part == LV_PART_MAIN) && (prop == LV_STYLE_PROP_ALL || (prop & LV_STYLE_PROP_PARENT_LAYOUT_REFR))) { + if((part == LV_PART_ANY || part == LV_PART_MAIN) && (prop == LV_STYLE_PROP_ANY || (prop & LV_STYLE_PROP_PARENT_LAYOUT_REFR))) { lv_obj_t * parent = lv_obj_get_parent(obj); if(parent) lv_obj_mark_layout_as_dirty(parent); } @@ -185,7 +185,7 @@ void lv_obj_refresh_style(lv_obj_t * obj, lv_style_selector_t selector, lv_style } lv_obj_invalidate(obj); - if(prop == LV_STYLE_PROP_ALL || + if(prop == LV_STYLE_PROP_ANY || ((prop & LV_STYLE_PROP_INHERIT) && ((prop & LV_STYLE_PROP_EXT_DRAW) || (prop & LV_STYLE_PROP_LAYOUT_REFR)))) { if(part != LV_PART_SCROLLBAR) { @@ -604,7 +604,7 @@ static void report_style_change_core(void * style, lv_obj_t * obj) uint32_t i; for(i = 0; i < obj->style_cnt; i++) { if(style == NULL || obj->styles[i].style == style) { - lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ALL); + lv_obj_refresh_style(obj, LV_PART_ANY, LV_STYLE_PROP_ANY); break; } } @@ -653,7 +653,7 @@ static bool trans_del(lv_obj_t * obj, lv_part_t part, lv_style_prop_t prop, tran /*'tr' might be deleted, so get the next object while 'tr' is valid*/ tr_prev = _lv_ll_get_prev(&LV_GC_ROOT(_lv_obj_style_trans_ll), tr); - if(tr->obj == obj && (part == tr->selector || part == LV_PART_ANY) && (prop == tr->prop || prop == LV_STYLE_PROP_ALL)) { + if(tr->obj == obj && (part == tr->selector || part == LV_PART_ANY) && (prop == tr->prop || prop == LV_STYLE_PROP_ANY)) { /*Remove the transitioned property from trans. style *to allow changing it by normal styles*/ uint32_t i; diff --git a/src/core/lv_obj_style.h b/src/core/lv_obj_style.h index 693cd3d4e..1fdc8ba7b 100644 --- a/src/core/lv_obj_style.h +++ b/src/core/lv_obj_style.h @@ -76,9 +76,8 @@ void lv_obj_add_style(struct _lv_obj_t * obj, lv_style_t * style, lv_style_selec /** * Add a style to an object. * @param obj pointer to an object - * @param part a part of the object from which the style should be removed E.g. `LV_PART_MAIN` or `LV_PART_KNOB` - * @param state a state or combination of states from which the style should be removed - * @param style pointer to a style to remove + * @param style pointer to a style to remove. Can be NULL to check only the selector + * @param selector OR-ed values of states and a part to remove only styles with matching selectors. LV_STATE_ANY and LV_PART_ANY can be used * @example lv_obj_remove_style(obj, LV_PART_ANY, LV_STATE_ANY, &style); //Remove a specific style * @example lv_obj_remove_style(obj, LV_PART_MAIN, LV_STATE_ANY, &style); //Remove all styles from the main part * @example lv_obj_remove_style(obj, LV_PART_ANY, LV_STATE_ANY, NULL); //Remove all styles @@ -105,7 +104,7 @@ void lv_obj_report_style_change(lv_style_t * style); * Notify an object and its children about its style is modified. * @param obj pointer to an object * @param part the part whose style was changed. E.g. `LV_PART_ANY`, `LV_PART_MAIN` - * @param prop `LV_STYLE_PROP_ALL` or an `LV_STYLE_...` property. + * @param prop `LV_STYLE_PROP_ANY` or an `LV_STYLE_...` property. * It is used to optimize what needs to be refreshed. * `LV_STYLE_PROP_INV` to perform only a style cache update */ diff --git a/src/misc/lv_style.c b/src/misc/lv_style.c index 68bebf13f..c5782ef43 100644 --- a/src/misc/lv_style.c +++ b/src/misc/lv_style.c @@ -237,9 +237,6 @@ lv_style_value_t lv_style_prop_get_default(lv_style_prop_t prop) case LV_STYLE_TEXT_FONT: value.ptr = LV_FONT_DEFAULT; break; - case LV_STYLE_SIZE: - value.num = 5; - break; case LV_STYLE_MAX_WIDTH: case LV_STYLE_MAX_HEIGHT: value.num = LV_COORD_MAX; diff --git a/src/misc/lv_style.h b/src/misc/lv_style.h index c7cbb972f..08acd87ee 100644 --- a/src/misc/lv_style.h +++ b/src/misc/lv_style.h @@ -126,7 +126,6 @@ typedef enum { LV_STYLE_COLOR_FILTER_OPA = 11, LV_STYLE_ANIM_TIME = 12, LV_STYLE_TRANSITION = 13, - LV_STYLE_SIZE = 14, LV_STYLE_BLEND_MODE = 15, /*Group 1*/ @@ -220,7 +219,7 @@ typedef enum { _LV_STYLE_LAST_BUILT_IN_PROP = 111, - LV_STYLE_PROP_ALL = 0xFFFF + LV_STYLE_PROP_ANY = 0xFFFF }lv_style_prop_t; /**