M5StickCでUIFlow入門 その8 リモコンを使ってスマホからブラウザで操作する

現時点の情報です。最新情報はM5StickC非公式日本語リファレンスを確認してみてください。

概要

前回はHATを使いましたが、今回は触ったことがなかったリモコンを使ってみました。

リモコンとは?

Blynkのようにスマホでスイッチの操作をしたり、ボタンを押したりすることができる機能です。ただし、専用アプリではなくブラウザでかんたんに開けるので、手軽に使うことが可能です。

リモコンのブロック

タイトルはリモコンと訳されていますが、元はRemoteみたいですね。6種類のブロックがあります。Betaというブロックもありますが、現在は使えないと思います。おそらくグラフを描画するチャートが今後増えてくると思います。

リモコンの仕組み

QRコードや、端末に紐付いたリモコンページをブラウザで開くことで、リモート操作が可能になります。

リモコンのブロックを設置すると、上の画像のようなQRコードのアイコンが追加されます。これをクリックすると、リモコンページのQRコードとURLをコピーする画面が表示されます。

このURLを開くことで以下のような画面がブラウザで表示されます。

パソコンでも表示されますが、スマホ用に最適化されている画面なので、スマホで見ることをおすすめします。

以下個別ブロックの利用方法の説明になります。

Set Titleブロック

このタイトルはブラウザに表示されるタイトルです。

この一番上のタイトルの部分です。ここは日本語が利用できました。未設定の場合には「M5Remote」と表示されます。

リモコンページの二次元コードを表示ブロック

このブロックも必須ではありません。デフォルト値ですと画面からはみ出るので、上記のX=-5, Y=1, Size=92でぎりぎり表示できます。

iPhoneなどでQRコードを読み込む場合には、カメラから少し距離を離してから、カメラの拡大機能を使って画面いっぱいにQRコードを広げてから読み取ってください。

ちょっと認識は難しいと思いますが、何度かチャレンジすると読み込めます。ただし、UIFlowの画面に表示されるURLをコピーしてブックマークしておいたほうが楽です。。。

リモートボタンブロック

画面にボタンを追加するブロックです。タイトルに画面に表示する文字(日本語可)を設定し、indexが表示される順番です。indexが同じ番号の場合には追加した順に表示されます。タイトルとindexはすべてのブロックで共通です。

ブロックの中にはボタンが押された場合に実行する処理をおきます。この例は2つボタンを設置して、LEDのONとOFFをしています。

リモートスイッチブロック

ON、OFFできるスイッチをリモコンページに追加します。一番左側にある設定ボタンを押して、取得する変数を指定します。

入力名を追加すると、その名前の変数ができます。入力値に変更があるとその変数の中身が変わっています。論理値で戻ってきていますので、そのまま「もし」に追加しても動きました。スイッチOFFの場合にはFlaseか0で、ONの場合にはTrueか1になると思います。

ただし、初期値を設定することはできない気がします。

リモートスライダーブロック

スイッチと同じように変数名を設定します。スライダーは初期値が0で、0から100までの数値が入力されます。

こちらも初期値が設定できないのがちょっと気になります。

リモートラベルブロック

インターバル起動して、処理結果をリモコンページに表示するブロックです。インターバル以外にも、リモコンページから更新リクエストもできます。

かなり便利なブロックですが、それなりに重いのでインターバルは長めに設定することをおすすめします。読込中は他の操作もブロックしてしまうので注意が必要です。

完成物の画面

こんな感じのプログラムになりました。

リモコンページには上記のように表示されます。

まとめ

マイナーですが、なかなか便利そうな機能ですね。ただ、もうちょっと進化しそうですね。簡易的な操作は全部リモコンでいい気もします。とくにATOMなどにで使ったほうがいろいろできるきがします!

コメントする

メールアドレスが公開されることはありません。

管理者承認後にページに追加されます。公開されたくない相談はその旨本文に記載するかTwitterなどでDM投げてください。またスパム対策として、日本語が含まれない投稿は無視されますのでご注意ください。