【二、海思移植 LVGL及NXP GUI-Guider代码移植】

Sunshine-DG

已于 2024-08-01 13:07:46 修改

阅读量1.1k

点赞数 18

分类专栏： LVGL 文章标签： c语言 linux

于 2024-08-01 11:39:28 首次发布

本文链接：https://blog.csdn.net/qq_51926171/article/details/140831508

版权

LVGL 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

LVGL v8.3 移植至海思3516AV300 (Linux fb)

【一、海思移植 LVGL及SquareLine代码移植】

【二、海思移植 LVGL及NXP GUI-Guider代码移植】

文章目录

LVGL v8.3 移植至海思3516AV300 (Linux fb)
- [【一、海思移植 LVGL及SquareLine代码移植】](https://blog.csdn.net/qq_51926171/article/details/140707783)
- [【二、海思移植 LVGL及NXP GUI-Guider代码移植】](https://blog.csdn.net/qq_51926171/article/details/140831508)
前言
一、移植步骤
- 下载源码
二、源码编译
三、使用NXP GUI-Guider开发LVGL界面
总结

前言

上篇移植了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.编译完成板上测试

demo1 显示的颜色有点异常,解决方法参考上一篇【一、海思移植 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开发板

Sunshine-DG

关注

18
点赞
踩
25

收藏

觉得还不错? 一键收藏
0
评论
【二、海思移植 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代码移植。提示：以下是本篇文章正文内容，下面案例可供参考GUI Guider是恩智浦提供的用户友好型图形用户界面开发工具，可通过开源LVGL图形库快速开发高品质的显示。
复制链接

扫一扫