github-code/lvgl
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(style) rename LV_STYLE_PROP_ALL to LV_STYLE_PROP_ANY

Browse Source
This commit is contained in:
Gabor Kiss-Vamosi
2021-04-23 10:35:36 +02:00
parent 21489eddc8
commit eaed66057b
9 changed files with 557 additions and 204 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
docs/misc/boxmodel.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 14 KiB

16
docs/overview/object.md
View File

@@ -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_<widget>_create(lv_obj_t * parent, <other paramaters if any>);
```
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:

256
docs/overview/style.md
View File

@@ -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 `<div class=".btn .btn-red">`.
@@ -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_<property_name>(&style, <state>, <value>);`
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_<property_name>(&style, <value>);` 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, <prop>, <result buf>);`.
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 `<prop>`.
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, <part>, &style)`
For example:
### 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 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, <part>)`
### 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_<property_name>(obj, <part>)`.
### 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_<property_name>(obj, <part>)`.
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 `<div style="color:red">`.
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_<property_name>(obj, <part>, <state>, <value>);`  
Besides "normal" styles, the objects can store local styles too. This concept is similar to inline styles in CSS (e.g. `<div style="color:red">`) 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_<property_name>(obj, <value>, <selector>);`  
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".