M5CoreInkの画像表示 - イナバちゃんログ

M5Paperからの流れでM5CoreInkの画像表示をしてみます。
と言ってもLovyanGFXを利用するので、M5CoreInkに特化した話はなさそうです。

普段UIに画像を使うことをあまりしないので、いざやろうとした時に困らないようにまとめておきます。

f:id:hollyhockberry:20210930191445j:plain

ファームウェアのバイナリに組み込む

画像を配列で宣言してファームウェアにリンクする方法です。
ファームウェアと一対一対応できるのが利点ですかね。ファームウェアのバイナリが大きくなるのが欠点かもしれません。

RGB565形式で変換した場合はpushImage()を使います。

#define LGFX_USE_V1
#define LGFX_AUTODETECT
#include <LovyanGFX.hpp>

const uint16_t imgWidth = 100;
const uint16_t imgHeight = 100;

// RGB565 Dump(little endian)
const unsigned short img[10000] PROGMEM = {
  // 略
}

void setup() {
  lcd.init();

  lcd.pushImage(0, 0, imgWidth, imgHeight, img);
}

void loop() {}

RAWなデータ配列だけでなく、PNGやJpeg形式のバイナリそのままをバイト列のテーブルにしても読み込んでくれます。
テーブルのサイズが小さくなるのでこちらの方が便利そうです。
データ形式に合わせてdrawPng()かdrawJpg()を使います。

#define LGFX_USE_V1
#define LGFX_AUTODETECT
#include <LovyanGFX.hpp>

// RAW File Dump
const unsigned char img[9170] PROGMEM = {
  // 略
}

void setup() {
  lcd.init();

  lcd.drawPng(img, 9170, 100, 0);
}

void loop() {}

画像をテーブルに変換するのが面倒ですが、Lang-shipのたなかまさゆきさんが変換ツールを公開されています。ありがたく利用させてもらいました。
(Tools > 画像データ変換でいけます）

lang-ship.com

SPIFFSに画像ファイルを配置する

ESP32は内臓FlashROMにSPIFFSと呼ばれるストレージが利用可能です。ファイルシステムとして扱えるのでSDカードと同じノリで使えます。

ファームウェアと独立するので、ファームウェアの書き換え時に画像の更新が行われないのが利点であり欠点ですね。欠点はMakefileで解消できるかもしれません。

SPIFFSへファイルを書き込む

PlatformIOの場合を説明します。ArduinoIDEでもできるはずですが、やったことないので・・。　
プロジェクトのルートにdataディレクトリを作成してそこにファイルをおきます。
下図はbear.pngとcat.jpgがおかれている例です。

f:id:hollyhockberry:20210930205135p:plain

ファイルが準備できたら書き込みをしましょう。
サイドにあるPlatformIOのアイコンをクリックするとPlatformIOのサイドバーが開きます。

Platformの下に Build Filesystem Imageと Upload Filesystem Imageがあるはずです。
ファームウェアと同様、ビルドしたイメージをアップロードする流れです。

f:id:hollyhockberry:20210930205717p:plain

ファイルが書き込めていればSDカードから読み込むときと同じ感じで扱えるはずです。

#include "SPIFFS.h"

#define LGFX_USE_V1
#define LGFX_AUTODETECT
#include <LovyanGFX.hpp>

LGFX lcd;

void setup() {
  lcd.init();
  SPIFFS.begin();

  lcd.drawJpgFile(SPIFFS, "/cat.jpg", 0, 0);
  lcd.drawPngFile(SPIFFS, "/bear.png", 100, 0);
}

void loop() {}