Arduino应用开发——LCD显示GIF动图

  • 10/04 08:55
柒壹漆 柒壹漆
  • 简介
  • 相关资讯
  • 相关推荐

前面我已经介绍过了如何在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 电源负
GPIO14HSPI_CLK CLK SPI时钟线
GPIO13HSPI_MOSI SDI SPI数据线，esp8266输出，lcd输入
GPIO12HSPI_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 电源负
GPIO18SPI_CLK CLK SPI时钟线
GPIO23SPI_MOSI SDI SPI数据线，esp32输出，lcd输入
GPIO19SPI_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:UserszDesktop图片处理工具image_to_cdistWindows

在这里插入图片描述

第四步：运行应用程序。

格式：应用程序名+空格+图片名+空格+>+空格+转换后的文件名。
例如：

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 %dn", 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 %dn", 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 %dn", 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 %dn", 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 %dn", 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

版权声明：与非网经原作者授权转载，版权属于原作者。文章观点仅代表作者本人，不代表与非网立场。文章及其配图仅供工程师学习之用，如有侵权或者其他问题，请联系本站作侵删。 侵权投诉
人工客服
（售后/吐槽/合作/交友）

相关资讯

  1. 1.
    反相放大电路运放V+引脚串联电阻过大也会产生输出失调电压？1400字理清原理与计算

    17小时前

  2. 2.
    开启SpringCloud + DDD 第1篇：Feign 的调用

    18小时前

  3. 3.
    嵌入式开发工程师面试题2

    18小时前

  4. 4.
    RTOS中协程与任务的区别

    22小时前

  5. 5.
    一个非常轻量的嵌入式线程池库！

    23小时前

  6. 6.
    明年将进入400层NAND时代

    23小时前

  7. 7.
    嵌入式开发工程师面试题1

    23小时前

  8. 8.
    嵌入式行业有哪些不错的公司(2024版)

    23小时前

  9. 9.
    python实现Ethernet/IP协议的客户端（三）

    11/25 08:30

  10. 10.
    python实现Ethernet/IP协议的客户端（二）

    11/25 08:20

  11. 11.
    python实现Ethernet/IP协议的客户端（一）

    11/24 11:25

  12. 12.
    树莓派应用——RTC（DS3231）

    11/23 11:25

  13. 13.
    你听说过MIPS吗？它和ARM有何区别？

    11/23 09:55

  14. 14.
    希润医疗孟铭强：手功能康复机器人走入临床实践

    11/22 18:21

  15. 15.
    柔灵科技陈涵：睡眠问题多发，可穿戴式脑机接口来帮忙

    11/22 17:47

  16. 16.
    微灵医疗李骁健：自研芯片让脑机接口系统更具自主性

    11/22 17:06

  17. 17.
    飞凌嵌入式ElfBoard ELF 1板卡-LCD显示图片编程示例之编程步骤

    11/22 16:19

  18. 18.
    静态测试解决方案

    11/22 15:28

  19. 19.
    单元/集成测试解决方案

    11/22 15:28

  20. 20.
    性能测试解决方案

    11/22 15:28

查看全部20条内容

相关推荐