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

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

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

本文开发环境：
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开发板

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

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

一、PNG解码库移植

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

git地址：https://github.com/lvgl/lv_lib_png

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

二、配置LVGL支持PNG

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

 接着修改lvgl的配置文件，让lvgl支持PNG组件，打开lvgl源码中的lv_conf.h，在文件最后添加一行：

#define LV_PNG_USE_LV_FILESYSTEM 1

结果如下图：

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

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

三、初始化PNG解码库显示PNG文件

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

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

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

在main.c文件中，初始化lvgl之后添加一个按钮，再添加一个img控件并加载SD卡中的PNG文件，这里的按钮只是为了体现透明png的效果，可以透过png透明部分看到下面的按钮控件

下载代码到开发板看看效果（手机相机不太好，凑合看吧^_^）,可以看到一个风车图片在按钮上，透过透明部分可以看到下面的按钮，触摸屏现在也可以单击下面的按钮。