在Linux中创建LVGL应用

简介

上一篇文章介绍了在imx6上开发UI的流程 .
这篇接上文，介绍具体的开发步骤。

1. 创建项目主目录

mkdir my_lvgl_project
cd my_lvgl_project

2. 初始化 Git 仓库 (可选但推荐)

git init
echo "# My Project with Dependencies" > README.md
git add README.md
git commit -m "Initial commit: Add README"

3. 添加LVGL源码

这里有2种方式：

将lvgl仓库作为整个工程的子模块（推荐）
直接将LVGL源代码加入到工程中

3.1 添加 LVGL 作为子模块

git submodule add https://github.com/lvgl/lvgl.git

然后git开始下载
在这里插入图片描述
下载完成后查看git状态

这里有两个关键变化：

.gitmodules 文件：这是一个新创建的配置文件，它记录了你的项目包含了哪些子模块，以及它们的 URL 和本地路径。

[submodule "lvgl"]path = lvglurl = https://github.com/lvgl/lvgl.git

lvgl 目录：这是 lvgl 仓库被克隆下来的地方。它看起来像一个普通目录，但它实际上是一个独立的 Git 仓库。
现在，提交这次变更：

git commit -m "feat: Add lvgl as a submodule"

3.2 直接从其他地方复制LVGL源码到工程目录

4. 创建工程文件

4.1 lv_conf.h文件

从LVGL源码里复制lv_conf_template.h 为lv_conf.hmkdir src
cd src
copy …/lvgl/lv_conf_template.h ./lv_conf.h

使能整个文件
在这里插入图片描述

4.2 应用程序文件

创建 lvgl_ui.c: 为了兼容ubuntu和imx6ull两个平台，这里使用了宏定义来区分。

#include "lv_conf.h"
#include "lvgl.h"
#if LV_USE_SDL
#include "src/drivers/sdl/lv_sdl_window.h"
#endif
#if LV_USE_LINUX_FBDEV
#include "src/drivers/display/fb/lv_linux_fbdev.h"
#endif
#include <stdio.h>
#include <unistd.h>#ifndef FRAMEBUF_DEV_PATH
#define FRAMEBUF_DEV_PATH  "/dev/fb0"
#endiflv_display_t * disp;int main(void)
{// 1. 初始化 LVGLlv_init();
#if LV_USE_SDL// 2. 初始化 SDL 显示驱动disp = lv_sdl_window_create(800, 480);  // 设置窗口大小
#endif
#if LV_USE_LINUX_FBDEV// 2. 初始化 LVGL 显示驱动lv_linux_fbdev_set_file(disp, FRAMEBUF_DEV_PATH);
#endif// 3. 创建测试对象lv_obj_t * label = lv_label_create(lv_scr_act());char buf[100] = {0};sprintf(buf, "Hello, Ubuntu & LVGL(%s: V%d.%d.%d)!", LVGL_VERSION_INFO, LVGL_VERSION_MAJOR, LVGL_VERSION_MINOR, LVGL_VERSION_PATCH);lv_label_set_text(label, buf);lv_obj_center(label);// 4. 主循环while(1) {lv_timer_handler();usleep(5000);}return 0;
}

4.3 创建CMakeList.txt 和 build文件夹

4.3.1 Ubuntu 上运行LVGL的必要设置

在 Ubuntu 上运行 LVGL 应用时，使用 SDL (Simple DirectMedia Layer) 作为显示驱动是一个非常棒的选择，尤其是在开发和调试阶段。SDL 允许 LVGL 在一个桌面窗口中渲染，而不需要配置物理帧缓冲设备（/dev/fb0），这大大简化了开发流程。

安装 SDL 及其开发库

#1. 更新包管理器的列表 
sudo apt update# 2. 安装 SDL2 开发库 
sudo apt install -y libsdl2-dev

启用 SDL 驱动
可以在CMakeList里设置，也可以在代码里设置

#define LV_USE_SDL 1

Ubuntu 的 CMakeList.txt

# run below command to build project for Ubuntu
# cmake -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ ..# CMake 最低版本要求
cmake_minimum_required(VERSION 3.15)# 定义项目名称和版本
project(MyLVGLProject VERSION 1.0.0 LANGUAGES C CXX)# 设置 C 标准
set(CMAKE_C_STANDARD 99)# --- 编译选项 ---
# 添加Ubuntu所需的编译选项
set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -Wall -Wextra -O2")# --- 包含目录 ---
# 包含 LVGL 头文件
include_directories(${PROJECT_SOURCE_DIR}/lvgl)
include_directories(${PROJECT_SOURCE_DIR}/src)
# 添加SDL2头文件目录
find_package(PkgConfig REQUIRED)
pkg_check_modules(SDL2 REQUIRED sdl2)
include_directories(${SDL2_INCLUDE_DIRS})# --- 源文件定义 ---# 1. LVGL 源文件
file(GLOB_RECURSE LVGL_SOURCES "lvgl/src/*.c")# 2. LVGL 驱动源文件
file(GLOB_RECURSE DRIVERS_SOURCES "lv_drivers/src/*.c")# 3. 应用程序源文件
file(GLOB APP_SOURCES "src/*.c")# --- 可执行文件 ---add_executable(my_app_ubuntu${LVGL_SOURCES}${DRIVERS_SOURCES}${APP_SOURCES}
)# --- 链接库和依赖 ---
# 添加Ubuntu系统所需的库
target_link_libraries(my_app_ubuntu${SDL2_LIBRARIES}pthreadrtmdl
)# --- LVGL配置 ---
target_compile_definitions(my_app_ubuntu PRIVATELV_CONF_INCLUDE_SIMPLE# 添加SDL驱动支持LV_USE_SDL=1LV_USE_LINUX_FBDEV=0# 设置显示分辨率LV_HOR_RES_MAX=800LV_VER_RES_MAX=480# 设置颜色深度LV_COLOR_DEPTH=16
)# --- Ubuntu特定配置 ---
if(UNIX AND NOT APPLE)# 针对Linux/Unix系统的配置target_compile_definitions(my_app_ubuntu PRIVATEUSE_SDL=1MY_DISP_FLUSH_LINUX)
endif()# --- 打印信息 ---
message(STATUS "CMAKE_SYSTEM_NAME: ${CMAKE_SYSTEM_NAME}")
message(STATUS "CMAKE_C_COMPILER: ${CMAKE_C_COMPILER}")
message(STATUS "CMAKE_SYSTEM_PROCESSOR: ${CMAKE_SYSTEM_PROCESSOR}")
message(STATUS "CMAKE_C_FLAGS: ${CMAKE_C_FLAGS}")
message(STATUS "SDL2_INCLUDE_DIRS: ${SDL2_INCLUDE_DIRS}")
message(STATUS "SDL2_LIBRARIES: ${SDL2_LIBRARIES}")

4.3.2 Imx6 上运行LVGL的必要设置

启用 framebuffer device 驱动
可以在CMakeList里设置，也可以在代码里设置

#define LV_USE_LINUX_FBDEV 1

屏幕尺寸被代码里固定了，可以通过修改源代码来修改尺寸

lvgl/src/drivers/display/fb/lv_linux_fbdev.c： lv_linux_fbdev_create

imx6 的 CMakeList.txt

# before run cmake .., cross-compile environment should be set
# e.g.
#"source /opt/fsl-imx-x11/4.1.15-2.1.0/environment-setup-cortexa7hf-neon-poky-linux-gnueabi"# CMake 最低版本要求
cmake_minimum_required(VERSION 3.15)# 定义项目名称和版本
project(MyLVGLProject VERSION 1.0.0 LANGUAGES C CXX)# 设置 C 标准
set(CMAKE_C_STANDARD 99)# --- 编译选项 ---
# 如果你的平台需要特殊的编译器标志，可以在这里添加
# 例如，为 ARM 交叉编译添加:
# set(CMAKE_C_FLAGS "${CMAKE_C_FLAGS} -march=armv7-a -mfloat-abi=hard")# --- 包含目录 ---
# 包含 LVGL 头文件
include_directories(${PROJECT_SOURCE_DIR}/lvgl)
include_directories(${PROJECT_SOURCE_DIR}/src)# --- 源文件定义 ---# 1. LVGL 源文件
# 使用 GLOB_RECURSE 递归查找所有 .c 文件
file(GLOB_RECURSE LVGL_SOURCES "lvgl/src/*.c")# 打印找到的文件列表，用于调试和验证
message(STATUS "Found sources in A and its subdirectories:")
foreach(source ${LVGL_SOURCES})message(STATUS "  - ${source}")
endforeach()# 2. LVGL 驱动源文件
# file(GLOB_RECURSE DRIVERS_SOURCES "lv_drivers/src/*.c")# 3. 应用程序源文件
file(GLOB APP_SOURCES "src/*.c")# --- 可执行文件 ---# add_executable 定义最终要生成的可执行文件
# 它将所有源文件链接在一起
add_executable(my_app_imx6${LVGL_SOURCES}${DRIVERS_SOURCES}${APP_SOURCES}
)# --- 链接库和依赖 ---# 如果你的应用程序需要链接其他库（如 pthread, rt 等），在这里添加
# 例如，如果需要实时时钟支持：
target_link_libraries(my_app_imx6 pthread rt)# --- (可选但推荐) 手动定义 LV_CONF_INCLUDE_SIMPLE ---
# 虽然根据 LVGL 的逻辑，如果路径正确，它会自动定义。
# 但在 CMake 中显式地定义它，可以增强构建系统的明确性和可预测性。
# 它覆盖了 LVGL 的自动检测，强制使用简单包含模式。
# 这是一种防御性编程，确保即使 LVGL 的自动检测在某些边缘情况下失败，我们的构建依然稳定。
target_compile_definitions(my_app_imx6 PRIVATELV_CONF_INCLUDE_SIMPLE# 添加SDL驱动支持LV_USE_SDL=0LV_USE_LINUX_FBDEV=1
)# --- 特定平台配置 ---# 这是一个示例，展示如何为不同平台进行配置
# 你可以根据你的实际需求修改这部分
if(UNIX AND NOT APPLE)# 针对 Linux/Unix 系统的配置# 假设你的显示刷新函数在 src/my_disp_flush.c 中# 并且你定义了一个宏来启用它target_compile_definitions(my_app_imx6 PRIVATE MY_DISP_FLUSH_LINUX)# 假设你使用了特定的库，如 libinput# find_package(PkgConfig REQUIRED)# pkg_check_modules(LIBINPUT REQUIRED libinput)# target_link_libraries(my_app_imx6 ${LIBINPUT_LIBRARIES})# target_include_directories(my_app_imx6 PRIVATE ${LIBINPUT_INCLUDE_DIRS})
endif()# if(DEFINED ENV{CMAKE_TOOLCHAIN_FILE})
#     # 如果定义了交叉编译工具链文件，则应用它
#     include($ENV{CMAKE_TOOLCHAIN_FILE})
# endif()# --- 打印信息 (可选，用于调试) ---
message(STATUS "CMAKE_SYSTEM_NAME: ${CMAKE_SYSTEM_NAME}")
message(STATUS "CMAKE_C_COMPILER: ${CMAKE_C_COMPILER}")
message(STATUS "CMAKE_SYSTEM_PROCESSOR: ${CMAKE_SYSTEM_PROCESSOR}")
message(STATUS "CMAKE_C_FLAGS: ${CMAKE_C_FLAGS}")

最终文件结构：
my_lvgl_project/
├── CMakeLists.txt # 根 CMake 配置文件
├── CMakeLists.txt-imx6ull # imx6ull的 CMake 配置文件
├── CMakeLists.txt-ubuntu #ubuntu 的 CMake 配置文件
├── lvgl/ # LVGL 源码目录 (可以是子模块或直接下载)
├── src/ # 你的应用程序源码目录
│ ├── lvgl_conf.h
│ ├── lvgl_ui.c
└── build/ # 构建目录 (将在外部创建)

5. 编译

5.1 编译Ubuntu的应用

5.1.1 指定gcc作为编译工具

cd build
cmake -DCMAKE_C_COMPILER=gcc -DCMAKE_CXX_COMPILER=g++ ..
make -j4

在这里插入图片描述

5.1.2. 编译完成后，运行

在这里插入图片描述

5.2 编译imx6ull的应用

5.2.1 source交叉编译工具

source /opt/fsl-imx-x11/4.1.15-2.1.0/environment-setup-cortexa7hf-neon-
poky-linux-gnueabi

5.2.2 验证交叉编译工具是否正确

echo $CC
echo $CXX

在这里插入图片描述

5.2.3 cmake imx工程

在这里插入图片描述

5.2.4 编译（待验证）

在这里插入图片描述