LVGL

https://lvgl.io/docs/open/8.4/
Admin
LVGL is a free and open-source embedded graphics library that creates beautiful UIs on...
Tokens:662,614
Snippets:8,404
Trust Score:9.9
Update:2 months ago
Show doc for...
Tokens:
Raw
### Simple LVGL Button Example in Micropython

Source: https://lvgl.io/docs/open/8.4/get-started/bindings/micropython.html

This example demonstrates the basic initialization of LVGL and the creation of a simple button with a label. It shows how to create objects, align them, set text, and load a screen. This is useful for getting started with GUI elements in Micropython.

```python
import lvgl as lv
lv.init()
scr = lv.obj()
btn = lv.btn(scr)
btn.align(lv.scr_act(), lv.ALIGN.CENTER, 0, 0)
label = lv.label(btn)
label.set_text("Button")
lv.scr_load(scr)

```

--------------------------------

### Basic Fragment Usage Example

Source: https://lvgl.io/docs/open/8.4/examples.html

A simple example demonstrating the basic creation and display of a fragment. This serves as a starting point for understanding fragment implementation.

```c
/* Example code for basic fragment usage */
void basic_fragment_usage_example(void)
{
    /* Code to create and show a basic fragment */
}
```

--------------------------------

### RT-Thread Example: Initialize LVGL Thread

Source: https://lvgl.io/docs/open/8.4/get-started/platforms/renesas.html

Create and start a dedicated thread for LVGL tasks, including initialization, display, input device setup, and the main task handler loop. This ensures LVGL runs independently.

```c
static void lvgl_thread_entry(void *parameter)
{
#if LV_USE_LOG
    lv_log_register_print_cb(lv_rt_log);
#endif /* LV_USE_LOG */
    lv_init();
    lv_port_disp_init();
    lv_port_indev_init();
    lv_user_gui_init();

    /* handle the tasks of LVGL */
    while(1)
    {
        lv_task_handler();
        rt_thread_mdelay(LV_DISP_DEF_REFR_PERIOD);
    }
}

static int lvgl_thread_init(void)
{
    rt_err_t err;
	
    /* create lvgl thread */
    err = rt_thread_init(&lvgl_thread, "LVGL", lvgl_thread_entry, RT_NULL,
           &lvgl_thread_stack[0], sizeof(lvgl_thread_stack), PKG_LVGL_THREAD_PRIO, 10);
    if(err != RT_EOK)
    {
        LOG_E("Failed to create LVGL thread");
        return -1;
    }
    rt_thread_startup(&lvgl_thread);

    return 0;
}
INIT_ENV_EXPORT(lvgl_thread_init);
```

--------------------------------

### Example QR Code Generation with Styling (C)

Source: https://lvgl.io/docs/open/8.4/libs/qrcode.html

An example demonstrating how to create a QR code with custom foreground and background colors, set its data, center it on the screen, and add a border. This example is conditional on LV_USE_QRCODE and LV_BUILD_EXAMPLES being defined.

```c
#include "../../lv_examples.h"
#if LV_USE_QRCODE && LV_BUILD_EXAMPLES

/**
 * Create a QR Code
 */
void lv_example_qrcode_1(void)
{
    lv_color_t bg_color = lv_palette_lighten(LV_PALETTE.LIGHT_BLUE, 5);
    lv_color_t fg_color = lv_palette_darken(LV_PALETTE.BLUE, 4);

    lv_obj_t * qr = lv_qrcode_create(lv_scr_act(), 150, fg_color, bg_color);

    /*Set data*/
    const char * data = "https://lvgl.io";
    lv_qrcode_update(qr, data, strlen(data));
    lv_obj_center(qr);

    /*Add a border with bg_color*/
    lv_obj_set_style_border_color(qr, bg_color, 0);
    lv_obj_set_style_border_width(qr, 5, 0);
}

#endif








```

--------------------------------

### Simple C Animation Image Example

Source: https://lvgl.io/docs/open/8.4/widgets/extra/animimg.html

Demonstrates creating and configuring a simple animated image using C. It sets up an array of image descriptors, configures the animation duration and repeat count, and starts the animation.

```c
#include "../../lv_examples.h"
#if LV_USE_ANIMIMG && LV_BUILD_EXAMPLES
LV_IMG_DECLARE(animimg001)
LV_IMG_DECLARE(animimg002)
LV_IMG_DECLARE(animimg003)

static const lv_img_dsc_t * anim_imgs[3] = {
    &animimg001,
    &animimg002,
    &animimg003,
};

void lv_example_animimg_1(void)
{
    lv_obj_t * animimg0 = lv_animimg_create(lv_scr_act());
    lv_obj_center(animimg0);
    lv_animimg_set_src(animimg0, (const void **) anim_imgs, 3);
    lv_animimg_set_duration(animimg0, 1000);
    lv_animimg_set_repeat_count(animimg0, LV_ANIM_REPEAT_INFINITE);
    lv_animimg_start(animimg0);
}

#endif

```

--------------------------------

### Simple Tabview Example (Python)

Source: https://lvgl.io/docs/open/8.4/widgets/extra/tabview.html

A basic Python example demonstrating the creation of a Tabview with multiple tabs and content.

```Python
# Create a Tab view object
tabview = lv.tabview(lv.scr_act(), lv.DIR.TOP, 50)

# Add 3 tabs (the tabs are page (lv_page) and can be scrolled
tab1 = tabview.add_tab("Tab 1")
tab2 = tabview.add_tab("Tab 2")
tab3 = tabview.add_tab("Tab 3")

# Add content to the tabs
label = lv.label(tab1)
label.set_text("""This the first tab\n\nIf the content\nof a tab\nbecomes too\nlonger\nthan the\ncontainer\nthen it\nautomatically\nbecomes\nscrollable.\n\n\n\nCan you see it?""")

label = lv.label(tab2)
label.set_text("Second tab")

label = lv.label(tab3)
label.set_text("Third tab");

label.scroll_to_view_recursive(lv.ANIM.ON)

```

--------------------------------

### Simple Switch Example (C)

Source: https://lvgl.io/docs/open/8.4/widgets/core/switch.html

Demonstrates creating and managing LVGL switch widgets in C. Includes examples of a basic switch, a pre-checked switch, a disabled switch, and a disabled-checked switch, all with event handling for state changes.

```c
#include "../../lv_examples.h"
#if LV_USE_SWITCH && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        LV_LOG_USER("State: %s\n", lv_obj_has_state(obj, LV_STATE_CHECKED) ? "On" : "Off");
    }
}

void lv_example_switch_1(void)
{
    lv_obj_set_flex_flow(lv_scr_act(), LV_FLEX_FLOW_COLUMN);
    lv_obj_set_flex_align(lv_scr_act(), LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER, LV_FLEX_ALIGN_CENTER);

    lv_obj_t * sw;

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_state(sw, LV_STATE_CHECKED);
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_state(sw, LV_STATE_DISABLED);
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);

    sw = lv_switch_create(lv_scr_act());
    lv_obj_add_state(sw, LV_STATE_CHECKED | LV_STATE_DISABLED);
    lv_obj_add_event_cb(sw, event_handler, LV_EVENT_ALL, NULL);
}

#endif

```

--------------------------------

### Apply Size, Position, and Padding Styles

Source: https://lvgl.io/docs/open/8.4/examples.html

This example demonstrates how to initialize a style and set properties like radius, width, height, padding, and position. The style is then applied to a newly created object.

```c
#include "../lv_examples.h"
#if LV_BUILD_EXAMPLES && LV_USE_IMG

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

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

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

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

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

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

#endif

```

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

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

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

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

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

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

```

--------------------------------

### Get Bar Start Value

Source: https://lvgl.io/docs/open/8.4/widgets/core/bar.html

Retrieves the current start value of the bar.

```APIDOC
## lv_bar_get_start_value

### Description
Get the start value of a bar.

### Parameters
- **obj** (const lv_obj_t *) - pointer to a bar object

### Returns
- int32_t - the start value of the bar
```

--------------------------------

### Load SJPG Image Example (C)

Source: https://lvgl.io/docs/open/8.4/libs/sjpg.html

Example demonstrating how to load an SJPG image from a file system. Assumes a file system is mounted at 'A:'.

```c
#include "../../lv_examples.h"
#if LV_USE_SJPG && LV_BUILD_EXAMPLES

/**
 * Load an SJPG image
 */
void lv_example_sjpg_1(void)
{
    lv_obj_t * wp;

    wp = lv_img_create(lv_scr_act());
    /* Assuming a File system is attached to letter 'A' 
     * E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
    lv_img_set_src(wp, "A:lvgl/examples/libs/sjpg/small_image.sjpg");
}

#endif

```

--------------------------------

### Get Text Selection Start

Source: https://lvgl.io/docs/open/8.4/widgets/core/label.html

Retrieves the starting character index of the current text selection.

```APIDOC
## lv_label_get_text_selection_start

### Description
Get the selection start index.

### Parameters
* **obj** (const lv_obj_t *) - pointer to a label object.

### Returns
* uint32_t - selection start index. `LV_LABEL_TEXT_SELECTION_OFF` if nothing is selected.
```

--------------------------------

### X-Axis Start Point Index

Source: https://lvgl.io/docs/open/8.4/widgets/extra/chart.html

Get the starting index for the x-axis in the data array for a specific series.

```APIDOC
## lv_chart_get_x_start_point

### Description
Get the current index of the x-axis start point in the data array.

### Method
`uint16_t lv_chart_get_x_start_point(const lv_obj_t *obj, lv_chart_series_t *ser)`

### Parameters
* **chart** (const lv_obj_t *) - pointer to a chart object
* **ser** (lv_chart_series_t *) - pointer to a data series on 'chart'

### Returns
the index of the current x start point in the data array
```

--------------------------------

### Create and Style LEDs (C)

Source: https://lvgl.io/docs/open/8.4/widgets/extra/led.html

Demonstrates creating multiple LED objects, aligning them, and setting their initial state (off), brightness, and color. Ensure LV_USE_LED is enabled.

```c
#include "../../lv_examples.h"
#if LV_USE_LED && LV_BUILD_EXAMPLES

/**
 * Create LED's with different brightness and color
 */
void lv_example_led_1(void)
{
    /*Create a LED and switch it OFF*/
    lv_obj_t * led1  = lv_led_create(lv_scr_act());
    lv_obj_align(led1, LV_ALIGN_CENTER, -80, 0);
    lv_led_off(led1);

    /*Copy the previous LED and set a brightness*/
    lv_obj_t * led2  = lv_led_create(lv_scr_act());
    lv_obj_align(led2, LV_ALIGN_CENTER, 0, 0);
    lv_led_set_brightness(led2, 150);
    lv_led_set_color(led2, lv_palette_main(LV_PALETTE_RED));

    /*Copy the previous LED and switch it ON*/
    lv_obj_t * led3  = lv_led_create(lv_scr_act());
    lv_obj_align(led3, LV_ALIGN_CENTER, 80, 0);
    lv_led_on(led3);
}

#endif

```

--------------------------------

### Create and Configure a Line Chart (C)

Source: https://lvgl.io/docs/open/8.4/widgets/extra/chart.html

Demonstrates how to create a line chart, set its size and position, add two data series with different axes, and populate them with data. Requires LV_USE_CHART and LV_BUILD_EXAMPLES to be enabled.

```c
#include "../../lv_examples.h"
#if LV_USE_CHART && LV_BUILD_EXAMPLES

void lv_example_chart_1(void)
{
    /*Create a chart*/
    lv_obj_t * chart;
    chart = lv_chart_create(lv_scr_act());
    lv_obj_set_size(chart, 200, 150);
    lv_obj_center(chart);
    lv_chart_set_type(chart, LV_CHART_TYPE_LINE);   /*Show lines and points too*/

    /*Add two data series*/
    lv_chart_series_t * ser1 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_RED), LV_CHART_AXIS_PRIMARY_Y);
    lv_chart_series_t * ser2 = lv_chart_add_series(chart, lv_palette_main(LV_PALETTE_GREEN), LV_CHART_AXIS_SECONDARY_Y);

    /*Set the next points on 'ser1'*/
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 10);
    lv_chart_set_next_value(chart, ser1, 30);
    lv_chart_set_next_value(chart, ser1, 70);
    lv_chart_set_next_value(chart, ser1, 90);

    /*Directly set points on 'ser2'*/
    ser2->y_points[0] = 90;
    ser2->y_points[1] = 70;
    ser2->y_points[2] = 65;
    ser2->y_points[3] = 65;
    ser2->y_points[4] = 65;
    ser2->y_points[5] = 65;
    ser2->y_points[6] = 65;
    ser2->y_points[7] = 65;
    ser2->y_points[8] = 65;
    ser2->y_points[9] = 65;

    lv_chart_refresh(chart); /*Required after direct set*/
}

#endif

```

--------------------------------

### Animation Setup Functions

Source: https://lvgl.io/docs/open/8.4/overview/animation.html

Functions to configure various aspects of an animation before it starts.

```APIDOC
## lv_anim_set_deleted_cb

### Description
Set a function to be called when the animation is deleted.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `deleted_cb` (lv_anim_deleted_cb_t) - A function to call when the animation is deleted.

## lv_anim_set_playback_time

### Description
Make the animation play back to its starting state when the forward direction is complete.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `time` (uint32_t) - The duration of the playback animation in milliseconds. Set to 0 to disable playback.

## lv_anim_set_playback_delay

### Description
Set the delay before the animation starts playing back after the forward direction is complete.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `delay` (uint32_t) - Delay in milliseconds before starting the playback animation.

## lv_anim_set_repeat_count

### Description
Configure the animation to repeat itself.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `cnt` (uint16_t) - The repeat count. Use `LV_ANIM_REPEAT_INFINITE` for infinite repetition. Set to 0 to disable repetition.

## lv_anim_set_repeat_delay

### Description
Set the delay before the animation repeats.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `delay` (uint32_t) - Delay in milliseconds before repeating the animation.

## lv_anim_set_early_apply

### Description
Determine whether the animation's values should be applied immediately or only after the delay has expired.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `en` (bool) - `true`: apply the start value immediately in `lv_anim_start`. `false`: apply the start value only when `delay` ms has elapsed and the animation truly begins.

## lv_anim_set_user_data

### Description
Set the custom user data field for the animation.

### Method
`static inline void`

### Parameters
* `a` (lv_anim_t *) - Pointer to an initialized `lv_anim_t` variable.
* `user_data` (void *) - Pointer to the new user data.
```

--------------------------------

### Example: Open GIF from File and Variable (C)

Source: https://lvgl.io/docs/open/8.4/libs/gif.html

Demonstrates creating two GIF widgets: one from a variable and another from a file path. Assumes a file system is attached to 'A:'.

```c
#include "../../lv_examples.h"
#if LV_USE_GIF && LV_BUILD_EXAMPLES

/**
 * Open a GIF image from a file and a variable
 */
void lv_example_gif_1(void)
{
    LV_IMG_DECLARE(img_bulb_gif);
    lv_obj_t * img;

    img = lv_gif_create(lv_scr_act());
    lv_gif_set_src(img, &img_bulb_gif);
    lv_obj_align(img, LV_ALIGN_LEFT_MID, 20, 0);

    img = lv_gif_create(lv_scr_act());
    /* Assuming a File system is attached to letter 'A' 
     * E.g. set LV_USE_FS_STDIO 'A' in lv_conf.h */
    lv_gif_set_src(img, "A:lvgl/examples/libs/gif/bulb.gif");
    lv_obj_align(img, LV_ALIGN_RIGHT_MID, -20, 0);
}

#endif

```

--------------------------------

### Get Arc Angles

Source: https://lvgl.io/docs/open/8.4/widgets/core/arc.html

Retrieves the start and end angles for the arc's foreground and background.

```APIDOC
## lv_arc_get_angle_start

### Description
Get the start angle of an arc.

### Parameters
* **obj** (lv_obj_t *) - pointer to an arc object

### Returns
* uint16_t - the start angle [0..360]

## lv_arc_get_angle_end

### Description
Get the end angle of an arc.

### Parameters
* **obj** (lv_obj_t *) - pointer to an arc object

### Returns
* uint16_t - the end angle [0..360]

## lv_arc_get_bg_angle_start

### Description
Get the start angle of an arc background.

### Parameters
* **obj** (lv_obj_t *) - pointer to an arc object

### Returns
* uint16_t - the start angle [0..360]

## lv_arc_get_bg_angle_end

### Description
Get the end angle of an arc background.

### Parameters
* **obj** (lv_obj_t *) - pointer to an arc object

### Returns
* uint16_t - the end angle [0..360]
```

--------------------------------

### Create and Configure a Simple Spinbox

Source: https://lvgl.io/docs/open/8.4/widgets/extra/spinbox.html

Demonstrates how to create a spinbox, set its range, format, and initial step. It also shows how to add increment and decrement buttons with event callbacks.

```c
#include "../../lv_examples.h"
#if LV_USE_SPINBOX && LV_BUILD_EXAMPLES

static lv_obj_t * spinbox;

static void lv_spinbox_increment_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_SHORT_CLICKED || code  == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_increment(spinbox);
    }
}

static void lv_spinbox_decrement_event_cb(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    if(code == LV_EVENT_SHORT_CLICKED || code == LV_EVENT_LONG_PRESSED_REPEAT) {
        lv_spinbox_decrement(spinbox);
    }
}

void lv_example_spinbox_1(void)
{
    spinbox = lv_spinbox_create(lv_scr_act());
    lv_spinbox_set_range(spinbox, -1000, 25000);
    lv_spinbox_set_digit_format(spinbox, 5, 2);
    lv_spinbox_step_prev(spinbox);
    lv_obj_set_width(spinbox, 100);
    lv_obj_center(spinbox);

    lv_coord_t h = lv_obj_get_height(spinbox);

    lv_obj_t * btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, h, h);
    lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_RIGHT_MID, 5, 0);
    lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_PLUS, 0);
    lv_obj_add_event_cb(btn, lv_spinbox_increment_event_cb, LV_EVENT_ALL,  NULL);

    btn = lv_btn_create(lv_scr_act());
    lv_obj_set_size(btn, h, h);
    lv_obj_align_to(btn, spinbox, LV_ALIGN_OUT_LEFT_MID, -5, 0);
    lv_obj_set_style_bg_img_src(btn, LV_SYMBOL_MINUS, 0);
    lv_obj_add_event_cb(btn, lv_spinbox_decrement_event_cb, LV_EVENT_ALL, NULL);
}

#endif

```

```python
def increment_event_cb(e):
    code = e.get_code()
    if code == lv.EVENT.SHORT_CLICKED or code  == lv.EVENT.LONG_PRESSED_REPEAT:
        spinbox.increment()

def decrement_event_cb(e):
    code = e.get_code()
    if code == lv.EVENT.SHORT_CLICKED or code == lv.EVENT.LONG_PRESSED_REPEAT:
        spinbox.decrement()

spinbox = lv.spinbox(lv.scr_act())
spinbox.set_range(-1000, 25000)
spinbox.set_digit_format(5, 2)
spinbox.step_prev()
spinbox.set_width(100)
spinbox.center()

h = spinbox.get_height()

btn = lv.btn(lv.scr_act())
btn.set_size(h, h)
btn.align_to(spinbox, lv.ALIGN.OUT_RIGHT_MID, 5, 0)
btn.set_style_bg_img_src(lv.SYMBOL.PLUS, 0)
btn.add_event_cb(increment_event_cb, lv.EVENT.ALL,  None)

btn = lv.btn(lv.scr_act())
btn.set_size(h, h)
btn.align_to(spinbox, lv.ALIGN.OUT_LEFT_MID, -5, 0)
btn.set_style_bg_img_src(lv.SYMBOL.MINUS, 0)
btn.add_event_cb(decrement_event_cb, lv.EVENT.ALL, None)

```

--------------------------------

### Configure lv_conf.h

Source: https://lvgl.io/docs/open/8.4/porting/project.html

Set up the `lv_conf.h` file by copying `lv_conf_template.h` and renaming it. Modify the `#if 0` to `#if 1` to enable configuration options. Ensure `LV_COLOR_DEPTH` matches your display.

```c
lv_conf.h
```

--------------------------------

### Advanced Animation Callbacks

Source: https://lvgl.io/docs/open/8.4/overview/animation.html

Functions to set custom callbacks for animation path, start, get value, and ready events.

```APIDOC
## lv_anim_set_custom_exec_cb

### Description
Similar to `lv_anim_set_exec_cb` but the callback receives `lv_anim_t *` as its first parameter. This can be useful for bindings to other languages.

### Parameters
* **a** -- pointer to an initialized `lv_anim_t` variable
* **exec_cb** -- a function to execute. The variable to animate can be stored in the animation's `user_data`.

## lv_anim_set_path_cb

### Description
Sets the path (curve) of the animation, defining how the animation progresses over time.

### Parameters
* **a** -- pointer to an initialized `lv_anim_t` variable
* **path_cb** -- a function to set the current value of the animation.

## lv_anim_set_start_cb

### Description
Sets a callback function that will be called when the animation actually starts, considering any set delay.

### Parameters
* **a** -- pointer to an initialized `lv_anim_t` variable
* **start_cb** -- a function call when the animation starts.

## lv_anim_set_get_value_cb

### Description
Sets a callback function to retrieve the current value of the animated variable. This allows start and end values to be relative to the current value.

### Parameters
* **a** -- pointer to an initialized `lv_anim_t` variable
* **get_value_cb** -- a function call when the animation starts.

## lv_anim_set_ready_cb

### Description
Sets a callback function that will be called when the animation completes.

### Parameters
* **a** -- pointer to an initialized `lv_anim_t` variable
* **ready_cb** -- a function call when the animation is ready.
```

--------------------------------

### Create and Configure Button Matrix (C)

Source: https://lvgl.io/docs/open/8.4/widgets/core/btnmatrix.html

Demonstrates creating a button matrix, setting its map, adjusting button widths, and configuring button properties like checkability and checked state. Event handling is also included.

```c
#include "../../lv_examples.h"
#if LV_USE_BTNMATRIX && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        uint32_t id = lv_btnmatrix_get_selected_btn(obj);
        const char * txt = lv_btnmatrix_get_btn_text(obj, id);

        LV_LOG_USER("%s was pressed\n", txt);
    }
}

static const char * btnm_map[] = {"1", "2", "3", "4", "5", "\n",
                                  "6", "7", "8", "9", "0", "\n",
                                  "Action1", "Action2", ""
                                 };

void lv_example_btnmatrix_1(void)
{
    lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
    lv_btnmatrix_set_map(btnm1, btnm_map);
    lv_btnmatrix_set_btn_width(btnm1, 10, 2);        /*Make "Action1" twice as wide as "Action2"*/
    lv_btnmatrix_set_btn_ctrl(btnm1, 10, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 11, LV_BTNMATRIX_CTRL_CHECKED);
    lv_obj_align(btnm1, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(btnm1, event_handler, LV_EVENT_ALL, NULL);
}

#endif

```

--------------------------------

### Image Recoolring Setup (MicroPython)

Source: https://lvgl.io/docs/open/8.4/examples.html

Initializes the LVGL environment and registers the PNG image decoder for use with image manipulation examples in MicroPython. This code is a prerequisite for image handling.

```python
#!/opt/bin/lv_micropython -i
import usys as sys
import lvgl as lv
import display_driver
from imagetools import get_png_info, open_png

# Register PNG image decoder
decoder = lv.img.decoder_create()
decoder.info_cb = get_png_info
decoder.open_cb = open_png


```

--------------------------------

### Simple Switch Example (Python)

Source: https://lvgl.io/docs/open/8.4/widgets/core/switch.html

Demonstrates creating and managing LVGL switch widgets in Python. Includes examples of a basic switch, a pre-checked switch, a disabled switch, and a disabled-checked switch, all with event handling for state changes.

```python
def event_handler(e):
    code = e.get_code()
    obj = e.get_target()
    if code == lv.EVENT.VALUE_CHANGED:
        if obj.has_state(lv.STATE.CHECKED):
            print("State: on")
        else:
            print("State: off")


lv.scr_act().set_flex_flow(lv.FLEX_FLOW.COLUMN)
lv.scr_act().set_flex_align(lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER, lv.FLEX_ALIGN.CENTER)

sw = lv.switch(lv.scr_act())
sw.add_event_cb(event_handler,lv.EVENT.ALL, None)

sw = lv.switch(lv.scr_act())
sw.add_state(lv.STATE.CHECKED)
sw.add_event_cb(event_handler, lv.EVENT.ALL, None)

sw = lv.switch(lv.scr_act())
sw.add_state(lv.STATE.DISABLED)
sw.add_event_cb(event_handler, lv.EVENT.ALL, None)

sw = lv.switch(lv.scr_act())
sw.add_state(lv.STATE.CHECKED | lv.STATE.DISABLED)
sw.add_event_cb(event_handler, lv.EVENT.ALL, None)

```

--------------------------------

### Get Text Selection Indices

Source: https://lvgl.io/docs/open/8.4/widgets/core/label.html

Retrieve the start and end character indices for text selection within a label. This functionality is primarily managed by Text Areas, but labels provide access to these indices.

```c
lv_label_get_text_selection_start(label, start_char_index);
```

```c
lv_label_get_text_selection_end(label, end_char_index);
```

--------------------------------

### Customize Circular Scrolling Animation (C)

Source: https://lvgl.io/docs/open/8.4/widgets/core/label.html

This example demonstrates how to enable and customize the circular scrolling animation for a label using `LV_LABEL_LONG_SCROLL_CIRCULAR`. It sets up an animation template with delays for starting and repeating the scroll.

```c
#include "../../lv_examples.h"
#if LV_USE_LABEL && LV_BUILD_EXAMPLES

/**
 * Show customizing the circular scrolling animation of a label with `LV_LABEL_LONG_SCROLL_CIRCULAR`
 * long mode.
 */
void lv_example_label_5(void)
{
    static lv_anim_t animation_template;
    static lv_style_t label_style;

    lv_anim_init(&animation_template);
    lv_anim_set_delay(&animation_template, 1000);           /*Wait 1 second to start the first scroll*/
    lv_anim_set_repeat_delay(&animation_template,
                             3000);    /*Repeat the scroll 3 seconds after the label scrolls back to the initial position*/

    /*Initialize the label style with the animation template*/
    lv_style_init(&label_style);
    lv_style_set_anim(&label_style, &animation_template);

    lv_obj_t * label1 = lv_label_create(lv_scr_act());
    lv_label_set_long_mode(label1, LV_LABEL_LONG_SCROLL_CIRCULAR);      /*Circular scroll*/
    lv_obj_set_width(label1, 150);
    lv_label_set_text(label1, "It is a circularly scrolling text. ");
    lv_obj_align(label1, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_style(label1, &label_style, LV_STATE_DEFAULT);           /*Add the style to the label*/
}

#endif

```

--------------------------------

### Create and Style LEDs (Python)

Source: https://lvgl.io/docs/open/8.4/widgets/extra/led.html

Demonstrates creating multiple LED objects, aligning them, and setting their initial state (off), brightness, and color using the Python binding.

```python
#
# Create LED's with different brightness and color
#

# Create a LED and switch it OFF
led1  = lv.led(lv.scr_act())
led1.align(lv.ALIGN.CENTER, -80, 0)
led1.off()

# Copy the previous LED and set a brightness
led2  = lv.led(lv.scr_act())
led2.align(lv.ALIGN.CENTER, 0, 0)
led2.set_brightness(150)
led2.set_color(lv.palette_main(lv.PALETTE.RED))

# Copy the previous LED and switch it ON
led3  = lv.led(lv.scr_act())
led3.align(lv.ALIGN.CENTER, 80, 0)
led3.on()

```

--------------------------------

### Create and Populate a Simple List (C)

Source: https://lvgl.io/docs/open/8.4/widgets/extra/list.html

Demonstrates how to create a list widget, add text labels, and populate it with buttons that have icons and text. Includes an event handler for button clicks.

```c
#include "../../lv_examples.h"
#if LV_USE_LIST && LV_BUILD_EXAMPLES
static lv_obj_t * list1;

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_CLICKED) {
        LV_LOG_USER("Clicked: %s", lv_list_get_btn_text(list1, obj));
    }
}

void lv_example_list_1(void)
{
    /*Create a list*/
    list1 = lv_list_create(lv_scr_act());
    lv_obj_set_size(list1, 180, 220);
    lv_obj_center(list1);

    /*Add buttons to the list*/
    lv_obj_t * btn;

    lv_list_add_text(list1, "File");
    btn = lv_list_add_btn(list1, LV_SYMBOL_FILE, "New");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_DIRECTORY, "Open");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_SAVE, "Save");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_CLOSE, "Delete");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_EDIT, "Edit");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);

    lv_list_add_text(list1, "Connectivity");
    btn = lv_list_add_btn(list1, LV_SYMBOL_BLUETOOTH, "Bluetooth");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_GPS, "Navigation");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_USB, "USB");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_BATTERY_FULL, "Battery");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);

    lv_list_add_text(list1, "Exit");
    btn = lv_list_add_btn(list1, LV_SYMBOL_OK, "Apply");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
    btn = lv_list_add_btn(list1, LV_SYMBOL_CLOSE, "Close");
    lv_obj_add_event_cb(btn, event_handler, LV_EVENT_CLICKED, NULL);
}

#endif

```

--------------------------------

### Start Animation on Event (Python)

Source: https://lvgl.io/docs/open/8.4/overview/animation.html

This Python code replicates the C example, triggering animations based on a switch's state change. It uses lambda functions for custom execution callbacks.

```python
def anim_x_cb(label, v):
    label.set_x(v)

def sw_event_cb(e,label):
    sw = e.get_target()

    if sw.has_state(lv.STATE.CHECKED):
        a = lv.anim_t()
        a.init()
        a.set_var(label)
        a.set_values(label.get_x(), 100)
        a.set_time(500)
        a.set_path_cb(lv.anim_t.path_overshoot)
        a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val))
        lv.anim_t.start(a)
    else:
        a = lv.anim_t()
        a.init()
        a.set_var(label)
        a.set_values(label.get_x(), -label.get_width())
        a.set_time(500)
        a.set_path_cb(lv.anim_t.path_ease_in)
        a.set_custom_exec_cb(lambda a,val: anim_x_cb(label,val))
        lv.anim_t.start(a)

#
# Start animation on an event
#

label = lv.label(lv.scr_act())
label.set_text("Hello animations!")
label.set_pos(100, 10)


sw = lv.switch(lv.scr_act())
sw.center()
sw.add_state(lv.STATE.CHECKED)
sw.add_event_cb(lambda e: sw_event_cb(e,label), lv.EVENT.VALUE_CHANGED, None)




```

--------------------------------

### Play Video with FFmpeg

Source: https://lvgl.io/docs/open/8.4/libs/ffmpeg.html

Example of how to create and play a video using FFmpeg. Ensure LV_USE_FFMPEG is enabled in lv_conf.h. This function creates a video player, sets the source file, and starts playback.

```c
#include "../../lv_examples.h"
#if LV_BUILD_EXAMPLES
#if LV_USE_FFMPEG

/**
 * Open a video from a file
 */
void lv_example_ffmpeg_2(void)
{
    /*birds.mp4 is downloaded from http://www.videezy.com (Free Stock Footage by Videezy!)
     *https://www.videezy.com/abstract/44864-silhouettes-of-birds-over-the-sunset*/
    lv_obj_t * player = lv_ffmpeg_player_create(lv_scr_act());
    lv_ffmpeg_player_set_src(player, "./lvgl/examples/libs/ffmpeg/birds.mp4");
    lv_ffmpeg_player_set_auto_restart(player, true);
    lv_ffmpeg_player_set_cmd(player, LV_FFMPEG_PLAYER_CMD_START);
    lv_obj_center(player);
}

#else

void lv_example_ffmpeg_2(void)
{
    /*TODO
     *fallback for online examples*/

    lv_obj_t * label = lv_label_create(lv_scr_act());
    lv_label_set_text(label, "FFmpeg is not installed");
    lv_obj_center(label);
}

#endif
#endif

```

--------------------------------

### Create and Configure a Button Matrix (C)

Source: https://lvgl.io/docs/open/8.4/examples.html

Demonstrates how to create a button matrix, set its map, configure button widths and controls, align it, and add an event callback. Requires LV_USE_BTNMATRIX to be enabled.

```c
#include "../../lv_examples.h"
#if LV_USE_BTNMATRIX && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);
    lv_obj_t * obj = lv_event_get_target(e);
    if(code == LV_EVENT_VALUE_CHANGED) {
        uint32_t id = lv_btnmatrix_get_selected_btn(obj);
        const char * txt = lv_btnmatrix_get_btn_text(obj, id);

        LV_LOG_USER("%s was pressed\n", txt);
    }
}

static const char * btnm_map[] = {"1", "2", "3", "4", "5", "\n",
                                  "6", "7", "8", "9", "0", "\n",
                                  "Action1", "Action2", ""};

void lv_example_btnmatrix_1(void)
{
    lv_obj_t * btnm1 = lv_btnmatrix_create(lv_scr_act());
    lv_btnmatrix_set_map(btnm1, btnm_map);
    lv_btnmatrix_set_btn_width(btnm1, 10, 2);        /*Make "Action1" twice as wide as "Action2"*/
    lv_btnmatrix_set_btn_ctrl(btnm1, 10, LV_BTNMATRIX_CTRL_CHECKABLE);
    lv_btnmatrix_set_btn_ctrl(btnm1, 11, LV_BTNMATRIX_CTRL_CHECKED);
    lv_obj_align(btnm1, LV_ALIGN_CENTER, 0, 0);
    lv_obj_add_event_cb(btnm1, event_handler, LV_EVENT_ALL, NULL);
}

#endif

```

--------------------------------

### Create NuttX Workspace

Source: https://lvgl.io/docs/open/8.4/get-started/os/nuttx.html

Sets up a directory for NuttX development and navigates into it.

```bash
$ mkdir ~/nuttxspace
$ cd ~/nuttxspace

```

--------------------------------

### Simple LVGL Button Example in Berry

Source: https://lvgl.io/docs/open/8.4/get-started/platforms/tasmota-berry.html

This Berry script demonstrates how to create a basic LVGL button with a label on the default screen. It initializes LVGL, gets the active screen, creates a button, centers it, adds a label to the button, and sets the label's text.

```berry
lv.start()                 # start LVGL
scr = lv.scr_act()         # get default screen
btn = lv.btn(scr)          # create button
btn.center()
label = lv.label(btn)      # create a label in the button
label.set_text("Button")   # set a label to the button
```

--------------------------------

### Use lv_fragment_manager Example

Source: https://lvgl.io/docs/open/8.4/examples.html

Shows how to utilize the `lv_fragment_manager` for managing fragment lifecycles and transitions. This is essential for building dynamic UIs with fragments.

```c
/* Example code for using lv_fragment_manager */
void use_fragment_manager_example(void)
{
    /* Code to initialize and use the fragment manager */
}
```

--------------------------------

### Create and Configure Simple and Toggle Buttons in C

Source: https://lvgl.io/docs/open/8.4/widgets/core/btn.html

Demonstrates how to create a basic button and a checkable (toggle) button. It includes setting up event handlers for click and value change events. Ensure LV_USE_BTN and LV_BUILD_EXAMPLES are enabled.

```c
#include "../../lv_examples.h"
#if LV_USE_BTN && LV_BUILD_EXAMPLES

static void event_handler(lv_event_t * e)
{
    lv_event_code_t code = lv_event_get_code(e);

    if(code == LV_EVENT_CLICKED) {
        LV_LOG_USER("Clicked");
    }
    else if(code == LV_EVENT_VALUE_CHANGED) {
        LV_LOG_USER("Toggled");
    }
}

void lv_example_btn_1(void)
{
    lv_obj_t * label;

    lv_obj_t * btn1 = lv_btn_create(lv_scr_act());
    lv_obj_add_event_cb(btn1, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn1, LV_ALIGN_CENTER, 0, -40);

    label = lv_label_create(btn1);
    lv_label_set_text(label, "Button");
    lv_obj_center(label);

    lv_obj_t * btn2 = lv_btn_create(lv_scr_act());
    lv_obj_add_event_cb(btn2, event_handler, LV_EVENT_ALL, NULL);
    lv_obj_align(btn2, LV_ALIGN_CENTER, 0, 40);
    lv_obj_add_flag(btn2, LV_OBJ_FLAG_CHECKABLE);
    lv_obj_set_height(btn2, LV_SIZE_CONTENT);

    label = lv_label_create(btn2);
    lv_label_set_text(label, "Toggle");
    lv_obj_center(label);
}
#endif

```

--------------------------------

### Python: Event Bubbling with LVGL

Source: https://lvgl.io/docs/open/8.4/overview/event.html

This Python code replicates the C example, demonstrating event bubbling. It creates a container with buttons, and clicking a button triggers an event that is handled by the container, changing the button's background color. Ensure the `lvgl` Python library is installed.

```python
def event_cb(e):

    # The original target of the event. Can be the buttons or the container
    target = e.get_target()
    # print(type(target))

    # If container was clicked do nothing
    if type(target) != type(lv.btn()):
        return

    # Make the clicked buttons red
    target.set_style_bg_color(lv.palette_main(lv.PALETTE.RED), 0)

#
# Demonstrate event bubbling
#

cont = lv.obj(lv.scr_act())
cont.set_size(320, 200)
cont.center()
cont.set_flex_flow(lv.FLEX_FLOW.ROW_WRAP)

for i in range(30):
    btn = lv.btn(cont)
    btn.set_size(80, 50)
    btn.add_flag(lv.obj.FLAG.EVENT_BUBBLE)

    label = lv.label(btn)
    label.set_text(str(i))
    label.center()

cont.add_event_cb(event_cb, lv.EVENT.CLICKED, None)

```

--------------------------------

### Install SDL2 on Linux

Source: https://lvgl.io/docs/open/8.4/get-started/platforms/pc-simulator.html

Installs the SDL2 library and development package on Linux systems using apt. Build essentials are also installed if not already present.

```bash
apt-cache search libsdl2 (e.g. libsdl2-2.0-0)
```

```bash
sudo apt-get install libsdl2-2.0-0
```

```bash
sudo apt-get install libsdl2-dev
```

```bash
sudo apt-get install build-essential
```
Tokens:
Raw