UIFlow と M5Stack CoreInk の組み合わせを早速試してみる

M5Stackシリーズの新デバイス、電子ペーパーを搭載した M5Stack CoreInk が、今日 UIFlow に対応しました。
そして早速チェックして試し、その過程をメモ的なものとして記事にしてみました。

たった 2つのブロックを使うだけで、画像を電子ペーパー上に表示できてしまった！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> で <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 。<br>電子ペーパーに簡単に画像を表示させられた！<br>（Twitterで使ってる画像）<br><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/oTqrTtVOzH">pic.twitter.com/oTqrTtVOzH</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329778288005287939?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## はじめに

事前に以下などの公式ツイートで予告されていて、リリースを楽しみにしていました。
そして今日の夜に Facebook や Twitter のタイムラインに、リリースされたとの情報が流れてきました。
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">UIFlow for CoreInk ing. This Friday. <a href="https://t.co/y9cOj3bbzL">pic.twitter.com/y9cOj3bbzL</a></p>&mdash; M5Stack (@M5Stack) <a href="https://twitter.com/M5Stack/status/1329022940105515014?ref_src=twsrc%5Etfw">November 18, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

まずは UIFlow で端末選択画面をチェック。
CoreInk が選択肢に増えてました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> に対応した <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 、早速チェックせねば！<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/TeL9MUlbto">pic.twitter.com/TeL9MUlbto</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329766794978942981?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## UIFlow のブロックを見てみる

まずは、画面にいろいろと配置してみました。
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> で <a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> を選んで、とりあえず画面にいろいろと並べてみた。<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/zRRrhksGHj">pic.twitter.com/zRRrhksGHj</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329767373977522176?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらは画面に並べた要素と関係ないですが、イベント関連のブロック。
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> のブロックをチェック中。<br>こちら、イベントのブロック。<a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/t52scRXUsx">pic.twitter.com/t52scRXUsx</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329767752123367424?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、配置された要素に関するブロックをチェック。
一番試してみたい、と思ったのは画像関連のブロックでした。
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> のUIの中、画像のブロック。<br>画像表示は試してみたいな。<a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/Czl9y1TS0E">pic.twitter.com/Czl9y1TS0E</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329768183440424968?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

こちらは、デフォルトで「UI」の中に含まれる「画面」のブロック。
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">いったん、画面にあれこれ配置していたものをクリアして、あらためて「UI」の中を見てみる。<br><br>デフォルトで入ってる「画面」の中のブロックをチェック。<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/zbdcyMc9AK">pic.twitter.com/zbdcyMc9AK</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329768860447195142?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

なぜかバッテリー関連のカテゴリが 2つある？
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">バッテリー と Battery がある！？<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/kwwben2EwL">pic.twitter.com/kwwben2EwL</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329769173669474304?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## UIFlow のファームウェアを書き込む

M5Burner で CoreInk にファームウェアを書き込もうとして Mac用のアプリを見てみたのですが、どうやら CoreInk用のメニューは出ていない様子。
Windows用がリリースされた、とかかな、と思い Windows機で見たら無事に使えそうでした。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">Windowsマシンにて。<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/g5OGRR6OFH">pic.twitter.com/g5OGRR6OFH</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329771715606429697?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、ファームウェアをダウンロードして、書き込みを試しました。
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> に <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> のファームの書き込み完了！<br><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/gWvhdFtsLC">pic.twitter.com/gWvhdFtsLC</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329775249680842755?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## UIFlow を利用した画像表示を試す

「画像表示を試したい！」と思って Twitter用に使っている画像をセットしてみました。

単純に画像ブロックのみを使うと、エラーメッセージが表示されたため、その時にメッセージに記載されていた画面ブロックを足してみました。
そうすると、無事に電子ペーパー上に画像を表示できました！
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> で <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 。<br>電子ペーパーに簡単に画像を表示させられた！<br>（Twitterで使ってる画像）<br><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/oTqrTtVOzH">pic.twitter.com/oTqrTtVOzH</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1329778288005287939?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ドキュメント等を見ないでとりあえず試したので、上記が正しいかは不明です。
Twitter で別の方のツイートを見ると、ブロックの順序を逆にしてたようでした。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">わかった、プログレッシブになってたからだ（GIMPでJPEGにエクスポートするときのワナだった）。カラーの画像でもよきに計らってくれそう？ <a href="https://twitter.com/hashtag/m5stack?src=hash&amp;ref_src=twsrc%5Etfw">#m5stack</a> <a href="https://twitter.com/hashtag/uiflow?src=hash&amp;ref_src=twsrc%5Etfw">#uiflow</a> <a href="https://twitter.com/hashtag/coreink?src=hash&amp;ref_src=twsrc%5Etfw">#coreink</a> <a href="https://t.co/zlFeSDn3z1">https://t.co/zlFeSDn3z1</a> <a href="https://t.co/odGTa4KPod">pic.twitter.com/odGTa4KPod</a></p>&mdash; さいとてつや (@saitotetsuya) <a href="https://twitter.com/saitotetsuya/status/1329775501997608965?ref_src=twsrc%5Etfw">November 20, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 【追記1】 画像の 2値化の閾値を変える
Facebook で使っている写真でも試してみました。
なんともいえない感じの画像に（笑）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">これはｗ<br>（あらかじめ、画像を良い感じに変換しておくと良さそうだな）<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/MOznO0nZjX">pic.twitter.com/MOznO0nZjX</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330035362627018752?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

Twitter コメントより、画像が 2値化される際の閾値を変えられる、という情報を得られたので試してみました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2値化の閾値を変えられるスライダーがあったのか！<a href="https://twitter.com/saitotetsuya?ref_src=twsrc%5Etfw">@saitotetsuya</a> さん、ありがとうございます。<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> ➕ <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/22Xie9Di30">pic.twitter.com/22Xie9Di30</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330037289800634368?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

写真は背景の色の関係で、閾値をいじっても厳しそうでしたが、その前に試していた Twitter のアイコンでやったものは、閾値を変えると輪郭などが良い感じに。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">2値化の閾値を変えると、元画像の人物部分と背景の色の差がはっきりしていたものは、輪郭をきっちり出せるようになったりしました。<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/3VYWbyGh7b">pic.twitter.com/3VYWbyGh7b</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330040337172140034?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### 【追記2】 ハーフトーンにすることで見た目を改善
写真を表示させようとした事例で、単純な2値化・閾値調整だと見た目があまり良くない感じになったもの、ハーフトーンの処理をした上で表示させることで、ずいぶん改善されました。
（この件、Qiita の記事にしてみました ⇒ [UIFlow と M5Stack CoreInk で画像表示をさせる際の事前の画像加工（ハーフトーンの利用） - Qiita](https://qiita.com/youtoy/items/e3cca6e405d1fe9c9109)）

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">GIMP を使って画像を調整して取り込んだら、見た目が大幅改善。<br>ハーフトーンのフィルターを使いました。<br><br>（余談ですが、入社して最初に配属された画像処理の研究グループで、先輩がこの辺の技術を活用する研究開発をしてたのを思い出した）<a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> <a href="https://t.co/ct82Fg9Jkq">https://t.co/ct82Fg9Jkq</a> <a href="https://t.co/OR23rA3km8">pic.twitter.com/OR23rA3km8</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330300404874285056?ref_src=twsrc%5Etfw">November 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## おわりに

冒頭にも書いたように、たった 2つのブロックを使うだけで、画像を電子ペーパー上に表示できてしまった！

## 【追記1】 その後
テキストの表示も試してみました。
「Set screen show」を置く位置は、表示させたい要素の設定などが終わった後、で良さそうでした。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> ➕ <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 。<br>文字表示もやってみた。<br><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/vTucjtSkQ9">pic.twitter.com/vTucjtSkQ9</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330019491925823488?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

ボタンとスピーカーの組み合わせ。
（電子ペーパーの表示は、別のプログラムで表示したものが残っている形）
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> で <a href="https://twitter.com/hashtag/UIFlow?src=hash&amp;ref_src=twsrc%5Etfw">#UIFlow</a> 。<br>電子ペーパーを使わないプログラムを試してみる。<br><br>ボタンの操作 3種類で、スピーカーから異なる音を出す、というシンプルなもの。<br><br> <a href="https://twitter.com/hashtag/M5Stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack</a> <a href="https://t.co/ysNw0JPYmV">pic.twitter.com/ysNw0JPYmV</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330033705214160898?ref_src=twsrc%5Etfw">November 21, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>