LoginSignup
11
12

More than 3 years have passed since last update.

@youtoy(Yosuke Toyota)inKDDI株式会社

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

Last updated at Posted at 2020-11-20

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

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

はじめに

事前に以下などの公式ツイートで予告されていて、リリースを楽しみにしていました。
そして今日の夜に Facebook や Twitter のタイムラインに、リリースされたとの情報が流れてきました。

まずは UIFlow で端末選択画面をチェック。
CoreInk が選択肢に増えてました。

UIFlow のブロックを見てみる

まずは、画面にいろいろと配置してみました。

こちらは画面に並べた要素と関係ないですが、イベント関連のブロック。

そして、配置された要素に関するブロックをチェック。
一番試してみたい、と思ったのは画像関連のブロックでした。

こちらは、デフォルトで「UI」の中に含まれる「画面」のブロック。

なぜかバッテリー関連のカテゴリが 2つある？

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

M5Burner で CoreInk にファームウェアを書き込もうとして Mac用のアプリを見てみたのですが、どうやら CoreInk用のメニューは出ていない様子。
Windows用がリリースされた、とかかな、と思い Windows機で見たら無事に使えそうでした。

そして、ファームウェアをダウンロードして、書き込みを試しました。

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

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

単純に画像ブロックのみを使うと、エラーメッセージが表示されたため、その時にメッセージに記載されていた画面ブロックを足してみました。
そうすると、無事に電子ペーパー上に画像を表示できました！

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

【追記1】 画像の 2値化の閾値を変える

Facebook で使っている写真でも試してみました。
なんともいえない感じの画像に（笑）

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

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

【追記2】 ハーフトーンにすることで見た目を改善

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

おわりに

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

【追記1】 その後

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

ボタンとスピーカーの組み合わせ。
（電子ペーパーの表示は、別のプログラムで表示したものが残っている形）

11
12
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
11
12