在透明OLED显示器上播放GIF动画
## 在透明OLED显示器上播放GIF动画大家好，很高兴回到这里！这是一个简短且适合初学者的教程，作为将来的一个有趣项目的基础！
几个月前，(https://www.dfrobot.com/)给我寄来了这个(https://www.dfrobot.com/product-2521.html)，它就是这个教程的主角。通过本教程，我们将学会在显示模块上播放一些GIF动画。
在此过程中，我将讨论一些理论知识以及通过Arduino Uno在OLED上播放GIF动画所涉及的所有步骤。在开始之前，请先观看[短视频](https://www.bilibili.com/video/BV1bH4y1o7Yc/)以了解整个过程的要点，让我们开始吧！
https://www.bilibili.com/video/BV1bH4y1o7Yc/
## 所需零配件
以下是需要用到的零配件清单：
- (https://www.dfrobot.com/)出品的(https://www.dfrobot.com/product-2521.htm)
- Arduino Uno 及其配套的 USB 电缆
- 一块面包板和若干跳线
- 焊接设备（烙铁/焊接台、焊丝、一些助焊剂、排烟器）
**注意：**如果你想要一些防止焊锡烟雾的保护，你可以看看我之前关于[制作3D打印排烟器](https://www.instructables.com/DIY-3D-Printed-Fume-Extractor-With-USB-Light/)的一个教程。
在软件方面，需要用到：
- 您最喜欢的GIF动画
- Arduino IDE
- (https://github.com/olikraus/u8g2) 库
- 网络连接
万事具备！我们开始动手吧！
## 第 1 步：将显示器连接到Arduino
首先，让我们将Arduino Uno连接到显示器，显示器有2个主要组成部分：连着带状电缆的实际透明显示器和带有焊点的模块。该模块充当显示器和Arduino之间的桥梁。它使用 **SPI 接口**与 Arduino 通信，然后使用 GDI 接口相应地亮显示器的透明像素。
首先让我们将焊点焊接到我们的接口模块并按如下所示进行连接：
**电源连接：**
- 显示模块 VCC ---> Arduino 3.3V 引脚
- 显示模块 GND---> Arduino GND 引脚
**SPI 接口：**
- 显示模块 MOSI ---> Arduino 引脚 11
- 显示模块 SCLK ---> Arduino 引脚 13
- 显示模块 CS 引脚 ---> Arduino 引脚 10
**显示命令和重置：**
- 显示模块 DC 引脚 ---> Arduino 引脚 7
- 显示模块 RST 引脚 ---> Arduino 引脚 6
完成此操作后，您可以将显示器带状电缆的悬空端连接到模块上的连接器。非常小心轻轻地拉出并翻转连接器的黑色锁扣（最好是用镊子操作）。然后将电缆推入并以类似的方式锁紧。
## 第 2 步：软件和一些理论
现在让我们转到软件部分。如果您想跳过理论并直接体验GIF播放，可以在安装 U8g2 库后上传附件中的代码。
现在。。。解释和详细过程
GIF 代表图形交换格式（**G**raphics **I**nterchange **F**ormat），它是一种位图图像格式，可用于静态和动画图像。这些类型的图像具有有限的调色板（256 种颜色），但非常常用，因为它们能够存储动画图像。GIF 中的每个像素都用一个 8 位数值表示，该数值引用调色板中的 256 种颜色之一。对于动画图像，动画的所有帧都按顺序存储和播放。这正是我们须要做的！
**U8g2 库：**
对于软件方面，我们将使用U8g2lib库，这是一个用于嵌入式设备的图形库，可用于单色（单色）OLED和LCD。该库带有内置功能，用于绘制常见的图形，如线条、圆形、框等以及具有不同字体的文本。因此，接下来通过Arduino IDE的库管理器（工具->管理库...）搜索U8g2并单击安装，完成安装该库。我们将使用库函数 **drawXBMP()** 来绘制位图。为此，我们需要将位图转换为字符数组，该数组将与图像左上角的位置、宽度和高度一起传递给库函数。
**使用 image2cpp 将图像转换为字节数组：**
对于所需的转换，我们将使用 (https://github.com/javl/image2cpp) 项目。这是一个开源项目，可将图像转换为适合单色OLED显示器的字节数组。**在此项目中使用该库时，我发现字节数组输出并未在显示器上正确呈现。图像的像素有明显的变化，这是由于image2cpp最初根据Adafruit的GLX库转换图像（每个字节的左侧为MSB）。但是，在这个项目中，我们使用 U8g2 库（它适用于每个字节左侧是 LSB 的位图格式），因此您可以使用 image1cpp 这个库分叉的 (https://github.com/plewka/image2cpp/tree/patch-1)。**
要使用 image2cpp 将 GIF 的帧转换为字节数组，您可以按照以下步骤操作：
- 提取 GIF 的所有帧。您可以使用类似 (https://ezgif.com/split) 的网站将 GIF 拆分为单独的帧。在这里，请确保使用较简单的GIF，因为我们要用(https://www.arduino.cc/reference/en/language/variables/utilities/progmem/)将所有图像的字节数组存储在Arduino的程序（闪存）内存中。
- 克隆链接分叉的 patch-1 分支或下载源代码压缩包。
- 在浏览器中打开 index.html。
- 打开后，您应该会看到网站界面。您会在顶部看到一个**选择图像**选项，您可以在此上传 GIF 的所有帧。
- 根据您的需要配置设置。您可以在所附图像中看到我使用的设置。继续对照预览以验证所有设置的结果。
- 对预览感到满意后，单击**生成代码**按钮。确保代码输出格式设置为**Arduino Code**，并为所有字符数组的名称输入适当的前缀。
- 生成所有字节数组后，您可以复制所有数组并将它们粘贴到 Arduino 程序中。确保根据您使用的前缀更新所需的变量名称。
现在你可以接着将程序上传到你的Arduino，它将在 **void loop()** 函数中按顺序显示所有帧。可以调整loop 函数中的 **delay()** 数值来改变 GIF 的播放速度 (FPS)。
附件：Arduino完整程序
>英文链接：(https://www.instructables.com/Playing-GIFs-on-Transparent-OLED-Display-Module/)
>英文作者：(https://www.instructables.com/member/Jasmeeet+Singh/) (https://youtube.com/@processingh)
>中文翻译：(https://mc.dfrobot.com.cn/home.php?mod=space&uid=835443&do=profile)
页:
[1]