はじめに

ずいぶん前に以下の記事に書いていて、また頻繁に活用している「UIFlow ＋電子ペーパーデバイスで作る名札」の話です。

●イベントで大活躍する電子ペーパー名札を作る！（M5Paper と UIFlow などで作成する手順） - Qiita
　https://qiita.com/youtoy/items/545cb81fd3188e63f8aa

上記の記事では、「元画像を PowerPoint で作成」し、それを「UIFlow を使って M5Paper に書き込む」ということをやっていました。

今回の記事の内容

今回の記事では、対象のデバイスを「M5Paper」「M5PaperS3」の 2種類とします。また、以前は UIFlow で書き込みをしていた部分を、「UIFlow 2.0」を使って行います。

なお、名札に使う画像の作成手順は、過去のやり方などを流用するなどして、既に用意されている前提で進めます。

今回使った画像

今回、この記事で使う画像の作成は、上記の記事の「PowerPoint を使う方法」で作成済みのものの 1つを用いました。具体的には、昨月のとあるイベント参加用に用意した以下の画像です（以下の写真の事例は、UIFlow を使って M5Paper に書き込んだものです）。

直近で書いた記事： M5PaperS3 ＋ PlatformIO を使った電子ペーパー名札作成

UIFlow ではなく PlatformIO を使った電子ペーパー名札作成の話になりますが、直近で M5PaperS3 を使った話の記事も書いています。よろしければ、そちらもご覧ください。

●イベントで大活躍する電子ペーパー名札を作る！【その2】： M5PaperS3 を「VS Code ＋ PlatformIO ＋ M5Unified」で扱う - Qiita
https://qiita.com/youtoy/items/904dd66d46a3ccd6048f

ファームウェアの書き込み

まずは、M5Burner で「M5Paper」と「M5PaperS3」のそれぞれに、UIFlow 2.0用のファームウェアを書き込みます。

M5Burner の左側メニューで「PAPER」を選んだ後、右側で「M5Paper」と「M5PaperS3」のそれぞれ用の UIFlow 2.0用ファームウェアが出てくるので、それを書き込みます。

ファームウェアの書き込み手順について

ここではファームウェアの書き込み手順の詳細（M5Burner自体の準備や、アカウント作成・ログインなどを含むもの）については省略しますが、それについては他の記事や以下の公式ドキュメントなどをご参照ください。

●PaperS3 ファーム書き込み・プログラム配信
　https://docs.m5stack.com/ja/uiflow2/m5papers3/program

M5PaperS3 のダウンロードモードについて

ファームウェアの書き込み関連で、1点だけ補足しておきます。それは、M5PaperS3 のダウンロードモードの話です。

M5PaperS3 へのファームウェアの書き込みの際、デバイスをダウンロードモードにする必要があるかもしれません。その場合、以下の方法で対応してください。

●PaperS3
　https://docs.m5stack.com/ja/core/PaperS3

【上記説明の抜粋】 USB ケーブルでデバイスをコンピュータに接続し、M5PaperS3 本体の電源ボタンを長押ししてください。背面のステータス LED が赤色に点滅した場合、デバイスはダウンロードモードに入っています。

UIFlow 2.0上での操作

あとは、UIFlow 2.0上での操作を進めていきます。

●UIFlow 2.0
https://uiflow2.m5stack.com/

M5PaperS3 で画像を書き込む

M5PaperS3 への画像書き込みを行います。

まずは UIFlow 2.0上で M5PaperS3用の新規プロジェクトを作成します。以下は、新規プロジェクトを作成した直後の画面です。

画像を配置する

画面上に画像を表示させるための設定を進めます。画面上で、以下をクリックします。

そうすると、以下の画面が表示されます。ここで画像の配置場所の設定や、表示する対象画像の選択をします。

まずは画像の配置に関する内容です。左にある「Image」をドラッグアンドドロップし、右のデバイスの画面の部分へ持っていきます。

その後、「Image」の左上の位置を決める X座標・Y座標を両方ともゼロにします（以下の緑枠部分）。さらに、X座標・Y座標を指定したボックスの下にある、「画像」アイコン（以下の下側にあるほうの緑矢印で示した部分）をクリックします。

PC上のファイルを選択する画面が出るので、PC上にある書き込み対象の画像を選びます。そうすると、以下のように画面上に画像が配置されました。

そして、右上にある「閉じる」ボタンを押して、この画面を閉じます。

そうすると、以下の画面に戻ります。先ほどの操作を進めたことで、左側に書き込み対象の画像が表示されていると思います。

画像をデバイスへ書き込む

とりあえずデバイスに画像を表示させるだけなら、この後の操作は、画像のデバイスへの書き込み操作を行うのみです。そのために、まずは画面上の右下の「Run」ボタンを押します。

その後、デバイスへの接続を許可するためのポップアップが出るので、M5PaperS3 に該当するものを選びます。そうすると Webターミナルが開くので、以下の赤矢印で示した「再生」ボタンのアイコンを押します。

そうすると以下の確認画面が出るので「Sync」ボタンを押します（※ デバイスにファイルの書き込みを行うかどうかの確認のようで、書き込みを行うための選択をします）。

その操作の後は、以下のような表示になり、デバイスへの画像の書き込みが行われます。

しばらく待つとデバイスへの書き込みが完了して、以下のようにデバイス上に画像が表示されます。

表示を維持するために電源を切る

自分の環境で上記を試した後、M5PaperS3 と PC を接続していた USBケーブルを抜いてしばらく時間が経過すると、画面の表示が消えてしまいました（※ 以下の画像の、左側のほう）。

何やら「画面の書きかえ時のような挙動になって、表示が消える」という現象が見られました。

これについて、最終的には「デバイスへの画像表示後に、USBケーブルを抜いて、デバイスの電源を切る操作を行う（M5PaperS3 の電源ボタンの 2度押しをする）」という対応をすることで、デバイス上の表示が維持されました。

ちなみに、直近で以下の記事を書いていた「M5PaperS3 と PlatformIO でのお試し」の際にも、似たような挙動が見られました（自分の環境・デバイス依存なのか、現状は詳細を調べられていません）。

●イベントで大活躍する電子ペーパー名札を作る！【その2】： M5PaperS3 を「VS Code ＋ PlatformIO ＋ M5Unified」で扱う - Qiita
https://qiita.com/youtoy/items/904dd66d46a3ccd6048f

コードを組んでダウンロードする

上記の表示が消える現象に対して、最終的には「デバイス上に画像が表示されている状態で、M5PaperS3 の電源を手動で切る」という対応にしましたが、その前に以下の内容を試していました（2通りのコードを試しました。）。

デバイス起動時に、デバイス内に保存された画像を表示させる、という処理のためのコードです。

Web用ターミナルでの以下の操作で、上記のコードをデバイスにダウンロードしておけば良いかと思ったのですが、こちらの方法は上記の問題の解決にはつながりませんでした。

表示させる画像の回転

上記のお試しの中で、片方は画像の回転の処理を入れていました。

これを適用すると表示方向が以下のようにかわり、持ち手のような部分が上側にくるので、首かけの名札で使う時にストラップなどを通せて便利です。

M5Paper で画像を書き込む

先ほどの M5PaperS3 の場合と同様の手順で、今度は M5Paper に画像を書き込みます。手順は M5PaperS3 と同じなので、ざっくりとした内容のみ書きます。

大まかな流れ

UIFlow 2.0上で M5Paper用の新規プロジェクトを作成します。

そして、以下のアイコンをクリックします。

「Image」の配置と、X座標・Y座標の指定を行ってから、画像の指定を行います。

そして、指定した画像が表示されたのを確認して、この画面を閉じます。

あとは、「Run」ボタンを押して、デバイスへの接続を許可する操作を行い、Web用ターミナルで「再生」ボタンを押します。

画像の書き込みが始まり、しばらく待つと画像の書き込みが完了します。以下は、書き込みが完了した後のデバイスの状態を示した写真です（※ 以下の写真の右側のほう）。

無事、デバイス上での画像表示を行うことができました。

デバイス上に表示された内容の維持

M5PaperS3 のほうの手順の中で、画像を書き込んだ後にしばらく時間が経過すると、表示内容が消えるという話を書いていました。

一方、M5Paper のほうは、そのような現象は見られませんでした。

ボタン操作で画像を切替えるコードを組んでダウンロードする

M5Paper を使った電子ペーパー名札作りの手順は上記で完了ですが、「ボタン操作で画像を切替えるコードを組んでダウンロードする」というのも試しました。

具体的には、以下の内容です。

例えば 2種類の画像を切り替えたいという場合は、上記のコードをデバイスにダウンロードしておいて、切り替えをしたい場合に給電とボタンでの操作を行うことで、手動での切り替えを実現できます。

その他

デバイスへアップロードされた画像の確認

「デバイスへアップロードされた画像の情報を、UIFlow 2.0上で確認する」というのも試したので、それも少し情報を残しておきます（以下のファイル管理の仕組みを用います）。

●UiFlow2 ファイル管理
　https://docs.m5stack.com/ja/uiflow2/projects/file_manager

画像ファイルの確認

以下が簡単なメモです。

UIFlow 2.0 の Web用ターミナルで、以下の「File」ボタンを押します。

その後の画面で、「flash/res/img」のファルダへと移動します。

そうすると、ファイル一覧の中に、今回用いた「kariya.jpg」という画像ファイルが表示されているのを確認できました。