こんにちは
セカンドセレクションのUmeharaです。
前回はIoTで植物を制御！の概要を記載しましたが、今回はより具体的にM5stackを使ってデータをWebに表示するまでの工程を記そうと思います。
初めてM5stackを使って詰まったポイントを記載していくので、皆さんの参考になると幸いです。
今回はM5stackを動かす工程です。簡単なので、以下の課題をぜひやってみてください。
- M5stick Cのスロットマシンをつくる
- Hello M5を画面に映しだそう
- 画面に顔を表示しよう
準備
購入編
まずはM5stick CとUSB-Cケーブル、パソコン（Windows）を用意しましょう！Amazonでの購入はこちら！
インストール編
まずはこちらから
UI-Flow（M5stackのブロックプログラミングアプリ）
M5Burner（M5stackの設定書き込みソフト）
CP2104ドライバー（M5stackを起動させるドライバー）
Windows版でダウンロードし、zipファイルを展開、インストールまで行います。
M5stackの設定
USB接続
USB-CケーブルでM5stickをPCに接続します。（先ほどインストールしたドライバーがうまく作動していると、デバイスマネージャーのポート⇒USB Serial PortにCOM●がつながれたことが確認できると思います。
※もし、M5stackが他のデバイスとして認識されてしまう場合の対処はこちらの記事を参考にドライバーをインストールし直して、更新する必要があります。
M5BurnerでSlotを作る
先ほど展開した、M5Burnerのフォルダを開き、M5Burner.exeファイルを起動します。
左のサイドバーからM5stickを選択し、真ん中らへんにあるSlot（スロットマシン）のファームウェアをダウンロード⇒Burnしてください。
M5stickでスロットマシンができるようになるでしょうか？？ボタンA（画面下のM5）を押すと動きます。
※もしできない場合は画面左上のCOMに先ほどのデバイスマネージャーで確認したものがつながっているのか確認してみてください。
M5BurnerでUSBモード接続
次は一番左上にあるUIFlowファームウェアをダウンロード⇒Burnしてください。
M5stickにはインターネットモード・Appモード・USBモードの3つが存在しているので、今回はUSBモードに切り替えます。
切替手順
- パワースイッチ（左側面）を6秒以上長押しして電源OFF
- ボタンA（画面下M５）を押しながらパワースイッチを押して電源ON
- パワースイッチ、ボタンAを離す（SetUpを選択）
- ボタンB（右側面） を2回押す（USBモードを選択）
- パワースイッチを押して、再起動
引用：https://qiita.com/nagase/items/9df1f78a7a51047a3e65
画面にUSBと表示され、水色になっていたら成功です。
では、UI-Flow（M5stackのブロックプログラミングアプリ）を使い、M5stickにプログラムをしていきます。
UI-Flow IDE
こちらはデスクトップ上でM5stickにプログラミングができるソフトウェアです。
API keyにはUSBのCOM●が表示されていると思います。言語（Language）を日本語に変更し、端末をオレンジのものを選択、OKボタンを押します。
画面左下に緑色で【接続済み】となっていたら接続できています。
一番左のサイドバーから、部品を画面にドラッグアンドドロップして右上にある▶を押すとプログラムが動きます。
・Label（文字）を用いる場合は、真ん中のUIからラベルを選択し、Hello M5などを画面に表示してみましょう！
・Rect、Circleを付けて顔文字のようにもできるでしょうか。
では、今回はここまでで終わります。
インターネットモードの説明や水分センサーの付け方などもおいおい紹介していきます。