現時点の情報です。最新情報はM5StickC非公式日本語リファレンスを確認してみてください。
概要
前回は環境構築まで完了させました。今回は実際にUIFlowを動かしながら、基本的な動かし方を説明したいと思います。
ブラウザで動かすCloud版と、アプリで動かすDesktop版で説明が違うので同じ内容のものを別ページで作成しています。
こちらの記事はブラウザで動かすCloud版になります。
アプリで動かすDesktop版を利用する場合には上記ページに同じ内容のものがあります。
動作環境
上記のURLをブラウザで開くことで、プログラミングができます。基本的にはブラウザが動く最近の環境であれば利用できるのですが、パソコン以外から使った場合には画面操作感が悪いので、なるべくパソコンから利用してください。
URLがhttpsではなく、httpなのでブラウザ上では警告がでます。
通信が暗号化されていない警告なので、現状は無視しても問題がありません。httpsにしてほしいと公式にはお願いしましたので、そのうちhttpsでの接続ができるようになるかもしれません。
手元環境で調べたところ、iPhoneやAndroidなどのブラウザから動かすことも可能ですが、非常に操作感が悪いので実用的には利用できないと思います。
上記はAmazon Fire HD 8で試したところです。一部の機能は利用できなかったりすので、おすすめしません。
ChromebookなどのPCと同じブラウザが使えるものであれば、動きそうですが未検証です。
M5StickCの説明
M5StickCにはボタンが3つあります。左側にあるのが電源ボタンで一秒以上押すと電源が入ります。真ん中のM5と書いてあるところがAボタンで、右側面にあるのがBボタンです。
現在UIFlowからは使えませんが、Aボタンの隙間にマイクがあります。また、画面の左上に赤色のLEDと、赤外線送信があります。
M5StickCの起動
電源ボタンを1秒以上押して、M5StickCを起動させます。
上記のような青い丸が表示されていることを確認してください。この画面以外ではプログラミングができません。写真である下についているものは、USBケーブルをマグネットで接続するためのアダプターですので、気にしないでください。
もし緑の丸が表示されていない場合には、M5と書かれたBボタンを押しながら、電源ボタンを押してください。
上記のProgramと書かれている設定画面で起動するはずです。M5StickCの内部に保存したアプリを実行した場合に再起動すると、同じアプリが起動してしまうので、上記の設定画面に入り、Programの画面でAボタンで決定すると丸が表示されている画面が表示されると思います。
ブラウザでUIFlowページを開く
上記は起動直後の画面です。
API KeyにM5StickCの画面に表示されているキーを入力します。この時M5StickCの下にあるマークが丸で、緑になっていることを再度確認してください。赤色だったりエラーがでているとインターネットに接続できない状況です。
無線環境を見直すか、その1の環境構築の項目を再確認してください。
上の画像が入力した画面です。Api Keyの他に言語を日本語にして、DeviceをStick-Cを選択してからOKボタンを押してください。
接続確認
ブラウザの左下にある表示が、接続済みになっていることを確認してください。Disconnectedと表示されている場合にはM5StickCの電源を入れ直して、緑の丸が表示されていることを確認してから、回転マークを押してみてください。
上記のように接続済みとなれば、プログラミングの準備が完了しました。
画面の説明
画面は横に3つの場所わけがされています。左側のM5StickCの画像がでている場所が画面表示のデザインをする場所。真ん中のイベントなどが並んでいる場所がブロックの選択場所。右側がブロックを並べてプログラミングする場所になります。
左側のデザインが必要ない場合には、左下にある隠すボタンを押すとデザイン部分が隠れるので、より広い画面で利用できます。
隠した場合には上記のように右側が広がります。使いやすい画面でプログラミングをしてみてください。
あとで説明しますが、右上にある再生ボタンを押すとプログラムがM5StickCに転送されて実行されます。
一番右上のボタンを押すと、プログラムの保存や読み込みができます。
プログラミングのはじめかた
画面の向き決定
最初に決めるのは画面の向きです。
どの画面方向で行っても構いませんが、縦画面の場合には標準の0。横画面の場合には3を選ぶことが多いです。しかしながら、ボタンの押しやすさで選んでもらって構いません。
今回は標準的な縦画面の0で使いたいと思います。
画面デザイン
次に画面デザインを決めます。
背景色
背景色は左側のデザイン部分の画面をクリックすると、画面中央にScreenという設定項目がでてきて、backgroundColorをクリックすると色が選択できます。
今回は赤くしてみました。この状態で右上にある再生ボタンを押してください。
M5StackCの画面が赤くなったと思います。
タイトル
タイトル表示は必須ではありませんが、アプリの名前を画面上に出しておくとわかりやすいです。
表示する場合には左上のTitleという場所をクリックしたままドラッグして、M5StickCの画面にドロップします。
成功すると、画面上にTitleという帯が表示されます。
Titleの帯をクリックすると、設定画面が開きますのでtextのところに表示したいアプリ名を入力します。画面上では日本語も入力されますが、実際には英数文字しか表示されないので注意してください。
ラベル
画面上に文字を書きたい場合にはLabelを利用します。Titleと同じように左上のLabelからドラッグして、表示したい場所にドロップしてください。位置はあとでも修正できるので場所はアバウトでもかまいません。
Titleと同じようにTextもクリックすると設定画面がでてきます。Titleより設定できる項目が多いです。
fontをラベルのフォントを設定できます。
ちょっとはみ出ていますが、上記がフォントの一覧です。DejaVuSansは18から72まで大きさの異なるフォントが入っています。こちらも日本語は実際には表示されないので注意してください。
rotationは文字の回転角度になります。基本的には0以外はあまり使わないと思います。
layerは画面の重なり順で、数字が大きいほど重なった場合に手前に来ます。
不要なオブジェクトを消す
画面上に配置してけれど、要らなくなったオブジェクトは画面右上のゴミ箱に持っていくことで消すことができます。
ブロックプログラミング
画面デザインは上のように、タイトルとラベルを配置したものとします。
バッテリー電圧をラベルに表示する
UIFlowの場合、M5StickCのバッテリー残量を確認することができません。そのため、表示する場所があるのであれば常に表示しておくことが好ましいです。
まずはラベルを変更するためのブロックを配置します。UIの中のラベルを選択すると、ブロックの一覧が表示されます。一番上のブロックがラベルに任意の文字を表示するブロックになります。
一番上のブロックをクリックしたままドラッグして、右側のブロックプログラミングエリアのSetupの下でドロップします。
上記のようにブロックがくっつけば成功です。
次のバッテリーの電圧を取得します。ハードウエアの中のPowerを選ぶと、ブロックの一覧が表示され、「Get battery voltage」ブロックを選びます。
上記のように、ラベルの右側にある隙間にブロックを入れると完成です。
実行
右上にある再生ボタンを押して、実行してみてください。
画像のように、表示されれば問題ありません。表示されている数値はバッテリーの電圧で、3.9V弱です。目安として3V以下になるとバッテリー切れで電源が落ちます。4V以上で概ね満充電になります。
充電ケーブルを外した状態で、再度再生ボタンを押してください。さっきの数値とは違う電圧に変化しているはずです。
保存する
UIFlowはブラウザを閉じてしまうと、プログラムの内容がなくなってしまうので定期的に保存することをおすすめします。
右上のメニューを開いて、保存ボタンを押しましょう。保存ボタンを押すと、ファイルのダウンロードがはじまります。このダウンロードしたファイルを読み込むことで、元の状態に戻すことができます。
保存ボタンではなく、間違えてダウンロードボタンを押すとM5StickCの中にアプリが保存されます。一見同じようにみえますが、一度ダウンロードボタンを押してしまうとプログラムモードではなく、アプリモードにM5StickCが変わってしまいます。
ダウンロードしたアプリしか動かなくなりますので、Aボタンを押しながら電源ボタンを押して、プログラムモードに戻す必要がありますので注意してください。
アプリモードになっていると、再生ボタンを押してもプログラムが転送されません。
定期更新をするように変更
さっきのブロックは起動時に一度しかラベルを更新していませんでした。電圧が更新されるように改造してみたいと思います。
定期的にラベルの電圧を更新するために、定期的に処理をするループブロックを設置したいと思います。
今動いているブロックが邪魔なので、一度右下に移動して外します。
どこにもくっついていないブロックは動かないので、一時的においておくのはいいですが邪魔なので使わないブロックは右下にあるゴミ箱か、Deleteボタンを押して削除してください。
イベントの一番上にある、ずっとブロックを選んで設置します。
Setupにくっつけたあとに、ラベルを表示するブロックをその間に入れます。
これで、定期的にラベルの電圧が更新されます。再生ボタンを押してプログラムを転送してみてください。
転送できない場合には、まちがってダウンロードをしてしまった可能性があるので、Aボタンを押しながら電源ボタンをいれて、Programの画面でAボタンで選択してください。
うまく動くと、電圧が激しく動いているのがわかると思います。USBの充電ケーブルを外している状態の方が動きがわかりやすいと思います。
このままだと動きが多すぎてうるさいので、更新頻度をさせてみたいと思います。
1秒間隔で更新する
タイマーの中に「秒停止」というブロックがあるので設置します。
いまある「ラベルに表示」ブロックの下に「秒停止」ブロックを持っていくと下に追加することができます。
この画面のように色が付けばブロックが正しく設置されています。この状態でもう一度再生ボタンを押して実行してみてください。1秒間隔でバッテリー電圧が更新されているでしょうか？
バッテリー電圧は3Vでバッテリー切れになるので、下がっていたら充電するように気をつけてください。
完成図
本日作ったプログラムの完成図です。
ダウンロード(uiflow_l02.m5f)上記から今回のファイルがダウンロードできます。
まとめ
最低限最初に知っておいた方がいい項目を説明しました。特にダウンロードをしてしまった場合にアプリモードになってしまうと、知らないと元のプログラムモードに戻せないので注意してください。
あと、赤い背景は非常に目に悪いので他の色がいいと思いました。
次回はもうちょっと動きにあることを解説したいと思います。
コメント