`) with some modification.
-
-Local styles are like normal styles, but they can't be shared among
-other Widgets. If used, local styles are allocated automatically, and
-freed when the Widget is deleted. They are useful to add local
-customization to a Widget.
-
-Unlike in CSS, LVGL local styles can be assigned to states
-(pseudo-classes_) and parts (pseudo-elements_).
-
-## Usage
+In addition to "normal" styles, Widgets can also store local styles, similar to inline
+styles in CSS (e.g. `
`). Local styles can't be shared between
+Widgets; they are allocated automatically and freed when the Widget is deleted. Unlike
+CSS inline styles, they can be assigned to states (pseudo-classes) and parts
+(pseudo-elements).
To set a local property use functions like
-`lv_obj_set_style_
(widget, , );` For example:
+`lv_obj_set_style_(widget, , );` For example:
```c
lv_obj_set_style_bg_color(slider, lv_color_red(), LV_PART_INDICATOR | LV_STATE_FOCUSED);
diff --git a/docs/src/common-widget-features/styles/overview.mdx b/docs/src/common-widget-features/styles/overview.mdx
index 7e33e3224e..520609786a 100644
--- a/docs/src/common-widget-features/styles/overview.mdx
+++ b/docs/src/common-widget-features/styles/overview.mdx
@@ -9,7 +9,7 @@ variable which can hold properties like border width, font, text color and so on
It's similar to a `class` in CSS.
- Styles can be assigned to Widgets to change their appearance. Upon assignment, the
- target part (pseudo-element_ in CSS) and target state (pseudo-class_ in CSS) can be
+ target part (pseudo-element in CSS) and target state (pseudo-class in CSS) can be
specified. For example one can add `style_blue` to the knob of a slider when it's
in pressed state.
- The same style can be used by any number of Widgets.
@@ -25,11 +25,11 @@ It's similar to a `class` in CSS.
specified in a Widget.
- Widgets can also have [local styles](/common-widget-features/styles/local_styles) with higher precedence than
"normal" styles.
-- Unlike CSS (where pseudo-classes_ describe different states, e.g. `:focus`), in
+- 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 Widget changes state.
-For the full list of style properties click [here](/common-widget-features/styles/style-properties).
+See the [full list of style properties](/common-widget-features/styles/style-properties).
## States
@@ -58,59 +58,33 @@ A style can be added to any state or state combination. For example, setting a
different background color for the default and pressed states. If a property is not
defined in a state the best matching state's property will be used. Typically this
means the property with is used. If the property is
-not set even for the default state the default value will be used. (See later)
+not set even for the default state the default value will be used.
-Since and both have
-zero values, you can simply pass `0` as the `selector` argument instead of
-`LV_PART_MAIN | LV_STATE_DEFAULT` as a shortcut when adding styles to an object.
+### What "best matching" means
-### What does the "best matching state's property" mean?
+Each state's precedence equals its value in the list above — a higher value wins. When
+a property isn't set for the current state, the value from the highest-precedence
+matching state is used; if none matches, the default state's value (or the global
+default) applies.
-States have a precedence which is shown by their value (see in the above list). A
-higher value means higher precedence. To determine which state's property to use let's
-take an example. Imagine the background color is defined like this:
+For example, with `bg_color` white in `LV_STATE_DEFAULT`, gray in `LV_STATE_PRESSED`
+(0x0020) and red in `LV_STATE_FOCUSED` (0x0002):
-- : white
-- : gray
-- : red
+- Pressed → gray (0x0020 beats default's 0x0000).
+- Focused → red.
+- Focused + pressed → gray (pressed outranks focused).
+- `LV_STATE_PRESSED | LV_STATE_FOCUSED` set to rose → rose (0x0022 beats either alone).
+- Checked → white (no checked value, so it falls back to default).
-1. Initially the Widget is in the default state, so it's a simple case: the property is
- perfectly defined in the Widget's current state as white.
-2. When the Widget is pressed there are 2 related properties: default with white
- (default is related to every state) and pressed with gray. The pressed state has
- 0x0020 precedence which is higher than the default state's 0x0000 precedence, so
- gray color will be used.
-3. When the Widget has focus 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 Widget has focus 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
- . In this case, this combined state
- has 0x0020 + 0x0002 = 0x0022 precedence, which is higher than the pressed state's
- precedence so rose color would be used.
-6. When the Widget is in the checked state there is no property to set the background
- color for this state. So for lack of a better option, the Widget remains white from
- the default state's property.
-
-Some practical notes:
-
-- The precedence (value) of states is quite intuitive, and it's something the user
- would expect naturally. Example: if a Widget has focus the user will still want to
- see if it's pressed, therefore the pressed state has a higher precedence. If the
- focused state had a higher precedence it would overwrite the pressed color.
-- If you want to set a property for all states (e.g. red background color) just set it
- for the default state. If the Widget can't find a property for its current state it
- will fall back to the default state's property.
-- Use ORed states to describe the properties for complex cases (e.g. pressed + checked
- + focused).
-- It might be a good idea to use different style elements for different states. For
- example, finding background colors for released, pressed, checked + pressed,
- focused, focused + pressed, focused + pressed + checked, etc. states is quite
- difficult. Instead, for example, use the background color for pressed and checked
- states and indicate the focused state with a different border color.
+The ordering is intentional: a pressed Widget should still look pressed while focused.
+To cover every state, set the property in the default state. For combinations that are
+hard to enumerate, vary one part per state (e.g. background color for pressed/checked,
+border color for focused).
## Cascading Styles
+
+
It's not required to set all the properties in one style. It's possible to add more
styles to a Widget and have the latter added style modify or extend appearance. For
example, create a general gray button style and create a new one for red buttons where
@@ -145,6 +119,8 @@ color will be used.
## Parts
+
+
Widgets can be composed of *parts* which may each have their own styles.
The following predefined parts exist in LVGL:
@@ -180,24 +156,17 @@ zero values, you can simply pass `0` as the `selector` argument instead of
## Properties Requiring New Layers
-If the `opa`, `blend_mode`, `transform_angle`, or `transform_zoom` properties
-are set to a non-default value LVGL creates a snapshot of the widget and its children
-in order to blend the whole widget with the set opacity, blend mode and transformation
-properties.
+
-These properties have this effect only on the `MAIN` part of the widget.
+Setting `opa`, `blend_mode`, `transform_angle`, or `transform_zoom` to a non-default
+value on the `MAIN` part makes LVGL snapshot the Widget and its children into an
+intermediate *layer* so the whole Widget is blended together.
-The created snapshot is called "intermediate layer" or simply "layer". If only `opa`
-and/or `blend_mode` is set to a non-default value LVGL can build the layer from
-smaller chunks. The size of these chunks can be configured by the following properties
-in `lv_conf.h`:
+If only `opa` and/or `blend_mode` is set, the layer is built from smaller chunks sized
+by these `lv_conf.h` options (transformations force a single full-size layer):
-- : [bytes] the optimal target buffer size.
- LVGL will try to allocate this size of memory.
-- : [bytes] used if
- couldn't be allocated.
-
-If transformation properties were also used the layer cannot be rendered in chunks
+- — target chunk buffer size in bytes.
+- — used if the above can't be allocated.
## Typical Background Properties
@@ -213,88 +182,28 @@ background properties" are the properties being referred to:
- Width and height transformation
- X and Y translation
-## Examples
+## Effects
-### Size styles
+Examples that combine several style properties for a visual effect.
+Per-property examples are on the
+[Style Properties](/common-widget-features/styles/style-properties) page.
-
+### Conic gradient knob
-### Background styles
+
-
+### Radial gradient background
-### Border styles
+
-
+### Gradient button backgrounds
-### Outline styles
+
-
+### Modal overlay
-### Shadow styles
+
-
+### Interactive transform
-### Image styles
-
-
-
-### Arc styles
-
-
-
-### Text styles
-
-
-
-### Line styles
-
-
-
-### Drop shadow styles
-
-
-
-### Transition
-
-
-
-### Using multiple styles
-
-
-
-### Local styles
-
-
-
-### Add styles to parts and states
-
-
-
-### Extending the current theme
-
-
-
-### Opacity and Transformations
-
-
-
-### Metallic knob with conic gradient
-
-
-
-### Radial gradient as background
-
-
-
-### Gradients for button background
-
-
-
-### Test between recolor style or full background modal
-
-
-
-### Transform style
-
-
+
diff --git a/docs/src/common-widget-features/styles/style-properties.mdx b/docs/src/common-widget-features/styles/style-properties.mdx
index e8b09f5f09..a7c555cd6e 100644
--- a/docs/src/common-widget-features/styles/style-properties.mdx
+++ b/docs/src/common-widget-features/styles/style-properties.mdx
@@ -12,6 +12,8 @@ description: LVGL style property reference.
Properties related to size, position, alignment and layout of Widgets.
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
variables. Style variables should be
diff --git a/docs/src/common-widget-features/styles/themes.mdx b/docs/src/common-widget-features/styles/themes.mdx
index 15fcfcef28..8ed82cbc89 100644
--- a/docs/src/common-widget-features/styles/themes.mdx
+++ b/docs/src/common-widget-features/styles/themes.mdx
@@ -5,22 +5,12 @@ description: "A Theme is a collection of styles with the knowledge of which subs
## Overview
-A Theme is a collection of styles with the knowledge of which subset of styles
-are applied to which types of Widgets. If there is an active theme LVGL
-applies it to every newly-created widget. This will give a default appearance
-to the UI which can then be modified by adding further styles.
+A theme is a collection of styles plus the knowledge of which styles apply to which
+Widget types. An active theme is applied to every newly created Widget, giving the UI
+a default look that further styles can refine. Each display can use its own theme
+(e.g. a colorful TFT alongside a monochrome secondary display).
-Every display can have a different theme. For example, you could have a
-colorful theme on a TFT and monochrome theme on a secondary monochrome
-display.
-
-To set a theme for a display, two steps are required:
-
-1. Initialize the theme.
-2. Assign the initialized theme to the display.
-
-Theme initialization functions can have different prototypes. This
-example shows how to set the "default" theme:
+Setting a theme takes two calls — initialize it, then assign it to the display:
```c
lv_theme_t * th = lv_theme_default_init(display, /* Use DPI, size, etc. from this display */
@@ -34,18 +24,17 @@ lv_theme_t * th = lv_theme_default_init(display, /* Use DPI, siz
lv_display_set_theme(display, th); /* Assign theme to display */
```
-The included themes are enabled in `lv_conf.h`. If the default theme
-is enabled by LVGL automatically initializes
-and sets it when a display is created.
+If is enabled in `lv_conf.h`, LVGL initializes and
+sets the default theme automatically when a display is created.
## Extending themes
-Built-in themes can be extended. If a custom theme is created, a parent
-theme can be selected. The parent theme's styles will be added before
-the custom theme's styles. Any number of themes can be chained this way.
-E.g. default theme -> custom theme -> dark theme.
+
- extends the
-`base_theme` with the `new_theme`.
+This extends the current theme with an extra button style. It is C-only because a
+`lv_theme_*` callback has no XML form.
-There is an example of this among the [Style examples](/common-widget-features/styles/overview).
+A custom theme can select a parent theme: the parent's styles are applied before the
+custom theme's, and themes can be chained (e.g. default → custom → dark).
+
+extends `base_theme` with `new_theme`.
diff --git a/docs/src/common-widget-features/styles/transitions.mdx b/docs/src/common-widget-features/styles/transitions.mdx
index 2d3aaf85fb..1dae6c6aad 100644
--- a/docs/src/common-widget-features/styles/transitions.mdx
+++ b/docs/src/common-widget-features/styles/transitions.mdx
@@ -5,31 +5,18 @@ description: "By default, when a Widget changes state (e.g."
## Overview
-By default, when a Widget changes state (e.g. it's pressed) the new
-properties from the new state are set immediately. However, with
-transitions it's possible to play an animation on state change. For
-example, on pressing a button its background color can be animated to
-the pressed color over 300 ms.
+By default, when a Widget changes state the new properties are applied immediately.
+A transition instead animates the change — e.g. on press a button's background color
+fades to the pressed color over 300 ms.
-The parameters of the transitions are stored in the styles. It's
-possible to set
+
-- the time of the transition
-- the delay before starting the transition
-- the animation path (also known as the timing or easing function)
-- the properties to animate
+Transition parameters are stored in the style and set per state — the duration, delay,
+animation path (easing function) and the list of properties to animate. Defining them
+per state controls each direction independently: a 100 ms time in the pressed state
+and 500 ms in the default state enters the pressed look quickly and returns slowly.
-The transition properties can be defined for each state. For example,
-setting a 500 ms transition time in the default state means that when
-the Widget goes to the default state a 500 ms transition time is
-applied. Setting a 100 ms transition time in the pressed state causes a
-100 ms transition when going to the pressed state. This example
-configuration results in going to the pressed state quickly and then
-going back to default slowly.
-
-## Usage
-
-To describe a transition an variable needs to be
+To describe a transition, an variable needs to be
initialized and added to a style:
```c
diff --git a/docs/src/contributing/coding_style.mdx b/docs/src/contributing/coding_style.mdx
index 879cf29715..8978f86c7d 100644
--- a/docs/src/contributing/coding_style.mdx
+++ b/docs/src/contributing/coding_style.mdx
@@ -16,21 +16,21 @@ and [misc/lv_templ.h](https://github.com/lvgl/lvgl/blob/master/src/misc/lv_templ
- In enums and defines use only upper case letters
(e.g. *MAX_LINE_NUM*)
- Global names (API):
-
+
- start with *lv*
- followed by module name: *button*, *label*, *style* etc.
- followed by the action (for functions): *set*, *get*, etc.
- closed with the subject: *name*, *size*, *state* etc.
- Typedefs
-
+
- prefer `typedef struct` and `typedef enum` instead of
`struct name` and `enum name`
- always end `typedef struct` and `typedef enum type names with
t`
- Abbreviations:
-
+
- The following abbreviations are used and allowed:
-
+
- `dsc` descriptor
- `param` parameter
- `indev` input device
@@ -41,22 +41,22 @@ and [misc/lv_templ.h](https://github.com/lvgl/lvgl/blob/master/src/misc/lv_templ
- `alloc` allocate
- `ctrl` control
- `pos` position
-
+
- Avoid adding new abbreviations
## Coding Guide
- Editor:
-
+
- Set editor to use 4 spaces for tab indentations (instead of tab characters).
- Exception: the **Kconfig** file and any make files require leading tab characters
on child items.
- Functions:
-
+
- Write functions that use the single-responsibility principle.
- Make functions `static` when not part of that object's public API (where possible).
- Variables:
-
+
- One line, one declaration (BAD: char x, y;).
- Use `` (*uint8_t*, *int32_t* etc).
- Declare variables where needed (not all at function start).
@@ -108,7 +108,7 @@ typedef struct {
- In comments use back-quotes (`...`) when referring to a code element, such as a variable, type,
or struct name: ``/* Update value of `x_act` */``
- When adding or modifying comments, priorities are (in order of importance):
-
+
1. clarity (the ease with which other programmers can understand your intention),
2. readability (the ease with which other programmers can read your comments),
3. brevity (the quality of using few words when speaking or writing).
@@ -167,7 +167,7 @@ void lv_obj_set_flex_align(lv_obj_t * widget, lv_flex_align_t main_place, lv_fle
to the address contained by a pointer parameter, if not already obvious (e.g. when
the parameter name contains the word "out"), include the direction in the command
for clarity:
-
+
`@param[out] param_name description`.
- Describe return values with the `@return` command.
- Add at least 2 spaces after Doxygen commands for improved readability.
@@ -220,7 +220,6 @@ void lv_obj_set_flex_align(lv_obj_t * widget, lv_flex_align_t main_place, lv_fle
- `@see text`
generates a "See also" paragraph in a highlighted section, helpful when additional
information about a topic can be found elsewhere.
-
## API Conventions
To support the auto-generation of bindings, the LVGL C API must
@@ -241,7 +240,7 @@ follow some coding conventions:
- Do not `malloc` into a static or global variables. Instead declare the variable in `lv_global_t`
structure in `lv_global.h` and mark the variable with when it's used.
- To register and use callbacks one of the following needs to be followed.
-
+
- Pass a pointer to a `struct` as the first argument of both the registration function and the callback. That
`struct` must contain `void * user_data` field.
- The last argument of the registration function must be `void * user_data` and the same `user_data`
diff --git a/docs/src/debugging/log.mdx b/docs/src/debugging/log.mdx
index 089b758281..6ae9e649e6 100644
--- a/docs/src/debugging/log.mdx
+++ b/docs/src/debugging/log.mdx
@@ -70,4 +70,3 @@ The first 5 macros append the following information to your `text`:
(text) is similar to but has no extra information added.
-## API
diff --git a/docs/src/debugging/monkey.mdx b/docs/src/debugging/monkey.mdx
index 3d78d646be..7a0acec4e5 100644
--- a/docs/src/debugging/monkey.mdx
+++ b/docs/src/debugging/monkey.mdx
@@ -52,4 +52,3 @@ Note that `input_range` has different meanings depending on the `type` input dev
-## API
diff --git a/docs/src/debugging/test.mdx b/docs/src/debugging/test.mdx
index 2a8e926134..a8df1060dc 100644
--- a/docs/src/debugging/test.mdx
+++ b/docs/src/debugging/test.mdx
@@ -150,4 +150,3 @@ The screenshot comparison uses `lodepng` which is built-in to LVGL and just need
To avoid making the entire Test module dependent on `lodepng`, screenshot comparison can be individually enabled by
.
-## API
diff --git a/docs/src/integration/chip_vendors/arm/arm2d.mdx b/docs/src/integration/chip_vendors/arm/arm2d.mdx
index aa0cac224c..7ba42f41fb 100644
--- a/docs/src/integration/chip_vendors/arm/arm2d.mdx
+++ b/docs/src/integration/chip_vendors/arm/arm2d.mdx
@@ -57,4 +57,3 @@ LVGL (sometimes worse) for regular Cortex-M processors.
- [A Cortex-M55 (supports Helium) based MDK Project, PC emulation is
available.](https://github.com/lvgl/lv_port_an547_cm55_sim)
-## API
diff --git a/docs/src/integration/chip_vendors/espressif/hardware_accelerator_ppa.mdx b/docs/src/integration/chip_vendors/espressif/hardware_accelerator_ppa.mdx
index 569fd30b4a..0c71d7bcdf 100644
--- a/docs/src/integration/chip_vendors/espressif/hardware_accelerator_ppa.mdx
+++ b/docs/src/integration/chip_vendors/espressif/hardware_accelerator_ppa.mdx
@@ -88,10 +88,10 @@ void app_main(void)
### Benchmarking
-When running the `lv_demo_benchmark` from LVGL the user can compare the performance when
-the PPA is enabled versus the pure software rendering, by using the latest version of the
+When running the `lv_demo_benchmark` from LVGL the user can compare the performance when
+the PPA is enabled versus the pure software rendering, by using the latest version of the
LVGL and LVGL port component it can be observed an average saving of 30% of the rendering
-time for draw tasks that are image and rectangle fill. On some cases for pure filling on
+time for draw tasks that are image and rectangle fill. On some cases for pure filling on
integer multiples of the display size it is possible to observe up 9x of speed increase when
the PPA is enabled.
@@ -104,28 +104,27 @@ the initial cause for that according to the PPA section from reference manual is
## Using the Espressif LVGL component PPA features
The Espressif IDF LVGL port component also offers hardware acceleration
-for the display operations, that is it, once the LVGL render completes
+for the display operations, that is it, once the LVGL render completes
an operation and the draw buffer is already handled to the display driver,
-the Espressif component can optionally perform mirror and rotation of
+the Espressif component can optionally perform mirror and rotation of
the rendered data using hardware assistance.
The LVGL display driver for Espressif operates by reading the
descriptor of the drawn data to check if rotation and mirror are flags
set on the data properties, in positive case, before sending the data
-to the display, the mirror and rotation are performed first using the
+to the display, the mirror and rotation are performed first using the
PPA rotation and mirror client.
When compared to pure software rotation, using the PPA to rotate the objects
-can save up 40% of rendering time in average, while keeping the CPU in idle
+can save up 40% of rendering time in average, while keeping the CPU in idle
saving power, or using it to perform other tasks, PPA rotation is asynchronous,
and once started it will signal the application using its dedicated interrupt.
To enable such behavior on the display driver, the PPA acceleration should
be set on the project `sdkconfig.defaults` via the symbol `CONFIG_LVGL_PORT_ENABLE_PPA`,
-setting it to true will make the hardware assistance for image rotation and mirroring
+setting it to true will make the hardware assistance for image rotation and mirroring
automatic. No extra code is required.
-Please notice that such option can be set via menuconfig using the
+Please notice that such option can be set via menuconfig using the
standard IDF command for configuration: `idf.py menuconfig`.
-## API
diff --git a/docs/src/integration/chip_vendors/nxp/g2d_gpu.mdx b/docs/src/integration/chip_vendors/nxp/g2d_gpu.mdx
index 6f940f2cd7..267813dbf8 100644
--- a/docs/src/integration/chip_vendors/nxp/g2d_gpu.mdx
+++ b/docs/src/integration/chip_vendors/nxp/g2d_gpu.mdx
@@ -2,4 +2,3 @@
title: NXP G2D GPU
---
-## API
diff --git a/docs/src/integration/chip_vendors/nxp/pxp_gpu.mdx b/docs/src/integration/chip_vendors/nxp/pxp_gpu.mdx
index 2c0cc2fb68..0551fc838a 100644
--- a/docs/src/integration/chip_vendors/nxp/pxp_gpu.mdx
+++ b/docs/src/integration/chip_vendors/nxp/pxp_gpu.mdx
@@ -2,4 +2,3 @@
title: NXP PXP GPU
---
-## API
diff --git a/docs/src/integration/chip_vendors/nxp/vg_lite_gpu.mdx b/docs/src/integration/chip_vendors/nxp/vg_lite_gpu.mdx
index ece41cb2ed..c508ff2833 100644
--- a/docs/src/integration/chip_vendors/nxp/vg_lite_gpu.mdx
+++ b/docs/src/integration/chip_vendors/nxp/vg_lite_gpu.mdx
@@ -14,7 +14,7 @@ LVGL rendering acceleration can be supported without the need for LVGL adaptatio
1. Set to 1 in `lv_conf.h` to enabled the VG-Lite rendering backend.
Make sure that your hardware has been adapted to the VG-Lite API and that the absolute path to `vg_lite.h`, which can be directly referenced by lvgl, has been exposed.
2. Confirm the GPU initialization method, there are two ways:
-
+
- The SDK calls the GPU initialization function on its own during system startup, and the GPU is available when LVGL starts; set to 0.
- LVGL actively calls the GPU initialization function, and the SDK needs to implement the public function `gpu_init()`.
LVGL will call it to complete the GPU hardware initialization during startup; set to 1.
@@ -27,13 +27,13 @@ LVGL rendering acceleration can be supported without the need for LVGL adaptatio
4. Set the configuration to specify the flush method.
VG-Lite uses two sets of command buffer buffers to render instructions, and utilizing this mechanism well can greatly improve drawing efficiency.
Currently, two buffering methods are supported:
-
+
- Set to zero (recommended). The rendering backend will obtain the GPU's working status every time it writes rendering instructions to the command buffer.
-
+
When the GPU is idle, it will immediately call `vg_lite_flush` to notify the GPU to start rendering and swap the command buffer. When the GPU is busy, it will continue to fill the command buffer cache with rendering instructions.
The underlying driver will automatically determine if the command buffer has been filled. When it is about to be filled, it will forcibly wait for the unfinished drawing tasks to end and swap the command buffer.
This method can effectively improve GPU utilization, especially in scenarios where rendering text, as the GPU's drawing time and the CPU's data preparation time are very close, allowing the CPU and GPU to run in parallel.
-
+
- Set to a value greater than zero, such as 8. After writing 8 rendering instructions to the command buffer, the rendering backend
will call `vg_lite_flush` to notify the GPU to start rendering and swap the command buffer.
5. Set the configuration to use GPU rendering for shadows.
@@ -88,4 +88,3 @@ The following table shows the color format mapping:
- **Compressed formats are not supported.** Images with `LV_IMAGE_FLAGS_COMPRESSED` flag will be rejected by this decoder
and passed to other decoders that support decompression.
-## API
diff --git a/docs/src/integration/chip_vendors/stm32/dma2d_gpu.mdx b/docs/src/integration/chip_vendors/stm32/dma2d_gpu.mdx
index 40d0001dee..e2c67cb8dd 100644
--- a/docs/src/integration/chip_vendors/stm32/dma2d_gpu.mdx
+++ b/docs/src/integration/chip_vendors/stm32/dma2d_gpu.mdx
@@ -60,4 +60,3 @@ is **not** enabled. LTDC will use the DMA2D peripheral for flushing, if that is
NeoChrom and DMA2D may be enabled at the same time. They are both draw units
and they will both independently accept draw tasks.
-## API
diff --git a/docs/src/integration/chip_vendors/stm32/neochrom.mdx b/docs/src/integration/chip_vendors/stm32/neochrom.mdx
index f971c56df7..5a344ef906 100644
--- a/docs/src/integration/chip_vendors/stm32/neochrom.mdx
+++ b/docs/src/integration/chip_vendors/stm32/neochrom.mdx
@@ -138,4 +138,3 @@ with each other at all.
NeoChrom and DMA2D may be enabled at the same time. They are both draw units
and they will both independently accept draw tasks.
-## API
diff --git a/docs/src/libs/barcode.mdx b/docs/src/libs/barcode.mdx
index 8f7992bf03..197e8d06c1 100644
--- a/docs/src/libs/barcode.mdx
+++ b/docs/src/libs/barcode.mdx
@@ -42,4 +42,3 @@ After any of a bar code's settings have changed, call
-## API
diff --git a/docs/src/libs/font_support/freetype.mdx b/docs/src/libs/font_support/freetype.mdx
index 5d2e464fbe..b89cbaf3ce 100644
--- a/docs/src/libs/font_support/freetype.mdx
+++ b/docs/src/libs/font_support/freetype.mdx
@@ -152,4 +152,3 @@ See the function for a usag
-## API
diff --git a/docs/src/libs/font_support/tiny_ttf.mdx b/docs/src/libs/font_support/tiny_ttf.mdx
index 763fe9a5e2..5c1c296be1 100644
--- a/docs/src/libs/font_support/tiny_ttf.mdx
+++ b/docs/src/libs/font_support/tiny_ttf.mdx
@@ -48,4 +48,3 @@ allow kerning, if supported, or disable.
-## API
diff --git a/docs/src/libs/fs_support/arduino_esp_littlefs.mdx b/docs/src/libs/fs_support/arduino_esp_littlefs.mdx
index e1f83e149b..8c8fa88676 100644
--- a/docs/src/libs/fs_support/arduino_esp_littlefs.mdx
+++ b/docs/src/libs/fs_support/arduino_esp_littlefs.mdx
@@ -15,4 +15,3 @@ For a detailed introduction, see:
Enable and define a in `lv_conf.h`.
-## API
diff --git a/docs/src/libs/fs_support/arduino_sd.mdx b/docs/src/libs/fs_support/arduino_sd.mdx
index 14d8e47043..f5ca23abdf 100644
--- a/docs/src/libs/fs_support/arduino_sd.mdx
+++ b/docs/src/libs/fs_support/arduino_sd.mdx
@@ -16,4 +16,3 @@ For a detailed introduction, see:
Enable and define a in `lv_conf.h`.
You will need to initialize the SD card before LVGL can use it (i.e. ).
-## API
diff --git a/docs/src/libs/fs_support/lfs.mdx b/docs/src/libs/fs_support/lfs.mdx
index 82f2ad6a87..0734b8a97c 100644
--- a/docs/src/libs/fs_support/lfs.mdx
+++ b/docs/src/libs/fs_support/lfs.mdx
@@ -53,6 +53,5 @@ if (err) {
lv_littlefs_set_handler(&lfs);
```
-## API
See also: [lvgl/src/libs/fsdrv/lv_fs_littlefs.c](https://github.com/lvgl/lvgl/blob/master/src/libs/fsdrv/lv_fs_littlefs.c)
diff --git a/docs/src/libs/gltf.mdx b/docs/src/libs/gltf.mdx
index b9a15715cf..fdeecb1f56 100644
--- a/docs/src/libs/gltf.mdx
+++ b/docs/src/libs/gltf.mdx
@@ -40,9 +40,9 @@ LVGL's glTF implementation provides comprehensive 3D rendering capabilities:
- Image-Based Lighting (IBL) for realistic environmental lighting
- Punctual lighting support with animated light sources
- Physically Based Rendering (PBR) materials with full texture support:
-
+
* Diffuse/albedo textures
- * Roughness and metallic workflow textures
+ * Roughness and metallic workflow textures
* Normal maps for surface detail
* Ambient occlusion textures
@@ -71,12 +71,12 @@ LVGL's glTF implementation provides comprehensive 3D rendering capabilities:
### Rendering Quality
- Configurable antialiasing with multiple modes:
-
+
* Always-on for consistent quality
- * Always-off for maximum performance
+ * Always-off for maximum performance
* Auto-on that activates when scene movement stops
- Flexible background rendering:
-
+
* Environment-based backgrounds using IBL
* Solid color backgrounds
* Transparent backgrounds for overlay effects
@@ -122,7 +122,7 @@ set(FASTGLTF_DIFFUSE_TRANSMISSION_SUPPORT
CACHE BOOL "" FORCE)
FetchContent_MakeAvailable(fastgltf)
-# Fetch libwebp library
+# Fetch libwebp library
FetchContent_Declare(
webp
GIT_REPOSITORY https://github.com/webmproject/libwebp
@@ -301,7 +301,7 @@ lv_gltf_model_node_set_scale_z(node, 2.0f);
##### Reading Node Properties
-For performance reasons, the node properties are only calculated during rendering.
+For performance reasons, the node properties are only calculated during rendering.
In order to read them, you must first register an event callback.
This event callback will be called every time the node properties change.
@@ -319,17 +319,17 @@ static void node_value_cb(lv_event_t * e)
lv_gltf_model_node_get_euler_rotation(e, &rotation);
lv_gltf_model_node_get_scale(e, &scale);
- LV_LOG_USER("Local Position: %.2f, %.2f, %.2f\n",
+ LV_LOG_USER("Local Position: %.2f, %.2f, %.2f\n",
position.x, position.y, position.z);
}
/* Register the callback */
-lv_gltf_model_node_add_event_cb(node, node_value_cb,
+lv_gltf_model_node_add_event_cb(node, node_value_cb,
LV_EVENT_VALUE_CHANGED, NULL);
```
If you need world-space coordinates (position in global scene coordinates rather than relative to parent),
-use the world position variant. This involves complex matrix calculations during the rendering phase which
+use the world position variant. This involves complex matrix calculations during the rendering phase which
will impact performance:
```c
@@ -340,7 +340,7 @@ static void node_world_value_cb(lv_event_t * e)
lv_gltf_model_node_get_local_position(e, &local_pos);
lv_gltf_model_node_get_world_position(e, &world_pos);
- LV_LOG_USER("Local: %.2f, %.2f, %.2f\n",
+ LV_LOG_USER("Local: %.2f, %.2f, %.2f\n",
local_pos.x, local_pos.y, local_pos.z);
LV_LOG_USER("World: %.2f, %.2f, %.2f\n",
world_pos.x, world_pos.y, world_pos.z);
@@ -376,7 +376,7 @@ Access nodes by index, numeric path or path:
```c
/* Get by index */
lv_gltf_model_node_t * root = lv_gltf_model_node_get_by_index(model, 0);
-lv_gltf_model_node_t * last_node = lv_gltf_model_node_get_by_index(model, lv_gltf_model_get_node_count(model) - 1);
+lv_gltf_model_node_t * last_node = lv_gltf_model_node_get_by_index(model, lv_gltf_model_get_node_count(model) - 1);
/* Get by path (hierarchical node names from your 3D editor) */
lv_gltf_model_node_t * cursor = lv_gltf_model_node_get_by_path(model, "/cursor");
@@ -527,4 +527,3 @@ Animation speeds use integer values to avoid floating-point arithmetic:
-## API
diff --git a/docs/src/libs/image_support/bmp.mdx b/docs/src/libs/image_support/bmp.mdx
index ff91d2b61f..b3f62b0bfb 100644
--- a/docs/src/libs/image_support/bmp.mdx
+++ b/docs/src/libs/image_support/bmp.mdx
@@ -38,4 +38,3 @@ files. Follow the instructions in [File System (lv_fs_drv)](/main-modules/fs).
-## API
diff --git a/docs/src/libs/image_support/libjpeg_turbo.mdx b/docs/src/libs/image_support/libjpeg_turbo.mdx
index 9d97ed466a..ba9101821e 100644
--- a/docs/src/libs/image_support/libjpeg_turbo.mdx
+++ b/docs/src/libs/image_support/libjpeg_turbo.mdx
@@ -53,4 +53,3 @@ feature to ensure that the memory usage is within a reasonable range.
-## API
diff --git a/docs/src/libs/image_support/libpng.mdx b/docs/src/libs/image_support/libpng.mdx
index 9ad3f9fcff..0b67d245d4 100644
--- a/docs/src/libs/image_support/libpng.mdx
+++ b/docs/src/libs/image_support/libpng.mdx
@@ -48,4 +48,3 @@ stored in RGBA pixel format.
-## API
diff --git a/docs/src/libs/image_support/libwebp.mdx b/docs/src/libs/image_support/libwebp.mdx
index a4fba41a49..8e846e71fa 100644
--- a/docs/src/libs/image_support/libwebp.mdx
+++ b/docs/src/libs/image_support/libwebp.mdx
@@ -51,4 +51,3 @@ For optimal memory usage, combine with LVGL's [Image Caching](/main-modules/imag
-## API
diff --git a/docs/src/libs/image_support/lodepng.mdx b/docs/src/libs/image_support/lodepng.mdx
index 9292eb740c..6d03015282 100644
--- a/docs/src/libs/image_support/lodepng.mdx
+++ b/docs/src/libs/image_support/lodepng.mdx
@@ -49,4 +49,3 @@ for example Compress PNG: https://compresspng.com/
-## API
diff --git a/docs/src/libs/image_support/rle.mdx b/docs/src/libs/image_support/rle.mdx
index d462ac6006..4640c9d6db 100644
--- a/docs/src/libs/image_support/rle.mdx
+++ b/docs/src/libs/image_support/rle.mdx
@@ -80,4 +80,3 @@ An RLE image binary can be directly generated from another image using script
This will decompress `cogwheel.png`, and then re-compress it using RLE and write
the output to `./output/cogwheel.bin`.
-## API
diff --git a/docs/src/libs/image_support/rlottie.mdx b/docs/src/libs/image_support/rlottie.mdx
index c99804ae83..c4b6ea6418 100644
--- a/docs/src/libs/image_support/rlottie.mdx
+++ b/docs/src/libs/image_support/rlottie.mdx
@@ -235,7 +235,7 @@ Please note, that while lottie animations are capable of running on many
ESP chips, below is recommended for best performance.
- ESP32-S3-WROOM-1-N16R8
-
+
- 16mb quad spi flash
- 8mb octal spi PSRAM
- IDF4.4 or higher
@@ -275,4 +275,3 @@ rlottie->allocated_buf = heap_caps_malloc(allocated_buf_size+1, MALLOC_CAP_SPIRA
-## API
diff --git a/docs/src/libs/image_support/svg.mdx b/docs/src/libs/image_support/svg.mdx
index f966ae7f6c..f0caacf615 100644
--- a/docs/src/libs/image_support/svg.mdx
+++ b/docs/src/libs/image_support/svg.mdx
@@ -59,4 +59,3 @@ lv_svg_node_delete(svg_doc);
-## API
diff --git a/docs/src/libs/image_support/tjpgd.mdx b/docs/src/libs/image_support/tjpgd.mdx
index 15f8328673..5966db2e26 100644
--- a/docs/src/libs/image_support/tjpgd.mdx
+++ b/docs/src/libs/image_support/tjpgd.mdx
@@ -49,4 +49,3 @@ follow the instructions in [File System (lv_fs_drv)](/main-modules/fs).
-## API
diff --git a/docs/src/libs/qrcode.mdx b/docs/src/libs/qrcode.mdx
index 838baa6b3e..7c4e90d686 100644
--- a/docs/src/libs/qrcode.mdx
+++ b/docs/src/libs/qrcode.mdx
@@ -12,6 +12,8 @@ Widget that generates and displays QR Codes using the library.
## Usage
+
+
Enable in `lv_conf.h` by setting its value to `1`.
Use to create the QR-Code Widget. Then use
@@ -27,10 +29,3 @@ call again to update the QR Code.
- QR Codes with less data are smaller, but they are scaled by an integer
value to best fit to the given size.
-## Example
-
-### Create a QR Code
-
-
-
-## API
diff --git a/docs/src/libs/video_support/ffmpeg.mdx b/docs/src/libs/video_support/ffmpeg.mdx
index 34703c7e0b..dfa5754fa9 100644
--- a/docs/src/libs/video_support/ffmpeg.mdx
+++ b/docs/src/libs/video_support/ffmpeg.mdx
@@ -80,4 +80,3 @@ Learn more about [events](/common-widget-features/events).
-## API
diff --git a/docs/src/libs/video_support/gstreamer.mdx b/docs/src/libs/video_support/gstreamer.mdx
index b29d26b717..f834993a5d 100644
--- a/docs/src/libs/video_support/gstreamer.mdx
+++ b/docs/src/libs/video_support/gstreamer.mdx
@@ -79,23 +79,23 @@ Follow the official GStreamer documentation to install its development libraries
## Setup
1. **Install Dependencies**
-
+
Install the GStreamer development libraries for your platform as shown in the Dependencies section above.
2. **Enable GStreamer Support**
-
+
Set to `1` in `lv_conf.h`.
3. **CMake Integration**
-
+
**Option 1: Direct linking with LVGL (Recommended)**
-
+
```cmake
find_package(PkgConfig REQUIRED)
-
+
# Find GStreamer packages
pkg_check_modules(GSTREAMER REQUIRED gstreamer-1.0)
pkg_check_modules(GSTREAMER_VIDEO REQUIRED gstreamer-video-1.0)
pkg_check_modules(GSTREAMER_APP REQUIRED gstreamer-app-1.0)
-
+
# Link with LVGL
target_include_directories(lvgl PUBLIC
$\{GSTREAMER_INCLUDE_DIRS\}
@@ -108,33 +108,33 @@ Follow the official GStreamer documentation to install its development libraries
```
4. **Manual Compilation with pkg-config**
-
+
You can also compile manually using pkg-config to query the necessary flags:
-
+
```bash
# Get compilation flags
gcc $(pkg-config --cflags --libs gstreamer-1.0 gstreamer-video-1.0 gstreamer-app-1.0) -o your_app your_app.c lvgl.a
```
5. **Basic Setup Example**
-
+
```c
int main(void)
{
/* Initialize LVGL */
lv_init();
-
+
/* Setup display driver */
lv_display_t *display = lv_display_create(800, 480);
/* ... configure display driver ... */
-
+
/* Create and run your GStreamer application */
lv_example_gstreamer_1();
-
+
while (1) {
lv_timer_handler();
}
-
+
return 0;
}
```
@@ -334,4 +334,3 @@ Then, in your LVGL application, configure WebRTC by passing the signalling serve
-## API
diff --git a/docs/src/main-modules/animation.mdx b/docs/src/main-modules/animation.mdx
index 199ac3369d..a071bf9eac 100644
--- a/docs/src/main-modules/animation.mdx
+++ b/docs/src/main-modules/animation.mdx
@@ -394,4 +394,3 @@ lv_anim_timeline_start(timeline);
-## API
diff --git a/docs/src/main-modules/color.mdx b/docs/src/main-modules/color.mdx
index 1138279e4e..6094af4361 100644
--- a/docs/src/main-modules/color.mdx
+++ b/docs/src/main-modules/color.mdx
@@ -124,7 +124,6 @@ Some special purpose defines are also introduced:
You can also use the `LV_OPA_*` defines in as a
mixing *ratio*.
-## API
lv_color_make
lv_color_mix
diff --git a/docs/src/main-modules/display/color_format.mdx b/docs/src/main-modules/display/color_format.mdx
index 65bb086ee6..b3c0fd1477 100644
--- a/docs/src/main-modules/display/color_format.mdx
+++ b/docs/src/main-modules/display/color_format.mdx
@@ -24,12 +24,12 @@ selected color format.
In case of RGB565 color format it might be required to swap the 2 bytes
because the SPI, I2C or 8 bit parallel port periphery sends them in the wrong order.
-This usually requires calling
-inside the [Flush Callback](/main-modules/display/setup), implementing a custom function to swap the bytes or
+This usually requires calling
+inside the [Flush Callback](/main-modules/display/setup), implementing a custom function to swap the bytes or
using the correct color format.
LVGL supports the color format natively.
-By using this color format, no manual byte swapping is needed at all,
+By using this color format, no manual byte swapping is needed at all,
simplifying display drivers and eliminating software overhead.
Note that this is not about swapping the Red and Blue channel but converting
@@ -137,4 +137,3 @@ In summary, to enable transparent screens and displays for OSD menu-like UIs:
- Set a color format with alpha channel. E.g.
-## API
diff --git a/docs/src/main-modules/display/display_events.mdx b/docs/src/main-modules/display/display_events.mdx
index 7f97858617..9ba32755e2 100644
--- a/docs/src/main-modules/display/display_events.mdx
+++ b/docs/src/main-modules/display/display_events.mdx
@@ -46,4 +46,3 @@ The following events are sent for Display (lv_display_t) objects:
- : Sent when a screen finishes being loaded on this display
- : Sent when a screen finishes being unloaded on this display
-## API
diff --git a/docs/src/main-modules/display/inactivity.mdx b/docs/src/main-modules/display/inactivity.mdx
index d9f47ed379..e0d20e766c 100644
--- a/docs/src/main-modules/display/inactivity.mdx
+++ b/docs/src/main-modules/display/inactivity.mdx
@@ -19,4 +19,3 @@ You can manually trigger an activity using
- [Drawing](/main-modules/draw) to learn more about how rendering works in LVGL.
-## API
diff --git a/docs/src/main-modules/display/index.mdx b/docs/src/main-modules/display/index.mdx
index efcd01eb2a..e1e38b36cb 100644
--- a/docs/src/main-modules/display/index.mdx
+++ b/docs/src/main-modules/display/index.mdx
@@ -2,5 +2,4 @@
title: "Display (lv_display)"
---
-## API
diff --git a/docs/src/main-modules/display/overview.mdx b/docs/src/main-modules/display/overview.mdx
index 54c8d2bd44..183c84043b 100644
--- a/docs/src/main-modules/display/overview.mdx
+++ b/docs/src/main-modules/display/overview.mdx
@@ -49,4 +49,3 @@ With is a pointer to the display to refresh. If
`NULL` is passed, all displays that have active refresh timers will be refreshed.
-## API
diff --git a/docs/src/main-modules/display/resolution.mdx b/docs/src/main-modules/display/resolution.mdx
index 2e242f0361..0995aef237 100644
--- a/docs/src/main-modules/display/resolution.mdx
+++ b/docs/src/main-modules/display/resolution.mdx
@@ -14,4 +14,3 @@ of the active area can be set with
and
-## API
diff --git a/docs/src/main-modules/display/rotation.mdx b/docs/src/main-modules/display/rotation.mdx
index e348633541..7ad4bdcc73 100644
--- a/docs/src/main-modules/display/rotation.mdx
+++ b/docs/src/main-modules/display/rotation.mdx
@@ -97,4 +97,3 @@ void flush_cb(lv_display_t * disp, const lv_area_t * area, uint8_t * px_map)
}
```
-## API
diff --git a/docs/src/main-modules/display/screen_layers.mdx b/docs/src/main-modules/display/screen_layers.mdx
index de573b437e..b4d2cbbf8e 100644
--- a/docs/src/main-modules/display/screen_layers.mdx
+++ b/docs/src/main-modules/display/screen_layers.mdx
@@ -78,4 +78,3 @@ Active Screen's background opacity is < 255.
-## API
diff --git a/docs/src/main-modules/display/setup.mdx b/docs/src/main-modules/display/setup.mdx
index 60d97148ad..65d51808e9 100644
--- a/docs/src/main-modules/display/setup.mdx
+++ b/docs/src/main-modules/display/setup.mdx
@@ -52,7 +52,7 @@ lv_display_set_buffers(display1, buf1, buf2, buf_size_in_bytes, render_mode)
- `buf2` a second optional buffer (see below)
- `buf_size_in_bytes` size of buffer(s) in bytes
- `render_mode` is one of the following:
-
+
- Use the buffer(s) to render
to the display using buffers smaller than the size of the display. Use of
buffers at least 1/10 display size is recommended. In [Flush Callback](/main-modules/display/setup) the rendered
@@ -170,4 +170,3 @@ that (clearing the display's `flushing` flag) when your callback returns.
However, if a Flush-Wait Callback is not set, LVGL assumes that
is called after the flush has completed.
-## API
diff --git a/docs/src/main-modules/display/tiling.mdx b/docs/src/main-modules/display/tiling.mdx
index 3b913f7bb9..13efabfc7f 100644
--- a/docs/src/main-modules/display/tiling.mdx
+++ b/docs/src/main-modules/display/tiling.mdx
@@ -55,4 +55,3 @@ Tiled rendering only affects the rendering process, and the [Flush Callback](/ma
called once for each invalidated area. Therefore, tiling is not visible from the
flushing point of view.
-## API
diff --git a/docs/src/main-modules/draw/draw_api.mdx b/docs/src/main-modules/draw/draw_api.mdx
index 465c415995..0cabf076d4 100644
--- a/docs/src/main-modules/draw/draw_api.mdx
+++ b/docs/src/main-modules/draw/draw_api.mdx
@@ -14,7 +14,7 @@ However there are three places where you can use LVGL's Drawing API directly.
1. **In the draw events of the Widgets**:
There are event codes which are sent when the Widget needs to render itself:
-
+
- , ,
:
Triggered before, during, and after a Widget is drawn, respectively. Widget
@@ -24,21 +24,21 @@ However there are three places where you can use LVGL's Drawing API directly.
Triggered before, during, and after all child Widgets are rendered, respectively.
This can be useful for overlay-like drawings, such as scrollbars which should be
rendered on top of any children.
-
+
These are relevant if a new Widget is implemented and it uses custom drawing.
2. **Modifying the created draw tasks**:
The when a draw task is created for a Widget
is sent. In this event the created draw task can be modified or new draw tasks
can be added. Typical use cases for this are modifying each bar of a bar chart,
or cells of a table.
-
+
For performance reasons, this event is disabled by default. Enable it by setting
the flag on the Widget(s) you
wish to emit this event.
3. **Draw to the Canvas Widget**:
The drawing functions can be used directly to draw to a Canvas Widget. Doing so
renders custom drawing to a buffer which can be used later as an image or a mask.
-
+
For more information see [Canvas (lv_canvas)](/widgets/canvas).
## Drawing API
@@ -65,4 +65,3 @@ object in the middle, the coordinates (145,145) (154,154) should be used
Exception: for the Canvas Widget the layer is always assumed to be at the (0,0)
coordinate, regardless of the Canvas Widget's position.
-## API
diff --git a/docs/src/main-modules/draw/draw_descriptors.mdx b/docs/src/main-modules/draw/draw_descriptors.mdx
index a1831afce4..d9fa9bc250 100644
--- a/docs/src/main-modules/draw/draw_descriptors.mdx
+++ b/docs/src/main-modules/draw/draw_descriptors.mdx
@@ -134,7 +134,7 @@ into a single call.
from a Widget, and `lv_draw_rect(layer, &dsc, area)` draws the rectangle in a
specified area.
-
+
## Fill Draw Descriptor
@@ -387,7 +387,7 @@ Functions for image drawing:
- creates a task to draw an image in a given area.
- retrieves the image descriptor from a task.
-
+
@@ -445,7 +445,7 @@ This iterates through all characters, calculates their positions, and calls the
callback for rendering each character. For callback details, see
.
-
+
@@ -472,7 +472,7 @@ Functions for arc drawing:
- creates a task to render an arc.
- retrieves arc descriptor from task.
-
+
@@ -508,7 +508,7 @@ Functions for line drawing:
to call a callback which draws a line between two points. This way it doesn't matter if
`p1, p2` or `points` were used as it calls the `callback` as needed.
-
+
@@ -529,7 +529,7 @@ Functions for triangle drawing:
- creates a task to draw a triangle.
- retrieves triangle descriptor.
-
+
## Blur Draw Descriptor
@@ -547,7 +547,7 @@ Functions for blur drawing:
- creates a task to blur an area.
- retrieves blur descriptor.
-
+
## Drop Shadow Draw Descriptor
@@ -602,7 +602,7 @@ lv_vector_path_t * path = lv_vector_path_create(LV_VECTOR_PATH_QUALITY_MEDIUM);
```
1. Set the shape of the path. The following show a few simple functions for that:
-
+
- : Clear all lines, arcs, and curves from a path
- : Move to a point without drawing any lines
- : Add a line to the path from last point to the point
@@ -611,7 +611,7 @@ lv_vector_path_t * path = lv_vector_path_create(LV_VECTOR_PATH_QUALITY_MEDIUM);
- : Add ellipse arc to the path from last point to the point
- : Close the sub path by connecting the first and last point
2. Set the stroke and fill settings on the draw descriptor for the given path. Use functions like:
-
+
- : Set stroke color for a descriptor.
- : Set stroke opacity for a descriptor
- : Set stroke width for a descriptor.
@@ -646,22 +646,22 @@ There are several options to mask parts of a layer, Widget, or drawing:
Similar to rectangles, images can also be rendered with a `radius`. Since
layer drawing and image drawing are handled the same way, this works for
layers as well.
-
+
You can draw various content on a layer and then render the layer with a
`clip_radius`, masking out all the content on the corners.
3. **Rectangle Mask Draw Task**:
A special Draw Task can mask out a rectangle from a layer by setting the alpha
channel of certain pixels to 0. To achieve this:
-
+
- Create an descriptor.
- Set `area`, `radius`, and `keep_outside` parameters. If
`keep_outside` is set to 1, areas outside of `area` remain unchanged.
Otherwise, they are cleared.
- Call .
-
+
Note: The layer must have a color format with an alpha channel, typically
.
-
+
In most cases, the *"Clip Radius of Images"* method is better because it
blends the layer with a radius mask on the fly, avoiding a dedicated masking
step. However, the *"Rectangle Mask Draw Task"* is useful when multiple areas
@@ -674,14 +674,14 @@ There are several options to mask parts of a layer, Widget, or drawing:
Using `..._style_bitmap_mask` or `bitmap_mask` in
allows setting an A8 or L8 image as a mask
for an image/layer during blending.
-
+
- Limitation: The mask always aligns to the center, and only one bitmap mask can
be used for an image/layer.
- When `..._style_bitmap_mask` is used, LVGL automatically creates a layer,
renders the Widgets there, and applies the bitmap mask during blending.
- Alternatively, the `bitmap_mask` property in the draw descriptor can be
used directly for image drawing.
-
+
By using the Canvas Widget with an buffer,
bitmap masks can be rendered dynamically.
@@ -689,4 +689,3 @@ There are several options to mask parts of a layer, Widget, or drawing:
-## API
diff --git a/docs/src/main-modules/draw/draw_layers.mdx b/docs/src/main-modules/draw/draw_layers.mdx
index dfae3c8a17..2a08c142fc 100644
--- a/docs/src/main-modules/draw/draw_layers.mdx
+++ b/docs/src/main-modules/draw/draw_layers.mdx
@@ -13,7 +13,7 @@ such layers are:
- clipped corners (a bit-mask application)
- layered opacity
- transformations
-
+
- scale
- skew
- rotation
@@ -119,7 +119,7 @@ in each case:
In `LV_EVENT_DRAW_MAIN/POST_BEGIN/...` events the Widget is being rendered to a
layer of the display or another temporary layer created earlier during rendering.
The current target layer can be retrieved using .
-
+
It also possible to create new layers in these events, but the previous layer is
also required since it will be the parent layer in .
2. **Modifying the created Draw Tasks**:
@@ -127,9 +127,9 @@ in each case:
`lv_draw_rect/label/etc` can be modified. It's not required to know the current
layer to modify a draw task. However, if something new also needs to be drawn with
`lv_draw_rect/label/etc` the current layer is also required.
-
+
The current layer can be read from the `base` draw descriptor. For example:
-
+
```c
/* In LV_EVENT_DRAW_TASK_ADDED */
lv_draw_task_t * t = lv_event_get_draw_task(e);
@@ -208,4 +208,3 @@ The total memory available for layers at once is controlled by
in `lv_conf.h`. If set to `0`, there is no
limit.
-## API
diff --git a/docs/src/main-modules/draw/draw_pipeline.mdx b/docs/src/main-modules/draw/draw_pipeline.mdx
index b7cd95baa2..2fae72d3e5 100644
--- a/docs/src/main-modules/draw/draw_pipeline.mdx
+++ b/docs/src/main-modules/draw/draw_pipeline.mdx
@@ -155,12 +155,11 @@ it should act on. If it handled the task, it sets the Draw Task's `state` field
All of the above have this relationship:
- LVGL (global)
-
+
- list of Draw Units
- list of [Display(s)](/main-modules/display/overview)
-
+
- Layer(s): Each [Display object](/main-modules/display/overview) has its own list of [Draw Layers](/main-modules/draw/draw_layers)
-
+
- Draw Tasks: Each Layer has its own list of Draw Tasks
-## API
diff --git a/docs/src/main-modules/draw/snapshot.mdx b/docs/src/main-modules/draw/snapshot.mdx
index aedcdfca78..24747fd578 100644
--- a/docs/src/main-modules/draw/snapshot.mdx
+++ b/docs/src/main-modules/draw/snapshot.mdx
@@ -75,4 +75,3 @@ is large enough, and if it fails, destroy the existing draw buffer and call
-## API
diff --git a/docs/src/main-modules/fonts/font_manager.mdx b/docs/src/main-modules/fonts/font_manager.mdx
index 4f0e6a1ff5..d2a8c7cbee 100644
--- a/docs/src/main-modules/fonts/font_manager.mdx
+++ b/docs/src/main-modules/fonts/font_manager.mdx
@@ -124,4 +124,3 @@ being referenced, the font manager will fail to be destroyed and the function wi
-## API
diff --git a/docs/src/main-modules/fonts/imgfont.mdx b/docs/src/main-modules/fonts/imgfont.mdx
index 3ee5d76683..7b3aec2380 100644
--- a/docs/src/main-modules/fonts/imgfont.mdx
+++ b/docs/src/main-modules/fonts/imgfont.mdx
@@ -36,4 +36,3 @@ To destroy the *imgfont* that is no longer used, use
-## API
diff --git a/docs/src/main-modules/fonts/overview.mdx b/docs/src/main-modules/fonts/overview.mdx
index 1d49f51505..5efd085488 100644
--- a/docs/src/main-modules/fonts/overview.mdx
+++ b/docs/src/main-modules/fonts/overview.mdx
@@ -156,4 +156,3 @@ lv_label_set_text(label, LV_SYMBOL_OK "Apply"); /*Concatenate with a string*/
Of course any other fonts can be used, just make sure that they define the
symbols you need.
-## API
diff --git a/docs/src/main-modules/fs.mdx b/docs/src/main-modules/fs.mdx
index 2047a9d6f6..20d755f512 100644
--- a/docs/src/main-modules/fs.mdx
+++ b/docs/src/main-modules/fs.mdx
@@ -349,4 +349,3 @@ to determine where the end of the file is.
The driver's `tell` will not actually be called.
-## API
diff --git a/docs/src/main-modules/images/decoders.mdx b/docs/src/main-modules/images/decoders.mdx
index a64b9ba56c..2bfe25ff12 100644
--- a/docs/src/main-modules/images/decoders.mdx
+++ b/docs/src/main-modules/images/decoders.mdx
@@ -47,7 +47,7 @@ To use the encoded file as a variable, choose one of these approaches:
object using ,
and when it is time to decode, the registered decoder that recognizes the image
format will be used to decode it.
-
+
The types having the word "variable" in the "Form" column in the table above would
support this approach if it was needed.
@@ -225,4 +225,3 @@ void gpu_draw_image(lv_draw_unit_t * draw_unit, const lv_draw_image_dsc_t * draw
}
```
-## API
diff --git a/docs/src/main-modules/images/sources.mdx b/docs/src/main-modules/images/sources.mdx
index eed8038b7a..39eb0e1356 100644
--- a/docs/src/main-modules/images/sources.mdx
+++ b/docs/src/main-modules/images/sources.mdx
@@ -110,4 +110,3 @@ Symbols are only implemented for [Image (lv_image)](/widgets/image) Widgets.
See [Using Images Examples](/main-modules/images/using_images) for a number of examples of
using image sources in these 3 forms.
-## API
diff --git a/docs/src/main-modules/indev/gridnav.mdx b/docs/src/main-modules/indev/gridnav.mdx
index 69281ab5bc..b8e5ae7bcf 100644
--- a/docs/src/main-modules/indev/gridnav.mdx
+++ b/docs/src/main-modules/indev/gridnav.mdx
@@ -90,4 +90,3 @@ hidden () to receive focus via gridnav.
-## API
diff --git a/docs/src/main-modules/observer/observer.mdx b/docs/src/main-modules/observer/observer.mdx
index 348ca06180..d991bb28fc 100644
--- a/docs/src/main-modules/observer/observer.mdx
+++ b/docs/src/main-modules/observer/observer.mdx
@@ -243,7 +243,7 @@ from memory using any of the methods below, depending on the effect you want to
gracefully remove the Observer (and its events) from the Subject, while deleting
the Widget.
- If Widget does NOT need to be deleted:
-
+
- deletes all Observers
associated with `widget`. `subject` can be NULL to unsubscribe the Widget
from all associated Subjects.
@@ -482,4 +482,3 @@ and (same for float subjects).
These functions set the given subject (integer or string) to a fixed value when the specified trigger event occurs.
-## API
diff --git a/docs/src/main-modules/timer.mdx b/docs/src/main-modules/timer.mdx
index 3bd0a73066..7eeb7750f8 100644
--- a/docs/src/main-modules/timer.mdx
+++ b/docs/src/main-modules/timer.mdx
@@ -181,4 +181,3 @@ If you just want to delete a Widget and don't need to clean anything up
in `my_screen_cleanup` you could just use which
will delete the Widget on the next call to .
-## API
diff --git a/docs/src/main-modules/translation.mdx b/docs/src/main-modules/translation.mdx
index 230b7f986b..b4335101d5 100644
--- a/docs/src/main-modules/translation.mdx
+++ b/docs/src/main-modules/translation.mdx
@@ -113,4 +113,3 @@ See the the bottom of this page for a complete example.
-## API
diff --git a/docs/src/widgets/3dtexture.mdx b/docs/src/widgets/3dtexture.mdx
index 16a10e1913..3a39628087 100644
--- a/docs/src/widgets/3dtexture.mdx
+++ b/docs/src/widgets/3dtexture.mdx
@@ -8,13 +8,11 @@ description: "3D texture widgets are used to embed an external 3D graphics libra
3D texture widgets are used to embed an external 3D graphics library's "texture" primitive
into an LVGL UI.
-## Parts and Styles
+## Styling
The size should be set to the actual size of the texture primitive.
The opacity may also be changed.
-## Usage
-
Requires a draw unit to be enabled which can draw the
draw task type.
@@ -50,5 +48,3 @@ With OpenGL, the type is `unsigned int`.
## Example
See the [lv_example_3dtexture](https://github.com/lvgl/lv_example_3dtexture) repo.
-
-## API
diff --git a/docs/src/widgets/animimg.mdx b/docs/src/widgets/animimg.mdx
index 91a4cdb2f9..2d0c9d6f91 100644
--- a/docs/src/widgets/animimg.mdx
+++ b/docs/src/widgets/animimg.mdx
@@ -11,30 +11,28 @@ multiple source images that supply "frames" in an animation.
You can specify a duration and repeat count.
-## Parts and Styles
+## Image sources
-- A background rectangle that uses the [typical
- background style properties](/common-widget-features/styles/overview) and the image itself using the image
- style properties.
+
-## Usage
-
-### Image sources
-
-To set the image animation image sources, use
+To set the image animation sources, use
.
-To set the images source for flip playback of animation image, use
+To set the sources for flip (reverse) playback, use
.
-### Using the inner animation
+## Using the inner animation
-For more advanced use cases, the animation used internally by the image can be
-retrieved using . Using this, you can
-use the [Animation](/main-modules/animation) functions, for example, to
-override the animation values using the
- or to set a callback
-on the animation completed event.
+The animation used internally by the widget can be retrieved with
+. This gives access to all
+[Animation](/main-modules/animation) functions — for example
+ or attaching a
+completion callback.
+
+## Styling
+
+- A background rectangle that uses the [typical
+ background style properties](/common-widget-features/styles/overview) and the image style properties.
## Events
@@ -42,8 +40,6 @@ No special events are sent by Animation-Image Widgets.
Learn more about [Events](/common-widget-features/events) emitted by all Widgets.
-
-Learn more about [events](/common-widget-features/events).
## Keys
@@ -53,11 +49,3 @@ No *Keys* are processed by Animation-Image Widgets.
Learn more about [Keys](/main-modules/indev/keypad).
-
-## Example
-
-### Simple Animation Image
-
-
-
-## API
diff --git a/docs/src/widgets/arc.mdx b/docs/src/widgets/arc.mdx
index 3a137804c5..9df0d5c977 100644
--- a/docs/src/widgets/arc.mdx
+++ b/docs/src/widgets/arc.mdx
@@ -8,22 +8,9 @@ description: "The Arc consists of a background and a foreground arc. The foregro
The Arc consists of a background and a foreground arc. The foreground
(indicator) can be touch-adjusted.
-## Parts and Styles
+## Value and range
-- Draws a background using the typical background
- style properties and an arc using the Arc style properties. The Arc's
- size and position will respect the *padding* style properties.
-- Draws another Arc using the *Arc* style
- properties. Its padding values are interpreted relative to the
- background Arc.
-- Draws a handle on the end of the indicator using all
- background properties and padding values. With zero padding the knob
- size is the same as the indicator's width. Larger padding makes it
- larger, smaller padding makes it smaller.
-
-## Usage
-
-### Value and range
+
A new value can be set using . The
value is interpreted in a range (minimum and maximum values) which can
@@ -42,12 +29,16 @@ Zero degrees is at the middle right (3 o'clock) of the Widget and the
degrees increasing in the clockwise direction. The angle values should be in
the range [0..360].
-### Rotation
+## Rotation
+
+
An offset to the 0-degree position can be added with
.
-### Mode
+## Mode
+
+
The Arc can be one of the following modes:
@@ -60,57 +51,89 @@ The mode can be set by or value of the Arc
is changed by pointer input (finger, mouse, etc.).
-### Change rate
+## Change rate
+
+
When the Arc's value is changed by pointer input (finger, mouse, etc.), the rate of
its change is limited according to its *change rate*. Change rate is defined in
degrees/second units and can be set with
-### Knob offset
+## Styling
+
+- Draws a background using the typical background
+ style properties and an arc using the Arc style properties. The Arc's
+ size and position will respect the *padding* style properties.
+- Draws another Arc using the *Arc* style
+ properties. Its padding values are interpreted relative to the
+ background Arc.
+- Draws a handle on the end of the indicator using all
+ background properties and padding values. With zero padding the knob
+ size is the same as the indicator's width. Larger padding makes it
+ larger, smaller padding makes it smaller.
+
+
+
+Arc's three parts — (background ring),
+ (active arc), and
+ — are styled independently. Use the
+`arc_*` style properties (`arc_color`, `arc_width`, `arc_rounded`,
+`arc_opa`) for the two rings; the knob is a fill and accepts the full
+`bg_*`, `border_*`, `shadow_*`, and `pad_*` stack. Attach a named style
+via `selector="main"`, `selector="indicator"`, or `selector="knob"`,
+or apply one-off tweaks with local `style_*` attributes on the
+`` tag.
+
+### Image indicator
+
+
+
+Setting `arc_image_src` on a part replaces the solid `arc_color` with pixels
+sampled from a bitmap. The image is centred on the arc's centre point and the
+arc shape is used as a mask, so any graphic painted in the ring zone of the
+image appears clipped to the arc band. Assign different bitmaps to
+ and to
+texture both the background ring and the active sweep independently.
+
+-
+
+## Knob offset
Changing the knob offset allows the location of the knob to be moved
relative to the end of the Arc. The knob offset can be set by
, and will only be visible if
is visible.
-### Setting indicator programmatically
+## Setting indicator programmatically
-It is possible to set indicator angle directly with any of these functions:
+
--
--
--
+Set the indicator angle directly with:
-When used, "value" and "mode" are ignored.
+-
+-
+-
-In other words, the angle and value settings are independent. You should
-exclusively use one or the other of the two methods. Mixing the two could
-result in unintended behavior.
+When set this way, `value` and `mode` are ignored — pick either the
+value-based or the angle-based API, don't mix.
-To make the arc non-adjustable, remove the style of the knob and
-make the Widget non-clickable:
+To make the arc display-only, hide the knob and disable clicks:
```c
lv_obj_remove_style(arc, NULL, LV_PART_KNOB);
lv_obj_remove_flag(arc, LV_OBJ_FLAG_CLICKABLE);
```
-### Interactive area
+## Interactive area
-By default is disabled which
-means the Arc's whole area is interactive.
-As usual can be used to increase
-the area that will respond to pointer input (touch, mouse, etc.) outside the Arc by a
-specified number of pixels.
+By default the whole bounding box of the arc accepts input. Enabling
+ narrows the hit area to the band between the
+start and end angles, with a tolerance at each end.
+ extends the sensitive area outward (or, with
+advanced hit-test, both inward and outward).
-If is enabled the Arc will be sensitive only
-in the range between start and end background angles and on the Arc itself (not inside the Arc).
-In this case `ext_click_area` makes the sensitive area ticker both inward and outward.
-Additionally, a tolerance of pixels is applied to each angle, extending the
-hit-test range along the Arc's length.
-
-### Place another Widget on the knob
+## Place another Widget on the knob
Another Widget can be positioned according to the current position of
the Arc in order to follow the Arc's current value (angle). To do this
@@ -123,25 +146,56 @@ used to rotate the Widget to the current value of the Arc.
A typical use case is to call these functions in the `VALUE_CHANGED`
event of the Arc.
-### Data binding
+
-To get familiar with observers, subjects, and data bindings in general visit the
-[Observer](/main-modules/observer/observer) page.
+## Pie chart from arcs
-This method of subscribing to an integer Subject affects an Arc Widget's integer
-value directly. Note that this is a two-way binding (Subject <===> Widget), so an end
-user's direct interaction with the Arc Widget updates the Subject's value and vice
-versa.
+
-It supports integer subjects and, when is enabled, float subjects.
+A pie chart is built from several arcs that share the same centre. Each arc
+carves out one slice via `bg_start_angle`/`bg_end_angle`, fixes `value` to
+`max_value` so the coloured indicator fills the slice end-to-end, and uses an
+`arc_width` on that is large enough to reach the centre
+— this turns the band into a solid wedge. Hide the bg track and the knob
+(opacity 0 on and ) so nothing else is drawn.
+The slice colours are set with `style_arc_color` on the indicator part.
+
+Set `arc_rounded="false"` on the indicator: rounded end caps add a curved
+overshoot to each slice, which produces a visible gap where two slices
+meet. Square end caps let adjacent slices share their seam pixels
+exactly. The example factors the three shared bits (invisible MAIN track,
+square-ended INDICATOR, invisible KNOB) into named styles so each slice
+only declares its own angles and colour.
+
+## Data binding
+
+Data bindings connect a widget property to a piece of global data — a
+[Subject](/main-modules/observer/observer). When the subject's value
+changes, every widget bound to it updates automatically; and an
+interactive widget can write back into the subject so other subscribers
+see the new value.
+
+An Arc binds its value to a Subject. The link is two-way: dragging the
+arc updates the subject, and any application-side write into the subject
+moves the indicator. Integer subjects are supported, plus float subjects
+when is enabled.
-
+To show the value live in a label next to the widget, attach a label and call — the format string accepts any printf-style specifier (XML: `bind_text` + `bind_text-fmt`).
+
+
+
+
## Events
- sent when Arc is pressed/dragged to
a new value.
+
+
+To update another widget on every value change without an event callback, bind both widgets to the same Subject — see the Data binding section above.
+
Learn more about [Events](/common-widget-features/events) emitted by all Widgets.
@@ -156,19 +210,3 @@ Learn more about [events](/common-widget-features/events).
Learn more about [Keys](/main-modules/indev/keypad).
-
-## Examples
-
-### Simple Arc
-
-
-
-### Loader with Arc
-
-
-
-### Pie Chart with clickable slices using Arcs
-
-
-
-## API
diff --git a/docs/src/widgets/arclabel.mdx b/docs/src/widgets/arclabel.mdx
index 57a9b8b38a..c820271ba9 100644
--- a/docs/src/widgets/arclabel.mdx
+++ b/docs/src/widgets/arclabel.mdx
@@ -7,32 +7,30 @@ description: "The Arc Label is a specialized widget designed to display text alo
The Arc Label is a specialized widget designed to display text along an arc. It allows for flexible text placement and styling, making it suitable for applications where text needs to follow a curved path, such as in gauges, dials, or custom interfaces. The widget supports various configurations, including text alignment, direction, radius adjustment, and color customization.
-## Parts and Styles
+## Styling
- Represents the main part of the Arc Label, including the arc path and the text rendered along it. The appearance of the text and the arc can be customized using typical text and background style properties.
-## Usage
-
-### Text Management
+## Text Management
- Text can be set using .
- For formatted text, use .
- Static text can be set with , which avoids dynamic memory allocation.
-### Angle Configuration
+## Angle Configuration
- Set the starting angle of the arc with .
- Define the arc size (angular span) using .
- Angles are measured in degrees, starting from the positive x-axis (3 o'clock position) and increasing clockwise.
-### Direction
+## Direction
Specify the text direction along the arc using or .
- Text flows in a clockwise direction along the arc.
- Text flows in a counter-clockwise direction along the arc.
-### Alignment
+## Alignment
Adjust vertical text alignment with .
Set horizontal alignment using .
@@ -44,16 +42,16 @@ Both vertical and horizontal use the same logic.
- Centers text along the arc.
- Aligns text to the trailing edge of the arc.
-### Radius and Center Offset
+## Radius and Center Offset
- Set the radius of the arc with .
- Adjust the center offset of the arc using and .
-### Color and Recoloring
+## Color and Recoloring
Enable text recoloring with . This allows parts of the text to be colored differently using color commands embedded in the text string.
-### Interactive Behavior
+## Interactive Behavior
By default, Arc Label is not clickable. To make it interactive, you would need to add custom event handling, as it does not inherit clickability by default.
@@ -69,6 +67,4 @@ The Arc Label does not define specific key bindings beyond those inherited from
### Simple Arc Label
-
-
-## API
+
diff --git a/docs/src/widgets/bar.mdx b/docs/src/widgets/bar.mdx
index 6d10f2b588..44f54764b0 100644
--- a/docs/src/widgets/bar.mdx
+++ b/docs/src/widgets/bar.mdx
@@ -11,7 +11,37 @@ indicator against the background indicates the Bar's current value.
Both the start and end values of the Bar can be set. Changing the start value to a
value other than the minimum value in its range adjusts the start position of the indicator.
-## Parts and Styles
+## Orientation and size
+
+
+
+Width and height pick orientation by default. Override with
+ — `AUTO`,
+`HORIZONTAL`, or `VERTICAL`.
+
+## Value and range
+
+
+
+- — set value; animation
+ toggle is the last argument.
+- — default `[0..100]`. Pass `min > max`
+ (e.g. `100..0`) to flip the fill direction.
+
+## Modes
+
+
+
+Set with :
+
+- `NORMAL` — default; fills from `min` to `value`.
+- `SYMMETRICAL` — fills from zero outward, so positive and negative
+ values pull the indicator in opposite directions. Needs a range that
+ crosses zero (e.g. `[-100..100]`).
+- `RANGE` — fills between `start` and `value`. Set the start with
+ . Start must be ≤ end.
+
+## Styling
- The Bar's background. It uses the [typical
background style properties](/common-widget-features/styles/overview). Adding padding makes the indicator
@@ -20,55 +50,50 @@ value other than the minimum value in its range adjusts the start position of th
- The Bar's indicator; also uses the [typical
background style properties](/common-widget-features/styles/overview).
-## Usage
+
-### Orientation and size
+Bar has two stylable parts: (the
+background track) and (the filled
+portion). Both accept the full background style stack: `bg_color`,
+`bg_grad_color` + `bg_grad_dir` for gradients, `radius`, `border_*`,
+`shadow_*`, and `pad_*`. Attach a named `