LVGL学习笔记5 - Display, Screen和Layer

目录

1. Display

2. Screen

2.1 创建Screen

2.2 加载Screen

2.3 获取活动的Screen

2.4 实例

2.4.1 定义2个Screen全局变量

2.4.2  初始化Screen

2.4.3  循环更替

3. Layer图层

3.1 切换顺序

3.2 顶层和系统层

3.3 实例

3.3.1 创建全局变量

3.3.2 初始化

3.3.3 循环更替处理

---

1. Display

在移植那里会有一个显示接口的移植，这部分其实对应的就是Display，可以翻译为显示器。在LVGL中，可以有多个Display，即物理上支持多个显示器。这些显示器的颜色深度都是由LV_COLOR_DEPTH决定的，即这些显示器的图像数据格式都是一样的，尽管这些显示器可能有彩色的和黑白的，所以需要在驱动的flush_cb中转换成正确的格式。

对于大部分的应用，可能只有一个显示器，这部分不用处理，对于需要传递display的参数都设置为NULL即可。

2. Screen

Screen是基于Display的一个对象，相当于一个容器，用来放置其他对象。

2.1 创建Screen

Screen可以从任何类型的Object创建，但是有两种常见的类型：Base Object和Image。

lv_obj_t * scr = lv_<type>_create(parent)

参数parent表示父对象。

Base Object和Image类型的Screen的创建函数是：lv_obj_create和lv_img_create

2.2 加载Screen

void lv_scr_load(lv_obj_t * scr)

加载Screen也即将Screen里面的内容显示出来。

2.3 获取活动的Screen

lv_obj_t * lv_scr_act(void)

2.4 实例

 设置2个Screen，不停的切换2个Screen。

2.4.1 定义2个Screen全局变量

static lv_obj_t* gTestScreen1;
static lv_obj_t* gTestScreen2;

2.4.2  初始化Screen

    gTestScreen1 = lv_obj_create(NULL);
    gTestScreen2 = lv_obj_create(NULL);

    lv_obj_t* rect1 = lv_obj_create(gTestScreen1);
    lv_obj_set_size(rect1, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect1, LV_ALIGN_TOP_LEFT, 20, 20);

    lv_obj_t* rect2 = lv_obj_create(gTestScreen2);

    lv_obj_set_size(rect2, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect2, LV_ALIGN_TOP_LEFT, 220, 20);

    static lv_style_t style;
    lv_style_init(&style);
    lv_style_set_bg_color(&style, lv_palette_main(LV_PALETTE_GREY));
    lv_obj_add_style(rect2, &style, LV_STATE_DEFAULT);
    lv_scr_load(gTestScreen1);

创建2个Screen，一个Screen在（20，20）显示白色框，一个Screen在（220，20）位置显示灰色框。

2.4.3  循环更替

void testLoop(void)
{
    static uint32_t loopCnt = 0;
    static uint8_t loopFlag = 0;

    if (((++loopCnt) % 100) == 0)
    {
        if (lv_scr_act() != gTestScreen1)
        {
            lv_scr_load(gTestScreen1);
        }
        else
        {
            lv_scr_load(gTestScreen2);
        }
    }
}

循环加载2个Screen，然后在while循环中调用。

    while (!lv_win32_quit_signal)
    {
        lv_task_handler();
        testLoop();
        Sleep(1);
    }

3. Layer图层

每个对象对应一个图层。每个图层可以覆盖，改变图层顺序。后出现的对象总是覆盖前面的对象。

3.1 切换顺序

void lv_obj_move_foreground(lv_obj_t * obj)

将对象移动到最前面，即它会覆盖其他的对象。

void lv_obj_move_background(lv_obj_t * obj)

将对象移动到背景，即其他对象会覆盖它。

void lv_obj_move_to_index(struct _lv_obj_t * obj, int32_t index);

将对象移动到其父对象中的给定索引。参数index是索引值，有效值-lv_obj_get_index(obj)到lv_obj_get_index(obj) - 1。index为正负值时表示移动的方向。

3.2 顶层和系统层

顶层和系统层是LVGL的特殊层。这2个层在Display的所有Screen都是可见的。 顶层始终位于默认屏幕的顶部，而系统层位于 顶层的顶部。

用户可以使用顶层来创建一些随处可见的内容。例如，菜单栏、弹出窗口等。如果启用了click 属性，那么顶层将吸收所有用户点击并充当模态。

系统层也用于LVGL 的类似目的。例如，它将鼠标光标放在所有图层上方以确保它始终可见。

获取顶层和系统层句柄的方式：

lv_obj_t * top = lv_layer_top();
lv_obj_t * sys = lv_layer_sys();

3.3 实例

3.3.1 创建全局变量

lv_obj_t* rect1;
lv_obj_t* rect2;
lv_obj_t* rect3;
lv_obj_t* label;

3个矩形和一个Label。

3.3.2 初始化

    static lv_style_t style1, style2;

    rect1 = lv_obj_create(lv_scr_act());
    rect2 = lv_obj_create(lv_scr_act());
    rect3 = lv_obj_create(lv_scr_act());

    lv_obj_set_size(rect1, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect1, LV_ALIGN_TOP_LEFT, 20, 20);
    
    lv_style_init(&style1);
    lv_style_set_bg_color(&style1, lv_palette_lighten(LV_PALETTE_GREY, 1));
    lv_obj_add_style(rect2, &style1, LV_STATE_DEFAULT);
    lv_obj_set_size(rect2, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect2, LV_ALIGN_TOP_LEFT, 70, 20);

    lv_style_init(&style2);
    lv_style_set_bg_color(&style2, lv_palette_lighten(LV_PALETTE_GREEN, 1));
    lv_obj_add_style(rect3, &style2, LV_STATE_DEFAULT);
    lv_obj_set_size(rect3, LV_PCT(20), LV_PCT(20));
    lv_obj_align(rect3, LV_ALIGN_TOP_LEFT, 120, 20);

    label = lv_label_create(lv_scr_act());
    lv_obj_set_size(label, LV_PCT(20), LV_PCT(20));
    lv_obj_align(label, LV_ALIGN_TOP_LEFT, 120, 120);
    lv_label_set_text(label, "0");

3个矩形框显示不同的颜色，Label显示第几步。

3.3.3 循环更替处理

void testLayerLoop(void)
{
    static uint32_t loopCnt = 0;
    static uint8_t loopFlag = 0;

    if (((++loopCnt) % 1000) == 0)
    {
        switch (loopFlag)
        {
            case 0:
                lv_obj_move_foreground(rect1);
                lv_label_set_text(label, "0");
                break;
            case 1:
                lv_obj_move_foreground(rect2);
                lv_label_set_text(label, "1");
                break;
            case 2:
                lv_obj_move_foreground(rect3);
                lv_label_set_text(label, "2");
                break;
            case 3:
                lv_obj_move_background(rect3);
                lv_label_set_text(label, "3");
                break;
            case 4:
                lv_obj_move_background(rect2);
                lv_label_set_text(label, "4");
                break;
            case 5:
                lv_obj_move_background(rect1);
                lv_label_set_text(label, "5");
                loopFlag = (uint8_t)-1;
                break;

        }
        loopFlag++;
    }
}