LVGL视频播放界面实现方法

newcastle LV 4

1.主题

LVGL视频播放界面实现方法

2.问题背景

使用LVGL开发且需要在UI下显示视频或者显示摄像头数据，但是不知道如何实现，要么是只显示UI，要么就只显示视频。

3.具体表现

可以看下视频播放的时候有哪些元素。

有播放按钮，进度条，设置等可交互的控件，这些都位于UI层。

UI的下方就是视频解码后的一帧数据，视频数据位于视频层。

4.问题分析

一般UI层位于视频层的上方，如果UI层没有设置透明度，那么会有一个背景色，覆盖了视频层，导致只能看到背景色和一些控制按钮。

5.根本原因

首先需要知道有图层的概念，下面的命令可以看到图层的信息：

root@TinaLinux:/# cat /sys/class/disp/disp/attr/sys
screen 0:
de_rate 300000000 hz, ref_fps:59
mgr0: 1280x800 fmt[rgb] cs[0x204] range[full] eotf[0x4] bits[8bits] err[1] force_sync[1] unblank direct_show[false] iommu[1]
dmabuf: cache[4] cache max[4] umap skip[0] umap skip max[18]
        lcd output      backlight( 50)  fps:60.0        1280x 800
        err:0   skip:67 irq:2300        vsync:0 vsync_skip:0
   BUF    enable ch[0] lyr[0] z[0] prem[N] a[pixel   0] fmt[ 77] fb[1280, 736; 640, 368; 640, 368] crop[   0,   0,1280, 720] frame[   0,   0,1280, 800] addr[fb200000,fb2e6000,fb359000] flags[0x       0] trd[0,0]
depth[ 0]    BUF    enable ch[1] lyr[0] z[16] prem[N] a[pixel 255] fmt[  0] fb[1280, 800;1280, 800;1280, 800] crop[   0,   0,1280, 800] frame[   0,   0,1280, 800] addr[ff800000,       0,       0] flags[0x
  0] trd[0,0]

在内核初始化过程中，显示驱动注册/dev/fb0，会申请UI层，可以看到ch[1] lyr[0]，一般UI就一个地址addr[ff800000, 0, 0]，并且也是最顶层的z[16]，混合模式a[pixel 255]表示由应用控制UI层的透明度。

视频播放（使用TPlayer接口）的时候会通过中间件申请视频图层，可以看到ch[0] lyr[0]，并且yuv三个地址一直在变化addr[fb200000,fb2e6000,fb359000]，通常视频会放到最底层z[0]。

当应用没有透明时，因为UI层的zorder比视频层大，因此只能看到UI，看不到视频，所以应用需要“挖空”。

6.解决办法

下面代码里的屏幕，一般是指/dev/fb0，LVGL版本是8.3.2。

使用下面的代码前需要在lv_conf.h中设置参数：

#define LV_COLOR_SCREEN_TRANSP 1

/* 初始化屏幕风格 */
static lv_style_t style_scr_act;
if (style_scr_act.prop_cnt == 0) {
    lv_style_init(&style_scr_act);
    /* 默认不是透明的，后面按需要切换即可 */
    lv_style_set_bg_opa(&style_scr_act, LV_OPA_COVER);
    /* 一定要应用风格，不然也是没有效果的 */
    lv_obj_add_style(lv_scr_act(), &style_scr_act, 0);
}

/* 这里根据按钮状态，切换不同风格，一种是UI能够透明看到底下的视频，一种是UI覆盖视频，视频就看不到了 */
if (lv_obj_has_state(btn, LV_STATE_CHECKED)) {
    /* 这里切换为UI透明 */
    lv_label_set_text(label, "Stop");
    /* 这里设置屏幕是透明的 */
    lv_disp_get_default()->driver->screen_transp = 1;
    /* 这里设置屏幕背景是透明的 */
    lv_disp_set_bg_opa(lv_disp_get_default(), LV_OPA_TRANSP);
    /* 这里清空屏幕，不清空的话，可能不会生效 */
    lv_memset_00(lv_disp_get_default()->driver->draw_buf->buf_act,
            lv_disp_get_default()->driver->draw_buf->size
                    * sizeof(lv_color32_t));
    /* 这里屏幕风格切换为透明的 */
    lv_style_set_bg_opa(&style_scr_act, LV_OPA_TRANSP);
    /* 通知风格变化，需要更新 */
    lv_obj_report_style_change(&style_scr_act);
} else {
    /* 这里切换为UI不透明，也就是覆盖视频 */
    lv_label_set_text(label, "Play");
    /* 这里设置屏幕是不透明的 */
    lv_disp_get_default()->driver->screen_transp = 0;
    /* 这里设置屏幕背景是不透明的 */
    lv_disp_set_bg_opa(lv_disp_get_default(), LV_OPA_COVER);
    /* 这里屏幕风格切换为不透明的 */
    lv_style_set_bg_opa(&style_scr_act, LV_OPA_COVER);
    /* 通知风格变化，需要更新 */
    lv_obj_report_style_change(&style_scr_act);
}