“ 可以应用于嵌入式的GUI有很多，除了上一篇文章介绍的emWin，还有周立功的AWTK、Microsoft的GUIX以及TouchGFX等，本篇文章将介绍一种轻量级的GUI：LittleVGL”

硬件环境：STM32F429IGT6

软件环境：STM32CubeMX v5.5.0

HAL库版本：STM32CubeF4 Firmware Package V1.24.0

LittleVGL版本：v7.9.0

01

LittleVGL简介

LittlevGL简称LVGL， 是一个使用C编写的开源免费的GUI，可以应用在嵌入式设备中。用户可以从官网或者Github上下载。

源码：https://github.com/littlevgl/lvgl

其特点如下：

1. 强大的模块化编程能力，能够创建包括按键，图标，列表，滑块，图片在内的功能

2. 先进的图形界面，包含动画，抗撕裂，可调明暗度，柔和缩放等功能。

3. 支持不同的输入设备包括键盘，鼠标，触摸屏，编码器等。

4. UTF-8编码多语言支持。

5. 多显示器支持，可以同时使用多个TFT或单色显示。

6. 完整的可自定义图形元素。

7. 不限制芯片类型，硬件可无限制地在各种芯片上使用LVGL。

8. 可自定义内存调用。

9. 支持但不强制使用操作系统，外部存储或GPU。

10. 使用单一框架缓存支持复杂的图形界面。

11. 整个库用C编写最大程度地提高兼容性。

对硬件的要求：

1. 16，32或64位微处理器或芯片

2. 建议使用大于16MHz的时钟速度

3. 闪存/ROM:对于重要部件要求大于64KB（建议大于180KB）

4. RAM：

• 静态RAM使用：根据不同功能与对象2KB以内不等。

• 栈：大于2KB（建议大于8KB）。

• 堆：大于2KB（如果使用多个对象建议大于16KB）用lv_conf.h库中的LV_MEM_SIZE来设置。

• 显示缓存：大于“水平分辨率”像素值（建议大于10*“水平分辨率”像素值）。

02

移植前准备

    1.底层驱动

首先完成硬件的底层驱动，包括LCD显示，触摸屏等。本例以STM32F429驱动7寸RGB接口屏为例，底层程序可参考之前的文章《STM32CubeMX之LTDC接口》

    2.源码下载

下载源码和例程。

源码：https://github.com/littlevgl/lvgl

例程：https://github.com/littlevgl/lv_examples

将下载并解压后的两个文件夹复制到工程目录，如下：

03

移植

1.添加文件到工程

首先在工程目录新建三个组：

其中lvgl为源码文件，lvgl/example为演示例程，lvgl/port为接口文件。需要用户完成的只有lvgl/port下的两个文件。

首先将lvgl/src目录及其子目录下的全部文件添加进去。（文件较多就不展开了）

将演示例程中的其中一个添加到工程中，这里选择了lv_demo_widgets。

将lvgl/example/porting目录下的两组.c和.h文件添加到lvgl/port下（这里重命名了一下）。

2.接口程序编写

lv_port_disp为显示接口文件，lv_port_indev为输入接口（这里是触摸屏）文件。

lv_port_disp文件中需要修改两个函数，lv_port_disp_init和disp_flush。这两个函数的主要功能是完成显示缓冲初始化，以及将显示缓存中的内容显示到LCD上。需要用户根据显示屏接口的不同自己完成相关程序。

//显示接口初始化void lv_port_disp_init(void){  static lv_disp_buf_t disp_buf;    //显示缓冲区初始化，因为使用了SDRAM,所以可以设置为双缓冲区  lv_disp_buf_init(&disp_buf, color_buf, color_buf2, COLOR_BUF_SIZE); lv_disp_drv_t disp_drv;                           lv_disp_drv_init(&disp_drv);                    //屏幕分辨率  disp_drv.hor_res = 800;  disp_drv.ver_res = 480;  //注册显示驱动回调  disp_drv.flush_cb = disp_flush;  //注册显示缓冲区  disp_drv.buffer = &disp_buf;
#if LV_USE_GPUdisp_drv.gpu_blend = gpu_blend;disp_drv.gpu_fill = gpu_fill;#endif  //注册显示驱动  lv_disp_drv_register(&disp_drv);}//把指定区域的显示缓冲区内容写入到屏幕上,使用DMA2D完成这个操作static void disp_flush(lv_disp_drv_t * disp_drv, const lv_area_t * area, lv_color_t * color_p){  //把指定区域的显示缓冲区内容写入到屏幕  LTDC_Color_Fill(area->x1,area->y1,area->x2,area->y2,(uint16_t*)color_p);  lv_disp_flush_ready(disp_drv);}

lv_port_indev文件中包含了触摸屏、鼠标、键盘等多种输入设备，本例中使用了触摸屏，因此其它程序可以屏蔽掉。需要修改的两个函数为初始化和读取触摸坐标的函数touchpad_init和touchpad_read：

/*Initialize your touchpad*/static void touchpad_init(void){    /*Your code comes here*/  TOUCH_Init();}
/* Will be called by the library to read the touchpad */static bool touchpad_read(lv_indev_drv_t * indev_drv, lv_indev_data_t * data){    static lv_coord_t last_x = 0;    static lv_coord_t last_y = 0;/*Save the pressed coordinates and the state*///    if(touchpad_is_pressed()) {//        touchpad_get_xy(&last_x, &last_y);//        data->state = LV_INDEV_STATE_PR;//    } else {//        data->state = LV_INDEV_STATE_REL;//    }
//    /*Set the last pressed coordinates*///    data->point.x = last_x;//    data->point.y = last_y;      if(TOUCH_ReadXY(&last_x, &last_y))    {      data->state = LV_INDEV_STATE_PR;    }    else    {      data->state = LV_INDEV_STATE_REL;    }    data->point.x = last_x;    data->point.y = last_y;    /*Return `false` because we are not buffering and no more data to read*/    return false;}

3.头文件配置

接下来将源码目录下的lv_conf_template.h文件包含到工程中，这里重命名为lv_conf.h。

该文件中包含了一些lvgl的基本配置，包括分辨率以及颜色模式等。

将演示例程目录下的lv_ex_conf_template.h包含到工程中，这里重命名为lv_ex_conf.h。该文件主要是选择使能哪一个演示例程。

 4.其它

滴答定时器中断中添加lvgl的时基函数：lv_tick_inc(1)

接下来在主函数中初始化以及demo调用的程序，lvgl初始化前需要完成触摸屏和SDRAM等的初始化。需要注意的是lv_task_handler();函数需要循环调用，以便lvgl完成自身任务的调用。

另外移植过程中需要注意一些头文件的包含路径，以及一些文件开头的#if 0改为#if 1等细节问题。

到此程序移植完成，编译后运行查看效果：

04

总结

可以看到，移植过程并不复杂，而且LVGL的控件丰富，相比于emWin接近于windows XP的默认主题，LVGL更接近于Android，界面美观。但各种辅助工具不如emWin多，使用起来稍显复杂。

欢迎关注公众号"嵌入式技术开发"，大家可以后台给我留言沟通交流。如果觉得该公众号对你有所帮助，也欢迎推荐分享给其他人。