在Linux中创建LVGL应用

在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状态

这里有两个关键变化：

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

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

2. 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"
#endif


lv_display_t * disp;

int main(void)
{
    // 1. 初始化 LVGL
    lv_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}
    pthread
    rt
    m
    dl
)

# --- LVGL配置 ---
target_compile_definitions(my_app_ubuntu PRIVATE
    LV_CONF_INCLUDE_SIMPLE
    # 添加SDL驱动支持
    LV_USE_SDL=1
    LV_USE_LINUX_FBDEV=0
    # 设置显示分辨率
    LV_HOR_RES_MAX=800
    LV_VER_RES_MAX=480
    # 设置颜色深度
    LV_COLOR_DEPTH=16
)

# --- Ubuntu特定配置 ---
if(UNIX AND NOT APPLE)
    # 针对Linux/Unix系统的配置
    target_compile_definitions(my_app_ubuntu PRIVATE
        USE_SDL=1
        MY_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 PRIVATE
    LV_CONF_INCLUDE_SIMPLE
    # 添加SDL驱动支持
    LV_USE_SDL=0
    LV_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 编译（待验证）