M5StickC で UIFlow やってみた
えっと、私はいままでM5Stack Basicと、M5StickC Plusをつかってましたが
じゃーん。
バンドほしさにM5StickCをかってきましたー。^^
M5StickC で UIFlow
開発言語はArduino IDEしか使ったことなかったですが、折角ですので「ビジュアルプログラミング」に挑戦してみようと思います！ そう、UIFlowってやつです。書籍も購入。
内容は、先人の方々のブログなどをまとめた書籍ですが、ブログのまとめといえど書籍化にあたっては内容の精査がされていると思うので安心感があります。かつ書籍から元ブログを拝見することもできるので便利ですね。
早速書籍掲載の、ぶらり@web走り書き!さんのブログを参考にさせてもらいました。ありがとうございます。
ただMac版とWin版の違いなのか、その後のバージョンアップによるものなのか、私のやり方の問題なのかわかりませんが、そっくりそのままとはいかなかったので、試行錯誤の結果「とりあえず私の環境で動いた」レベルのお話になります。
抑えるポイントは以下
・UIFlowには、「デスクトップ版」と「ブラウザ版」がある
・必要なのは、M5BurnerとUIFlow-Desktop-IDE
まずは、どちらか片方でも動いてくれればよいというところからのスタートです。「デスクトップ版」でトライしてみます。
M5BurnerとUIFlow-Desktop-IDEをダウンロード。
M5Burner
M5Burner.zipを展開すると以下のような感じ
M5Burner.exeを起動すると。。。
おおっ！M5Stackが！！
左のM5StickCを選択するとこんな感じ。
最初は右にUIFLow(StickC)のアイコンは出なかったですが、ほどなく表示されました。起動後最新情報をダウンロードしてくるっぽい動きです。
現時点(2021/10)の最新版、UIFLow(StickC)のv1.8.5を[Download]ボタンからダウンロード。
すると[Configrations]や[Burn]ボタンなるものが登場。
[Configrations]を押してみると、
ふむふむ。M5StickCがCOM経由で認識できてないとダメみないな感じですかね？この時点ではよくわかりません。
UIFlow-Desktop-IDE
UIFlow-Desktop-IDE.zipを展開すると以下のような感じ
UIFlow-Desktop-IDE.exeを起動。
Settingのメッセージボックス入力は私の環境では以下。
COM : COM4 私の環境ではM5StickCはCOM4につながってる。
Langage : 日本語
Device : M5StickC
Theme : オレンジ M5StickCにあわせてオレンジをチョイス
おおっ！！やっと「ビジュアルプログラミング」の入り口に立った気分。
ここで私は左上メニューバーのDriverInstallationよりドライバーのインストールを行いました。
過去ドライバーではけっこうハマってるので気を使います。
ただ、あとでデバイスマネージャーを確認すると別のドライバーで接続してるっぽかったので、もしかしたらこの作業は私の環境では必要なかったかもしれません。
UIFLowの書き込み
ここから悩みました。
再びM5Burnerにもどって、おそらくここからM5StickCにUIFlowの環境を入れるのだろうという察しはついたものの・・・
[Burn]ボタンを押すと Wifi Setting のメッセージボックスがでて、USB接続の場合はどうするの？というハマリ方をしました。
別途USB接続用のオペレーションがあると思ったのですね。
答えは、空白のまま[Start]を押す。でした。なあーんだ。^^;
[Start]をポチっとすると
Burn Failedとでるも、なんだか期待できる動き！
M5StickCをちゃんとつないで[Burn]を押すと
Burn Successfully
やった！いけたんじゃない！？
M5StickCの表示はこんな感じ
おーーーっ！
M5Burnerの[Configrations]で、Wi-FiとUSBを切り替えることができるっぽい。Start ModeをInternet Modeにすると
M5StickCはこんなかんじ
Start ModeをUSB Modeにして
[Save]をクリック
なにやらTipsがでた場合は[Continue]
Success!
するとM5StickCはこんなかんじ
やった！
待望の「ビジュアルプログラミング」
本題の「ビジュアルプログラミング」やっとたどりつきましたよ！
UIFlow-Desktop-IDE.exeを起動。
オレンジは、左下のM5StickCとの接続メッセージが見にくかったのやめました^^;。デフォルトの青。
接続できたっぽい！
うまくいかない場合は黄色四角のRefresh device statusや再起動などでトライしてみてください。^^;
ちなみに黄色四角の各アイコンは
Save the m5：UIFlow-Desktop-IDEのスケッチをローカルPCに保存
Load the m5：ローカルPCからUIFlow-Desktop-IDEにスケッチを読込み
DownLoad the m5 to the device：UIFlow-Desktop-IDEからM5Stickに書込み
のようです。
で、まずは電子工作のHello World、「Lチカ」を目指します。
んーこれっぽいな。
それっぽいところにドラック＆ドロップして、右上▶アイコンをクリック
おおっ！！できた。なんて簡単！！！
以前M5StackをつかってArduino IDEでスケッチを作成してLチカしたときも「電子工作って簡単になったなー」と思いましたが、初期設定はともかく「ビジュアルプログラミング」でドラッグ＆ドロップだけでM5Stickに標準装備されてるLEDをLチカできてしまうんだから、すごいもんですね。
期待の「ビジュアルプログラミング」体験は、一瞬でおわりました。^^;
課題
動きましたがいくつか未解決の課題がありまして、いちばん気になってるのはバージョンの問題。
UIFlow-Desktop-IDEのバージョンが、V1.7.4
M5BurnerでのUIFlow_StickCのバージョンが、v1.8.5。M5StickC本体にもそうででました。
一致してないといけないっぽいのですが、それぞれちょうど一致するバージョンがみつけられなくて、とりあえず今はバージョン違いで動いてるという状況です。
これについては、@penguinprogrammerさんのQiitaに、（バージョンを合わせなくても動かないわけではない）とあるので参考になりました。ありがとうございます。
バージョン違いにどのような影響があるかも含めていったんこのままで様子見です。そのうちなにかわかるかもしれませんし。^^;
なにはともあれ、はじめての「M5StickC で UIFlow」で「Ｌチカ」できました。^^
いつものごとく、「とりあえず私の環境では動いたレベル」で問題もあるかもしれませんが公開します。またなにかあれば教えてください！
追記：M5StackでもUIFlow
M5StackでもUIFlowができるはずなので、そのうち試してみようとおもってたら、早速、アイコさんがやってみてくれました。ありがとうございます！^^
この記事が気に入ったらサポートをしてみませんか？