Help us understand the problem. What is going on with this article?

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

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」を置く位置は、表示させたい要素の設定などが終わった後、で良さそうでした。

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

youtoy
プライベートでの活動で、ビジュアルプログラミング・IoT・ロボットトイを扱う技術コミュニティを単独・共同で主催したり、登壇をしたりしています。Qiitaの記事で書いていることは、このプライベートでの活動に関することです。また、普段は通信会社の研究所で働いていて、ガジェットが大好きです。
http://yo-to.hatenablog.com/
kddi
KDDIは、通信を中心に周辺ビジネスを拡大する「通信とライフデザインの融合」をより一層推進し、国内はもとよりグローバルにおいても、5G/IoT時代における新たな価値創造を実現し、お客さまの期待を超える新たな体験価値の提供を追求してまいります。
http://www.kddi.com
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away