[ESP32]TFT(IPS)液晶ディスプレイ(ST7789V)に画像表示させる方法 with Arduino IDE

ESP32
スポンサーリンク

TFT(IPS)液晶ディスプレイ(ST7789V)に画像表示させる方法

はじめに

ST7789Vドライバが搭載されたTFT(IPS)液晶ディスプレイ(LCD)に画像を表示させるには以下のような方法があります。

1.プログラム内にBMPデータを配列で格納し表示する方法。
2.SPIFFS パーティションにBMPファイルを格納しておき、読み込んで表示する方法。
3.SDカードにBMPファイルを格納しておき、読み込んで表示する方法。

3.のSDカードに関しては、現在手元にないため機会があれば追記します。

ディスプレイとの接続に関してはこちらを参照ください👇

開発環境

OS : Windows 11 Pro
ESP32:ESP-WROOM-32
統合開発環境 : Arduino IDE 2.3.2
Arduino core for the ESP32:2.0.17
使用ライブラリ:Adafruit ST7735 and ST7789 Library(1.10.4) / Adafruit GFX Library(1.11.9)
        SPIFFS ImageReader Library(1.0.2)

使用パーツ

ESP32開発ボード(38Pin)

TFT(IPS)液晶ディスプレイ

ジャンパーワイヤー(メスーメス)

表示方法

プログラム内にBMPデータを配列で格納し表示する方法

Adafruit GFX Library」の drawRGBBitmap() を使用します。

使用ライブラリ

Adafruit ST7735 and ST7789 Library
 このライブラリをインストールすると、「Adafruit GFX Library」も自動的にインストールされます。

BMPデータ抽出

bitmapデータは、bitmapファイルから以下のサイトでデータ部を抽出できます。
https://javl.github.io/image2cpp/

例えば、右の画像を表示する場合で進めます。

①ファイル選択から画像ファイルを選択します。

Background color: は「Transparent」にチェックします。

Draw mode: は「Horizontal – 2 bytes per pixel (565)」を選択します。

④「Generate Code」ボタンをクリックすると、BMPデータが出力されます。

スケッチ作成

先ほど出力された配列をコピーしてスケッチにペーストします。
データが大きいので一部省略しています。

#include <Adafruit_GFX.h>
#include <Adafruit_ST7789.h>
#include <SPI.h>

#define TFT_CS  5
#define TFT_RST 4
#define TFT_DC  16

Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);

// 'favicon_bmp', 60x60px
const uint16_t epd_bitmap_favicon_bmp [] PROGMEM = {
	0x3fec, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 0x1fe9, 
  ~~~~~~~~~~ (省略) ~~~~~~~~~~
	0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0, 0xffc0
};

void setup(void) {
  Serial.begin(115200);

  tft.init(240, 320);
  tft.setRotation(2);
  tft.fillScreen(ST77XX_BLACK);

  tft.drawRGBBitmap(0, 0, epd_bitmap_favicon_bmp, 60, 60);
}

void loop() {

}

私の場合、配線の都合上ディスプレイの向きが逆になるため、22行目で画面を逆にしています。

  tft.setRotation(2);

画像開始位置と画像の大きさを指定して表示させます。

  tft.drawRGBBitmap(0, 0, epd_bitmap_favicon_bmp, 60, 60);

void drawRGBBitmap(int16_t x, int16_t y, const uint16_t bitmap[], int16_t w, int16_t h);
引数
・x — 開始x座標。
・y — 開始y座標。
・bitmap — bitmapデータ。
w — 画像の幅。
y — 画像の高さ。
戻り値
・なし

動作確認

画面左上(0,0)に60×60の大きさで画像が表示されます。

SPIFFS パーティションにBMPファイルを格納しておき、読み込んで表示する方法

使用ライブラリ

SPIFFS ImageReader Library
 SPIFFSパーティションに配置した画像ファイルを読込み、「Adafruit GFX Library」を使用して表示してくれるライブラリです。

SPIFFS ImageReader Library

全てをインストールします。

画像アップロード

SPIFFSパーティションに次の画像ファイルをアップロードします。
アップロード方法はこちらの記事を参考にしてください👇

スケッチ作成①
#include <SPIFFS.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7789.h>
#include <SPIFFS_ImageReader.h>

#define TFT_CS  5
#define TFT_RST 4
#define TFT_DC  16

Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);
SPIFFS_ImageReader reader;

void setup() {

  Serial.begin(115200);

  // initialize SPIFFS
  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  tft.init(240, 320);
  tft.setRotation(2);
  tft.fillScreen(ST77XX_BLACK);

  // draw image
  reader.drawBMP("/favicon_bmp.bmp", tft, 0, 0);
}

void loop() {

}

reader.drawBMP() で、画像ファイルの読み込みと表示をしています。

  // draw image
  reader.drawBMP("/favicon_bmp.bmp", tft, 0, 0);

ImageReturnCode drawBMP(char *filename, Adafruit_SPITFT &tft, int16_t x,int16_t y);
引数                   
・*filename — ファイル名称。
・&tft — Adafruit_SPITFT。
・x — 表示開始x座標。
y — 表示開始y座標。
戻り値
・0=IMAGE_SUCCESS        // Successful load (or image clipped off screen) 
・1=IMAGE_ERR_FILE_NOT_FOUND // Could not open file
・2=IMAGE_ERR_FORMAT      // Not a supported image format
・3=IMAGE_ERR_MALLOC      // Could not allocate image (loadBMP() only)

動作確認①

正常に表示させることができれば、先ほどと同じように以下のようになります。

ただし、読込みながら1行ずつ表示されているようで、表示に時間がかかります。

スケッチ作成②

先に画像を読み込んでおいて、瞬時に表示されるには以下のようにします。
ただし、動的メモリを確保し画像データを保持しますので、メモリ管理には注意が必要です。

#include <SPIFFS.h>
#include <Adafruit_GFX.h>
#include <Adafruit_ST7789.h>
#include <SPIFFS_ImageReader.h>

#define TFT_CS  5
#define TFT_RST 4
#define TFT_DC  16

Adafruit_ST7789 tft = Adafruit_ST7789(TFT_CS, TFT_DC, TFT_RST);
SPIFFS_ImageReader reader;
SPIFFS_Image favicon_bmp;

void setup() {

  Serial.begin(115200);

  // initialize SPIFFS
  if (!SPIFFS.begin(true)) {
    Serial.println("An Error has occurred while mounting SPIFFS");
    return;
  }

  tft.init(240, 320);
  tft.setRotation(2);
  tft.fillScreen(ST77XX_BLACK);

  // draw image
  reader.loadBMP("/favicon_bmp.bmp", favicon_bmp);
  favicon_bmp.draw(tft, 0, 0);
}

void loop() {

}

12行目で「SPIFFS_Image」を生成しておきます。

SPIFFS_Image favicon_bmp;

29行目、30行目で読込みと表示をしています。

  // draw image
  reader.loadBMP("/favicon_bmp.bmp", favicon_bmp);
  favicon_bmp.draw(tft, 0, 0);

ImageReturnCode loadBMP(char *filename, SPIFFS_Image &img);
引数                   
・*filename — ファイル名称。
・&img — SPIFFS_Image。
戻り値
・0=IMAGE_SUCCESS        // Successful load (or image clipped off screen) 
・1=IMAGE_ERR_FILE_NOT_FOUND // Could not open file
・2=IMAGE_ERR_FORMAT      // Not a supported image format
・3=IMAGE_ERR_MALLOC      // Could not allocate image (loadBMP() only)

void draw(Adafruit_SPITFT &tft, int16_t x, int16_t y);
引数                   
・&tft — Adafruit_SPITFT。
・x — 表示開始x座標。
y — 表示開始y座標。
戻り値
なし

動作確認②

先ほどとは違い、瞬時に表示されたと思います。

おわりに

非常に綺麗に表示されますので、TFT(IPS)液晶ディスプレイを使用するなら、画像表示はおすすめです。

コメント

タイトルとURLをコピーしました