查看: 75584|回复: 0

[入门] 在透明OLED显示器上播放GIF动画

[复制链接]

在透明OLED显示器上播放GIF动画

大家好，很高兴回到这里！这是一个简短且适合初学者的教程，作为将来的一个有趣项目的基础！

几个月前，DFRobot给我寄来了这个Fermion 1.51英寸透明OLED显示器，它就是这个教程的主角。通过本教程，我们将学会在显示模块上播放一些GIF动画。

在此过程中，我将讨论一些理论知识以及通过Arduino Uno在OLED上播放GIF动画所涉及的所有步骤。在开始之前，请先观看短视频以了解整个过程的要点，让我们开始吧！

所需零配件

以下是需要用到的零配件清单：

DFRobot出品的Fermion 1.51英寸透明OLED显示屏
Arduino Uno 及其配套的 USB 电缆
一块面包板和若干跳线
焊接设备（烙铁/焊接台、焊丝、一些助焊剂、排烟器）

注意：如果你想要一些防止焊锡烟雾的保护，你可以看看我之前关于制作3D打印排烟器的一个教程。

在软件方面，需要用到：

您最喜欢的GIF动画
Arduino IDE
U8g2lib 库
网络连接

万事具备！我们开始动手吧！

第 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 代表图形交换格式（Graphics Interchange Format），它是一种位图图像格式，可用于静态和动画图像。这些类型的图像具有有限的调色板（256 种颜色），但非常常用，因为它们能够存储动画图像。GIF 中的每个像素都用一个 8 位数值表示，该数值引用调色板中的 256 种颜色之一。对于动画图像，动画的所有帧都按顺序存储和播放。这正是我们须要做的！

U8g2 库：
对于软件方面，我们将使用U8g2lib库，这是一个用于嵌入式设备的图形库，可用于单色（单色）OLED和LCD。该库带有内置功能，用于绘制常见的图形，如线条、圆形、框等以及具有不同字体的文本。因此，接下来通过Arduino IDE的库管理器（工具->管理库...）搜索U8g2并单击安装，完成安装该库。我们将使用库函数 drawXBMP() 来绘制位图。为此，我们需要将位图转换为字符数组，该数组将与图像左上角的位置、宽度和高度一起传递给库函数。

使用 image2cpp 将图像转换为字节数组：
对于所需的转换，我们将使用 image2cpp 项目。这是一个开源项目，可将图像转换为适合单色OLED显示器的字节数组。在此项目中使用该库时，我发现字节数组输出并未在显示器上正确呈现。图像的像素有明显的变化，这是由于image2cpp最初根据Adafruit的GLX库转换图像（每个字节的左侧为MSB）。但是，在这个项目中，我们使用 U8g2 库（它适用于每个字节左侧是 LSB 的位图格式），因此您可以使用 image1cpp 这个库分叉的 patch-1 分支。

要使用 image2cpp 将 GIF 的帧转换为字节数组，您可以按照以下步骤操作：

提取 GIF 的所有帧。您可以使用类似 ezgif 的网站将 GIF 拆分为单独的帧。在这里，请确保使用较简单的GIF，因为我们要用PROGMEM将所有图像的字节数组存储在Arduino的程序（闪存）内存中。
克隆链接分叉的 patch-1 分支或下载源代码压缩包。
在浏览器中打开 index.html。
打开后，您应该会看到网站界面。您会在顶部看到一个选择图像选项，您可以在此上传 GIF 的所有帧。
根据您的需要配置设置。您可以在所附图像中看到我使用的设置。继续对照预览以验证所有设置的结果。
对预览感到满意后，单击生成代码按钮。确保代码输出格式设置为Arduino Code，并为所有字符数组的名称输入适当的前缀。
生成所有字节数组后，您可以复制所有数组并将它们粘贴到 Arduino 程序中。确保根据您使用的前缀更新所需的变量名称。