ESP32 & TFT display pictures and animations

1. Materials

TFT（128*128）
ESP32

2. About taking modulo

Take Chinese characters as an example

Chinese character coding is divided into: Yin code - 1 is bright, 0 is off; Yang code - 1 is off, 0 is bright;

The picture below shows 8*8 negative code

xiao

{00H 08H 08H 2CH 4AH 08H 08H 10H} /*小*/

As shown above, one line is stored in one byte, the first line is all off, that is, 00H (0000 0000B), and the fifth pixel in the second line is lit, that is, 08H (0000 1000B)...

Similar to the color map, a pixel is stored in two bytes, and a hexadecimal represents the color of a pixel, as follows:

prog_uint16_t as1[0x4000] PROGMEM = {
    
    
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0010 (16)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0020 (32)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0030 (48)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,........}

3. TFT display picture

First use the image modulo tool. In Dimensions, it is the size of the image. Because you want to display it in full screen, the size of the image is the size of the screen.

convert

Then you can generate content

// Generated by  : ImageConverter 565 v1.1
// Generated from: 1.PNG
// Time generated: 2022/8/13 21:49:28
// Dimensions    : 128x128 pixels
// Size          : 32,768 Bytes

#include <pgmspace.h>

const prog_uint16_t as1[0x4000] PROGMEM = {
      
      
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0010 (16)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0020 (32)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0030 (48)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0040 (64)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0050 (80)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0060 (96)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0070 (112)
0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D, 0xEF3D,   // 0x0080 (128)
0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D,   // 0x0090 (144)
0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D,   // 0x00A0 (160)
0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D,   // 0x00B0 (176)
0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D,   // 0x00C0 (192)
0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D,   // 0x00D0 (208)
0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D, 0xEF5D,   // 0x00E0 (224)
.........}

Create an img.h, put the above program into

function to display images

tft.pushImage(0, 0, 128, 128, as1);   //以（0，0）为起点，显示128*128像素的图片

complete example

#include <SPI.h> //导入库
#include <TFT_eSPI.h> 
#include <Wire.h>

#include "img.h"
  
TFT_eSPI tft = TFT_eSPI(); 

void setup() {
  // put your setup code here, to run once:
  tft.init();                               //初始化
  tft.fillScreen(TFT_BLACK);                //屏幕颜色
}
                               

//int i=0;
void loop() {
  // put your main code here, to run repeatedly:
  
  //tft.fillScreen(TFT_BLACK);
  tft.setSwapBytes(true);             //使图片颜色由RGB->BGR
  tft.pushImage(0, 0, 128, 128, as1);
  
  delay(100);                        //延时0.1s
  i++;                               //开始下一帧
  if(i>=8){                          //当播放到第9帧时，回到第一帧，循环
    i=0;
  }
  
}

Effect

show

4. Display animation

Similar to displaying pictures, but put the picture in the pointer array, as follows

// Generated by  : ImageConverter 565 v1.1
// Generated from: 1.PNG
// Time generated: 2022/8/13 21:49:28
// Dimensions    : 128x128 pixels
// Size          : 32,768 Bytes

#include <pgmspace.h>

const prog_uint16_t as1[0x4000] PROGMEM={
    
    
.............
}

const prog_uint16_t as2[0x4000] PROGMEM={
    
    

}

const prog_uint16_t as3[0x4000] PROGMEM={
    
    

}

const prog_uint16_t as4[0x4000] PROGMEM={
    
    

}

const prog_uint16_t as5[0x4000] PROGMEM={
    
    

}

const uint16_t Astronaut[] PROGMEM =
{
    
     as1,as2,as3,as4,
 as5 };                                 //指针数组，存放图片

Put them in As.h

complete example

#include <SPI.h> //导入库
#include <TFT_eSPI.h> 
#include <Wire.h>

#include "As.h"
  
TFT_eSPI tft = TFT_eSPI(); 

void setup() {
  // put your setup code here, to run once:
  tft.init();                               //初始化
  tft.fillScreen(TFT_BLACK);                //屏幕颜色
}
                               

int i=0;
void loop() {
  // put your main code here, to run repeatedly:
  
  //tft.fillScreen(TFT_BLACK);
  tft.setSwapBytes(true);             //使图片颜色由RGB->BGR
  tft.pushImage(0, 0, 128, 128, Astronaut[i]);
  
  delay(100);                        //延时0.1s
  i++;                               //开始下一帧
  if(i>=8){                          //当播放到第9帧时，回到第一帧，循环
    i=0;
  }
  
}