1. 概述

​ 本篇主要是记录将LVGL移植到百问网STM32MP157开发板上，并且仅是跑一下LVGL的一些例程。

温湿度监控系统应用开发所有文章

1. 【嵌入式Linux应用开发】移植LVGL到Linux开发板
2. 【嵌入式Linux应用开发】初步移植MQTT到Ubuntu和Linux开发板
3. 【嵌入式Linux应用开发】SquareLine Studio与LVGL模拟器
4. 【嵌入式Linux应用开发】温湿度监控系统——绘制温湿度折线图
5. 【嵌入式Linux应用开发】温湿度监控系统——学习paho mqtt的基本操作
6. 【嵌入式Linux应用开发】温湿度监控系统——多线程与温湿度的获取显示
7. 【嵌入式Linux应用开发】设计温湿度采集MCU子系统

适用开发板

​ 适用于百问网的STM32MP157开发板和IMX6ULL开发板及其对应的屏幕，需要注意的是编译链要对应更改。

• 100ASK_STM32MP157
• 100ASK_IMX6ULL

2. 软件平台

​ 本次使用的是Ubuntu18.04，是由百问网提供的，并且是按照他们的手册搭建好了交叉编译环境，花了一点时间将Linux内核编译好之后才进行的LVGL移植，本次移植必须搭建好嵌入式Linux的交叉编译环境且内核也必须编译好，否则无法完成移植。

3. 移植所需要的资源

​ 本次实验是从LVGL的官方仓库，移植了三个仓库：

名称	仓库地址	描述
lvgl	https://github.com/lvgl/lvgl.git	包含了LVGL图形界面控件的源码以及少量例程
lv_drivers	https://github.com/lvgl/lv_drivers.git	包含了驱动LVGL图形界面的驱动接口源代码
lv_demos	https://github.com/lvgl/lv_demos.git	LVGL的例程
lv_port_linux_frame_buffer	https://github.com/lvgl/lv_port_linux_frame_buffer.git	适配有frame buffer的linux系统的接口

4. 移植步骤

4.1 移植文件

​ 首先在根目录创建一个文件夹用以存放官方的源码：

book@100ask:~$ mkdir lvgl
book@100ask:~$ cd lvgl

然后使用git命令，将前面提到的仓库克隆到本地：

book@100ask:~/lvgl$ git clone https://github.com/lvgl/lvgl.git
book@100ask:~/lvgl$ git clone https://github.com/lvgl/lv_drivers.git
book@100ask:~/lvgl$ git clone https://github.com/lvgl/lv_demos.git
book@100ask:~/lvgl$ git clone https://github.com/lvgl/lv_port_linux_frame_buffer.git

因为仓库是在github上的，克隆可能会失败，多尝试几次。如果几个仓库都克隆成功了，那么在lvgl下用ls命令检查就能看到如下结果：

book@100ask:~/lvgl$ ls
lv_demos  lv_drivers  lvgl  lv_port_linux_frame_buffer

然后再去根目录下创建一个工作空间，在工作空间内创建一个lvgl的工程，我将其取名叫做lvgl_demo：

book@100ask:~/lvgl$ cd
book@100ask:~$ mkdir workspace
book@100ask:~$ cd workspace
book@100ask:~/workspace$ mkdir lvgl_demo
book@100ask:~/workspace$ cd lvgl_demo

将根目录下的lvgl文件夹中的lvgl、lv_drivers和lv_port_linux_frame_buffer中的main.c与Makefile复制到lvgl_demo中：

book@100ask:~/workspace/lvgl_demo$ cp -r ~/lvgl/lvgl ./
book@100ask:~/workspace/lvgl_demo$ cp -r ~/lvgl/lv_drivers ./
book@100ask:~/workspace/lvgl_demo$ cp ~/lvgl/lv_port_linux_frame_buffer/main.c ./
book@100ask:~/workspace/lvgl_demo$ cp ~/lvgl/lv_port_linux_frame_buffer/Makefile ./
book@100ask:~/workspace/lvgl_demo$ ls -l
total 16
drwxrwxr-x 11 book book 4096 Jun 21 03:07 lv_drivers
drwxrwxr-x 11 book book 4096 Jun 21 03:07 lvgl
-rw-rw-r--  1 book book 2350 Jun 21 03:07 main.c
-rw-rw-r--  1 book book 1812 Jun 21 03:07 Makefile

将lvgl中的lv_conf_template.h复制出来并且改名位lv_conf.h：

book@100ask:~/workspace/lvgl_demo$ cp lvgl/lv_conf_template.h lv_conf.h

将lv_drivers中的lv_drv_conf_template.h复制出来并且改名为lv_drv_conf.h：

book@100ask:~/workspace/lvgl_demo$ cp lv_drivers/lv_drv_conf_template.h lv_drv_conf.h

这样，我们的lvgl_demo的工程目录有如下的文件：

book@100ask:~/workspace/lvgl_demo$ ls -l
total 60
-rw-rw-r--  1 book book 24733 Jun 21 03:08 lv_conf.h
drwxrwxr-x 11 book book  4096 Jun 21 03:07 lv_drivers
-rw-rw-r--  1 book book 14940 Jun 21 03:10 lv_drv_conf.h
drwxrwxr-x 11 book book  4096 Jun 21 03:07 lvgl
-rw-rw-r--  1 book book  2350 Jun 21 03:07 main.c
-rw-rw-r--  1 book book  1812 Jun 21 03:07 Makefile

4.2 修改配置文件

• 修改lv_drv_conf.h

​ 修改这个文件的目的主要是为了使用linux下的frame buffer输出显示以及触控输入，需要将第11行的#if 0改成#if 1:

book@100ask:~/workspace/lvgl_demo$ vim lv_drv_conf.h

如果在vim中显示文本的行数，只需要按下键盘上的ESC键，然后输入:set nu就能显示行数了，先讲第11行的改成#if 1，要编辑需要进入编辑模式，如果当前不是编辑模式，就按键盘上的i键进入编辑模式：

10 /* clang-format off */
11 #if 1 /*Set it to "1" to enable the content*/

然后318~324行，将USE_FBDEV的值改为1，使能frame buffer设备：

315 /*-----------------------------------------
316  *  Linux frame buffer device (/dev/fbx)
317  *-----------------------------------------*/
318 #ifndef USE_FBDEV
319 #  define USE_FBDEV           1
320 #endif
321
322 #if USE_FBDEV
323 #  define FBDEV_PATH          "/dev/fb0"
324 #endif

接着是441~461行，将USE_EVDEV使能，并且触控输入设备的名称要根据自己的板子实际情况更改：

438 /*-------------------------------------------------
439  * Mouse or touchpad as evdev interface (for Linux based systems)
440  *------------------------------------------------*/
441 #ifndef USE_EVDEV
442 #  define USE_EVDEV           1
443 #endif
444
445 #ifndef USE_BSD_EVDEV
446 #  define USE_BSD_EVDEV       0
447 #endif
448
449 #if USE_EVDEV || USE_BSD_EVDEV
450 #  define EVDEV_NAME   "/dev/input/event0"        /*You can use the "evtest" Linux tool to get the list of devices and test them*/
451 #  define EVDEV_SWAP_AXES         0               /*Swap the x and y axes of the touchscreen*/
452
453 #  define EVDEV_CALIBRATE         0               /*Scale and offset the touchscreen coordinates by using maximum and minimum values for each axis*/
454
455 #  if EVDEV_CALIBRATE
456 #    define EVDEV_HOR_MIN         0               /*to invert axis swap EVDEV_XXX_MIN by EVDEV_XXX_MAX*/
457 #    define EVDEV_HOR_MAX      4096               /*"evtest" Linux tool can help to get the correct calibraion values>*/
458 #    define EVDEV_VER_MIN         0
459 #    define EVDEV_VER_MAX      4096
460 #  endif  /*EVDEV_CALIBRATE*/
461 #endif  /*USE_EVDEV*/

其它的地方暂时不用修改，然后按ESC退出编辑模式，输入:wq保存退出。

• 修改lv_conf.h

和lv_drv_conf.h一样需要将一开始的#if 0改成#if 1：

 14 /* clang-format off */
 15 #if 1 /*Set it to "1" to enable content*/

接着是49~67行修改显存大小，可以使能LV_MEM_CUSTOM自己分配也可以自动分配，我选择的是自己分配显存：

 48 /*1: use custom malloc/free, 0: use the built-in `lv_mem_alloc()` and `lv_mem_free()`*/
 49 #define LV_MEM_CUSTOM 1
 50 #if LV_MEM_CUSTOM == 0
 51     /*Size of the memory available for `lv_mem_alloc()` in bytes (>= 2kB)*/
 52     #define LV_MEM_SIZE (10 * 1024U * 1024U)          /*[bytes]*/
 53
 54     /*Set an address for the memory pool instead of allocating it as a normal array. Can be in external SRAM too.*/
 55     #define LV_MEM_ADR 0     /*0: unused*/
 56     /*Instead of an address give a memory allocator that will be called to get a memory pool for LVGL. E.g. my_malloc*/
 57     #if LV_MEM_ADR == 0
 58         #undef LV_MEM_POOL_INCLUDE
 59         #undef LV_MEM_POOL_ALLOC
 60     #endif
 61
 62 #else       /*LV_MEM_CUSTOM*/
 63     #define LV_MEM_CUSTOM_INCLUDE <stdlib.h>   /*Header for the dynamic memory function*/
 64     #define LV_MEM_CUSTOM_ALLOC   malloc
 65     #define LV_MEM_CUSTOM_FREE    free
 66     #define LV_MEM_CUSTOM_REALLOC realloc
 67 #endif     /*LV_MEM_CUSTOM*/

随后是刷新时间，鉴于处理器的运算能力可以自己调整，像我这原本是30ms，都被我调整成了10ms：

 80 /*Default display refresh period. LVG will redraw changed areas with this period time*/
 81 #define LV_DISP_DEF_REFR_PERIOD 10      /*[ms]*/
 82
 83 /*Input device read period in milliseconds*/
 84 #define LV_INDEV_DEF_READ_PERIOD 10     /*[ms]*/

最后是比较关键的一个设置，TICK的配置，我们选择自己定义一个Tick定时器配置函数，在自己的应用程序中实现：

/* 原本的 */
86 /*Use a custom tick source that tells the elapsed time in milliseconds. 87  *It removes the need to manually update the tick with `lv_tick_inc()`)*/
88 #define LV_TICK_CUSTOM 0
89 #if LV_TICK_CUSTOM
90     #define LV_TICK_CUSTOM_INCLUDE "Arduino.h"         /*Header for the system time function*/
91     #define LV_TICK_CUSTOM_SYS_TIME_EXPR (millis())    /*Expression evaluating to current system time in ms*/
92 #endif   /*LV_TICK_CUSTOM*/
    
/* 改为 */
86 /*Use a custom tick source that tells the elapsed time in milliseconds.
87  *It removes the need to manually update the tick with `lv_tick_inc()`)*/
88 #define LV_TICK_CUSTOM 1
89 #if LV_TICK_CUSTOM
90     #define LV_TICK_CUSTOM_INCLUDE <stdint.h>         /*Header for the system time function*/
91     #define LV_TICK_CUSTOM_SYS_TIME_EXPR (custom_tick_get())    /*Expression evaluating to current system time in ms*/
92 #endif   /*LV_TICK_CUSTOM*/

我们现在是移植lvgl官方的模板，所以直接跑一下他们的例程，去706行将widget例程使能：

705 /*Show some widget. It might be required to increase `LV_MEM_SIZE` */
706 #define LV_USE_DEMO_WIDGETS 1
707 #if LV_USE_DEMO_WIDGETS
708 #define LV_DEMO_WIDGETS_SLIDESHOW 0
709 #endif

然后保存退出。

4.3 修改main.c

​ 我们没有将lvgl的demos移植到工程文件中，所以需要将第2行的demos头文件注释掉：

  2 // #include "lvgl/demos/lv_demos.h"

我们还需要根据自己使用的屏幕修改分辨率：

 32     disp_drv.hor_res    = 1024;	// 原来是800
 33     disp_drv.ver_res    = 600;	// 原来是480

另外我们也没有移植原本的鼠标样式，所以也需要注释掉：

 46     /*Set a cursor for the mouse*/
 47 //    LV_IMG_DECLARE(mouse_cursor_icon);
 48 //    lv_obj_t * cursor_obj = lv_img_create(lv_scr_act()); /*Create an image object for the cursor */
 49 //    lv_img_set_src(cursor_obj, &mouse_cursor_icon);           /*Set the image source*/
 50 //    lv_indev_set_cursor(mouse_indev, cursor_obj);             /*Connect the image  object to the driver*/

然后保存退出。

4.4 修改Makefile

​ 在Makefile中需要指定编译器，如果不知道自己的交叉编译是什么，可以在命令行输入echo $CROSS_COMPILE查看：

book@100ask:~/workspace/lvgl_demo$ echo $CROSS_COMPILE
arm-buildroot-linux-gnueabihf-

可以看到我当前环境使用的是arm-buildroot-linux-gnueabihf-gcc，如果你没有得到这个结果，说明你的交叉编译环境没有设置好，需要去看百问网的手册学习如何构建好交叉编译环境。

​ 我们将Makefile中的CC ?= gcc修改成我们自己的编译链：

  4 #CC ?= gcc
  5 CC = arm-buildroot-linux-gnueabihf-gcc

因为我们没有移植鼠标样式，所以需要将鼠标样式的连接源文件注释掉：

 19 #CSRCS +=$(LVGL_DIR)/mouse_cursor_icon.c

然后保存退出。

4.5 编译和运行

​ 在命令行输入make编译工程，如果有报错信息，仔细看提示，不明白的可以百度或者留言交流。

​ 编译完成后，会在工程目录生成一个可执行文件demo，我们需要将这个文件copy到开发板上，我使用的是网络挂载方式（不明白的可以去看百问网的完全开发手册V4.0版本）。在开发板上将开发板的mnt目录挂载到虚拟机的nfs_rootfs目录：

[root@100ask:~]# mount -t nfs -o nolock,vers=3 192.168.3.14:/home/book/nfs_rootfs /mnt

然后去虚拟机那边将demo复制到虚拟机的nfs_rootfs目录：

book@100ask:~/workspace/lvgl_demo$ cp demo ~/nfs_rootfs/

这样在开发板的mnt目录也会有这个文件了：

[root@100ask:~]# ls /mnt
demo                            lib                             stm32mp157c-100ask-512d-v1.dtb  uImage

我们将mnt目录下的demo文件复制到本地：

[root@100ask:~]# cp /mnt/demo ./
[root@100ask:~]# ls
demo

然后执行这个文件：

[root@100ask:~]# ./demo

就可以看到在开发板上的屏幕显示了LVGL的widget例程：

{% asset_img 2_lvgl-widget.jpg "图4-1 LVGL的widget例程显示" %}

{% asset_img 3_改变widget滑动条.jpg "图4-2 滑动条" %}

{% asset_img 4_lvgl输入数据.jpg "图4-3 输入密码" %}

至此LVGL在嵌入式开发板上的简单移植应用就完成了。