ESP32C3 Super Mini / ST7796S TFT LCD -2

TFT LCD를 활용하는 2번째 포스팅이다.

일단 LCD를 키는것을 했으니 다음은 우리가 쓸 함수들을 파악해보고, 사진도 올려보자

우리가 쓰는 함수들은 이미 #include "TFT_eSPI.h"로 포함시켜서 어딜 들어가서 봐야하는지 알것이다.

 

근데 들어가서 그 많은 함수를 언제 보고있나... 

예제가 없으면 당연히 봐야지만, 예제가 있으니 예제에서 사용되는 부분의 함수들을 알아보자

 

https://github.com/Bodmer/TFT_eSPI/blob/master/examples/480%20x%20320/TFT_graphicstest_one_lib/TFT_graphicstest_one_lib.ino

TFT_eSPI/examples/480 x 320/TFT_graphicstest_one_lib/TFT_graphicstest_one_lib.ino at master · Bodmer/TFT_eSPI

위 코드는 우리가 업로드한 코드이고, 이전 포스팅에서 영상으로 봤던 부분이다.

 

코드가 대충 300줄 정도 있는데 그걸 다 해석하진 않을거고 몇가지만 해석해보자

 

void setup() {
  Serial.begin(9600);
  while (!Serial);

  Serial.println(""); Serial.println("");
  Serial.println("TFT_eSPI library test!");

  tft.init();

  tn = micros();
  tft.fillScreen(TFT_BLACK);
  .
  .
  .

 

자 코드의 첫 부분인데, 여기서 tft.init() 있다.

이건 뭐 안봐도 매우 중요해보인다. 위 코드에서 쓸만한 것을 TFT_eSPI.cpp로 가서 찾아보고 알아보겠다.

https://github.com/Bodmer/TFT_eSPI/blob/master/TFT_eSPI.cpp

TFT_eSPI/TFT_eSPI.cpp at master · Bodmer/TFT_eSPI

	함수 원형	설명
tft.init()	init(uint8_t tc)	display초기화, SPI통신 설정, 해당 드라이버에 맞는 초기화 코드 로드, 리셋 및 설정(tc는 ST7735사용할 때 사용)
tft.fillScreen()	fillScreen(uint32_t color)	Clear the screen to defined colour

 

대충 보니 init()은 디스플레이의 전반적인 초기화해서 보드와 통신을 할 수 있게끔 해주는 거고, fillScreen()은 화면을 초기화하고, 입력된 색으로 디스플레이 크기에 맞게 띄워주는 것 이다.

 

void loop(void) {
  for (uint8_t rotation = 0; rotation < 4; rotation++) {
    tft.setRotation(rotation);
    testText();
    delay(2000);
  }
}

unsigned long testText() {
  tft.fillScreen(TFT_BLACK);
  unsigned long start = micros();
  tft.setCursor(0, 0);
  tft.setTextColor(TFT_WHITE);  tft.setTextSize(1);
  tft.println("Hello World!");
  tft.setTextColor(TFT_YELLOW); tft.setTextSize(2);
  tft.println(1234.56);
  tft.setTextColor(TFT_RED);    tft.setTextSize(3);
  tft.println(0xDEADBEEF, HEX);
  tft.println();
  tft.setTextColor(TFT_GREEN);
  tft.setTextSize(5);
  tft.println("Groop");
  tft.setTextSize(2);
  tft.println("I implore thee,");
  //tft.setTextColor(TFT_GREEN,TFT_BLACK);
  tft.setTextSize(1);
  tft.println("my foonting turlingdromes.");
  tft.println("And hooptiously drangle me");
  tft.println("with crinkly bindlewurdles,");
  tft.println("Or I will rend thee");
  tft.println("in the gobberwarts");
  tft.println("with my blurglecruncheon,");
  tft.println("see if I don't!");
  return micros() - start;
}

 

	함수 원형	설명
tft.setRotation()	setRotation(uint8_t m)	rotate the screen orientation m = 0-3 or 4-7 for BMP drawing
tft.setCursor()	setCursor(int16_t x, int16_t y)	Set the text cursor x,y position
tft.setTextColor()	setTextColor(uint16_t c)	Set the font foreground colour (background is transparent)
tft.setTextSize()	setTextSize(uint8_t s)	Set the text size multiplier
tft.println()	...	C:\Users\???\AppData\Local\Arduino15\packages\esp32\hardware\esp32\2.0.13\cores\esp32

 

이렇게 어느정도 쓰이는 것들에 대해 알아보았으니 이번엔 원하는 사진을 띄워보자

 

1. 원하는 사진을 가져온다. 

2. https://javl.github.io/image2cpp/ 

image2cpp

해당 사이트에 파일을 넣고, 원하는 설정을 하자.

나는 색도 넣고 싶어서 output에서 Horizontal - 2 byte per pixel (565)로 선택했다.

 

3. Generate code를 누르고 copy Output을 하여 비트맵 이미지 데이터를 복사하자

4. 이 코드에 비트맵 이미지 데이터를 넣고 구동시키면 된다.

#include <SPI.h>
#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

// 320x480px
const uint16_t myBitmap[] PROGMEM = {
//비트맵 이미지 데이터
};

// 비트맵을 그리는 함수
void drawBitmap(int x, int y, const uint16_t *bitmap, int w, int h) {
  int byteIndex = 0;
  for (int j = 0; j < h; j++) {
    for (int i = 0; i < w; i++) {
      tft.drawPixel(x + i, y + j, pgm_read_word_near(bitmap + byteIndex));
      byteIndex++;
    }
  }
}

void setup() {
  Serial.begin(115200);
  
  tft.init();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
  
  // 비트맵 이미지를 화면에 그립니다.
  drawBitmap(0, 0, myBitmap, 320, 480); // (x, y, 비트맵 배열, 가로 크기, 세로 크기)
}

void loop() {
}

 

그럼 다음과 같은 결과를 얻을 수 있다.

 

주의해야할게 이 작업에서는 SD카드를 사용하지 않았다.

그러기에 사진을 많이 넣을 수 없다.

실제로 eps32c3 super mini는 SRAM이 400KB이고, 내장 FLASH는 4MB이다.

(코드를 보면 PROGMEM을 사용해 배열을 FLASH에 저장하였음)

따라서 이후 작업은 SD카드를 사용하면서 진행해보겠다.

 

여기서 SRAM이랑 FLASH 메모리가 뭔 상관인가 할 수 도 있는데,

간단하게 SRAM은 변수같은 데이터를 저장하는 공간이고, FLASH 메모리는 함수같은 것을 저장하는 공간이다.

배열도 변수이기 때문에 원래는 SRAM에 저장되어 안그래도 부족한 SRAM의 용량을 잡아먹는데 PROGMEM을 통해 FLASH에 저장하게 한것이다.

 

다음 포스팅은 SD카드를 활용하여 SD카드에서 사진을 꺼내어 화면에 나타나게 하는 작업을 해보겠다.