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)液晶ディスプレイを使用するなら、画像表示はおすすめです。
コメント