M5StickVのGUIツールを使ってみる

## 【内容】
とりあえず予備知識無しでM5StickVを使ってみます。
[前回の記事](https://qiita.com/rhene/items/10ac4238c68e6fe40ba6)ではシリアルコンソールにつないでの操作でしたので、今回やGUIツールを使った操作になります。

前回同様、基本的には公式の手順を踏襲しますが、やはり何箇所かハマりましたが、最終的には解決しています。
[【M5StickV Quick Start - M5Stack】](https://docs.m5stack.com/#/en/quick_start/m5stickv/m5stickv_quick_start)

なお、作業にはWindows 10 Pro (1809)を利用しています。


## 【uPyLoaderを使う】

「uPyLoader」はPCとM5StickV間でファイルのやり取りを行うツールです。
先日まで上記のQuick Startにも書いてあったはずですが、今見てみたら記載がありませんでしたが、せっかくなので使えるようにします。

### uPyLoaderのダウンロード
下記のGithubより最新版を取得します。
2019年8月23日時点で「v0.1.4」が最新版になります。
[【uPyLoader - Github】](https://github.com/BetaRavener/uPyLoader/releases)

本手順ではWindowsのバイナリファイルである「uPyLoader-win.exe」をダウンロードしました。

### uPyLoaderの起動
ダウンロードした「「uPyLoader-win.exe」を適当なフォルダに保存した後、ダブルクリックで実行します。
正しく起動できれば以下の画面が表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/74fe187f-67f8-e7fa-75dd-101fd9ab46ea.png)

### M5StickVとの接続
画面右上にある「Connect」ボタンを押します。
そのままだと下記画面のように「Status」が「Error」となってしまいます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/d67211d3-16b7-9f18-9455-896afa662c0c.png)

このエラーをなかなか解決できなかったのですが、M5StickVの「boot.py」を読んでいたら、ボタンAが押されていたら処理を終了するような記述がありました。
ボタンAが何かわからなかったのですが、いろいろ試していたところ、LCD下(?)(下記画像の赤枠)のボタンを押して起動したときに、デモプログラムが実行されないことがわかりました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/e6f26fbb-cfb1-c93f-7667-1d0f15037656.png)

そこで、このボタンを押した状態で「Connect」ボタンを押したところ、見事に接続に成功しました。

なお、初回接続時には以下のワーニングが表示されます。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/eafd5654-c153-7e68-39e3-f74dc3cb083c.png)

メッセージの指示に従い、「File」メニューから「Init transfer files」を実行します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/a5e963fa-3443-70e2-25d6-a9828c023ed2.png)

上記コマンドを実行すると、 `__upload.py` と `__download.py` が転送され、準備が完了します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/b454607d-d92d-678b-5c90-ecf77f6d5328.png)



### ファイルのダウンロード
M5StickV上のファイルをPCにダウンロードしてみます。
試しにRemote側にある「boot.py」を選択し、右下の「Transfer」ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/a0002ef2-eb3a-5d92-3bd3-2e46210e7171.png)

デフォルトではuPyLoaderと同じフォルダにダウンロードされます。

### ファイルのアップロード
今度は逆にPCからM5StickVにファイルを転送します。
試しに先ほどダウンロードした「boot.py」を変更します。
「boot.py」を適当なエディタで開き、[前回の記事を参考](https://qiita.com/rhene/items/10ac4238c68e6fe40ba6#%E3%81%8A%E3%81%BE%E3%81%91%E8%B5%B7%E5%8B%95%E9%9F%B3%E3%81%AE%E4%BD%8E%E6%B8%9B)に起動音量を調整して保存します。
編集が完了したらuPyLoaderからM5StickVにアップロードしてみます。
「Local」側でアップロード対象となるファイルを選択し、中央下にある「Transfer」ボタンを押します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/1cc48d8d-aa4a-0908-539b-c29065612db3.png)


### ファイルの実行
転送が完了したら、ファイルを実行して更新内容が反映されているか確認してみます。
「Remote」側で実行したいファイルを選択し、「Execute」ボタンを押します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/5d432956-7529-49d0-a408-234bfbe838ad.png)

ちゃんと変更内容が反映されていましたでしょうか?

なお、今回は「boot.py」を変更しているため、「Execute」ボタンを押す代わりに「Disconnect」ボタンを押すことでも動作確認を行うことが出来ます。



### M5StickVとの切断
すべてのファイルの転送が完了したら「Disconnect」ボタンを押すことでM5StickVから切断できます。
このタイミングでM5StickVは再起動されます。




## 【MaixPy IDEを使う】
uPyLoaderを使ってファイルの編集及び転送を行えば、独自のプログラムを実行させることができることがわかりました。
uPyLoader以外にも、もう少し簡単に開発作業が行えるIDEツールが用意されていますので、これを使ってみます。

### MaixPy IDEのインストール
[Quick Startに最新バージョンのリンク](https://docs.m5stack.com/#/en/quick_start/m5stickv/m5stickv_quick_start?id=maixpy-ide)があるのでそちらからインストーラをダウンロードできます。
また、下記URLから任意のバージョンをダウンロードすることも可能です。
[【MaixPy IDE インストーラ】](http://dl.sipeed.com/MAIX/MaixPy/ide/)

ダウンロードできたらインストーラを実行して、インストールします。
インストールオプションは特に変更する必要はありません。

### MaixPy IDEの実行と接続
標準でインストールするとWindowsメニューに「MaixPy IDE」が追加されていると思いますので、こちらから実行します。
起動できたら接続設定を行います。
「ツール」メニューから「Select Board」を選び「M5StickV」を選択します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/60596d9a-3cee-41f8-9b0d-0b730d94ae5e.png)

設定できたら左下の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/70982391-213c-09ed-f711-f26ac66ddcc2.png)ボタンを押してM5StickVと接続します。

下記のような画面になったら接続成功です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/cf4ab01e-3713-a623-dc47-02849ac7a452.png)


### プログラムの実行
初期起動時には「helloworld_1.py」というサンプルプログラムが開かれていると思います。
開いていない場合は「ファイル」メニューから「例」＞「01-Basics」＞「helloworld.py」を選ぶとサンプルプログラムが開きます。
この状態で左下の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/fbd8d87f-a2b5-077c-d387-a699f795d6bf.png)ボタンを押すと、M5StickVにサンプルプログラムが転送されプログラムが実行されます。

サンプルプログラムの内容は以下のとおりです。

- センサー(カメラ)をリセットして設定する
- センサーのスナップショットを撮る
- 取得したイメージをLCDに表示する
- fpsを出力する

M5StickVのLCDにカメラ画像が表示されていれば、サンプルプログラムは実行されています。
またIDEの右ペインにはカメラのフレームバッファやヒストグラムが表示されています。
print文などコンソールへの出力は、左下の「シリアルターミナル」タブを押すと表示されます。
残念なことにシリアルターミナルは表示のみで入力には使えないようです。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/909027bc-54f9-406e-47fc-e0112cce89c6.png)

なお、プログラムの終了は左下の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/afd764d6-8ff5-544c-bbe7-a904b49f612d.png)ボタンで行います。

ちなみに上記画像のフレームバッファ映像はピンぼけしています。
本体カメラレンズの黒い部分を回すとピントを調整できました。

### その他の操作
#### boot.pyの更新
「ツール」＞「save open script to board(boot.py)」を実行すると、現在IDEで開いているスクリプトをM5StickVのboot.pyに書き込みます。
これによりM5StickV起動時に自動的にこのスクリプトが実行されるようになります。
なお、処理実行時に「コメントを取り除き、スペースをタブに変換するか？」と聞かれますが、どちらを選択しても特に問題はないようでした。
ファイルサイズを小さくしたい場合などに行うのでしょうか？

#### ファイルの転送
「ツール」＞「transfer file to board」を実行するとファイルダイアログが開きます。
ここで選択したファイルはM5StickVに転送されるため、いちいちuPyLoaderを使う必要はありません。



### M5StickVとの切断
すべての作業完了したら左下の![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/454012/c7894c2b-c7ec-e36d-ae56-219af5dc2b33.png)ボタンを押すことでM5StickVから切断できます。
このタイミングでM5StickVは再起動されます。

## 【最後に】
[前回の記事](https://qiita.com/rhene/items/10ac4238c68e6fe40ba6)と今回の記事で、M5StickVをとりあえず使えるようにはなりました。
今後どこまで使えるか、検証してみたいと思います。