2023-10-12 23:20:32 [显示全部楼层]
73914浏览
查看: 73914|回复: 0

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

[复制链接]

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

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

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

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





所需零配件

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

注意:如果你想要一些防止焊锡烟雾的保护,你可以看看我之前关于制作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 程序中。确保根据您使用的前缀更新所需的变量名称。

现在你可以接着将程序上传到你的Arduino,它将在 void loop() 函数中按顺序显示所有帧。可以调整loop 函数中的 delay() 数值来改变 GIF 的播放速度 (FPS)。



附件:Arduino完整程序

英文链接:Playing GIFs on Transparent OLED Display Module
英文作者:Jasmeeet Singh YouTube
中文翻译:fibx







您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

为本项目制作心愿单
购买心愿单
心愿单 编辑
[[wsData.name]]

硬件清单

  • [[d.name]]
btnicon
我也要做!
点击进入购买页面
上海智位机器人股份有限公司 沪ICP备09038501号-4

© 2013-2024 Comsenz Inc. Powered by Discuz! X3.4 Licensed

mail