Arduino应用开发——LCD显示GIF动图
目录
前言
前面我已经介绍过了如何在Arduino环境下用LCD显示文本、图案和图片,这一讲主要介绍一下GIF动图的显示。
1 硬件介绍
1.1 硬件配置
本文的硬件配置如下:
模块 | 型号 | 说明 |
---|---|---|
LCD | ST7789 | LCD常用的驱动IC有很多,如:ILI9341、ST7735等,不同的驱动IC,驱动代码也是有区别的 注:驱动IC型号和屏幕型号是不同的,不管屏幕的厂家是哪个,屏幕尺寸是多大,只有驱动IC型号一样,驱动代码都是一样的 |
ESP8266 | ESP-12F | 这是安信可的一款模组,内部主要是用乐鑫的ESP8266EX再加上一个片外FLASH组成 |
ESP32 | ESP-WROOM-32 | MCU是乐鑫的一款芯片,开发板型号ESP32 DEVKITV1 |
注:我这里以ESP8266和ESP32为例讲解,实际上根据自己的MCU选择一种即可,方法和原理都是一样的。
1.2 硬件连接
ESP8266接线如下:
esp8266 | lcd | 说明 |
---|---|---|
VCC | VCC | 电源正 |
GND | GND | 电源负 |
GPIO14\HSPI_CLK | CLK | SPI时钟线 |
GPIO13\HSPI_MOSI | SDI | SPI数据线,esp8266输出,lcd输入 |
GPIO12\HSPI_MISO | SDO | SPI数据线,esp8266输入,lcd输出,注:该引脚一般可以不用,除非你要读取LCD的信息 |
GPIO4 | CS | SPI片选 |
GPIO5 | WR(D/C) | 并口时作为写入信号/SPI时作为命令或参数的选择 |
RST | RST | LCD复位引脚,可以用普通IO控制,引脚不足的情况下也可以和esp8266的复位引脚接到一起 |
特别说明:不同厂家做的LCD对这几个引脚的命名可能会有差异,但意思是一样的。
ESP32接线如下:
esp32 | lcd | 说明 |
---|---|---|
VCC | VCC | 电源正 |
GND | GND | 电源负 |
GPIO18\SPI_CLK | CLK | SPI时钟线 |
GPIO23\SPI_MOSI | SDI | SPI数据线,esp32输出,lcd输入 |
GPIO19\SPI_MISO | SDO | SPI数据线,esp32输入,lcd输出,注:该引脚一般可以不用,除非你要读取LCD的信息 |
GPIO15 | CS | SPI片选 |
GPIO5 | WR(D/C) | 并口时作为写入信号/SPI时作为命令或参数的选择 |
GPIO4 | RST | LCD复位引脚,可以用普通IO控制,引脚不足的情况下也可以和esp32的复位引脚接到一起 |
特别说明:不同厂家做的LCD对这几个引脚的命名可能会有差异,但意思是一样的。
2 开发环境搭建
2.1 安装开发板
关于ESP8266和ESP32的Arduino环境搭建我之前出过教程了,这里就不多说了,不懂的同学可以先看下我之前的博客。
esp8266开发入门教程(基于Arduino)——环境安装
ESP32-S2 Arduino开发环境搭建
2.2 安装库
打开Arduino IDE,依次打开 工具 -> 管理库…
在搜索框输入需要安装的库名称,找到对应的库,点击安装即可。
本文需要使用的Arduino库如下:
Arduino库 | 版本 | 说明 |
---|---|---|
TFT_eSPI | 2.4.2 | 该库通过SPI方式驱动LCD,支持多种LCD常用驱动IC |
AnimatedGIF | 1.4.6 | GIF的解码库,用来显示GIF动图 |
3 LCD驱动的使用和测试
关于TFT_eSPI 库的使用我前面已经介绍过几次了,这里就不再讲解了,不懂的同学可以先看下我之前的博客。
esp8266应用教程——TFT LCD
Arduino应用开发——LCD显示图片
4 将GIF动图转成数据
我这里用的转换工具是在GitHub上面找到的一个代码,你们想要的话可以在下面的链接下载。这个工具使用起来稍微有点麻烦,如果你有更好的工具也可以推荐给博主。
工具链接:https://pan.baidu.com/s/1f2rgD1a9PY-_hboPdbfaow
提取码:4h6h
运行方法如下:
提示:下面演示的示例是我之前用来转换图片数据的,转换gif也是一样的。
第一步:把要转换的图片放到这个工具的目录下。
第二步:打开电脑的运行窗口(win10可以使用win+R快捷键),输入“cmd”打开命令窗口。
第三步:在命令窗口中输入跳转命令,跳转到转换工具所在的目录下。
例如:
cd C:\Users\z\Desktop\图片处理工具\image_to_c\dist\Windows
第四步:运行应用程序。
格式:应用程序名+空格+图片名+空格+>+空格+转换后的文件名。
例如:
image_to_c64.exe demo-image1.jpg > demo-image1.h
运行成功的话就会生成相应的头文件。
5 编写应用程序
示例代码如下:
提示:示例里面同时使用了5个GIF demo,内存占用了2兆多,这些数据都是直接存到代码里面的,因此在下载程序时要注意FLASH的配置,保证APP分区的内存足够,否则会编译出错。也可以注释掉一部分素材,单独播放某个GIF,这样内存占用较少。
程序源码和素材可以在文章底部下载。
#include <SPI.h>
#include <TFT_eSPI.h>
#include <AnimatedGIF.h>
// #include "Arduino.h"
// #include <esp_heap_caps.h>
#include "gif_demo1.h"
#include "gif_demo2.h"
#include "gif_demo3.h"
#include "gif_demo4.h"
#include "gif_demo5.h"
#define GIF_DEMO1 gif_demo1
#define GIF_DEMO2 gif_demo2
#define GIF_DEMO3 gif_demo3
#define GIF_DEMO4 gif_demo4
#define GIF_DEMO5 gif_demo5
#ifdef ESP8266
#include <avr/pgmspace.h>
#else
#include <pgmspace.h>
#endif
AnimatedGIF gif;
TFT_eSPI tft = TFT_eSPI();
#define GIF_ENABLE
#define NORMAL_SPEED // Comment out for rame rate for render speed test
#ifdef GIF_ENABLE
// GIFDraw is called by AnimatedGIF library frame to screen
#define DISPLAY_WIDTH tft.width()
#define DISPLAY_HEIGHT tft.height()
#define BUFFER_SIZE 256 // Optimum is >= GIF width or integral division of width
#ifdef USE_DMA
uint16_t usTemp[2][BUFFER_SIZE]; // Global to support DMA use
#else
uint16_t usTemp[1][BUFFER_SIZE]; // Global to support DMA use
#endif
bool dmaBuf = 0;
// Draw a line of image directly on the LCD
void GIFDraw(GIFDRAW *pDraw)
{
uint8_t *s;
uint16_t *d, *usPalette;
int x, y, iWidth, iCount;
// pDraw->iX = 50;
// pDraw->iY = 50;
// Displ;ay bounds chech and cropping
iWidth = pDraw->iWidth;
if (iWidth + pDraw->iX > DISPLAY_WIDTH)
iWidth = DISPLAY_WIDTH - pDraw->iX;
usPalette = pDraw->pPalette;
y = pDraw->iY + pDraw->y; // current line
if (y >= DISPLAY_HEIGHT || pDraw->iX >= DISPLAY_WIDTH || iWidth < 1)
return;
// Old image disposal
s = pDraw->pPixels;
if (pDraw->ucDisposalMethod == 2) // restore to background color
{
for (x = 0; x < iWidth; x++)
{
if (s[x] == pDraw->ucTransparent)
s[x] = pDraw->ucBackground;
}
pDraw->ucHasTransparency = 0;
}
// Apply the new pixels to the main image
if (pDraw->ucHasTransparency) // if transparency used
{
uint8_t *pEnd, c, ucTransparent = pDraw->ucTransparent;
pEnd = s + iWidth;
x = 0;
iCount = 0; // count non-transparent pixels
while (x < iWidth)
{
c = ucTransparent - 1;
d = &usTemp[0][0];
while (c != ucTransparent && s < pEnd && iCount < BUFFER_SIZE )
{
c = *s++;
if (c == ucTransparent) // done, stop
{
s--; // back up to treat it like transparent
}
else // opaque
{
*d++ = usPalette[c];
iCount++;
}
} // while looking for opaque pixels
if (iCount) // any opaque pixels?
{
// DMA would degrtade performance here due to short line segments
tft.setAddrWindow(pDraw->iX + x, y, iCount, 1);
tft.pushPixels(usTemp, iCount);
x += iCount;
iCount = 0;
}
// no, look for a run of transparent pixels
c = ucTransparent;
while (c == ucTransparent && s < pEnd)
{
c = *s++;
if (c == ucTransparent)
x++;
else
s--;
}
}
}
else
{
s = pDraw->pPixels;
// Unroll the first pass to boost DMA performance
// Translate the 8-bit pixels through the RGB565 palette (already byte reversed)
if (iWidth <= BUFFER_SIZE)
for (iCount = 0; iCount < iWidth; iCount++) usTemp[dmaBuf][iCount] = usPalette[*s++];
else
for (iCount = 0; iCount < BUFFER_SIZE; iCount++) usTemp[dmaBuf][iCount] = usPalette[*s++];
#ifdef USE_DMA // 71.6 fps (ST7796 84.5 fps)
tft.dmaWait();
tft.setAddrWindow(pDraw->iX, y, iWidth, 1);
tft.pushPixelsDMA(&usTemp[dmaBuf][0], iCount);
dmaBuf = !dmaBuf;
#else // 57.0 fps
tft.setAddrWindow(pDraw->iX, y, iWidth, 1);
tft.pushPixels(&usTemp[0][0], iCount);
#endif
iWidth -= iCount;
// Loop if pixel buffer smaller than width
while (iWidth > 0)
{
// Translate the 8-bit pixels through the RGB565 palette (already byte reversed)
if (iWidth <= BUFFER_SIZE)
for (iCount = 0; iCount < iWidth; iCount++) usTemp[dmaBuf][iCount] = usPalette[*s++];
else
for (iCount = 0; iCount < BUFFER_SIZE; iCount++) usTemp[dmaBuf][iCount] = usPalette[*s++];
#ifdef USE_DMA
tft.dmaWait();
tft.pushPixelsDMA(&usTemp[dmaBuf][0], iCount);
dmaBuf = !dmaBuf;
#else
tft.pushPixels(&usTemp[0][0], iCount);
#endif
iWidth -= iCount;
}
}
} /* GIFDraw() */
#endif
void setup()
{
Serial.begin(115200);
tft.begin();
tft.setRotation(2);
tft.fillScreen(TFT_BLACK);
gif.begin(BIG_ENDIAN_PIXELS);
}
#ifdef NORMAL_SPEED // Render at rate that is GIF controlled
void loop()
{
#ifdef GIF_DEMO1
if (gif.open((uint8_t *)GIF_DEMO1, sizeof(GIF_DEMO1), GIFDraw))
{
Serial.printf("Successfully opened GIF; Canvas size = %d x %d\n", gif.getCanvasWidth(), gif.getCanvasHeight());
tft.startWrite(); // The TFT chip slect is locked low
while (gif.playFrame(true, NULL))
{
yield();
}
gif.close();
tft.endWrite(); // Release TFT chip select for other SPI devices
}
#endif
#ifdef GIF_DEMO2
if (gif.open((uint8_t *)GIF_DEMO2, sizeof(GIF_DEMO2), GIFDraw))
{
Serial.printf("Successfully opened GIF; Canvas size = %d x %d\n", gif.getCanvasWidth(), gif.getCanvasHeight());
tft.startWrite(); // The TFT chip slect is locked low
while (gif.playFrame(true, NULL))
{
yield();
}
gif.close();
tft.endWrite(); // Release TFT chip select for other SPI devices
}
#endif
#ifdef GIF_DEMO3
if (gif.open((uint8_t *)GIF_DEMO3, sizeof(GIF_DEMO3), GIFDraw))
{
Serial.printf("Successfully opened GIF; Canvas size = %d x %d\n", gif.getCanvasWidth(), gif.getCanvasHeight());
tft.startWrite(); // The TFT chip slect is locked low
while (gif.playFrame(true, NULL))
{
yield();
}
gif.close();
tft.endWrite(); // Release TFT chip select for other SPI devices
}
#endif
#ifdef GIF_DEMO4
if (gif.open((uint8_t *)GIF_DEMO4, sizeof(GIF_DEMO4), GIFDraw))
{
tft.fillScreen(TFT_BLACK);
Serial.printf("Successfully opened GIF; Canvas size = %d x %d\n", gif.getCanvasWidth(), gif.getCanvasHeight());
tft.startWrite(); // The TFT chip slect is locked low
while (gif.playFrame(true, NULL))
{
yield();
}
gif.close();
tft.endWrite(); // Release TFT chip select for other SPI devices
}
#endif
#ifdef GIF_DEMO5
if (gif.open((uint8_t *)GIF_DEMO5, sizeof(GIF_DEMO5), GIFDraw))
{
Serial.printf("Successfully opened GIF; Canvas size = %d x %d\n", gif.getCanvasWidth(), gif.getCanvasHeight());
tft.startWrite(); // The TFT chip slect is locked low
while (gif.playFrame(true, NULL))
{
yield();
}
gif.close();
tft.endWrite(); // Release TFT chip select for other SPI devices
}
#endif
}
#else // Test maximum rendering speed
void loop()
{
long lTime = micros();
int iFrames = 0;
if (gif.open((uint8_t *)GIF_DEMO4, sizeof(GIF_DEMO4), GIFDraw))
{
tft.startWrite(); // For DMA the TFT chip slect is locked low
while (gif.playFrame(false, NULL))
{
// Each loop renders one frame
iFrames++;
yield();
}
gif.close();
tft.endWrite(); // Release TFT chip select for other SPI devices
lTime = micros() - lTime;
Serial.print(iFrames / (lTime / 1000000.0));
Serial.println(" fps");
}
}
#endif
6 测试验证
素材原图:
前面代码示例中前三个素材是冰墩墩,结果上传之后提示我图片违规。
就贼离谱,连带着我后面拍的LCD实际运行的视频也上传不了。试了几次都不行,累了,毁灭吧。
想要看效果的同学可以在文章底部的的链接里面下载。
运行结果:
上面也说了,原本想展示一下运行效果的,结果冰墩墩的这几个图上传之后老是说我违规,算了,不想搞了,就这样吧。
上面的示例源码是按GIF本身正常的速度运行的,其实也可以全速运行。全速运行的刷新率主要取决于GIF里面每张图片的像素和颜色复杂度,我测试过几个GIF,一些简单的素材刷新率能达到60fps,一般普通240*240像素的GIF刷新率在20fps左右。
但是要注意的是我现在测试的结果是基于动图数据存到spi flash的情况,CPU和flash的频率都调到最大了,LCD这边spi的通讯速率则是27MHz,如果数据存到RAM,SPI通讯速率再快一些,刷新率应该还能再高一些。
全速下运行的结果如下:
手机拍摄LCD屏幕会有很明显的色差和纹波,这个没法消除,只有这个能发出来,将就着看吧。
结束语
这一讲简单介绍了在Arduino环境下使用LCD显示GIF动图,整个流程总的来说还是不难的,把驱动调好之后直接凋库显示就完了。如果还有什么问题,欢迎在评论区留言或者私信给我。
想要源代码、素材或图片处理工具的自行下载:
链接:https://pan.baidu.com/s/1Ptc2F9yYrjCQJkycG129wg
提取码:4a1i
Arduino开发教程汇总:
https://blog.csdn.net/ShenZhen_zixian/article/details/121659482