Introduction of Embedded GUI LVGL "Window Control"

1. The concept of LVGL GUI window control

 

The window is a container-like object built from a title with a title, buttons, and content area.

2. LVGL GUI widgets and styles

The main part is LV_WIN_PART_BG, which contains two other real parts:

  • LV_WIN_PART_HEADER: A header container at the top with a header and control buttons
  • The scrollable portion of the content below the LV_WIN_PART_CONTENT_SCRL header.

In addition to this, LV_WIN_PART_CONTENT_SCRL has a scrollbar section called LV_WIN_PART_CONTENT_SCRL. For more details on scrollbars, read the documentation for the page.

All widgets support typical background properties. The title uses the text property of the title section.

The height of the control button is: title bar height - header padding_top - header padding_bottom.

3. The use of LVGL GUI window controls

1. Title

Use this function to set the title lv_win_set_title(win, "New title")

2. Control buttons

Control buttons can be added to the right side of the window header with: lv_win_add_btn_right(win, LV_SYMBOL_CLOSE). If you want to add buttons on the left side of the window header, you can use lv_win_add_btn_left(win, LV_SYMBOL_CLOSE) instead. The second parameter is an image source, so it can be a symbol, a pointer to the lv_img_dsc_t variable, or a path to a file.

The width of the button can be set with lv_win_set_btn_width(win, w). If w == 0, the button will be square.

lv_win_close_event_cb can be used as an event callback function to close the window.

3. Scrollbars

Scrollbar behavior can be set by lv_win_set_scrlbar_mode(win, LV_SCRLBAR_MODE_…)

4. Manual scroll and focus

To scroll the window directly, you can use lv_win_scroll_hor(win, dist_px) or lv_win_scroll_ver(win, dist_px).

Use lv_win_focus(win, child, LV_ANIM_ON/OFF) to make the window display an object.

The time of scrolling and focusing animation can be adjusted by lv_win_set_anim_time(win, anim_time_ms)

5. Layout

Use this function for layout

Let's look at a comprehensive example

void lvgl_window_test(void)
{
    /*Create a window*/
    lv_obj_t* win = lv_win_create(lv_scr_act(), NULL);
    lv_win_set_title(win, "Window title");                        /*Set the title*/


    /*Add control button to the header*/
    lv_obj_t* close_btn = lv_win_add_btn(win, LV_SYMBOL_CLOSE);           /*Add close button and use built-in close action*/
    lv_obj_set_event_cb(close_btn, lv_win_close_event_cb);
    lv_win_add_btn(win, LV_SYMBOL_SETTINGS);        /*Add a setup button*/

    /*Add some dummy content*/
    lv_obj_t* txt = lv_label_create(win, NULL);
    lv_label_set_text(txt, "This is the content of the window\n\n"
        "You can add control buttons to\n"
        "the window header\n\n"
        "The content area becomes\n"
        "automatically scrollable is it's \n"
        "large enough.\n\n"
        " You can scroll the content\n"
        "See the scroll bar on the right!");
}

 

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

Guess you like

Origin blog.csdn.net/XiaoXiaoPengBo/article/details/114088455