Introduction of Embedded GUI LVGL "Tile View Splicing View Control"

1. The concept of LVGL GUI splicing view control

 

A Tileview is a container object in which elements (called tiles) can be arranged in a grid. By swiping, users can navigate between these stickers.

If Tileview were screen size, it would provide a user interface you might have seen on a smartwatch.

2. LVGL GUI stitching view widgets and styles

Tileview and Page have the same section. Except using LV_PAGE_PART_SCRL because it can't be referenced and it's always transparent. See detailed documentation on this page.

3. The use of LVGL GUI stitching view controls

1. Valid positions

The tiles don't have to form a complete grid, every element is there. A grid can have holes, but it must be contiguous, i.e. there cannot be empty rows or columns.

Use lv_tileview_set_valid_positions(tileview, valid_pos_array, array_len) to set valid positions. Scrolling can only scroll to these positions. Index 0,0 represents the upper left tile. For example lv_point_t valid_pos_array[] = { {0,0}, {0,1}, {1,1}, { {LV_COORD_MIN, LV_COORD_MIN}} gives a Tile view with an "L" shape. It says that there are no tiles in {1,1}, so the user can't scroll there.

In other words, valid_pos_array tells where tiles are. It can be changed on the fly to disable some positions for specific tiles. For example, there can be a 2x2 grid with all the textures added, but the first row (y = 0) acts as the "main row" and the second row (y = 1) contains options for the textures above. Let's say horizontal scrolling is only possible in the main row, not between options in the second row. In this case, when a new main texture is selected, the valid_pos_array needs to be changed:

For the first main map: {0,0}, {0,1}, {1,0} to disable the {1,1} option map

Disable the {0,1} option map for the second main map {0,0}, {1,0}, {1,1}

2. Set tile

Set the currently visible tile using lv_tileview_set_tile_act(tileview, x_id, y_id, LV_ANIM_ON/OFF)

3. Add element

To add elements, just create an object on the Tileview and manually position it where you want.

lv_tileview_add_element(tielview, element) should be used to scroll (drag) an element of a tielview. For example, if a tilemap has a button on it, the button needs to be explicitly added to the tile view so that the user can use the button to scroll the tile view.

4. Scroll propagation

The scroll propagation feature of page-like objects such as lists can be used very well here. For example, you can have a full-sized list and when it reaches most of the top or bottom, the user will scroll the tile view.

5. Animation time

The animation time of Tileview can be adjusted by lv_tileview_set_anim_time(Tileview, anim_time).

6. Edge flash

You can add an "edge flash" effect when the tile view reaches an invalid position or when the scroll tile view ends.

Use lv_tileview_set_edge_flash(tileview, true) to enable this feature.

7. Event

In addition to the base event, there is a special event

LV_EVENT_VALUE_CHANGED Sent when a new tile loaded either with scrolling or lv_tileview_set_act. The event data is set ti the index of the new tile in valid_pos_array (It's type is uint32_t *)

Let's look at an example

void lvgl_title_view_test(void)
{
    static lv_point_t valid_pos[] = { {0,0}, {0, 1}, {1,1} };
    lv_obj_t* tileview;
    tileview = lv_tileview_create(lv_scr_act(), NULL);
    lv_tileview_set_valid_positions(tileview, valid_pos, 3);
    lv_tileview_set_edge_flash(tileview, true);

    lv_obj_t* tile1 = lv_obj_create(tileview, NULL);
    lv_obj_set_size(tile1, LV_HOR_RES, LV_VER_RES);
    lv_tileview_add_element(tileview, tile1);

    /*Tile1: just a label*/
    lv_obj_t* label = lv_label_create(tile1, NULL);
    lv_label_set_text(label, "Scroll down");
    lv_obj_align(label, NULL, LV_ALIGN_CENTER, 0, 0);

    /*Tile2: a list*/
    lv_obj_t* list = lv_list_create(tileview, NULL);
    lv_obj_set_size(list, LV_HOR_RES, LV_VER_RES);
    lv_obj_set_pos(list, 0, LV_VER_RES);
    lv_list_set_scroll_propagation(list, true);
    lv_list_set_scrollbar_mode(list, LV_SCROLLBAR_MODE_OFF);

    lv_list_add_btn(list, NULL, "One");
    lv_list_add_btn(list, NULL, "Two");
    lv_list_add_btn(list, NULL, "Three");
    lv_list_add_btn(list, NULL, "Four");
    lv_list_add_btn(list, NULL, "Five");
    lv_list_add_btn(list, NULL, "Six");
    lv_list_add_btn(list, NULL, "Seven");
    lv_list_add_btn(list, NULL, "Eight");

    /*Tile3: a button*/
    lv_obj_t* tile3 = lv_obj_create(tileview, tile1);
    lv_obj_set_pos(tile3, LV_HOR_RES, LV_VER_RES);
    lv_tileview_add_element(tileview, tile3);

    lv_obj_t* btn = lv_btn_create(tile3, NULL);
    lv_obj_align(btn, NULL, LV_ALIGN_CENTER, 0, 0);
    lv_tileview_add_element(tileview, btn);
    label = lv_label_create(btn, NULL);
    lv_label_set_text(label, "No scroll up");
}

Okay, it's over, continue to poke more exciting ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓