M5stack(M5GO)とM5UI.Flowであそんでみた

この記事は[リンク情報システム](https://www.lis.co.jp/)が主催するイベント「[Tech Connect! Autumn](https://qiita.com/dgkz/items/4c3a449f3168d6c787cf)」のリレー記事です。
「Tech Connect! Autumn」は engineer.hanzomon のグループメンバによってリレーされます。
（リンク情報システムのFacebookは[こちらから](https://ja-jp.facebook.com/lis.co.jp/)）

# はじめに
11日目担当のmashed-pです。普段はVRであそんでいます。

M5stackの存在とお手軽さ、楽しさを多くの方に知ってもらうことを目的としました。
筆者自身初心者のため、初心者向けです。

# きっかけ
TwitterでもホットなM5stackというLCDディスプレイ付きのマイコンを買ってみました。ナウい！

![20180917_225107.jpg](https://qiita-image-store.s3.amazonaws.com/0/284836/27829182-e8ae-bff7-9551-cbaae7398304.jpeg)


しかし、マイコンって初めて買ったし、M5Cloudの環境構築までしたけどあまり触れていない......
という状態でした。

そんな中、つい最近(2018/9/2)M5stack公式から面白そうなツイートがありました。
↓公式のツイート
<blockquote class="twitter-tweet" lang="ja"><p>Twitter</p>&mdash;<a href="https://twitter.com/M5stack/status/1036229849369567233"></a></blockquote>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>


M5stackのWEB IDEで、M5stackで実行したときにどうなるのかシミュレータで確認できるみたいですね。
これは嬉しい！

やり方も載っています。1ツイートで収まるぐらい簡単ということですね。
上記ツイートの通り環境構築してみましょう。

※「M5 UI-Flow」という名称みたいですが、
　　WEB IDEでは「M5UI.Flow」と表記されているため今回は「M5UI.Flow」で統一します。

# 環境
 * M5stack本体 <br> 今回はM5GOにしました。GrayやFireでもOKです。<br>スイッチサイエンスやAliExpress等で購入できます。
 * Windows 10のPC<br> Macでも可能ですが、本記事とはセットアップ方法が異なります。
 * Wi-Fi環境
 * USB Type-Cケーブル
 * スマートフォンやタブレット
 * CP210Xドライバとファームウェア書き込み用のM5Burner<br>　http://m5stack.com/<br>　2つとも公式の「Download」からダウンロードできます。<br>
<img width="800" src="https://qiita-image-store.s3.amazonaws.com/0/284836/b265b976-1532-5b1e-5cc2-08edaf40e782.png">


# M5stackのファームウェアを書き換えよう
### ドライバのインストール
まずはCP210Xドライバをインストールしましょう。

###  M5Burnerでファームウェアを書き込む
M5Burnerの登場でM5stackへのファームウェア書き込みがとても楽になりました！
執筆時点ではv0.0.8です。

M5stackとPCをUSBケーブルで接続します。
M5stackは電源供給をすると自動で電源が入ります

M5Burnerを起動！
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/78be611e-a6c1-9cca-4c46-9b92f41a742f.png" >



M5Burnerには[M5stackのGitHub](https://github.com/m5stack)で公開されているファームウェアがまとめて入っています。



<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/723c8d1f-bebe-b00e-ea0b-ceb6455fc8cb.png" >


上記の画像を参考に設定して下さい。

①M5stackが接続されているポートを選択します。
 環境によってCOM3やCOM9など数字が違うので、デバイスマネージャでチェックして下さい。

②Baudは921600でOKです。

③今回はM5UI.Flowを使用するので、M5UI.Flow用のファームウェアの最新版を選択しましょう。
 執筆時はv0.6です。


では、ファームウェアを書き込みましょう。
「Burn」です。
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/16019dcc-ef71-ef63-0d4b-5aad3d9880a8.png" >


できましたか？
書き込み中「ブツッ ブツッ」と音が鳴りますが大丈夫です。

ここまで完了したら電源を入れてみましょう。

# M5stackとM5UI.Flowのセットアップをしよう

###Wi-Fiの設定
ファームウェアを書き込んでM5stackを起動すると、画面が表示されます。
ここですかさず「SETUP」を選択しましょう！右のボタンです。
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/3a343f25-e80f-0509-cb69-d5b2a6a6dab4.jpeg">

......きっと間に合わなかったと思います。
サンプルプログラムが起動されてしまったら、電源ボタンを押して再起動できます。

スマートフォンでM5stackとWi-Fi接続します。
M5stackのディスプレイにSSIDとIPアドレスが表示されていますね。
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/f94eee8c-8bb8-d6ea-c7da-a5cf292f8ea0.jpeg">

スマートフォンのWi-Fi設定でM5stackと接続します。
接続先の候補に「M5Stack-○○○○」が表示されるので、一致するものを選んであげましょう。
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/b9e83e3a-6cbc-ea7d-95fe-b3fd2bc5f164.png">

ここで「接続が不安定です」というようなメッセージが出るかもしれませんが、
問題ありません。続けてOKです。

スマートフォンの適当なWEBブラウザで192.168.4.1にアクセスしましょう。
Wi-Fiのセットアップ画面が表示されるので、
ここでWi-Fiの接続先とパスワードを入力してください
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/2d52aa9c-0282-8be8-ab5c-87f467fcec94.png">


接続に成功しましたか？
<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/4d8774c6-dd1c-7e47-f87c-5bd5b4e44628.png">
↑こんな感じになっていれば上手くいってます :D

###M5UI.Flowの設定
M5stackの起動画面で本体前面、左のボタン「UPLOAD」を押すとM5UI.Flowに繋ぎにいきます。

PCやスマートフォンのWEBブラウザで専用のWEB IDE「M5UI.Flow」にアクセスします。

http://flow.m5stack.com/

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/f87326bf-3023-bb34-35fd-822f0ee481c0.jpeg">

M5stackの画面に表示されているQRコードを読み取ってもアクセスできます。
QRコードの左にはM5UI.Flowと接続するためのAPIキーが表示されているので、
M5UI.Flowのほうにキーを入力してあげましょう。

<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/284836/e951cbcf-3b73-e593-b917-acb359aa2e21.png" >

入力したらFinish！


<img width="600" src="https://qiita-image-store.s3.amazonaws.com/0/284836/b4e17f7a-689b-c1f8-cda1-16a52dcd44c6.png" >

接続状態が「Online」になっていますね。
これで開発環境が整いました！やった！:clap::clap_tone1::clap_tone2::clap_tone3:


# あそんでみよう
さっそくあそんでみましょう

### UIをいじってみよう
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/fd36ad2e-7e2d-a8ec-9c19-8265dd257956.png" >

M5UI.Flowの画面左上にパーツが並んでいるので、追加してみます。
好きなパーツを画面にドラッグ＆ドロップです。

ひょい　ひょい　ひょい　ひょい

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/9bdbe15b-f86f-152b-e57b-f7ef6fc1f828.png" >

追加してみました。
では実行してみましょう。

実行ボタンを押します。

ポチ:dog:

<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/284836/02e60239-a8a0-0bf0-0f97-b27e8c25aa81.png" >

M5stackの画面を見てみましょう。
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/83e081ae-9df7-a08f-a821-6cb21922f1a1.jpeg" >

やった:raised_hands_tone2:
プレビューの通りに出ましたね！

もう少しあそんでみましょう。
先ほど追加した各コンポーネントをクリックすると、パラメータを弄ることが出来ます。
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/1ce90d96-e548-f31e-038c-ca454d571a50.png">
サイズ、色、テキスト......etc

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/09a7755c-824a-7b07-2f83-ed9953dd42b8.png" >

実行してみましょう。

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/6e7c9052-be6f-4c54-abcf-273f7d0afeb7.jpeg" >
M5UI.Flowの画面とはちょっと違うみたいですが、変わりました:v_tone1:


次はブロックエディタです。

### ブロックエディタをさわってみよう
M5UI.Flowではブロックエディタで気軽にプログラムを作成できます。
画面上部の「Blockly」を選択するとブロックエディタの画面になります。
※デフォルトでBlocklyが表示されているハズなので、その場合は操作しなくても大丈夫です。

![block_0.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/e12ad35c-593d-2fdd-c058-971a22e72008.png)


うーん:thinking:
色々出来るようですね。どうしようか......

カテゴリの中に「Emoji」というものがあるので、今回はこれであそんでみます。
Emojiは7×7のドットマトリクスみたいなものです。

![block_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/513a98f3-268e-bf95-53de-3c558d0170d6.png)


画像のほうが分かりやすいので進めていきます。
「Set emoji map in」ブロックをD&Dで「Setup」ブロックにくっつけます。

![block_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/fbc0e82a-4cba-f637-a247-3484995b45dd.png)


そうしたら、Emojiで光らせたい部分を選んでクリックしましょう。

ポチポチポチポチ......

![block_3.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/736991f1-a1fa-65c9-9d41-d8da4d87b67c.png)


実行してみましょう。

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/c8410398-8830-63c9-cd30-890b7f24b8df.jpeg">

出ました。
しかし、この状態だと単色です。ちょっとさみしいですね。
もう少しカラフルにしてみましょう。

![block_4.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/ae1314a2-7a0e-5697-09fa-97b2bd519413.png)

このブロックを組み合わせると、カラフルにできます。

![block_5.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/b90fc51d-fcf1-30fa-9872-b9d8a7ce5131.png)

こんな感じで......もう少し良い方法があるような気もしますが実行！
<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/9b946502-b596-f621-7247-a1c2b0264880.jpeg">

かわいくなりました！

次はコードエディタです。

### コードエディタをさわってみよう
M5stackはmicro:bitのようにMicroPythonでコードを書けます。
ちょっとあそんでみましょう。

画面上部の「</> Python」を選択します。

![code_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/f7e04718-92c7-bd3f-5cd0-e385340166e4.png)


コードエディタが出ました。

※注意点※
コードを書いている間にブロックエディタに変更したり、
左のUIエディタを触ったりすると、コードエディタで書いた分が消えてしまうみたいです。
加えて、現バージョン(v0.6.1)だとプログラムの保存ができません。
あまり凝ったコードを書かないか、別のエディタで書いてからコピペが無難です。

今回は先ほどのブロックエディタで作成したEmojiの中身を確認する程度にしておきましょう。

```python:sample.py
from m5stack import *
from m5ui import *
import _thread
from square import Square


# Define Component

clear_bg(0x111111)

btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)

btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)

btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)

lcd.setTextColor(0xffffff, 0x111111)

# ここの引数を変更するとEmojiで7×7以上描ける
square = Square(7, 7, 15, 9, lcd)

# 以下Emoji
square.show_map([[0,0,0,0,0,0,0],[1,0,0,1,1,1,1],[1,0,0,0,1,0,0],[1,0,0,1,1,1,1],[1,0,0,1,0,0,1],[1,1,1,1,1,1,1],[0,0,0,0,0,0,0]], 0x000000)
square.draw_square(0, 1, 0x66ff99)
square.draw_square(0, 2, 0x66ff99)
square.draw_square(0, 3, 0x66ff99)
square.draw_square(0, 4, 0x66ff99)
square.draw_square(0, 5, 0x66ff99)
square.draw_square(1, 5, 0x66ff99)
square.draw_square(2, 5, 0x66ff99)
square.draw_square(3, 1, 0xffff66)
square.draw_square(3, 3, 0xffff66)
square.draw_square(3, 4, 0xffff66)
square.draw_square(3, 5, 0xffff66)
square.draw_square(4, 1, 0xff0000)
square.draw_square(5, 1, 0xff0000)
square.draw_square(6, 1, 0xff0000)
square.draw_square(4, 2, 0xff0000)
square.draw_square(4, 3, 0xff0000)
square.draw_square(5, 3, 0xff0000)
square.draw_square(6, 3, 0xff0000)
square.draw_square(6, 4, 0xff0000)
square.draw_square(4, 5, 0xff0000)
square.draw_square(5, 5, 0xff0000)
square.draw_square(6, 5, 0xff0000)
``` 



### センサーをさわってみる
M5GOやGray本体には9軸IMUが搭載されています。
ジャイロとか加速度とかそのあたりですね。
![senser_1.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/93cb130b-1ec7-9721-fe49-272810994b3f.png)
「Hardware」→「IMU」の中にブロックがあります。

他のブロックも使って......

![senser_2.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/113c2ce4-2e74-3b52-4dfb-3157a8cd222c.png)


少々端折りましたがこんな感じで。
「Loop」ブロックは「Event」の中、
「Label」ブロックは「Component」の中にあります。

参考程度にコードで見ると以下の通りです。

```python:imu.py
from m5stack import *
from m5ui import *
import _thread
from square import Square
from mpu6050 import MPU6050
import i2c_bus


# Define Component

clear_bg(0x111111)

btnA = M5Button(name="ButtonA", text="ButtonA", visibility=False)

btnB = M5Button(name="ButtonB", text="ButtonB", visibility=False)

btnC = M5Button(name="ButtonC", text="ButtonC", visibility=False)

lcd.setTextColor(0xffffff, 0x111111)
label_1 = M5TextBox(66, 36, 'x', lcd.FONT_Default, 0xffffff)

label_2 = M5TextBox(65, 89, 'y', lcd.FONT_Default, 0xffffff)

label_3 = M5TextBox(66, 153, 'z', lcd.FONT_Default, 0xffffff)

label_4 = M5TextBox(25, 36, 'X =', lcd.FONT_Default, 0xffffff)

label_5 = M5TextBox(25, 91, 'Y =', lcd.FONT_Default, 0xffffff)

label_6 = M5TextBox(24, 155, 'Z =', lcd.FONT_Default, 0xffffff)

imu = MPU6050(i2c_bus.get(i2c_bus.M_BUS))


# Define Event
while True:
  label_1.setText(str(imu.ypr[1]))
  label_2.setText(str(imu.ypr[2]))
  label_3.setText(str(imu.ypr[0]))
  wait(0.02)
``` 
美しくはない......

実行してみましょう。

![20180917_205953_1_1.gif](https://qiita-image-store.s3.amazonaws.com/0/284836/50019d7b-2407-0838-53a0-3816467e7ac3.gif)


リアルタイムでIMUの計測結果を表示してくれるようになりました！
計測値で条件分岐させると色々あそべます。

M5GOだと環境センサー(温度・湿度・気圧）等いろいろ付属しています。
組み合わせて遊んでみるというのを今後やってみたいですね。

# おまけ　腕につけて自慢しよう
M5stackといえば、スマートウォッチとして有名ですね！！！
M5GO購入時にウォッチバンドも買っておきました。
ちょっと高いんですが、バッテリー付きです。

<img width="300" src="https://qiita-image-store.s3.amazonaws.com/0/284836/65358867-4142-2719-7107-e687cf79d9de.jpeg">

説明書は入ってないです。
これを買う方であればきっと大丈夫......調べながら気合で作ります。

<img width="500" src="https://qiita-image-store.s3.amazonaws.com/0/284836/316a2693-7add-49ec-7a04-f50d0de44a23.jpeg">

5分ぐらいで出来ました。
果たして動くのか？

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/eaa1e943-78fa-63bc-a358-9ef278a07b2d.jpeg">
※サンプルプログラム

人生初スマートウォッチです　感:sob:動
NTPなのに1時間ずれていますが気にしないことにします(撮影は22時)

着け心地が気になっていたのですが、結構フィットして良い感じです。

<br>
アピールモードも用意しました。

![omake.PNG](https://qiita-image-store.s3.amazonaws.com/0/284836/ac40fef9-4d39-5e5e-7fb2-a69825d6d9df.png)


電車の車内中ほどまで進んだときに......

<img width="400" src="https://qiita-image-store.s3.amazonaws.com/0/284836/91921286-ce1a-d65b-959f-73d2a719ffa0.jpeg">
隣にアピールできます。　※自宅の風呂場です　つり革はこれだけのためにAmazonで買いました

未実装ですが、IMUの計測値を使えば表示を切り替えられます。
時刻を見ようとしたとき時計に切り替わるとか......
まだまだ広がりそうです。

# おわりに
とっても簡単なM5stackの記事でした。
M5GO要素が薄かった気がします。

執筆開始時(9/3)のM5Flowはv0.4で、執筆完了時(9/17)はv0.6.1です。
本記事公開時にはv0.7やv0.8になっているかもしれません。いや、v1.0かも？
ファームウェアは最新版のほうが使いやすいのでオススメです。
<br>

M5stackは今後もっと面白くなると思います！
色々できちゃうので、いったい何からやれば......という状態かもしれませんが、
とりあえず動かしてみる！やってみる！というのが大切なのは何でもそうですね。
画面が付いているのが良いです！実行結果をすぐに確認できますから。

Qiitaには本記事以外にもM5stack関連の記事が沢山あります。是非読んでみて下さいね。
レッツエンジョイ！！レッツスタック！！

<br>
明日は@h-yamasakiさんで<font color="Gainsboro">~~(私もハマってボーナス3回分消し飛ばしている)~~</font>VR関連の記事です！
お楽しみに！