M5StickC PLUSで画像を表示してみた

M5StickC PLUSに画像を表示
M5StickC PLUSに画像を表示

今回は、M5StickC PLUSに装備されているLCDに、画像を表示させてみたいと思います。

M5StickC PLUSとは、Arduino互換機であるESP32 PICOをベースとして、LCDやボタン、ジャイロ・加速度センサー、バッテリーなどをパッケージングしたM5Stackシリーズ製品のひとつです。ちなみに、M5StickC PLUSのLCDの画面サイズは135x240となります。

▼はじめてM5StickC PLUSを使う場合は、こちらの記事も参考にしてみて下さい。

はじめに

まず、M5StickC PLUSに画像を表示する方法は次の二通りが考えられます。

  1. ヘッダファイルに画像データを書き込んで画像表示する
  2. SPIFFS領域に画像データを記録し読み込んで画像表示する

この記事では比較的簡単な❶の方法を紹介していきます。

ヘッダファイルに画像データを書き込んで画像表示する方法

それでは、ヘッダファイルに画像データを書き込んで画像表示する方法を紹介します。

コード内に画像データを書き込むには、画像のバイナリデータを文字列に変換しなければなりません。M5StickC PLUSでは、16ビットカラーのRGB565という形式がサポートされているようです。

幸い、画像をTGB565の文字列に変換してくれるサービスがありますので、ありがたく利用させてもらいます m(__)m

M5StickC PLUSのLCD画面サイズは135x240ですから、それ以下のサイズのビットマップ画像を用意しました。先ほどの、サイトで画像を変換します。すると写真、C言語のヘッダーとして画像データを出力してくれます(すばらしい!)。

画像をRGB565へ変換
画像をRGB565へ変換

さて、この出力されたコードをメモ帳などに貼り付け拡張子を.hにして保存します。Arduinoプロジェクトの.inoと同じディレクトリにeyes.hとして保存しました。

そして下記プログラムをsketchで保存し、M5StickC PLUSへアップロードします。

#include <M5StickCPlus.h>
#include "eyes.h"
 
void setup() {
  M5.begin();
  M5.Axp.ScreenBreath(12); // 画面の明るさ7〜12
  M5.Lcd.setRotation(3); // 画面を横向きにする
  M5.Lcd.fillScreen(WHITE); // 背景色
  M5.Lcd.setSwapBytes(false); // 色がおかしい場合に変更する
}
 
void loop() {
  M5.Lcd.startWrite();
  M5.Lcd.pushImage(0, 0, imgWidth, imgHeight, img);
  M5.Lcd.endWrite();
  delay(1000);
}

すると、ヘッダファイルの画像が表示されました!思ったより簡単に画像表示できてしまいました。画質も問題なくキレイに表示されています。

M5StickC PLUSに画像を表示
M5StickC PLUSに画像を表示

アニメーションGIFのような表現

画像表示ができたところで、今度は動かしたくなりました(笑)

ちょっとしたアニメーションGIFのようなパラパラ漫画を表現してみたいと思います。

こちらのような表情の違う画像を用意します。

複数の画像を用意
複数の画像を用意

それぞれの画像を、先ほどのサイトでRGB565に変換します。そして、eye.hファイルを一つ作り、残りの画像のconst unsigned short img[33750] PROGMEM = ...部分を追記します。ただしこの時img変数の名前が被らないようにimg0 img1 img2のように変更しています。

こちらにヘッダファイルを載せておきましたので、よかったら使ってみてください。

最後に、loop関数内で適当に画像を入れ替えて完成です。プログラム全体はこんな感じです。

#include <M5StickCPlus.h>
#include "eyes.h"
 
void setup() {
  M5.begin();
  M5.Axp.ScreenBreath(12); // 画面の明るさ7〜12
  M5.Lcd.setRotation(3); // 画面を横向きにする
  M5.Lcd.fillScreen(WHITE); // 背景色
  M5.Lcd.setSwapBytes(false); // 色がおかしい場合に変更する
}
 
void loop() {
  M5.Lcd.startWrite();
  M5.Lcd.pushImage(0, 0, imgWidth, imgHeight, img1);
  delay(2500);
  M5.Lcd.pushImage(0, 0, imgWidth, imgHeight, img0);
  delay(300);
  M5.Lcd.pushImage(0, 0, imgWidth, imgHeight, img1);
  delay(300);
  M5.Lcd.pushImage(0, 0, imgWidth, imgHeight, img0);
  delay(2500);  
  M5.Lcd.pushImage(0, 0, imgWidth, imgHeight, img2);
  delay(2000);
  M5.Lcd.endWrite();
  delay(1000);
}

上記プログラムをアップロードして実行すると、このような表情が変わるアニメーションができました!アイデア次第で色々と楽しいことができそうですね!

M5StickC PLUSで画像アニメーション
M5StickC PLUSで画像アニメーション

SPIFFS領域を使った方法

最後に、SPIFFS領域を使った方法について触れておきます。

SPIFFSとは、SPI Flash File Systemの略で、ESP32のフラッシュメモリの一部をストレージとして使うことができます。この領域を利用すれば、先ほど行ったようなヘッダファイルをいちいち用意せずとも画像をアップロードできるようになります。

しかしながら、M5StickC PLUSには画像を描画するdrawBmpFile関数などが用意されていません(M5Stackには用意されています)。そこでこちらのオープンソースからdrawBmpFile関数を自前する必要があります。

▼SPIFFSへファイルを書き込むやり方は、こちらの記事をご参考になさってください。

記事に関するご質問などがあればTwitterへお返事ください。
この記事で紹介した商品
M5Stackのオススメ参考書
M5Stack製品
M5StickCで使えるHat
関連記事