【LittlevGL】Demo学习

前一篇文章通过官方给的基于Linux FrameBuffer的LittlevGL例程学习了LittlevGL的移植步骤。本文将继续学习基于Linux FrameBuffer的Demo例程。

先上带注释的demo_create函数代码：

void demo_create(void)
{
    lv_coord_t hres = lv_disp_get_hor_res(NULL);	//获取显示器的分辨率信息
    lv_coord_t vres = lv_disp_get_ver_res(NULL);

#if LV_DEMO_WALLPAPER
    lv_obj_t * wp = lv_img_create(lv_disp_get_scr_act(NULL), NULL);	//创建一个基于当前界面的图片框控件
    lv_img_set_src(wp, &img_bubble_pattern);	//设置图片框的图像数据源
    lv_obj_set_width(wp, hres * 4);	//设置图片框的宽度
    lv_obj_set_protect(wp, LV_PROTECT_POS);	//Prevent automatic positioning (e.g. in lv_cont layout)
#endif

    static lv_style_t style_tv_btn_bg;	//创建一个样式对象
    lv_style_copy(&style_tv_btn_bg, &lv_style_plain);	//使用lv_style_plain为模板
    style_tv_btn_bg.body.main_color = lv_color_hex(0x487fb7);
    style_tv_btn_bg.body.grad_color = lv_color_hex(0x487fb7);
    style_tv_btn_bg.body.padding.top = 0;
    style_tv_btn_bg.body.padding.bottom = 0;

    static lv_style_t style_tv_btn_rel;	//创建一个按键松开时的样式对象
    lv_style_copy(&style_tv_btn_rel, &lv_style_btn_rel);
    style_tv_btn_rel.body.opa = LV_OPA_TRANSP;
    style_tv_btn_rel.body.border.width = 0;

    static lv_style_t style_tv_btn_pr;	//创建一个按键按下时的样式对象
    lv_style_copy(&style_tv_btn_pr, &lv_style_btn_pr);
    style_tv_btn_pr.body.radius = 0;
    style_tv_btn_pr.body.opa = LV_OPA_50;
    style_tv_btn_pr.body.main_color = LV_COLOR_WHITE;
    style_tv_btn_pr.body.grad_color = LV_COLOR_WHITE;
    style_tv_btn_pr.body.border.width = 0;
    style_tv_btn_pr.text.color = LV_COLOR_GRAY;

    lv_obj_t * tv = lv_tabview_create(lv_disp_get_scr_act(NULL), NULL);	//创建一个tabview控件
    lv_obj_set_size(tv, hres, vres);	//设置tabview控件的大小占满整个显示器

#if LV_DEMO_WALLPAPER
    lv_obj_set_parent(wp, ((lv_tabview_ext_t *) tv->ext_attr)->content);	//设置图片框的父控件
    lv_obj_set_pos(wp, 0, -5);	//设置图片框在父控件上的显示位置
#endif

    lv_obj_t * tab1 = lv_tabview_add_tab(tv, "Write");	//为tabview控件添加视图窗口
    lv_obj_t * tab2 = lv_tabview_add_tab(tv, "List");
    lv_obj_t * tab3 = lv_tabview_add_tab(tv, "Chart");

#if LV_DEMO_WALLPAPER == 0
    /*Blue bg instead of wallpaper*/
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BG, &style_tv_btn_bg);
#endif
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_BG, &style_tv_btn_bg);	//设置tabview的样式
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_INDIC, &lv_style_plain);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_REL, &style_tv_btn_rel);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_PR, &style_tv_btn_pr);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_TGL_REL, &style_tv_btn_rel);
    lv_tabview_set_style(tv, LV_TABVIEW_STYLE_BTN_TGL_PR, &style_tv_btn_pr);

    write_create(tab1);	//为tabview单独创建3个视图
    list_create(tab2);
    chart_create(tab3);

#if LV_DEMO_SLIDE_SHOW
    lv_task_create(tab_switcher, 3000, LV_TASK_PRIO_MID, tv);	//创建一个周期调用的“任务”用于实现自动翻页功能
#endif
}

再看看其中的write_create函数的实现：

static void write_create(lv_obj_t * parent)
{
    lv_page_set_style(parent, LV_PAGE_STYLE_BG, &lv_style_transp_fit);	//设置页面样式
    lv_page_set_style(parent, LV_PAGE_STYLE_SCRL, &lv_style_transp_fit);

    lv_page_set_sb_mode(parent, LV_SB_MODE_OFF);	//不显示scrollbars

    static lv_style_t style_ta;	//创建一个文本框的样式对象
    lv_style_copy(&style_ta, &lv_style_pretty);
    style_ta.body.opa = LV_OPA_30;
    style_ta.body.radius = 0;
    style_ta.text.color = lv_color_hex3(0x222);

    ta = lv_ta_create(parent, NULL);	//创建有一个文本框控件对象
    lv_obj_set_size(ta, lv_page_get_scrl_width(parent), lv_obj_get_height(parent) / 2);		//设置文本框的大小
    lv_ta_set_style(ta, LV_TA_STYLE_BG, &style_ta);	//设置文本框的样式
    lv_ta_set_text(ta, "");	//设置文本框中的内容为空
    lv_obj_set_event_cb(ta, text_area_event_handler);	//设置文本框的事件回调函数
    lv_style_copy(&style_kb, &lv_style_plain);	//设置键盘样式
    lv_ta_set_text_sel(ta, true);	//设置文本框为可选择模式

    style_kb.body.opa = LV_OPA_70;	//设置键盘样式
    style_kb.body.main_color = lv_color_hex3(0x333);
    style_kb.body.grad_color = lv_color_hex3(0x333);
    style_kb.body.padding.left = 0;
    style_kb.body.padding.right = 0;
    style_kb.body.padding.top = 0;
    style_kb.body.padding.bottom = 0;
    style_kb.body.padding.inner = 0;

    lv_style_copy(&style_kb_rel, &lv_style_plain);	//设置键盘松开状态时样式
    style_kb_rel.body.opa = LV_OPA_TRANSP;
    style_kb_rel.body.radius = 0;
    style_kb_rel.body.border.width = 1;
    style_kb_rel.body.border.color = LV_COLOR_SILVER;
    style_kb_rel.body.border.opa = LV_OPA_50;
    style_kb_rel.body.main_color = lv_color_hex3(0x333);    /*Recommended if LV_VDB_SIZE == 0 and bpp > 1 fonts are used*/
    style_kb_rel.body.grad_color = lv_color_hex3(0x333);
    style_kb_rel.text.color = LV_COLOR_WHITE;

    lv_style_copy(&style_kb_pr, &lv_style_plain);	//设置键盘按下状态时样式
    style_kb_pr.body.radius = 0;
    style_kb_pr.body.opa = LV_OPA_50;
    style_kb_pr.body.main_color = LV_COLOR_WHITE;
    style_kb_pr.body.grad_color = LV_COLOR_WHITE;
    style_kb_pr.body.border.width = 1;
    style_kb_pr.body.border.color = LV_COLOR_SILVER;

}

发现这个函数里面并没有创建键盘控件，而是只创建了一个文本框的控件，但是为文本框设置了一个事件回调函数：

static void text_area_event_handler(lv_obj_t * text_area, lv_event_t event)
{
    (void) text_area;    /*Unused*/

    /*Text area is on the scrollable part of the page but we need the page itself*/
    lv_obj_t * parent = lv_obj_get_parent(lv_obj_get_parent(ta));	//获取page指针

    if(event == LV_EVENT_CLICKED) {
        if(kb == NULL) {
            kb = lv_kb_create(parent, NULL);	//如果键盘还没有被创建的话，创建一个键盘控件
            lv_obj_set_size(kb, lv_obj_get_width_fit(parent), lv_obj_get_height_fit(parent) / 2);	//设置键盘控件的size
            lv_obj_align(kb, ta, LV_ALIGN_OUT_BOTTOM_MID, 0, 0);	//设置文本框和键盘对齐方式
            lv_kb_set_ta(kb, ta);	//制定键盘的输出到文本框中去
            lv_kb_set_style(kb, LV_KB_STYLE_BG, &style_kb);	//设置键盘的样式
            lv_kb_set_style(kb, LV_KB_STYLE_BTN_REL, &style_kb_rel);
            lv_kb_set_style(kb, LV_KB_STYLE_BTN_PR, &style_kb_pr);
            lv_obj_set_event_cb(kb, keyboard_event_cb);	//设置键盘的事件回调函数

#if LV_USE_ANIMATION
            lv_anim_t a;	//如果定义了使用动画的话创建一个动画对象，用于动态显示键盘（装逼）
            a.var = kb;
            a.start = LV_VER_RES;
            a.end = lv_obj_get_y(kb);
            a.exec_cb = (lv_anim_exec_xcb_t)lv_obj_set_y;
            a.path_cb = lv_anim_path_linear;
            a.ready_cb = NULL;
            a.act_time = 0;
            a.time = 300;
            a.playback = 0;
            a.playback_pause = 0;
            a.repeat = 0;
            a.repeat_pause = 0;
            lv_anim_create(&a);
#endif
        }
    }

}

可以看出来键盘的创建实在文本框的事件回调函数中实现的，也就是说点击一下文本框就会弹出键盘来，如果定义了LV_USE_ANIMATION = 1的话，键盘的出现会带一个5毛钱的特效（安卓系统既视感）。还注意到键盘控件也有一个事件回调函数keyboard_event_cb：

static void keyboard_event_cb(lv_obj_t * keyboard, lv_event_t event)
{
    (void) keyboard;    /*Unused*/

    lv_kb_def_event_cb(kb, event);	//键盘的 默认/通用 事件处理回调函数，参考函数说明

    if(event == LV_EVENT_APPLY || event == LV_EVENT_CANCEL) {
#if LV_USE_ANIMATION
        lv_anim_t a;
        a.var = kb;
        a.start = lv_obj_get_y(kb);
        a.end = LV_VER_RES;
        a.exec_cb = (lv_anim_exec_xcb_t)lv_obj_set_y;
        a.path_cb = lv_anim_path_linear;
        a.ready_cb = kb_hide_anim_end;
        a.act_time = 0;
        a.time = 300;
        a.playback = 0;
        a.playback_pause = 0;
        a.repeat = 0;
        a.repeat_pause = 0;
        lv_anim_create(&a);
#else
        lv_obj_del(kb);
        kb = NULL;
#endif
    }
}

到这里就完成了一个视图的创建了，剩下的list_create和chart_create都是相似的，感兴趣的朋友可以自己研究一下。这里抱着学习的态度研究了例程，后面会使用模拟器进行自己的应用设计。 

由于使用Linux的FrameBuffer只实现了显示器的驱动移植，没有移植输入设备的驱动移动，所以Demo没法进行交互，但是Demo的效果可以查看：https://littlevgl.com/demo-basic，这是一个网页模拟器，效果还不错。