rch850 の上澄み

技術的な話題とか、雑談とか。タイトルを上澄みに変えました @ 2020/09/02

UiFlow (M5Flow) で信号機

M5Stack ふくもく会

息子が車のおもちゃで遊んでいるときに「信号機やって！」と言われるので、これまでは指を信号機の形にして「赤だよー」とか言ってたのですが、そういや M5Stack 使えるんじゃ？と思って、信号機を作ってみることにしました。

久々の M5Stack ってことで Arduino を起動して開発しようとしたのですが、ちょっと調べてみたところ UiFlow というブラウザでの開発環境ができていたので、そちらでやってみました。

作ったのはこんな簡単なものです。息子のリアクションをみつつ改善していきたいところ。

M5Flow の開発環境整備

開発環境の整備はこちらの記事を参考にしました。

  1. M5stack(M5GO)とM5UI.Flowであそんでみた - Qiita
  2. M5Stack UI Flow を Mac で使う - Tech Blog by Akanuma Hiroaki
  3. M5StackGrayでMicroPythonの環境構築ができない（Mac）

まず M5Flow にアクセスしたときに出てくる Settings を少しスクロールすると、M5Burner なるものへのリンクが出てくるので、そこから M5Burner をダウンロードします。

f:id:rch850:20190622155204p:plain

M5Burner をダウンロードしたら、その M5Burner を起動……でうまく行けばよかったのですが、自分はこの後のファームウェアダウンロードがうまくいきませんでした（2019年6月22日現在）。

Finder で M5Burner を右クリックして「パッケージの内容を表示」し、その中の Contents/MacOS/M5Burner を起動したらうまくいきました。ここは参考記事 3 がとても役に立ちました。

「パッケージの内容を表示」しようとしている様子。

f:id:rch850:20190622155504p:plain

Contents/MacOS/M5Burner を起動しようとしている様子。

f:id:rch850:20190622155517p:plain

あ、起動する前に M5Stack をつないでおいたほうがいいかもしれません。M5Burner が起動したら、以下の手順でファームウェアを書き込みました。

  1. UIFlow-v1.3.2 にマウスカーソルを合わせると、ダウンロードっぽいボタンが出るので押す。
  2. ダウンロード中の表示が出るのでしばらく待つ。M5Burner.app を直接起動した時は、ここでダウンロード中の表示が出ませんでした。
  3. ダウンロードが終わったら Burn を押し、ファームウェアの書き込みが終わるまで待つ。
  4. 終わったら M5Stack 側面のボタンを押すとかして再起動して完了！

ちゃんと挨拶してくれるかわいい子ですね。

M5Stack にブラウザからつないでコード？を書く

マニュアルの13ページ「UiFlowの使い方」を見て M5Stack にブラウザ上の UiFlow からつなげるようにします。案内がとても親切で、すんなり行けました。

つなげたらコードを書きます。今回はこのようになりました。

f:id:rch850:20190622160747p:plain

びっくりしたのは、左上の「Circle」などから円を描いて、それに対してボタン操作で色を変えるといった操作ができたことです。色以外にも、座標を動かしたり大きさを変えたりもできるようです。

信号機をちゃんと時間で動かしたり、歩行者用信号みたいに音ならしたりすると喜んでもらえそうなので、信号機ネタだけでしばらく楽しめそうです。