M5Stackシリーズの新デバイス「M5Stack CoreInk」と UIFlow を組み合わせた話の記事を書いていました。
●UIFlow と M5Stack CoreInk の組み合わせを早速試してみる - Qiita
https://qiita.com/youtoy/items/5a15411a861df282f960
その中で、写真を表示させてみた事例があったのですが、単純な 2値化だと表示が微妙な感じに。
これはｗ
— you (@youtoy) November 21, 2020
（あらかじめ、画像を良い感じに変換しておくと良さそうだな）#CoreInk #UIFlow #M5Stack pic.twitter.com/MOznO0nZjX
閾値調整の機能を使っても、それは変わらず（動画の冒頭部分）。
2値化の閾値を変えられるスライダーがあったのか！@saitotetsuya さん、ありがとうございます。#CoreInk ➕ #UIFlow
— you (@youtoy) November 21, 2020
#M5Stack pic.twitter.com/22Xie9Di30
それが、事前に画像処理を行うことで、以下のように見た目が大幅改善！
GIMP を使った処理
上記の写真表示の結果を見たとき、画像処理をして画像特性を変えないと綺麗な表示はされないな、と思いました。
そして、自分が入社して最初に配属された画像処理の研究グループで、先輩が研究開発をしていた中で使っていたディザ・ハーフトーンといった技術が思い浮かびました。
「Adobe Photoshop ならフィルタ処理に入ってそうだな」というのと、「Adobe Photoshop にありそうなものは GIMP にあるだろうな」ということを思い、軽くググってみると GIMP の事例の情報がヒットしました。
そこで、最新版の GIMP をインストールし、そこでハーフトーンの適用を試しました。
（フィルターの公式での名称は、日本語だと「新聞印刷」、英語だと「Newsprint」となってます）
実際に試した際の画面キャプチャの内容を以下にのせてみます。
こちらは、GIMP 2.1 でのメニューの位置。
軽くググって見つけた情報と、少し表示が違っていました（バージョンが 1.x 系か 2．x 系かというのが違ってたのかも）。
GIMP 2.1 だと、メニューのこの部分から選べるものです。 pic.twitter.com/iDUwgQ5h5p
— you (@youtoy) November 22, 2020
その後、プレビューが動的に変わるのでそれを見つつ設定をあれこれ変えてみて、以下の内容でいったん出力してみました。
設定した内容はこんな感じ。 pic.twitter.com/UghOGIEgkD
— you (@youtoy) November 22, 2020
その結果、以下のとおり、とりあえず版としては良い感じになりました。
画像を見てみると、もう少し改善の余地がありそうな気もします！
【追記】 GIMP での出力時の注意など（実機での表示のために）
1点、GIMP から画像を書き出す際の注意点が1つ。
以下のツイートに書かれた通り、GIMP の標準出力の設定だと、CoreInk上で表示できない形式となります。
わかった、プログレッシブになってたからだ（GIMPでJPEGにエクスポートするときのワナだった）。カラーの画像でもよきに計らってくれそう？ #m5stack #uiflow #coreink https://t.co/zlFeSDn3z1 pic.twitter.com/odGTa4KPod
— さいとてつや (@saitotetsuya) November 20, 2020
エクスポートの操作の途中で、以下を注意すれば良い感じです。
- 「エクスポート」をクリックし、エクスポートダイアログを表示
- 「＋詳細設定」の「＋」部分をクリックして詳細設定画面を表示
- 「最適化」と「プログレッシブ」のチェックを外す
上記の設定に注意して書き出しを行うと、CoreInk上で表示できます。
実機で表示させてみた。#M5Stack #CoreInk #UIFlow pic.twitter.com/uBFuVOgDk7
— you (@youtoy) November 22, 2020