はじめに
ずいぶん前に以下の記事に書いていて、また頻繁に活用している「電子ペーパーデバイスで作る名札」の話です。
●イベントで大活躍する電子ペーパー名札を作る！（M5Paper と UIFlow などで作成する手順） - Qiita
https://qiita.com/youtoy/items/545cb81fd3188e63f8aa
上記の記事では、デバイスが M5Paper で開発環境が UIFlow なのですが、今回の組み合わせは以下となります。
- デバイス： M5PaperS3
- 開発環境： VS Code ＋ PlatformIO ＋ M5Unified の組み合わせ
ちなみに、自分が持っている M5PaperS3 は、発売された日に買った初期バージョンになります。
参考情報
今回の内容を進めるにあたり、以下の 3つのページを参考にしました。
- PaperS3（M5Stack の公式ページ）
- M5Paper名刺の作り方[M5Unified版] — スイッチサイエンス
- M5PaperS3 と VS Code + PlatformIO で始める名札ソリューション - Qiita
電子ペーパー名札を作った流れなど
それでは、今回の電子ペーパー名札作成の流れをざっくりと書いていきます。
今回の記事では、「VS Code での PlatformIO の使い方」は説明の対象外としています。
画像ファイルからヘッダファイルを作る
今回の「名札画像の準備方法、コードの実装内容」は、上記の参考情報 2つ目のスイッチサイエンスさんの記事を参考にしました。
画像のヘッダファイル化について、参照元では以下のように説明されています。
自分は Mac で今回の内容を進めたので、上記のコマンドを使いました。
xxd -i namecard.jpg > namecard.h
今回用いた元画像
なお、元記事は「横向きの PNG画像」を使っていましたが、自分が今回用いた画像は「縦向きの JPEG画像」になります。具体的には、以下の内容の画像ファイルを「namecard.jpg」という名前で用いました。
この画像は、先月、以下のようにイベント用に準備していたものです。この画像の作成方法は、「過去の記事で書いていた PowerPoint を用いた方法」になります。
コードなど
ここから、今回用いたコードなどについて、情報を掲載します。
main.cpp
まずは、main.cpp です。
以下は、実装の元にした参考情報 2つ目のスイッチサイエンスさんの記事で書かれていたコードです。
以下が自分が用いたコードです。 M5.Lcd.setRotation(2) の部分で指定している「表示時の回転角度（※ 180度回転させています）以外」は、参照元と内容は同じです。
#include <epdiy.h>
#include <M5Unified.h>
#include "namecard.h"
void setup()
{
auto cfg = M5.config();
M5.begin(cfg);
// 画像表示を180°回転させる (縦向き 540x960)
M5.Lcd.setRotation(2);
M5.Lcd.startWrite();
M5.Lcd.drawJpg(namecard_jpg, sizeof(namecard_jpg), 0, 0);
M5.Lcd.endWrite();
}
void loop()
{
// 一枚絵を表示するだけなので空
}
platformio.ini
次は、platformio.ini です。
大まかな内容は、上で参考情報 1つ目として掲載していた、M5Stack の公式ページの情報を元にしています。具体的には、以下の内容です。
ただし、そのまま上記を用いると、現時点ではエラーが発生しました。その解決法が書かれていたのが、上で参考情報 3つ目として掲載していた Qiita の記事の情報です。具体的には以下の部分です。
M5Stack公式の情報で、 platform = espressif32 と書かれていた部分を、この Qiita の記事の内容にしたがって、特定のバージョン固定とするとエラーを解消できました。@6.10.0 を付け足して、 platform = espressif32@6.10.0 という内容にしたのですが、それを含む iniファイル全体は以下のとおりです。
[env:PaperS3]
; espressif32@6.10.0 (ESP-IDF 4系) に
platform = espressif32@6.10.0
board = esp32-s3-devkitm-1
framework = arduino
board_build.partitions = default_16MB.csv
board_upload.flash_size = 16MB
board_upload.maximum_size = 16777216
board_build.arduino.memory_type = qio_opi
build_flags =
-DESP32S3
-DBOARD_HAS_PSRAM
-DCORE_DEBUG_LEVEL=5
-DARDUINO_USB_CDC_ON_BOOT=1
-DARDUINO_USB_MODE=1
lib_deps =
epdiy=https://github.com/vroland/epdiy.git#d84d26ebebd780c4c9d4218d76fbe2727ee42b47
M5Unified=https://github.com/m5stack/M5Unified
namecard.h
あとは、上記の main.cpp の冒頭で読み込んでいるヘッダファイル「namecard.h」についての補足情報です。上で「xxdコマンドを用いて、JPEGファイルを元に作成」と書いていたものの、出力ファイルです。
内容は出力されたものを、そのまま用いています。参考として、ファイルの冒頭部分と末尾の部分の周辺を、以下に掲載しておきます。
unsigned char namecard_jpg[] = {
0xff, 0xd8, 0xff, 0xe1, 0x0f, 0xfe, 0x45, 0x78, 0x69, 0x66, 0x00, 0x00,
・・・
0x58, 0xf0, 0xc3, 0x1c, 0xd0, 0x07, 0xff, 0xd9
};
unsigned int namecard_jpg_len = 48968;
その他
表示が消える現象
上記の手順で、M5PaperS3 への画像表示はできたのですが、画像などの書き込みをした後、しばらく時間がたつと表示が以下のようになってしまっていました。
自分の環境やデバイスのバージョンに依存して発生したものなのかなど、詳細は今のところ分かってないのですが、とりあえず上記を発生させない対処をした話もメモで書いておきます。
（しばらく時間がたった後に、画面を書きかえる時のような挙動が見られて、このような状態になった感じでした）
上記の対応として、「デバイスへの画像などの書き込みを終えた後、電源ボタンの 2度押しをして、デバイスの電源をすぐに切る」というのを試したところ、表示内容が維持されました。
他に関連して試したいこと
以下は、別途、電子ペーパー名札関連で試したいことのメモです。
M5Paper を「VS Code ＋ PlatformIO ＋ M5Unified」で扱う
今回、M5PaperS3 を「VS Code ＋ PlatformIO ＋ M5Unified」で電子ペーパー名札にしましたが、自分が UIFlow との組み合わせでよく使っている M5Paper でも同様のことを試せればと思います。
●Paper
https://docs.m5stack.com/ja/core/m5paper
M5Paper・M5PaperS3 を UIFlow 2.0 で扱った流れの記事化
また、既にある程度は試していて、そして記事の下書きもけっこう書いた状態ではあるのですが、自分が過去に UIFlow を使ってやっていた電子ペーパー名札の作成手順を、UIFlow 2.0 で行った場合の手順の記事化もできればと思います。
ちなみに、以下のように M5Paper・M5PaperS3 のどちらも、想定通りの表示ができています。
（そしてこの場合も、上で書いていた「ある程度の時間が経過した後に、M5PaperS3 の表示が消える」という現象が起こっていたりしました）
【追記】 M5Paper・M5PaperS3 を UIFlow 2.0 で扱った流れの記事を書きました
M5Paper・M5PaperS3 を UIFlow 2.0 で扱った流れの手順を、以下の記事を書きました。
●イベントで大活躍する電子ペーパー名札を「M5Paper」「M5PaperS3」と UIFlow 2.0 で作る！（書き込み部分のみ） - Qiita
https://qiita.com/youtoy/items/6079c04ca5b759e63e5b