2022/09/08

M5StackでLCD画面に画像を表示する


 M5Stackイラスト ← M5Stackです。

M5StackでLCDに画像を表示する方法をまとめました。

画像データの転送方法

画像データの保存先ですが、SDカードと、SPIFFS(M5Stackの内蔵ROM)があります。
SDカードは、単純にパソコンなどからSDカードへデータをコピーして、M5Stackに刺せば使用できます。
SPIFFSは、以下の方法でデータの転送ができます。

VSCode + PlatformIOを使用する場合

プロジェクトフォルダの直下に"data"フォルダを作成し、そこに転送したいファイルを保存します。
すると、プログラム書き込み時に一緒にSPIFFSへ書き込んでくれます。

M5StackのSPIFFSへファイルをアップロードする方法1

また、書き込み時でなくても、「Project TaskのPlatform ⇒ upload filesystem image」を使用してもdataフォルダ内のファイルを転送できます。

M5StackのSPIFFSへファイルをアップロードする方法2

Arduino IDEを使用する場合

下記HPがわかりやすいですので参照ください。

画像の表示方法

M5Unifiedライブラリを使用します。

以下の関数を使うと、簡単に画像を表示できます。

#include M5Unified.h

auto cfg = M5.config();
M5.begin(cfg);

SPIFFS.begin();
SD.begin(GPIO_NUM_4);

M5.Lcd.drawJpgFile(SPIFFS, filePath, 0, 0);
M5.Lcd.drawBmpFile(SPIFFS, filePath, 0, 0);
M5.Lcd.drawPngFile(SD, filePath, 0, 0);

M5.begin()

SPIFFS.begin()

SD.begin(uint8_t ssPin)

M5.Lcd.drawJpgFile(fs::FS &fs, const char *path, uint16_t x, uint16_t y)


サンプルプログラムをgithubに挙げていますので、よろしければ参照ください。


以上です。




コメント(githubのアカウントが必要です)