LVGL v8.3 移植至海思3516AV300 (Linux fb)
【一、海思移植 LVGL及SquareLine代码移植】
【二、海思移植 LVGL及NXP GUI-Guider代码移植】
前言
上篇移植了LVGL v9.1.1版本及使用SquareLine绘制ui生成代码移植, 发现SquareLine只免费试用30天,了解到NXP GUI-Guider也可以用来绘制ui并生成代码,但是GUI-Guider只支持v7.x和v8.x, 所有此篇记录一下LVGL v8.x移植及GUI-Guider代码移植。
一、移植步骤
下载源码
- lvgl:https://github.com/lvgl/lvgl.git lvgl链接
- lv_drivers:https://github.com/lvgl/lv_drivers.git lv_drivers链接
- lv_port_linux_frame_buffer:https://github.com/lvgl/lv_port_linux_frame_buffer.git lv_port_linux_frame_buffer链接
lvgl:包含了LVGL基本的源码,以及官方给出的LVGL demo;
lv_drivers:包含了大多数设备的显示控制器和触摸驱动程序,主要用来指定显示屏使用哪一种驱动框架(包括FB、DRM等驱动程序框架);
lv_port_linux_frame_buffer:主函数文件所在的目录,整个工程的主文件夹,lvgl和lv_drivers都应放在此目录下。
- 克隆 lv_port_linux_frame_buffer
sunshine@sunshine:~/CSDN/LVGL_NXP$ git clone -b release/v8.2 https://github.com/lvgl/lv_port_linux_frame_buffer.git
正克隆到 'lv_port_linux_frame_buffer'...
remote: Enumerating objects: 188, done.
remote: Counting objects: 100% (85/85), done.
remote: Compressing objects: 100% (51/51), done.
remote: Total 188 (delta 52), reused 40 (delta 34), pack-reused 103
接收对象中: 100% (188/188), 959.23 KiB | 3.61 MiB/s, 完成.
处理 delta 中: 100% (86/86), 完成.
//这里使用v8.3下载不了
- 克隆 lvgl
sunshine@sunshine:~/CSDN/LVGL_NXP$ cd lv_port_linux_frame_buffer/
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ git clone -b release/v8.3 https://github.com/lvgl/lvgl.git
正克隆到 'lvgl'...
remote: Enumerating objects: 105709, done.
remote: Counting objects: 100% (5225/5225), done.
remote: Compressing objects: 100% (766/766), done.
remote: Total 105709 (delta 4712), reused 4637 (delta 4455), pack-reused 100484
接收对象中: 100% (105709/105709), 337.79 MiB | 14.60 MiB/s, 完成.
处理 delta 中: 100% (80239/80239), 完成.
- 克隆 lv_drivers
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ git clone -b release/v8.3 https://github.com/lvgl/lv_drivers.git
正克隆到 'lv_drivers'...
remote: Enumerating objects: 2054, done.
remote: Counting objects: 100% (729/729), done.
remote: Compressing objects: 100% (167/167), done.
remote: Total 2054 (delta 637), reused 587 (delta 561), pack-reused 1325
接收对象中: 100% (2054/2054), 566.07 KiB | 1.22 MiB/s, 完成.
处理 delta 中: 100% (1353/1353), 完成.
4.目录结构
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ tree -L 1
.
├── LICENSE
├── lv_conf.h
├── lv_drivers
├── lv_drv_conf.h
├── lvgl
├── main.c
├── Makefile
├── mouse_cursor_icon.c
└── README.md
2 directories, 7 files
二、源码编译
1.修改配置文件lv_conf.h
lv_drv_conf.h
//在lv_conf.h文件中,检查LV_COLOR_DEPTH 是否为32
/*Color depth: 1 (1 byte per pixel), 8 (RGB332), 16 (RGB565), 32 (ARGB8888)*/
#define LV_COLOR_DEPTH 32
//在lv_drv_conf.h文件中,检查下面参数 使能USE_FBDEV
/*-----------------------------------------
* Linux frame buffer device (/dev/fbx)
*-----------------------------------------*/
#ifndef USE_FBDEV
# define USE_FBDEV 1
#endif
#if USE_FBDEV
# define FBDEV_PATH "/dev/fb0"
#endif
/*-----------------------------------------
* FreeBSD frame buffer device (/dev/fbx)
*.........................................*/
#ifndef USE_BSD_FBDEV
# define USE_BSD_FBDEV 0
#endif
#if USE_BSD_FBDEV
# define FBDEV_PATH "/dev/fb0"
#endif
/*-----------------------------------------
* DRM/KMS device (/dev/dri/cardX)
*-----------------------------------------*/
#ifndef USE_DRM
# define USE_DRM 0
#endif
#if USE_DRM
# define DRM_CARD "/dev/dri/card0"
# define DRM_CONNECTOR_ID -1 /* -1 for the first connected one */
#endif
//这里的"/dev/input/event10" 设备节点也要对应上 或者关闭 我这里不使用鼠标关闭使能
/*-------------------------------------------------
* Mouse or touchpad as evdev interface (for Linux based systems)
*------------------------------------------------*/
#ifndef USE_EVDEV
# define USE_EVDEV 0
#endif
#ifndef USE_BSD_EVDEV
# define USE_BSD_EVDEV 0
#endif
#if USE_EVDEV || USE_BSD_EVDEV
# define EVDEV_NAME "/dev/input/event10" /*You can use the "evtest" Linux tool to get the list of devices and test them*/
# define EVDEV_SWAP_AXES 0 /*Swap the x and y axes of the touchscreen*/
# define EVDEV_CALIBRATE 0 /*Scale and offset the touchscreen coordinates by using maximum and minimum values for each axis*/
# if EVDEV_CALIBRATE
# define EVDEV_HOR_MIN 0 /*to invert axis swap EVDEV_XXX_MIN by EVDEV_XXX_MAX*/
# define EVDEV_HOR_MAX 4096 /*"evtest" Linux tool can help to get the correct calibraion values>*/
# define EVDEV_VER_MIN 0
# define EVDEV_VER_MAX 4096
# endif /*EVDEV_CALIBRATE*/
#endif /*USE_EVDEV*/
2.修改Makefile
//添加交叉编译工具
CC = arm-himix200-linux-gcc
#CSRCS +=$(LVGL_DIR)/mouse_cursor_icon.c //注释此行
3.修改main.c
#define DISP_BUF_SIZE (1920 * 1080) //分辨率1080P
/*Initialize and register a display driver*/
static lv_disp_drv_t disp_drv;
lv_disp_drv_init(&disp_drv);
disp_drv.draw_buf = &disp_buf;
disp_drv.flush_cb = fbdev_flush;
disp_drv.hor_res = 1920;
disp_drv.ver_res = 1080;
lv_disp_drv_register(&disp_drv);
//注释此处 不使用鼠标设备
#if 0
evdev_init();
static lv_indev_drv_t indev_drv_1;
lv_indev_drv_init(&indev_drv_1); /*Basic initialization*/
indev_drv_1.type = LV_INDEV_TYPE_POINTER;
/*This function will be called periodically (by the library) to get the mouse position and state*/
indev_drv_1.read_cb = evdev_read;
lv_indev_t *mouse_indev = lv_indev_drv_register(&indev_drv_1);
/*Set a cursor for the mouse*/
LV_IMG_DECLARE(mouse_cursor_icon)
lv_obj_t * cursor_obj = lv_img_create(lv_scr_act()); /*Create an image object for the cursor */
lv_img_set_src(cursor_obj, &mouse_cursor_icon); /*Set the image source*/
lv_indev_set_cursor(mouse_indev, cursor_obj); /*Connect the image object to the driver*/
#endif
4.编译完成板上测试
显示的颜色有点异常,解决方法参考上一篇 【一、海思移植 LVGL及SquareLine代码移植】
需要修改lv_port_linux_frame_buffer/lv_drivers/display/fbdev.c
5.使用CMake编译
- 该版本没有提供CMakeList,参考上一篇复制一个过来修改一下 CMakeLists.txt、 build.sh、 toolchain.cmake
cmake_minimum_required(VERSION 3.10)
project(lvgl)
set(CMAKE_C_STANDARD 99)#C99 # lvgl officially support C99 and above
set(CMAKE_CXX_STANDARD 17)#C17
set(CMAKE_CXX_STANDARD_REQUIRED ON)
set(EXECUTABLE_OUTPUT_PATH ${PROJECT_SOURCE_DIR}/bin)
set(LIBRARY_OUTPUT_PATH ${PROJECT_BINARY_DIR}/lib)
include_directories(${PROJECT_SOURCE_DIR}/lvgl)
include_directories(${PROJECT_SOURCE_DIR}/hisi/include)
link_directories(${PROJECT_SOURCE_DIR}/hisi/lib)
add_subdirectory(lvgl)
target_include_directories(lvgl PUBLIC ${PROJECT_SOURCE_DIR})
add_subdirectory(lv_drivers)
target_include_directories(lv_drivers PUBLIC ${PROJECT_SOURCE_DIR})
add_executable(main main.c)
file(GLOB HISI_LIBS "${PROJECT_SOURCE_DIR}/hisi/lib/*.a")
set(INDIVIDUAL_HISI_LIBS
${PROJECT_SOURCE_DIR}/hisi/lib/libdnvqe.a
${PROJECT_SOURCE_DIR}/hisi/lib/libhdmi.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hiacs.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hiae.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hiawb.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hiawb_natura.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hicalcflicker.a
${PROJECT_SOURCE_DIR}/hisi/lib/libhi_cipher.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hidehaze.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hidrc.a
${PROJECT_SOURCE_DIR}/hisi/lib/libhifisheyecalibrate.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hiir_auto.a
${PROJECT_SOURCE_DIR}/hisi/lib/lib_hildci.a
${PROJECT_SOURCE_DIR}/hisi/lib/libisp.a
${PROJECT_SOURCE_DIR}/hisi/lib/libive.a
${PROJECT_SOURCE_DIR}/hisi/lib/libmd.a
${PROJECT_SOURCE_DIR}/hisi/lib/libmpi.a
${PROJECT_SOURCE_DIR}/hisi/lib/libnnie.a
${PROJECT_SOURCE_DIR}/hisi/lib/libsecurec.a
${PROJECT_SOURCE_DIR}/hisi/lib/libsvpruntime.a
${PROJECT_SOURCE_DIR}/hisi/lib/libtde.a
${PROJECT_SOURCE_DIR}/hisi/lib/libupvqe.a
${PROJECT_SOURCE_DIR}/hisi/lib/libVoiceEngine.a
)
target_link_libraries(main
lvgl
lvgl::examples
lvgl::demos
lv_drivers
${HISI_LIBS}
${INDIVIDUAL_HISI_LIBS}
m
dl
pthread
)
target_link_options(main PRIVATE
-Wl,--start-group
${INDIVIDUAL_HISI_LIBS}
-Wl,--end-group
)
add_custom_target (run COMMAND ${EXECUTABLE_OUTPUT_PATH}/main DEPENDS main)
- 编译会报错
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ ./build.sh
-- The C compiler identification is GNU 6.3.0
-- The CXX compiler identification is GNU 6.3.0
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Check for working C compiler: /opt/hisi-linux/x86-arm/arm-himix200-linux/bin/arm-himix200-linux-gcc - skipped
-- Detecting C compile features
-- Detecting C compile features - done
-- Detecting CXX compiler ABI info
-- Detecting CXX compiler ABI info - done
-- Check for working CXX compiler: /opt/hisi-linux/x86-arm/arm-himix200-linux/bin/arm-himix200-linux-g++ - skipped
-- Detecting CXX compile features
·······
[100%] Linking C executable ../bin/main
/opt/hisi-linux/x86-arm/arm-himix200-linux/host_bin/../lib/gcc/arm-linux-gnueabi/6.3.0/../../../../arm-linux-gnueabi/bin/ld: cannot find -lwayland-client
/opt/hisi-linux/x86-arm/arm-himix200-linux/host_bin/../lib/gcc/arm-linux-gnueabi/6.3.0/../../../../arm-linux-gnueabi/bin/ld: cannot find -lwayland-cursor
/opt/hisi-linux/x86-arm/arm-himix200-linux/host_bin/../lib/gcc/arm-linux-gnueabi/6.3.0/../../../../arm-linux-gnueabi/bin/ld: cannot find -lxkbcommon
collect2: error: ld returned 1 exit status
make[2]: *** [CMakeFiles/main.dir/build.make:148:../bin/main] 错误 1
make[1]: *** [CMakeFiles/Makefile2:126:CMakeFiles/main.dir/all] 错误 2
make: *** [Makefile:136:all] 错误 2
cp: 对 '../bin/main' 调用 stat 失败: 没有那个文件或目录
- 修改lv_drivers下的CMakeList
find_package(PkgConfig)
#pkg_check_modules(PKG_WAYLAND wayland-client wayland-cursor wayland-protocols xkbcommon)//注释掉
target_link_libraries(lv_drivers PUBLIC lvgl ${PKG_WAYLAND_LIBRARIES})
- 继续编译
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ ./build.sh
-- The C compiler identification is GNU 6.3.0
-- The CXX compiler identification is GNU 6.3.0
-- Detecting C compiler ABI info
-- Detecting C compiler ABI info - done
-- Check for working C compiler: /opt/hisi-linux/x86-arm/arm-himix200-linux/bin/arm-himix200-linux-gcc - skipped
·······
[ 99%] Building C object lvgl/CMakeFiles/lvgl_examples.dir/examples/widgets/tileview/lv_example_tileview_1.c.o
[ 99%] Building C object lvgl/CMakeFiles/lvgl_examples.dir/examples/widgets/win/lv_example_win_1.c.o
[ 99%] Linking C static library ../lib/liblvgl_examples.a
[ 99%] Built target lvgl_examples
[ 99%] Building C object CMakeFiles/main.dir/main.c.o
[100%] Linking C executable ../bin/main
[100%] Built target main
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$
- 板上测试
至此LVGL8.x 移植完毕,该包也支持SquareLine 生成的代码,移植参考上一篇
三、使用NXP GUI-Guider开发LVGL界面
1.简介
GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具,可通过开源LVGL图形库快速开发高品质的显示。GUI Guider的拖放编辑器可以轻松利用LVGL的众多特性,如小部件、动画和样式来创建GUI,而只需少量代码或根本无需任何代码。
2.安装软件,直接去官网下载安装即可官网
3.新建工程
-
新建工程,选择LVGL版本,我这里选择v8.3.10,选择设备模板,随便选,我这里选择的i.MX, 只有这个支持32bit
-
选择应用模板
-
配置项目信息
-
ui布局,随便拖几个控件测试
4.UI项目移植
- 新建ui文件夹, 将工程里的
custom
genersted
文件夹拷贝到ui文件夹下
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ mkdir ui
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ tree ui -L 1
ui
├── custom
└── generated
2 directories, 0 files
- 在ui下新建一个CMakeList
file(GLOB_RECURSE SOURCES ./custom/*.c ./generated/*.c)
add_library(ui ${SOURCES})
- 修改
main.c
//添加头文件及ui定义
#include "gui_guider.h"
#include "events_init.h"
#include "custom.h"
#define DISP_BUF_SIZE (1920 * 1080)
lv_ui guider_ui;
//使用GUI生成的代码
/*Create a Demo*/
setup_ui(&guider_ui);
events_init(&guider_ui);
custom_init(&guider_ui);
- 修改顶层CMakeList
//添加下面代码
include_directories(${PROJECT_SOURCE_DIR}/ui/custom)
include_directories(${PROJECT_SOURCE_DIR}/ui/generated)
add_subdirectory(ui)
target_include_directories(ui PUBLIC ${PROJECT_SOURCE_DIR})
target_link_libraries(main
lvgl
lvgl::examples
lvgl::demos
lv_drivers
${HISI_LIBS}
${INDIVIDUAL_HISI_LIBS}
ui //此处添加
m
dl
pthread
)
- 编译, 执行
./build.sh
报错如下
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$ ./build.sh
[100%] Linking C executable ../bin/main
lib/libui.a(setup_scr_screen.c.o): In function `setup_scr_screen':
setup_scr_screen.c:(.text+0xc4): undefined reference to `lv_qrcode_create'
setup_scr_screen.c:(.text+0x100): undefined reference to `lv_qrcode_update'
setup_scr_screen.c:(.text+0x140): undefined reference to `lv_analogclock_create'
setup_scr_screen.c:(.text+0x164): undefined reference to `lv_analogclock_hide_digits'
setup_scr_screen.c:(.text+0x194): undefined reference to `lv_analogclock_set_major_ticks'
setup_scr_screen.c:(.text+0x1b8): undefined reference to `lv_analogclock_set_ticks'
setup_scr_screen.c:(.text+0x1dc): undefined reference to `lv_analogclock_set_hour_needle_line'
setup_scr_screen.c:(.text+0x200): undefined reference to `lv_analogclock_set_min_needle_line'
setup_scr_screen.c:(.text+0x224): undefined reference to `lv_analogclock_set_sec_needle_line'
setup_scr_screen.c:(.text+0x248): undefined reference to `lv_analogclock_set_time'
setup_scr_screen.c:(.text+0xa70): undefined reference to `lv_barcode_create'
setup_scr_screen.c:(.text+0xaa8): undefined reference to `lv_barcode_set_scale'
setup_scr_screen.c:(.text+0xac8): undefined reference to `lv_barcode_set_dark_color'
setup_scr_screen.c:(.text+0xae8): undefined reference to `lv_barcode_set_light_color'
setup_scr_screen.c:(.text+0xb04): undefined reference to `lv_barcode_update'
lib/libui.a(widgets_init.c.o): In function `screen_analog_clock_1_timer':
widgets_init.c:(.text+0x190): undefined reference to `clock_count'
widgets_init.c:(.text+0x1d0): undefined reference to `lv_analogclock_set_time'
collect2: error: ld returned 1 exit status
make[2]: *** [CMakeFiles/main.dir/build.make:149:../bin/main] 错误 1
make[1]: *** [CMakeFiles/Makefile2:145:CMakeFiles/main.dir/all] 错误 2
make: *** [Makefile:136:all] 错误 2
cp: 对 '../bin/main' 调用 stat 失败: 没有那个文件或目录
- 解决报错
在GUI-Guider下的工程文件里搜索lv_qrcode_create函数,发现在demo1\lvgl\src\extra\libs\qrcode\lv_qrcode.c文件里,需要将相关文件拷贝到工程里, 根据extra文件夹下的README.md
可知还需要修改lv_conf.h
文件(参考GUI-Guider下的工程下的demo1\lvgl-simulator\lv_conf.h)
需要拷贝的文件如下:
修改项目lv_conf.h
文件, 添加下面的宏定义
/*-----------
* Widgets
*----------*/
#define LV_USE_ANALOGCLOCK 1
#define LV_USE_CAROUSEL 1
#define LV_USE_DCLOCK 1
#define LV_USE_RADIOBTN 1
#define LV_USE_TEXTPROGRESS 1
#define LV_USE_VIDEO 0
/*QR code library*/
#define LV_USE_QRCODE 1 //将0改成1
/*Enable the barcode*/
#define LV_USE_BARCODE 1 //添加
- 再次编译, 执行
./build.sh
[ 99%] Building C object lvgl/CMakeFiles/lvgl_examples.dir/examples/widgets/win/lv_example_win_1.c.o
[100%] Linking C static library ../lib/liblvgl_examples.a
[100%] Built target lvgl_examples
[100%] Building C object CMakeFiles/main.dir/main.c.o
[100%] Linking C executable ../bin/main
[100%] Built target main
sunshine@sunshine:~/CSDN/LVGL_NXP/lv_port_linux_frame_buffer$
- 编译完成,板端测试
总结
至此完成了NXP GUI-Guider生成的LVGL 8.3.10的ui代码移植到海思3516av300上,该项目工程也适用于SquareLine Studio生成的ui代码。
参考博客链接
LVGL v8.2移植到IMX6ULL开发板