M5Stack CoreInk で画像表示をさせる際の事前の画像加工（ハーフトーンの利用）

M5Stackシリーズの新デバイス「M5Stack CoreInk」と UIFlow を組み合わせた話の記事を書いていました。

●UIFlow と M5Stack CoreInk の組み合わせを早速試してみる - Qiita
　https://qiita.com/youtoy/items/5a15411a861df282f960

その中で、写真を表示させてみた事例があったのですが、単純な 2値化だと表示が微妙な感じに。

<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>

閾値調整の機能を使っても、それは変わらず（動画の冒頭部分）。

<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>

それが、事前に画像処理を行うことで、以下のように見た目が大幅改善！

![図1.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/739c0d9f-e750-a942-ef7b-410ff2c66ad0.jpeg)

## GIMP を使った処理
上記の写真表示の結果を見たとき、画像処理をして画像特性を変えないと綺麗な表示はされないな、と思いました。
そして、自分が入社して最初に配属された画像処理の研究グループで、先輩が研究開発をしていた中で使っていたディザ・ハーフトーンといった技術が思い浮かびました。

「Adobe Photoshop ならフィルタ処理に入ってそうだな」というのと、「Adobe Photoshop にありそうなものは [GIMP](https://www.gimp.org/) にあるだろうな」ということを思い、軽くググってみると GIMP の事例の情報がヒットしました。
そこで、最新版の GIMP をインストールし、そこでハーフトーンの適用を試しました。
（フィルターの公式での名称は、日本語だと「[新聞印刷](https://docs.gimp.org/2.10/ja/plug-in-newsprint.html)」、英語だと「[Newsprint](https://docs.gimp.org/2.10/en/plug-in-newsprint.html)」となってます）

実際に試した際の画面キャプチャの内容を以下にのせてみます。

こちらは、GIMP 2.1 でのメニューの位置。
軽くググって見つけた情報と、少し表示が違っていました（バージョンが 1.x 系か 2．x 系かというのが違ってたのかも）。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">GIMP 2.1 だと、メニューのこの部分から選べるものです。 <a href="https://t.co/iDUwgQ5h5p">pic.twitter.com/iDUwgQ5h5p</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330303351406342144?ref_src=twsrc%5Etfw">November 22, 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://t.co/UghOGIEgkD">pic.twitter.com/UghOGIEgkD</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330303446633877504?ref_src=twsrc%5Etfw">November 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

その結果、以下のとおり、とりあえず版としては良い感じになりました。
画像を見てみると、もう少し改善の余地がありそうな気もします！

![M5Flowaa.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/50868/63282609-64fa-de9e-4267-45ed36f8ea60.jpeg)

### 【追記】 GIMP での出力時の注意など（実機での表示のために）
1点、GIMP から画像を書き出す際の注意点が1つ。
以下のツイートに書かれた通り、GIMP の標準出力の設定だと、CoreInk上で表示できない形式となります。

<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) 「＋詳細設定」の「＋」部分をクリックして詳細設定画面を表示
> 3) 「最適化」と「プログレッシブ」のチェックを外す
> 
> 引用： 「[GIMPを使ったJPEGベースラインに準拠 したJPEGファイルの作成例](https://os.mbed.com/users/dkato/code/GR-PEACH_Digital_Signage_display_shield/wiki/Homepage#gimp-jpeg-jpeg)」より

上記の設定に注意して書き出しを行うと、CoreInk上で表示できます。
<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">実機で表示させてみた。<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/uBFuVOgDk7">pic.twitter.com/uBFuVOgDk7</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1330321938225324032?ref_src=twsrc%5Etfw">November 22, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>