M5Stack CoreInk のサンプルを動かすまでの手順のメモ

この記事は、日本ではスイッチサイエンスさんから販売されている M5Stack CoreInk を、とりあえず試した過程をメモとして書いたものです。

●M5Stack CoreInk 開発キット（1.5インチ Einkディスプレイ） - スイッチサイエンス
　https://www.switch-science.com/catalog/6735/

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr"><a href="https://twitter.com/ssci?ref_src=twsrc%5Etfw">@ssci</a> さんからのお届けもの、<a href="https://twitter.com/hashtag/M5Stack_CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack_CoreInk</a> ！<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://t.co/9IzJkRS7oa">pic.twitter.com/9IzJkRS7oa</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327440311019130880?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 参照先の情報を探す

まずは下記の公式の GitHub のページを参照。

●m5stack/M5-CoreInk: M5Stack CoreInk Arduino Library
　https://github.com/m5stack/M5-CoreInk

その中に以下のクイックスタートがあったので、それを見つつ進めました。

●M5Stack Docs - The reference docs for M5Stack products.
　http://docs.m5stack.com/#/en/quick_start/coreink/quick_start_arduino

## 公式のクイックスタートを試していく

### ドライバ・開発環境の導入 

[公式のクイックスタート](http://docs.m5stack.com/#/en/quick_start/coreink/quick_start_arduino)の最初は「USB Driver」について書かれているのですが、自分は過去の別デバイスの開発時に導入済みだったので、ここはスキップ。Arduino-IDE の導入についても同様の理由でスキップ。

### ボードマネージャー関連

次のステップは「M5Stack Boards Manager」の部分。
ボードマネージャーのURLとして追加する
`https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json`
という部分は、以前の M5Stack関連の開発時に追加していたものと違うような気がして、この手順は進めて行きました。

URL追加後は、ボードマネージャー上で「M5Stack」で検索をして、出てきたものをインストール。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">あれ？前はボードマネージャで検索してたのって、ESP32とかじゃなかったっけ？<br><br>MQTTとかUnit制御を使うやつとかのUIFlowで大丈夫なものは、UIFlowでやってたので、けっこう前から変わってたりしたのかな。<br><br>ボードマネージャー絡みで追加するURLも変わってる？<a href="https://t.co/wRi362guJp">https://t.co/wRi362guJp</a> <a href="https://t.co/bzerQExw0n">https://t.co/bzerQExw0n</a> <a href="https://t.co/7BnoBQ24dy">pic.twitter.com/7BnoBQ24dy</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327745286421168128?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そうすると、ボードの選択の中で、「M5Stack-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/M5Stack_CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack_CoreInk</a> が並び、その下には <a href="https://twitter.com/hashtag/M5Stack_Paper?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack_Paper</a> が既に入っている！<a href="https://twitter.com/hashtag/CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#CoreInk</a> <a href="https://t.co/9MoGaJwuBr">pic.twitter.com/9MoGaJwuBr</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327747074796834817?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

上記のボードマネージャーのURL追加の件、どうも以下の記事を見ると、M5Stack Core2 の開発でも、以前と異なる（今回と同じ）URL を追加する形のようです。
そういえば、M5Stack Core2 は、タッチスクリーンやボタン・MQTT を利用する開発をやったけど、全部 UIFlow でやったんだった・・・。

●Arduino IDEの設定 (M5Stackシリーズ) - Qiita
　https://qiita.com/penguinprogrammer/items/774d4b719464e41cdcf3

### ライブラリ関連
ライブラリを検索する画面で「M5Stack-CoreInk」で検索し、出てきたものをインストールします。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Arduino IDE での手順を引き続き。ライブラリマネージャーで、M5Stack-CoreInk を検索して、ライブラリをインストール。 <a href="https://t.co/aAew3MVMTP">pic.twitter.com/aAew3MVMTP</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327747657171918849?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

そして、メニューから「スケッチ例」をたどると、「M5-CoreInk」という項目ができており、いくつかのサンプルを選択可能になっています。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">スケッチサンプルをとりあえず書き込んでみよう。 <a href="https://t.co/MyN6dLMGHI">pic.twitter.com/MyN6dLMGHI</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327748274611052544?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

### スケッチの書き込みと動作確認

今回は、サンプルの中で一番上にある「Button」を書き込んで試してみました。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">Buttonのサンプルにしてみようかな。<br>とりあえず、ざっくりソースコードを読んでみる。 <a href="https://t.co/otpWmlpBwO">pic.twitter.com/otpWmlpBwO</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327750048722034693?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

サンプルとして出てくるソースコードは以下のとおりです。

```C
#include "M5CoreInk.h"

Ink_Sprite InkPageSprite(&M5.M5Ink);

void ButtonTest(char* str)
{
    InkPageSprite.clear();
    InkPageSprite.drawString(35,59,str);
    InkPageSprite.pushSprite();
    delay(2000);
}

void setup() {

    M5.begin();
    if( !M5.M5Ink.isInit())
    {
        Serial.printf("Ink Init faild");
    }
    M5.M5Ink.clear();
    delay(1000);
    //creat ink refresh Sprite
    if( InkPageSprite.creatSprite(0,0,200,200,true) != 0 )
    {
        Serial.printf("Ink Sprite creat faild");
    }
}

void loop() {
    if( M5.BtnUP.wasPressed()) ButtonTest("Btn UP Pressed");
    if( M5.BtnDOWN.wasPressed()) ButtonTest("Btn DOWN Pressed");
    if( M5.BtnMID.wasPressed()) ButtonTest("Btn MID Pressed");
    if( M5.BtnEXT.wasPressed()) ButtonTest("Btn EXT Pressed");
    if( M5.BtnPWR.wasPressed()){
        ButtonTest("Btn PWR Pressed");
        M5.PowerDown();
    }
    M5.update();
}
```

そして、これを書き込んで、動かしてみた様子が以下です。
「側面のボタンを押すと、真っ新な画面に文字が表示される」という挙動が確認できました。

<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">今朝は、公式のクイックスタートを見つつ、新デバイス <a href="https://twitter.com/hashtag/M5Stack_CoreInk?src=hash&amp;ref_src=twsrc%5Etfw">#M5Stack_CoreInk</a> を積んでしまわないよう、触ってみはじめた。<br><br>来週の <a href="https://twitter.com/hashtag/IoTLT?src=hash&amp;ref_src=twsrc%5Etfw">#IoTLT</a> の LT登壇ネタにできれば、というのがあったりするんだけど、<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://t.co/P09kBjC4Fu">pic.twitter.com/P09kBjC4Fu</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327753523602231296?ref_src=twsrc%5Etfw">November 14, 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://t.co/bICxhgnSRf">https://t.co/bICxhgnSRf</a> <a href="https://t.co/M7fyGCcQMK">pic.twitter.com/M7fyGCcQMK</a></p>&mdash; you (@youtoy) <a href="https://twitter.com/youtoy/status/1327751198024167424?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記】 気になる情報
[Twitter で「CoreInk」というキーワードを検索](https://twitter.com/search?q=coreink&src=recent_search_click&f=live)してみて、気になったツイートをピックアップ。

<blockquote class="twitter-tweet" data-conversation="none"><p lang="ja" dir="ltr">CoreInk 向けに画像を変換するやつを置きました(win10/osx/linuxバイナリがあります) <a href="https://t.co/Mar2zpoVja">https://t.co/Mar2zpoVja</a></p>&mdash; ミクミンP/Kazuhiro Sasao (@ksasao) <a href="https://twitter.com/ksasao/status/1327640113921212416?ref_src=twsrc%5Etfw">November 14, 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">M5Stack CoreInk<br>97x97(ver20)のQR Code なら、ちゃんと表示できそう。<a href="https://twitter.com/hashtag/M5stack?src=hash&amp;ref_src=twsrc%5Etfw">#M5stack</a> <a href="https://t.co/HffnNsAGxT">https://t.co/HffnNsAGxT</a> <a href="https://t.co/jtxIqm1GZv">pic.twitter.com/jtxIqm1GZv</a></p>&mdash; Komikoni@LOVE_THE_WORLD (@komikoni) <a href="https://twitter.com/komikoni/status/1327658475493572613?ref_src=twsrc%5Etfw">November 14, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記】 気になる情報2： UIFlow が準備されてる！
これは楽しみ！

<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Preview of CoreInk UIFlow. Next week!!! <a href="https://t.co/vICZQjcQdB">pic.twitter.com/vICZQjcQdB</a></p>&mdash; M5Stack (@M5Stack) <a href="https://twitter.com/M5Stack/status/1327185634918686721?ref_src=twsrc%5Etfw">November 13, 2020</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

## 【追記】 UIFlow がリリースされ、早速試した！
ブロック2つを使うだけで画像表示ができてしまった！
お試しした過程は、Qiitaの記事に書いたりもしてみました。

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

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