LVGL JPEG 解码说明¶
目录¶
概述¶
本文档描述了在 LVGL 应用中，如何使用内置 C 文件方式加载和显示 JPEG 图片。该方案将 JPEG 图片编译为 C 文件，通过 LVGL 的 JPEG 解码器进行解码显示。
| 项目 | 说明 |
|---|---|
| 支持格式 | JPG / JPEG 格式图片 |
| 实现方式 | 编译时将 JPEG 转换为 C 文件，运行时解码显示 |
| 适用场景 | 需要显示高质量背景图或静态图片的 LVGL 应用 |
快速入门¶
使用步骤¶
- 放置图片：将你的 JPEG 文件放入
resource/image/目录，如文件名xiaozhi_background.jpeg - 编译项目：CMake 自动将 JPEG 转换为 C 文件
- 代码调用：在代码中声明并使用图片变量xiaozhi_background
// 声明外部图片变量（变量名与文件名对应）
extern const lv_image_dsc_t your_image_name;
// 创建图片控件并设置图片源
lv_obj_t *img = lv_image_create(scr);
lv_image_set_src(img, &your_image_name);
编译命令¶
.\build.bat YM310_W09C.A60 xiaozhi_v2_lcd
实现原理¶
工作流程¶
┌─────────────────────────────────────────────────────────────┐
│ 编译阶段
├─────────────────────────────────────────────────────────────┤
JPEG 文件 ──→ LVGLImage.py ──→ C 文件 (RAW 格式)
└─────────────────────────────────────────────────────────────┘
↓
┌─────────────────────────────────────────────────────────────┐
运行阶段
├─────────────────────────────────────────────────────────────┤
lv_init() → 初始化 LVGL
↓
lv_yopen_jpeg_init() → 注册 JPEG 解码器
↓
lv_image_set_src() → 设置图片源
↓
JPEG 解码器自动解码 → 显示图片
└─────────────────────────────────────────────────────────────┘
技术要点¶
- 编译时转换：使用 LVGL 官方工具
LVGLImage.py将 JPEG 转换为 C 文件 - RAW 格式保留：保持原始 JPEG 数据不变，由运行时解码器处理
- 按需解码：LVGL 在显示时自动调用 JPEG 解码器进行解码
详细实现¶
代码实现¶
1. JPEG 解码器初始化¶
在 _ui_task 函数中，lv_init() 之后添加解码器初始化：
/* LVGL 初始化 */
lv_init();
/* 初始化 JPEG 解码器 */
extern void lv_yopen_jpeg_init(void);
lv_yopen_jpeg_init();
yopen_trace("ui: jpeg decoder initialized");
文件位置：xiaozhi_ui.c
2. 背景图显示¶
在 UI 初始化中创建图片控件并显示背景图：
// 创建背景图控件
lv_obj_t *background = lv_image_create(scr);
lv_image_set_src(background, &xiaozhi_background);
lv_obj_set_width(background, DISP_HOR_RES);
lv_obj_set_height(background, DISP_VER_RES);
lv_obj_set_pos(background, 0, 0);
文件位置：xiaozhi_ui.c
编译配置¶
通过 CMake 自动将 JPEG 文件转换为 C 文件，在 CMakeLists.txt 中添加：
# 查找 image 目录下的所有 JPEG 文件
file(GLOB JPEG_FILES "${CURRENT_CMAKE_DIR}/resource/image/*.jpeg" "${CURRENT_CMAKE_DIR}/resource/image/*.jpg")
foreach(JPEG_FILE ${JPEG_FILES})
get_filename_component(JPEG_NAME ${JPEG_FILE} NAME_WE)
set(OUTPUT_C_FILE "${PROJECT_BINARY_DIR}/${JPEG_NAME}.c")
set(LVGL_IMAGE_TOOL ${YOPEN_TOP_DIR}/components/lvgl-9.4.0/scripts/LVGLImage.py)
# 使用 RAW 格式保留原始 JPEG 数据
add_custom_command(
OUTPUT ${OUTPUT_C_FILE}
COMMAND python ${LVGL_IMAGE_TOOL} --cf RAW --ofmt C -o ${PROJECT_BINARY_DIR} --name ${JPEG_NAME} ${JPEG_FILE}
MAIN_DEPENDENCY ${JPEG_FILE}
COMMENT "Converting JPEG: ${JPEG_FILE}"
)
target_sources(${target} PRIVATE ${OUTPUT_C_FILE})
target_include_directories(${target} PRIVATE ${PROJECT_BINARY_DIR})
endforeach()
文件位置：CMakeLists.txt
参数说明：
| 参数 | 值 | 说明 |
|---|---|---|
--cf |
RAW |
颜色格式，保留原始 JPEG 数据 |
--ofmt |
C |
输出格式为 C 文件 |
--name |
{JPEG_NAME} |
生成的变量名（与文件名对应） |
效果展示¶
预期效果¶
- JPEG 图片正确解码并显示在屏幕上
- 图片颜色正常，无偏色或失真
- 全屏背景显示，覆盖整个屏幕区域
附录¶
文件结构¶
app/xiaozhi/
├── src/
│ └── xiaozhi_ui.c # UI 实现
├── CMakeLists.txt # CMake 配置
└── resource/
└── image/
└── xiaozhi_background.jpeg # JPEG 图片资源
components/lvgl-9.4.0/
├── scripts/
│ └── LVGLImage.py # 图片转换工具
└── src/libs/yopen_jpeg/
├── lv_yopen_jpeg.c # JPEG 解码器实现
└── lv_yopen_jpeg.h # JPEG 解码器接口
依赖模块¶
| 模块 | 路径 | 说明 |
|---|---|---|
| LVGL | components/lvgl-9.4.0 |
图形库核心 |
| yopen_jpeg | components/lvgl-9.4.0/src/libs/yopen_jpeg |
JPEG 解码器 |
| lcd | components/lcd |
LCD 驱动 |