设计说明

绘制 buffer 初始化

void lv_disp_draw_buf_init(lv_disp_draw_buf_t * draw_buf, void * buf1, void * buf2, uint32_t size_in_px_cnt)

• buf1：无论选择单缓冲或多缓冲，必须设置此 buffer。

• buf2：选择双缓冲时，需要配置此 buffer，单缓冲不需要配置。

• size_in_px_cnt：以像素为单位的 buf 大小，应该根据实际的分辨率来计算。

flush_cb 对接

以双缓冲为例，flush_cb 回调函数的处理流程分别如下所示，包括 full_refresh 和 direct_mode 两种绘制模式：

1. full_refresh：即全刷新模式，每一帧都刷新整个显示屏。流程如下：
   1. 直接通过 pan_display 接口将当前绘制缓冲区 （draw buffer）发送到显示设备。
   2. 等待垂直同步 （vsync）中断，确保数据已经显示在屏幕上。
   3. 调用 lv_disp_flush_ready 通知 LVGL 框架刷新结束。
   4. LVGL 框架会自动交换绘制缓冲区。

   
   

   

   
   

2. direct_mode：即局部刷新，每一帧只刷新需要更新的无效区域 （可以有多个无效区域）。流程如下：
   1. 遍历所有无效区域，例如 invalid area0 和 invalid area1，将每个无效区域的数据从绘制缓冲区发送到显示设备。
   2. 最后一个无效区域处理完毕后，调用 lv_disp_flush_ready 通知 LVGL 框架刷新结束。
   3. LVGL 框架会自动交换绘制缓冲区。

   
   

   

   
   

   
   

   

   
   

   flush_cb 的实现代码 fbdev_flush 如下：

   static void fbdev_flush(lv_disp_drv_t * drv, const lv_area_t * area, lv_color_t *color_p)
   {
       int index = 0;
       lv_disp_t * disp = _lv_refr_get_disp_refreshing();
       lv_disp_draw_buf_t * draw_buf = lv_disp_get_draw_buf(disp);
   
       if (!disp->driver->direct_mode || draw_buf->flushing_last) {
           if (disp->driver->direct_mode)
               aicos_dcache_clean_invalid_range((unsigned long *)info.framebuffer, (unsigned long)info.smem_len * 2);
           else
               aicos_dcache_clean_invalid_range((unsigned long *)color_p, (unsigned long)info.smem_len);
   
           if ((void *)color_p == (void *)info.framebuffer)
               index = 0;
           else
               index = 1;
   
           mpp_fb_ioctl(g_fb, AICFB_PAN_DISPLAY , &index);
           mpp_fb_ioctl(g_fb, AICFB_WAIT_FOR_VSYNC, 0);
   
           if (drv->direct_mode == 1) {
               for (int i = 0; i < disp->inv_p; i++) {
                   if (disp->inv_area_joined[i] == 0) {
                       sync_disp_buf(drv, color_p, &disp->inv_areas[i]);
                   }
               }
           }
   
           lv_disp_flush_ready(drv);
       }
       else {
           lv_disp_flush_ready(drv);
       }
   }

2D 硬件加速对接

显示驱动注册

1. 通过 lv_disp_drv_init 来初始化 lv_disp_drv_t 结构体。
   注： lv_disp_drv_t包含了所有与显示相关的配置信息，详情可查看lv_disp_drv_t 结构体代码。
2. 通过 lv_disp_draw_buf_init 初始化绘制 buffer。
3. 通过回调 flush_cb 来注册显示接口。
4. 通过 lv_draw_aic_ctx_init 来注册 2D 硬件加速相关接口。
5. 通过 lv_disp_drv_register 来注册 lv_disp_drv_t。

disp_drv.full_refresh = 0;
disp_drv.direct_mode = 1;

disp_drv.full_refresh = 1;
disp_drv.direct_mode = 0;

static lv_disp_drv_t disp_drv;
void lv_port_disp_init(void)
{
    void *buf1 = RT_NULL;
    void *buf2 = RT_NULL;
    uint32_t fb_Size;
    rt_err_t result;

    g_fb = mpp_fb_open();
    if (g_fb == 0) {
        LOG_E("can't find aic framebuffer device!");
        return;
    }

    result = mpp_fb_ioctl(g_fb, AICFB_GET_SCREENINFO, &info);
    if (result != RT_EOK) {
        LOG_E("get device fb info failed!");
        return;
    }

    g_ge = mpp_ge_open();
    if (!g_ge) {
        LOG_E("ge open fail\n");
        return;
    }

    fb_Size = info.height * info.stride;
    buf1 = (void *)info.framebuffer;
    buf2 = (void *)((uint8_t *)info.framebuffer + fb_Size);
    lv_disp_draw_buf_init(&disp_buf, buf2, buf1,
                        info.width * info.height);
    lv_disp_drv_init(&disp_drv);

    /*Set a display buffer*/
    disp_drv.draw_buf = &disp_buf;

    /*Set the resolution of the display*/
    disp_drv.hor_res = info.width;
    disp_drv.ver_res = info.height;
    disp_drv.full_refresh = 0;
    disp_drv.direct_mode = 1;
    disp_drv.flush_cb = fbdev_flush;
    disp_drv.draw_ctx_init = lv_draw_aic_ctx_init;
    disp_drv.draw_ctx_deinit = lv_draw_aic_ctx_deinit;
    disp_drv.draw_ctx_size = sizeof(lv_draw_aic_ctx_t);

    /*Finally register the driver*/
    lv_disp_drv_register(&disp_drv);
}

Base Demo

Base Demo 演示了如何使用 LVGL 创建基本的 UI 元素，包括 PNG 和 JPG 图片的硬件解码，内置图片的使用方式以及通过滑动操作切换页面。UI 界面示例如下：

Meter Demo

Meter demo 演示了硬件旋转，以及仪表盘的设计参考。

Meter demo 的详细说明及特点如下：

1. 各种控件的动作通过 timer 来实现，每间隔一定的时间执行相应的回调函数：

   lv_timer_create(point_callback, 10, 0);
   lv_timer_create(fps_callback, 1000, 0);
   lv_timer_create(speed_callback, 100, 0);
   lv_timer_create(time_callback, 1000 * 60, 0);

2. 指针和光影通过贴图和硬件任意角度旋转来实现。其中，前 74 张指针通过切换 74 张图片来实现， 从第 75 张开始的红色指针，采用硬件任意角度旋转来实现：

   static void point_callback(lv_timer_t *tmr)
   {
       char data_str[64];
       (void)tmr;
   
       static bool first = true;
       static int id = 1;
       static int direct = 0;
       static int mode_id = 0;
       static int mode_num = sizeof(rot_mode_list) / sizeof(rot_mode_list[0]);
       static int start_id = 0;
       static int end_id = 0;
   
       if (first) {
           first = false;
           start_id = rot_mode_list[mode_id].start_id;
           end_id = rot_mode_list[mode_id].end_id;
       }
   
       direct = start_id < end_id ? 0: 1;
   
       if (id < 75) {
       lv_img_set_src(img_circle, LVGL_PATH(bg/small_blue));
       lv_obj_clear_flag(img_circle, LV_OBJ_FLAG_HIDDEN);
       } else {
       lv_obj_add_flag(img_circle, LV_OBJ_FLAG_HIDDEN);
       }
   
       if (id < 75) {
           sprintf(data_str, "%spoint/point_%05d", LVGL_DIR, id);
           lv_img_set_src(img_point, data_str);
           lv_img_set_angle(img_point, 0);
   
       } else {
           // id to angle
           float rot_angle = ((float)(id - 75) * 2 * 10) * 0.84;
           sprintf(data_str, "%spoint/point_%05d", LVGL_DIR, 75);
           lv_img_set_src(img_point, data_str);
           lv_img_set_pivot(img_point, 210, 210);
           lv_img_set_angle(img_point, (int16_t)rot_angle);
       }
   
       if (direct == 0) {
           id++;
       } else {
           id--;
       }
   
       if ((!direct && (id > end_id) ) ||
           (direct && (id < end_id))) {
           id = end_id;
           mode_id++;
           mode_id %= mode_num;
           start_id = rot_mode_list[mode_id].start_id;
           end_id = rot_mode_list[mode_id].end_id;
       }
   
       return;
   }

3. UI 设计方案比较。

   针对本 demo 场景，有以下 UI 设计方案可供选择。其中 UI 设计方案 2 更高效，实现同样的界面效果，简化流程速度可以提升一倍以上：

   1. UI 设计方案 1

      
      

      

      
      

      • 准备光条、指针、光圈、底图四张图片。

      • 按照先后顺序，依次对光圈和背景、光条和背景以及指针和背景进行 alpha blending。

      • 每一个角度的旋转都需要进行三次 alpha blending。

   2. UI 设计方案 2

      
      

      

      
      

      • 光条和指针合并为一张图片。

      • 光圈合并到背景图中。

      • 准备光条和指针图片和底图。

      • 每一个角度的旋转都只需要对光条和指针图片与背景图进行一次 alpha blending。