LittlevGL在AliOS thing上的应用

前言

LittevGL是可以和emWIN想媲美的图形库，但是它是开源免费的，优秀又不要钱，非常良心。

LittevGL的特点就不赘述了，LittlevGL已经成为了开源RTOS（实时操作系统）RT-Thread的GUI软件包之一，甚至可以支持Linux Frame Buff。NXP 针对LittevGL开发了组态软件GUI Guider。

目前仅支持NXP MCU，但是你可以把生成的代码，移植到自己的平台。

需要的资源

LittevGL官网：点击进入链接

LittevGL文档：点击进入链接

LittevGL源码：GitHub 链接 https://github.com/lvgl/lvgl  记得一定要加 --recursive

git clone --recursive https://github.com/lvgl/lvgl

使用的工具

编码工具：VS Code

硬件平台：某国产平台

LittevGL目录结构

这里以 lvgl 7 版本为例，目前最新的已更新到 8.0以上，目录结构和api均有调整；

        蓝色圈 porting 里面是示例，默认注释掉的

        红色圈 src 里面是核心源码文件夹名称对应其功能，很好理解

        绿色圈 几个头文件 lvgl.h是公用的引用文件，lv_conf_internal.h是过渡性配置文件，真正的配置不在这里，在lv_conf_template.h文件中，我的SDK将该文件更名并放在以下路径：

“platform\board\tx510_evb\include\lv_conf_board.h”

移植过程解析

公版的lvgl个人认为移植非常简单，需要修改和适配的地方很少；如下：

lv_conf_template.h        功能配置文件(已修改为lv_conf_board.h)

porting文件夹下的文件        前文说了这里面是示例，打开注释可以直接用起来

lv_user_api.c                        用户可以在该文件下编辑GUI效果

/*如果是Alios thing、Linux等cmake编译，需要对应平台修改makefile文件*/

常用的平台如STM32只需要将源码插入SDK，并创建好关联即可。

lv_conf_template.h 中比较重要的配置：

//屏幕的尺寸
#define LV_HOR_RES_MAX          (720)
#define LV_VER_RES_MAX          (1280)

根据自己屏幕的类型选择，常见的是16位和32位屏幕
/* Color depth:
 * - 1:  1 byte per pixel
 * - 8:  RGB332
 * - 16: RGB565
 * - 32: ARGB8888
 */
#define LV_COLOR_DEPTH     32

分配给lvgl的空间大小，至少需要2K，如果空间足够，建议适量增加
#define LV_MEM_SIZE    (128U * 1024U)

porting下的文件复制出来并做如下更名，文件位置没限制：

//porting下的文件：
lv_port_disp_template.c
lv_port_disp_template.h
lv_port_indev_template.c
lv_port_indev_template.h
//分别改名为：
lv_port_disp.c
lv_port_disp.h
lv_port_indev.c
lv_port_indev.h

某国产平台修改后的路径如下：

 lv_port_disp.c 中注意如下几点：

lv_port_disp_init  分配显存大小、配置分辨率、配置callback函数

    static lv_disp_buf_t draw_buf_dsc_1;
    static lv_color_t draw_buf_1[LV_HOR_RES_MAX * 10];                         
    lv_disp_buf_init(&draw_buf_dsc_1, draw_buf_1, NULL, LV_HOR_RES_MAX * 10);   

    disp_drv.hor_res = 480;
    disp_drv.ver_res = 320;

    /*Used to copy the buffer's content to the display*/
    disp_drv.flush_cb = disp_flush;

    /*Set a display buffer*/
    disp_drv.buffer = &draw_buf_dsc_1;

disp_flush         将处理好的图像数据搬运到对应显存

/*国产某平台需要在第一次进入disp_flush时打开DPU分配给lvgl的图层，该部分可以更好的管理DPU图层*/
    if (not_init) {
        csi_dpu_layer_enable(handle, layer_id, 0);
        csi_dpu_layer_set_config(handle, layer_id, &cfg);
        //csi_dpu_layer_enable(handle, layer_id, 1);    //jones 20210622 防止贴图提前显示
        not_init = false;
    }

/*如注释，这个函数必须在disp_flush最后调用*/
    /* IMPORTANT!!!
     * Inform the graphics library that you are ready with the flushing*/
    lv_disp_flush_ready(disp_drv);

lv_port_indev.c 是触摸的初始化，未测试不做介绍；

lv_user_api.c        GUI的初始化，UI设计放在这里

最后

我们总结一下lvgl应用层架构：

lv_gui_init(应用层初始化接口) -> lv_port_disp_init(初始化lvgl和显示设备) -> 编辑UI样式 -> 完成lvgl初始化

如果不是动态的UI，到这里基本可以实现显示，因依托于平台介绍，不尽详细，欢迎留言交流