使用 ESP32S3、ILI9341 显示芯片和 SD 卡构建了 Gif 视频播放器

ESP32-S3 触摸式 GIF 播放器：从 SD 卡实现流畅播放

使用 ESP32-S3 和 ILI9341 触摸显示屏构建一个口感细腻的 GIF 播放器!此项目可直接从 SD 卡读取 GIF 图片，并具有功能完备的触摸式用户界面。

故事

我想要开发一个独立的 GIF 播放器，它不仅能够缓慢地逐帧显示，还能像一部 30 帧每秒的电影那样流畅地播放 GIF 动图。为了实现这一目标，我使用了 ESP32-S3 开发板。流畅运行的关键在于 S3 的 8MB 专用静态随机存取存储器(PSRAM)。

该玩家直接从 SD 卡读取 GIF 文件，并将 PSRAM 用作临时缓冲区，以便在将帧推送到显示屏之前对其进行预处理。

该项目还配备了全触控式用户界面!您可以通过点击屏幕的边缘来切换不同的 GIF 动图，或者点击屏幕中央以打开 GIF 选择菜单，在那里您可以选择特定的文件或者切换“自动播放”模式。

本项目所用物品/材料

硬件组件：

•ESP32-S3 开发板：必须配备 16MB 闪存和 8MB 电可擦除只读存储器。

•ILI9341 触摸显示屏：内置 SD 卡读卡器。

•微型 SD 卡：已格式化为 FAT32 格式。

•面包板与跳线线束

软件应用程序和在线服务：

•Arduino 开发环境(本指南中所使用的版本为 2.3.8)

步骤 1：连接硬件线路

这是至关重要的一步。TFT 显示屏驱动程序和触摸屏驱动程序共用相同的 SPI 引脚(除了 CS 引脚之外)。然而，嵌入式 SD 卡读取器则使用不同的 SPI 引脚和不同的 SPI 端口。

注意：请务必仔细参照所提供的接线图，以确保显示屏、触摸板和 SD 卡模块正确连接到您所使用的特定 ESP32-S3 板上的相应引脚。

步骤 2：安装 Arduino 开发环境

如果您尚未安装 Arduino 开发环境，请下载最新版本(推荐使用 v2.3.8 版)。

因为 Arduino IDE 默认并不具备对 ESP32 的支持功能，所以您需要进行额外设置来添加该支持：

点击“文件”菜单，选择“偏好设置”。

点击“文件”菜单，选择“偏好设置”。

将 Espressif 板子管理器的网址粘贴到“附加板子管理器网址”字段中。

前往“板子管理器”(在左侧菜单中)，搜索“ESP32”，然后进行安装。(本项目使用的是 3.3.7 版本)

第 3 步：安装和配置库

您需要通过 Arduino 库管理器或 GitHub 安装两个第三方库：

TFT_eSPI：负责处理显示屏和触摸输入。 (2.5.43)

AnimatedGIF：负责 GIF 图像的解码工作。(2.2.0 版)

为 ILI9341 配置 TFT_eSPI：此库需要手动进行配置，以与您的硬件相匹配。

前往您电脑上的 Arduino 库文件夹(通常位于“文档/Arduino/库/TFT_eSPI”路径下)。

打开“User_Setup_Select.h”文件(使用 VS Code 或记事本)。

请确保您的安装文件中的“User_Setup.h”行未被注释掉，然后保存并关闭。

接下来，打开“User_Setup.h”文件，并将 SPI 引脚重新定义为与您的接线图完全一致的设置。保存并关闭文件。

第 4 步：校准触摸显示屏

为确保触摸界面的响应准确无误，您必须对屏幕进行校准。

•从 TFT_eSPI 库中打开 touch_calibrate 示例代码。

•从“工具”菜单中选择您的 ESP32-S3 开发板。

•将草图上传到你的板子上。

•打开串行监视器，并将波特率设置为 115200。

•按照屏幕上的提示操作，然后点击显示屏的四个角。

•串行监视器会输出您具体的校准值。请复制这些行内容，因为您需要将它们粘贴到主 GIF 播放器脚本中。

第 5 步：上传主脚本

•在 Arduino 调试环境中打开主 GIF 播放器脚本。

•关键工具配置：在“工具”菜单中，请确保已启用 PSRAM 功能。这将为主板提供缓冲 GIF 帧所需的内存。

•将您的触摸校准值粘贴到脚本指定区域。

•点击“上传”按钮。

(故障排除：如果上传后出现白色屏幕，请再次检查您的 User_Setup.h 引脚配置、集成开发环境中的工具设置以及实际的线路连接情况。)

第 6 步：准备 SD 卡

•将您的 MicroSD 卡格式化为 FAT32 格式。

•请确保您的 GIF 图片尺寸设置正确。未经裁剪时的显示尺寸限制为 320x240。

•将所有的 .gif 文件直接放入 SD 卡的根文件夹中。

•将 SD 卡插入显示器内置的读卡器中。

•按下您的 ESP32 设备上的复位按钮。

如何使用用户界面

您的 GIF 播放器已准备就绪!请使用触摸面板来控制它：

•点击左键：返回上一张 GIF 图片。

•点击右侧：进入下一个 GIF 图片。

•点击中心：打开 GIF 选择器主菜单。

•主菜单：在此处，您可以选择特定的文件，并通过切换按钮在自动播放模式和单个 GIF 模式之间进行切换。

本文编译自hackster.io