### 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) ``` -------------------------------- ### 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); ``` -------------------------------- ### 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 */ } ``` -------------------------------- ### 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. ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 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 ``` -------------------------------- ### 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) ``` -------------------------------- ### 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] ``` -------------------------------- ### 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. ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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); ``` -------------------------------- ### 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 ``` -------------------------------- ### 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() ``` -------------------------------- ### 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) ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 */ } ``` -------------------------------- ### 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 ``` -------------------------------- ### 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 ``` -------------------------------- ### Simple Tabview Example (C) Source: https://lvgl.io/docs/open/8.4/widgets/extra/tabview.html A basic C example demonstrating the creation of a Tabview with multiple tabs and content. ```C #include "../../lv_examples.h" #if LV_USE_TABVIEW && LV_BUILD_EXAMPLES void lv_example_tabview_1(void) { /*Create a Tab view object*/ lv_obj_t * tabview; tabview = lv_tabview_create(lv_scr_act(), LV_DIR_TOP, 50); /*Add 3 tabs (the tabs are page (lv_page) and can be scrolled*/ lv_obj_t * tab1 = lv_tabview_add_tab(tabview, "Tab 1"); lv_obj_t * tab2 = lv_tabview_add_tab(tabview, "Tab 2"); lv_obj_t * tab3 = lv_tabview_add_tab(tabview, "Tab 3"); /*Add content to the tabs*/ lv_obj_t * label = lv_label_create(tab1); lv_label_set_text(label, "This the first tab\n\n" "If the content\n" "of a tab\n" "becomes too\n" "longer\n" "than the\n" "container\n" "then it\n" "automatically\n" "becomes\n" "scrollable.\n" "\n" "\n" "\n" "Can you see it?"); label = lv_label_create(tab2); lv_label_set_text(label, "Second tab"); label = lv_label_create(tab3); lv_label_set_text(label, "Third tab"); lv_obj_scroll_to_view_recursive(label, LV_ANIM_ON); } #endif ```