ESP32开发学习 LVGL Littlevgl 使用文件系统加载BMP图片解码显示

Love The Way You Lie 2022-09-03 13:12 643阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

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][https_github.com_lvgl_lv_port_esp32]

开发板平台：HelloBug ESP32开发板

开发板购买链接：[https://hellobug.taobao.com/][https_hellobug.taobao.com]

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

# 一、BMP解码库移植 #

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

git地址：[https://github.com/lvgl/lv\_lib\_bmp][https_github.com_lvgl_lv_lib_bmp]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2][]

# 二、配置LVGL支持BMP #

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4][]

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6][]

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7][]

编译下载看效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70]: /images/20220829/248b39f3ece84062af0af313020efec1.png
[https_github.com_lvgl_lv_port_esp32]: https://github.com/lvgl/lv_port_esp32
[https_hellobug.taobao.com]: https://hellobug.taobao.com/
[ESP32_ LVGL Littlevgl]: https://blog.csdn.net/cnicfhnui/article/details/118972851
[https_github.com_lvgl_lv_lib_bmp]: https://github.com/lvgl/lv_lib_bmp
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 1]: /images/20220829/797eba4d9e674905a6fb4c3b8df70804.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 2]: /images/20220829/09466b97ed4c4b0f8c38ad2a6a1dd558.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 3]: /images/20220829/d4780f7594344fa0b1f02eff8795b597.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 4]: /images/20220829/7e93688b3b8f4104b6f1158c0e4b96ea.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 5]: /images/20220829/852a7d66e4ba4b4faba41341a574ca2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 6]: /images/20220829/8dcfe2b6bd66423e934dec84afb43a8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NuaWNmaG51aQ_size_16_color_FFFFFF_t_70 7]: /images/20220829/07650344b2b446179492c894af4b9fb0.png