1. 概述
本篇主要是记录将LVGL移植到百问网STM32MP157开发板上，并且仅是跑一下LVGL的一些例程。
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 移植文件
首先在根目录创建一个文件夹用以存放官方的源码：
代码语言：javascript复制book@100ask:~$ mkdir lvgl
book@100ask:~$ cd lvgl然后使用git命令，将前面提到的仓库克隆到本地：
代码语言：javascript复制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命令检查就能看到如下结果：
代码语言：javascript复制book@100ask:~/lvgl$ ls
lv_demos lv_drivers lvgl lv_port_linux_frame_buffer然后再去根目录下创建一个工作空间，在工作空间内创建一个lvgl的工程，我将其取名叫做lvgl_demo：
代码语言：javascript复制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中：
代码语言：javascript复制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：
代码语言：javascript复制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：
代码语言：javascript复制book@100ask:~/workspace/lvgl_demo$ cp lv_drivers/lv_drv_conf_template.h lv_drv_conf.h这样，我们的lvgl_demo的工程目录有如下的文件：
代码语言：javascript复制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 Makefile4.2 修改配置文件
- 修改lv_drv_conf.h
修改这个文件的目的主要是为了使用linux下的frame buffer输出显示以及触控输入，需要将第11行的#if 0改成#if 1:
代码语言：javascript复制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：
代码语言：javascript复制 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定时器配置函数，在自己的应用程序中实现：
代码语言：javascript复制/* 原本的 */
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例程使能：
代码语言：javascript复制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头文件注释掉：
代码语言：javascript复制 2 // #include "lvgl/demos/lv_demos.h"我们还需要根据自己使用的屏幕修改分辨率：
代码语言：javascript复制 32 disp_drv.hor_res = 1024; // 原来是800
33 disp_drv.ver_res = 600; // 原来是480另外我们也没有移植原本的鼠标样式，所以也需要注释掉：
代码语言：javascript复制 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因为我们没有移植鼠标样式，所以需要将鼠标样式的连接源文件注释掉：
代码语言：javascript复制 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然后执行这个文件：
代码语言：javascript复制[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在嵌入式开发板上的简单移植应用就完成了。
