Preparation for TFT_eSPI Library with ESP32S3

概要

以前ここー＞ 'LI9341_240_320 2.5" LCD' で LCD と "TFT_eSPI" ライブラリーをちょっと触ったのですがとても簡単に LCD の操作を出来る事が分かりました。今回から "TFT_eSPI" ライブラリーのデモプラグラムを実行しながら各関数の使い方を説明して行きたいと思います。

部品と配線

'ILI9341_240_320 2.5" LCD' を参照。今回は CPU に ESP32S3 を使用しています。

ESP32S3 GPIO	01	02	42	41	40	38	45	48	47	21	14	RSR
LCD	CS	DC	MOSIT_DIN	SCKT_CLK	LED	T_CS	MISOT_DO	SD_SCK	SD_MISO	SD_MOSI	T_IRQ	RESET

デモプログラムによっては SD カードからデータを読み込むものが有ります。そこをスキップするのであれば SD カード関係の配線は必要有りません。今回は SDカードの管理を SPI から SD_MMC に変更しています。

ライブラリのインストールとTFT_eSPの設定

ライブラリのインストール

"Arduino IDE 2.3" にライブラリ "TFT_eSPI" をインストールするとデモプログラムが使える様になります。 IDE 左側のライブラリ（本のアイコン）をクリック。表示された画面の検索欄に "TFT_eSPI" と入力してエンタ。検索欄の下に "TFT_eSPI....." が表示されるのでそれをインストール。

TFT_eSPの設定

ライブラリを使用する前に回路に合わせて設定ファイル ”User_Setup.h” を修正する必要が有ります。 ”User_Setup.h” に例が有ります。例を参照に回路に合わせて修正します。

”ドライバの選択”、”解像度の指定”、”バックライトのオンオフ設定” は同じ設定。
"SPI設定"
- 回路に合わせて赤字の様に設定。 209 // For ESP32 Dev board (only tested with ILI9341 display) 210 // The hardware SPI can be mapped to any pins 211 212 #define TFT_MISO 45 213 #define TFT_MOSI 42 214 #define TFT_SCLK 41 215 #define TFT_CS 01 // Chip select control pin 216 #define TFT_DC 02 // Data Command control pin 217 //#define TFT_RST 4 // Reset pin (could connect to RST pin) 218 #define TFT_RST -1 // Set TFT_RST to -1 if display RESET is connected to ESP32 board RST 219 220 #define TOUCH_CS 38 // Chip select pin (T_CS) of touch screen 221 222 // For ESP32 Dev board (only tested with GC9A01 display) 223 // The hardware SPI can be mapped to any pins
"今回は使用しませんが"
- この ESP32S3 は PSRAM 管理に VSPI を使用していました。
- よって今回は HSPI を LCD コントロール用に使用するのでコメントを外します。 376 // If the VSPI port is in use and pins are not accessible (e.g. TTGO T-Beam) 377 // then uncomment the following line: 378 #define USE_HSPI_PORT 379 380 // Comment out the following #define if "SPI Transactions" do not need to be 381 // supported. When commented out the code size will be smaller and sketches will

LCDの画面コピー

TFT_eSPIのライブラリに "void readRectRGB(int32_t x, int32_t y, int32_t w, int32_t h, uint8_t *data);" という関数が有り、これを利用すると画面のハードコピーが取れます。

get_img.ino arduino

#include "FS.h"
#include <SD_MMC.h>
//------------ SD_MMC 1-wire SD mode ----------------------------
#define mmc_CMD         21 
#define mmc_CLK         48  
#define mmc_D0          47  
#define SDMMC_FREQ      30000
#define MAX_FILE        3

void get_img(int s_mode, char* f_name){
  File fp;
  int a, b, c, d, w, h, filesize;
  unsigned char *img, *i_buf;
  unsigned char bmpfileheader[14] = {'B','M', 0,0,0,0, 0,0, 0,0, 54,0,0,0};
  unsigned char bmpinfoheader[40] = {40,0,0,0, 0,0,0,0, 0,0,0,0, 1,0, 24,0};

  // Initialise the SD_MMC
  pinMode(mmc_D0, INPUT_PULLUP);
  SD_MMC.setPins(mmc_CLK, mmc_CMD, mmc_D0);
  if(!SD_MMC.begin("/sdmmc", true, false, SDMMC_FREQ, MAX_FILE)){
     Serial.println("Card Mount Failed");
     return;
  }
  else Serial.println("SD_MMC initialisation OK");

  w = 240;
  h = 320;
  if(s_mode & 1)
  {
    w = 320;
    h = 240;
  }
  filesize = 54 + 3 *w * h; 

  for(a = 0; a < 4; a ++){
    bmpfileheader[2 + a] = (unsigned char)(filesize >> (a * 8));
    bmpinfoheader[4 + a] = (unsigned char)(w >> (a * 8));
    bmpinfoheader[8 + a] = (unsigned char)(h >> (a * 8));
  }  

  img = (unsigned char *)malloc(3 * w);
  i_buf = (unsigned char *)malloc(3 * w);

  fp = SD_MMC.open(f_name,FILE_WRITE);

  fp.write(bmpfileheader,14);
  fp.write(bmpinfoheader,40);

  for(a = 0; a < h; a ++){
    d = 0;
    if(s_mode > 1) tft.readRectRGB(0, a, w, 1, img);
    else tft.readRectRGB(0, (h - 1 - a), w, 1, img);
      
    for(b = 3 * w - 1; b > 0; b -= 3){
      for(c = 0; c < 3; c ++){ 
       if(s_mode < 2) i_buf[d + 2 - c] = img[d + c];
       else i_buf[d + c] = img[b - c];
      }    
      d += 3;
    }
    fp.write(i_buf, w * 3);
  }
  fp.close();
  
  free(img);
  free(i_buf);
  
  Serial.println("OK");
}
                                        

デモプログラムの描画が終わったタイミングでこの関数を呼ぶとSDカードに画面のコピーがビットマップ形式で保存されます。このスケッチの動作は以下の通り。

引数は LCD のモードと保存ファイル名の２つ
- モード：LCDの向き。後ほど説明します。ー＞　LCDの方向
- 保存ファイル名：ルートから指定。拡張子は "bmp"。例：”/test.bmp"
SD_MMCの設定。ピン配置。転送速度等。
LCD １行分のデータをバッファーに読み込み処理を行い SD カードにデータを保存
この処理を最後まで繰り返す。
保存が終了するとシリアルモニタに "OK" と表示

次回説明予定のデモプログラム ”Free_Font_Demo” の画面を写真と画面コピーで比較してみました。

若干色加減が違う様に見えますが、確かに画面のコピーは取れています。

次回は

次からデモプログラムの説明に入ります。先ず最初はフォント関係の ”Free_Font_Demo” に付いて説明する予定です。