ESP32图传教程 esp32做图传_虚拟文件系统

      LVGL开发中经常用到图片显示,LVGL官方有提供PNG,GIF,JPG等解码库,配合LVGL的虚拟文件系统可以实现控件直接加载调用解码库解码并显示,非常的方便。

        此篇文章就介绍如何移植LVGL官方的BMP解码库,通过LVGL的虚拟文件系统从SD卡加载BMP文件解码显示。

本文开发环境:
Visual Studio Code V1.58.2

LVGL版本 V7.10.0

芯片平台:ESP32

IDF库版本:4.3.0

IDF TOOLS编译工具链版本:2.9

本文软件基于LVGL官方提供的ESP32工程lv_port_esp32修改而来

LVGL ESP32官方地址:https://github.com/lvgl/lv_port_esp32

开发板平台:HelloBug ESP32开发板

注意:在开始之前请确认上述开发环境,并确认你的源码必须已经移植并对接了LVGL的虚拟文件系统。没有实现的朋友参考我的另一篇文章:ESP32开发学习 LVGL Littlevgl 使用文件系统

一、BMP解码库移植

第一步就是先下载lvgl官方的BMP解码库

git地址:https://github.com/lvgl/lv_lib_bmp

ESP32图传教程 esp32做图传_ESP32图传教程_02

 下载完成后,解压到你的工程目录components中文件夹中,文件结构如下图

ESP32图传教程 esp32做图传_虚拟文件系统_03

二、配置LVGL支持BMP

下载好的解码库中是没有CMakeLists.txt这个文件的,我们的工程是没办法调用这个库的,我们在lv_lib_bmp文件夹中创建一个,内容如下

ESP32图传教程 esp32做图传_ESP32图传教程_04

 接着修改main文件夹中的CMakeLists.txt,idf_component_register中添加注册bm[解码组件,结果如下图:

ESP32图传教程 esp32做图传_ESP32图传教程_05

至此,BMP解码库就移植成功了,接下来就是调用并显示了。 

三、初始化BM[解码库显示BMP文件

在main.c文件中添加引用bmp解码头文件

ESP32图传教程 esp32做图传_虚拟文件系统_06

 在main.c文件中,初始化lvgl之后添加文件系统初始化和BMP解码库初始化(文件系统参考文章开始的注意事项中的另篇文章)

ESP32图传教程 esp32做图传_文件系统_07

  注意:在SD卡中创建一个image的文件夹,下载一个16位深度的BMP图片文件放进去,尽量小一点,解码很耗内存,大图可能会申请内存失败!无法显示

在main.c文件中,初始化lvgl之后,再添加一个img控件并加载SD卡中的BMP文件

ESP32图传教程 esp32做图传_虚拟文件系统_08

 编译下载看效果:

ESP32图传教程 esp32做图传_虚拟文件系统