昨年、次のような記事を投稿しました。M5Stack 社製の M5Paper V1.1 や M5PaperS3 を名札として使うために、SD カードに入れた画像を表示するだけの小さなアプリを作った話です。今回はその続きです。

その記事以降、M5Stack は新たに電子ペーパー端末 Color と Mono を発売しました。そこで、このコードをベースに改造して新機種に対応します。また、以前は別に開発していた V1.1 向けも、このコードに集約しました。

今回は、M5Paper シリーズの 4 機種 v1.1 / S3 / Color / Mono 向けに SD カードから画像を読み込んで表示するアプリを作成します。さらに、スマホから画像を送れるようにしました。

作ったものは GitHub に置いてあります。この記事では要点だけを書くので、詳細はそちらをご確認ください。

対応機種

機種	画面	操作
M5Paper v1.1	540 × 960 / モノクロ	タッチ・ボタン
M5PaperS3	540 × 960 / モノクロ	タッチのみ
M5PaperColor	400 × 600 / カラー	ボタンのみ
M5PaperMono	480 × 800 / モノクロ	タッチ・ボタン

同じ M5Stack の電子ペーパーのでも、解像度、対応色や操作方法は違います。M5PaperS3 は筐体上部にフックがあるので、掛けると上下が逆になります。M5PaperColor にはタッチパネルがありません。

機種ごとの分岐を書かない

4 機種もあると、大変です。それらの違いを分岐で書くと、種類が増えたときに手が付けられなくなります。そこで、それらの差分は DeviceProfile という 1 つの構造体に集めました。

struct DeviceProfile {
    const char *name;
    int width, height;
    DeviceRotation imageRotation;   // S3 だけ 180 度
    FitRotation imageFitRotation;   // 画面に合わせるときの回す向き
    bool hasTouch;
    ButtonRole buttonA, buttonB, buttonC;
    DevicePalette palette;
    bool needsExtraClear;           // 残像が残る機種
    bool slowRefresh;               // 更新が遅い機種
    bool hasFrontlight;
    bool hasNfc;
    int menuTextSize;
};

あとは実行時に M5.getBoard() から情報を取得するだけです。新しい機種が出たら、この構造体のデータを増やせば済みます。

電子ペーパーの描画回数

今回初めてカラーの電子ペーパーを触ったのですが、これに苦戦しました。画面の描画指示を行うと、システム側が何度も書き換えてから、目的の画面が描画されます。モノクロではあまり気になりませんでしたが、いかに描画を抑えるか苦労しました。

// これだと 1 行ごとに全面更新される
M5.Display.fillScreen(TFT_WHITE);
drawHeader();
menu.render();

// まとめて 1 回にする
M5.Display.startWrite();
M5.Display.fillScreen(TFT_WHITE);
drawHeader();
menu.render();
M5.Display.endWrite();

スマホから画像を送る

このアプリは SD カードに保存された画像を読み込んで表示しています。事前に準備しておけば問題ないですが、いざ現場で画像を書き換えたいとなったときに不便でした。そこで、スマホから画像を送信して表示する仕組みを追加しました。

WiFi（全機種）

本体をアクセスポイントにして、画面に QR コードを出します。スマホのカメラでその QR コードを読むと接続され、キャプティブポータルでアップロード画面が自動的に開きます。

NFC（M5PaperMono のみ）

M5PaperMono には NFC のチップ（ST25R3916）が載っています。その NFC タグに対して、スマホから画像データを渡します。

この実装はどうするか悩んでいたのですが、ちょうど同様な機能を開発された方がいたので、参考にさせていただきました。ありがとうございました。

NFC 用の送信スマホアプリ

NFC で送る側はブラウザでは作れませんでした。iOS と Android ともに、今回の送信規格にあったアプリが要ります。そこで、Expo（React Native）で作りました。app/ に置いてあります。

Android の APK は誰でも入れられるので、GitHub Release に野良アプリを置いています。iOS は端末の UDID 登録が要るため置いていません。

組み込みアプリの配布を改善した

今までは、単一の機種のみを対象にしていたので、開発時にケーブル接続してビルドする。動作確認して問題なければ、それをリリース版としていました。今回は対象機種が増えたのと、スマホ連携を搭載したので私以外でも利用しやすくなったのもあり、インストールを簡単にできるようにしました。

インストーラのページは ESP Web Tools を使っています。パソコンの Chrome か Edge で開いて USB で繋げば、簡単に書き込めます。

まとめ

今回改善した名札ソリューションは、改善したいと思いつつ、ちょっと忙しくまったく着手できていませんでした。しかし、新機種が出そろったのと、近々イベントがあり、この「名札」が必要になる！となり、重い腰上げで改善しました。

そして、新機種を含めて、１つのコードで複数機種に対応できた。スマホ連携という便利な機能が搭載できたので、大変満足しております。

M5Paper シリーズをお持ちの方がいれば、ぜひご利用ください。