M5Balaを動かそう！

# M5Stack、M5Bala とは

## M5Stack
M5Stackとは香港のお隣、中国広東省深圳市に本社を構える[M5Stack](http://m5stack.com/)社（中国名：深圳市明栈信息科技有限公司）が開発、製造、販売している製品群のシリーズ名です。

特徴は[ESP32](https://ja.wikipedia.org/wiki/ESP32) ([Espressif Systems](https://www.espressif.com/))というマイコンをコアに採用しており、無線LAN[^giteki]やBluetooth[^giteki]、様々なペリフェラルが利用可能です。またディスプレイを搭載しているため、簡単な情報を表示したりすることもできます。さらに小型ながらバッテリーを内蔵しているため、短時間であれば単体でも動作することができます。

## M5Bala
M5BalaはM5Stack向けのバランスカー・モジュール[^invertedpendulum]です。写真下部、タイヤの付いてる部分がそれになります。[スイッチサイエンス](https://www.switch-science.com/catalog/3995/)で購入可能です。また注意点としてスイッチサイエンスのページにも書かれていますが、M5Balaを実際に利用する際には別途[M5Stack Fire](https://www.switch-science.com/catalog/3953/)が必要になります。

![M5Satck-New-BALA-Car-ESP32-Development-Mini-Electric-Self-balancing-Car-2DC-Motor-with-Encoder-PSRAM.jpg_640x640.jpg](https://qiita-image-store.s3.amazonaws.com/0/110484/17728261-2371-6032-24c9-a03608c1d169.jpeg)

ちょうど日本でも発売になったという[記事](https://akiba-pc.watch.impress.co.jp/docs/news/news/1147115.html)を見つけました。
ツクモで売ってるみたいです。

# この記事の目標

今回はUIFlowでM5Balaを実際に動かすところまでやっていきます。

# はじめる前に

## 利用可能なプログラミング言語

M5Stackで使用可能なプログラミング言語は大まかに以下の三種に分類されます。今回はMicroPythonを使っていきます。

- C, C++
- MicroPython ([公式サイト](https://micropython.org/)、[Wiki](https://github.com/loboris/MicroPython_ESP32_psRAM_LoBo/wiki/))
- それ以外（Lua, Basic, mruby, etc...）

## 開発環境

### オンライン

Webを利用したオンライン開発環境が準備されているので、そちらを利用して開発を行うことが可能です。今回はこちらのUIFlowを利用します。

- [M5Cloud](http://cloud.m5stack.com/)
- [UIFlow](http://flow.m5stack.com/)

### オフライン

ローカルで開発する際のIDEも複数利用可能です。MicroPythonで開発する場合は、[VSCode](https://code.visualstudio.com/)にPlatformIO IDEエクステンションをインストールして使うのがオススメです。

- [Arduino IDE](https://www.arduino.cc/en/Main/Software/)
- [Espressif-IDF](https://github.com/espressif/esp-idf/)
- [PlatformIO IDE](https://platformio.org/)（複数のエディタに対応しています）

## ドキュメント

正直なところドキュメントはまだまだ未整備な感が否めませんが、徐々に充実していくと思います。何かわからないことがあれば、[公式フォーラム](http://forum.m5stack.com/)や[@M5Stack](https://twitter.com/M5Stack)に質問をすると優しい人が答えてくれると思います。

- [M5Stack公式サイト](http://m5stack.com/)
- [公式GitHub](https://github.com/m5stack/)
- [公式ドキュメント](https://m5stack.readthedocs.io/en/latest/)
- [公式フォーラム](http://forum.m5stack.com/)
- [公式Twitter](https://twitter.com/M5Stack/)
- [Arduino開発ドキュメント](http://www.m5stack.com/assets/docs/)

# 事前準備

## ハード

- [M5Stack Fire](https://www.switch-science.com/catalog/3953/)
- [M5Bala](https://www.switch-science.com/catalog/3995/)
- PC
 
## ソフト

- [SiliconLabs USBtoUART driver Download](https://www.silabs.com/products/development-tools/software/usb-to-uart-bridge-vcp-drivers/)
- Python (pipを利用するため)
- [esptool](https://github.com/espressif/esptool)




## UIFlowでM5Balaが動くまで

1.まず自分のPCとM5Stack Fireを付属のUSBケーブルで接続します。
2.[UIFlow公式サイト](http://flow.m5stack.com/)にアクセスします。サイトが表示されたら右上の歯車のアイコンをクリックしてください。
<img width="1280" alt="スクリーンショット 2018-10-11 15.33.31.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/00946423-cdc1-60e0-d901-4b0fe7584576.png">
3.次にFirmwareをダウンロードします。
<img width="1280" alt="スクリーンショット 2018-10-11 15.35.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/e0b9d02b-ab6f-6585-674b-01007486ad10.png">

4.ダウンロードしたZipを解凍すると以下のような構成になっていると思います。

```
M5Burner-flow-only
├── M5Burner.exe
├── M5Burner.exe.config
├── M5Burner.pdb
├── Newtonsoft.Json.dll
├── Newtonsoft.Json.xml
├── UpdateLog.md
├── firmwares
│   ├── M5Flow
│   │   ├── v0.6
│   │   │   ├── firmware_0x1000.bin
│   │   │   ├── flash.sh
│   │   │   ├── readme.md
│   │   │   └── spiffs_image_0x150000.img
│   │   ├── v0.6.1
│   │   │   ├── firmware_0x1000.bin
│   │   │   ├── flash.sh
│   │   │   ├── readme.md
│   │   │   └── spiffs_image_0x150000.img
│   │   ├── v0.7.0
│   │   │   ├── UpdateLog.md
│   │   │   ├── firmware_0x1000.bin
│   │   │   ├── flash.sh
│   │   │   └── spiffs_image_0x150000.img
│   │   └── v0.7.1
│   │       ├── UpdateLog.md
│   │       ├── firmware_0x1000.bin
│   │       ├── flash.sh
│   │       └── spiffs_image_0x150000.img
│   └── firmware.json
└── tools
    └── esptool.exe
```

5.現時点（2018/10/11現在）だと最新版がv0.7.1なので、ディレクトリに移動して、ファームウェアをM5Stackに書き込みます。

```:linuxまたはmacの場合
$ cd 解凍した場所/M5Burner-flow-only/firmwares/M5Flow/v0.7.1/
$ sh flash.sh
```

```:winの場合
M5Burner.exe　をダブルクリックして実行してください
```

6.linux、macの場合は以下のような感じになったら成功です。
写真ではケーブルが挿さったままですが、これ以降はケーブルを抜いて作業しても問題ありません。

```:結果
esptool.py v2.5.0
Serial port /dev/tty.SLAB_USBtoUART
Connecting........__
Chip is ESP32D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse
MAC: 12:34:56:78:9a:bc
Uploading stub...
Running stub...
Stub running...
Changing baud rate to 961200
Changed.
Configuring flash size...
Auto-detected Flash size: 16MB
Flash params set to 0x0240
Compressed 1351984 bytes to 842141...
Wrote 1351984 bytes (842141 compressed) at 0x00001000 in 13.4 seconds (effective 808.7 kbit/s)...
Hash of data verified.

Leaving...
Hard resetting via RTS pin...
esptool.py v2.5.0
Serial port /dev/tty.SLAB_USBtoUART
Connecting........____
Chip is ESP32D0WDQ6 (revision 1)
Features: WiFi, BT, Dual Core, 240MHz, VRef calibration in efuse
MAC: 12:34:56:78:9a:bc
Uploading stub...
Running stub...
Stub running...
Changing baud rate to 921600
Changed.
Configuring flash size...
Auto-detected Flash size: 16MB
Compressed 2818048 bytes to 765300...
Wrote 2818048 bytes (765300 compressed) at 0x00150000 in 18.3 seconds (effective 1230.2 kbit/s)...
Hash of data verified.

Leaving...
Staying in bootloader.
```
7.M5Stackの横のスイッチを押します。

![WechatIMG1.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/6d62ec8c-ae88-bc2e-2477-78ee39b6a1d1.jpeg)

8.リセットがかかり再起動後、以下の画面が出たらsetupボタン（Cボタン）を押します。プリセットのアプリが表示されてしまったら、再度横のボタンを押してやり直してください。
![WechatIMG2.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/fd5ce116-6a36-b44e-e633-22fb8909830e.jpeg)

9.wifi setup画面が表示されるので、「Change WIFI Connect」を選択し、Selectボタン（Bボタン）を押します。
![WechatIMG3.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/8fb3988e-025a-adfd-67ba-df531ce356b7.jpeg)

10.この画面が表示されたら、表示されているSSIDにスマホかパソコンで接続します。
![WechatIMG4.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/b5ef32e1-fc71-9d43-2a32-6adf7c5efe2b.jpeg)

11.ブラウザを開き、「192.168.4.1」にアクセスします。そして、自分が普段使っているSSIDとパスワードを入力し、Configureボタンをクリックします。
![WechatIMG5.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/c65f9d00-9e40-3b07-3d42-085f85772a67.jpeg)

12.接続がうまくいくとこのような画面が表示され、自動的に再起動します。
![WechatIMG6.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/794d4c68-5574-71bd-b79a-ce297959cfd0.jpeg)

13.再度setupボタンを押して、wifi setup画面に遷移したら、先ほど設定したSSIDを選択し、selectボタンを押します。
![WechatIMG7.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/85f6c3cf-02f3-866d-6591-b25aa8933b2a.jpeg)

14.２次元コードが表示される画面に遷移したら、APIKEYをメモします。また右上にある丸が赤から緑に変わったらオンラインになった証拠です。(画像ではすでにオンライン)
![WechatIMG10.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/3ca65b93-4c09-483d-9d59-14478a6f9159.jpeg)

15.先ほどファームウェアをダウンロードした画面に戻り、メモしたAPIKEYを入力し、Saveボタンをクリックします。これで開発の準備が整いました。
<img width="1280" alt="スクリーンショット 2018-10-11 16.58.34.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/810127f8-ecdb-c76c-409a-cf0a6be7a665.png">

16.試しに左側のTitleを写真のようにドラッグ＆ドロップしてみてください。青いタイトルバーが表示されると思います。
<img width="452" alt="スクリーンショット 2018-10-11 17.37.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/ba45ae53-15b0-162a-c622-9028d6f3a51a.png">

17.タイトルバーの部分をクリックすると右側にプロパティが表示されるので、色々変更してみてください。
<img width="1280" alt="スクリーンショット 2018-10-11 17.43.53.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/4cb76165-4c56-6d07-f804-93b20478ad37.png">

18.次にModules -> Bala -> M5Bala Startを選択し、右にドラッグ＆ドロップしてください。
<img width="1280" alt="スクリーンショット 2018-10-11 17.45.45.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/82032a4d-7bfa-b12e-c482-88521f260085.png">

19.このままだと動きませんので、M5Bala StartブロックをSetupの下までドラッグ＆ドロップします。ブロック同士がうまく接続されるとブロックの色が黒から紫に変わると思います。
<img width="1280" alt="スクリーンショット 2018-10-11 17.46.23.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/b8195c4c-e149-07cf-29bc-ee8ef6e51ee4.png">

20.M5StackとM5Balaが接続されていることを確認したら、最後に再生ボタンを押すとプログラムが実機に配信されて実行されます。
<img width="1280" alt="スクリーンショット 2018-10-11 17.46.59.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/f2eb371b-54c2-ea02-8c65-7d853fec2f19.png">

21.うまくプログラムが配信されたら、バランスを取りながら倒れないように動いてくれるはずです。うまくいかない場合は、M5Stack FireやM５Balaをリセットしてみてください。
![image-1536808800448.png](https://qiita-image-store.s3.amazonaws.com/0/110484/68dfa140-4d09-b306-a32c-314e397e6890.png)

22.おまけですが、左上のプログラム名を変えて、実機へアップロードを行うと実機のAppListに自分の作成したプログラムが登録されます。（写真がなぜか横になってしまう・・・）
試しにプログラム名を「NEWGAME」として実機へアップロードします。
<img width="1280" alt="スクリーンショット 2018-10-11 18.10.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/110484/c754341e-c81a-2874-2738-1b135ca38ada.png">
アップロード中・・・
![WechatIMG11.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/5927b45e-688c-a95b-a8a1-d377a84783f2.jpeg)
リセット・・・
![WechatIMG12.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/56e55a67-dbe4-3227-9ffd-6ef04ce929be.jpeg)
APP.LISTボタンを押します。
![WechatIMG13.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/5c5c2486-b730-b6b0-5456-2864073d048d.jpeg)
自分の作成したプログラムが一覧に登録されているので、選択して実行すると動きます。
![WechatIMG14.jpeg](https://qiita-image-store.s3.amazonaws.com/0/110484/aa5af031-6e34-723c-dfe9-f06303cfd9f1.jpeg)

# 次回予定
GitHubにあるサンプルプログラムを見ながら、どういう風に動いているのかを確認していきたいと思います。

[^giteki]: 技適取得済み
[^invertedpendulum]: 専門用語では倒立振子（とうりつしんし）というらしい。[参考](https://ja.wikipedia.org/wiki/%E5%80%92%E7%AB%8B%E6%8C%AF%E5%AD%90)