【嵌入式Linux应用开发】1. 移植LVGL到Linux开发板

1. 概述

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

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

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

适用开发板

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

2. 软件平台

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

3. 移植所需要的资源

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

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例程:


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


按照步骤来出现这种错误怎么解决啊

视频教程:基于100ASK_IMX6ULL开发板的LVGL(v8.2)学习+开发教程,面向零基础+简易上手+项目导向_哔哩哔哩_bilibili

血的教训:git cloneg的时候会clone master的文件,最好是下载release的版本,lvgl、lvgl_driver、lv_port_framebuff_linux都下载release的版本,要不然会有乱七八糟的错误

1 Like

大哥,为什么我下载release版本的zip 解压出现数据错误?


为什么我下载的源码里没有这个clik配置文件,
BM@)J92}T59$A8%~D%HB4T