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などにで使ったほうがいろいろできるきがします!

コメント

  1. tadachan より:

    本記事を参照させていただき、M5StickCにリモコンのQRコードを表示させ、遠隔でボタン操作を行なっております。ありがとうございます。
    uiflow1.0でプログラミングして、RUNモードで動作確認の後、ダウンロードしてアプリモードで長期的に使用しています。
    動作初期は、QRコードを読み込んで正常動作を確認できるのですが、数日間経つとデータが表示されない状況になってしまいます。R5Remoteのトップバナーは表示されるのですが、それ以下のデータが表示されません。
    なお、再度 RUNモード、ダウンロードを行うと、また正常にアクセスすることができます。
    つきましては、リモコンの接続先URL情報について、教えていただければ幸いです。

    https://flow.m5stack.com/remote?id=xx174xx63xx041008xx
    (xxはぼかしの意味です)
    M5StickCのAPIKEYは、変更していないのですが、idが変化していることが原因かと思いました。
    idは、APIKEYと固定的にリンクしているものと思っていたのですが、何か原因や対策がありましたら、ご教授いただければ幸いです。

    • たなかまさゆき より:

      もしかしたら端末がWi-Fiから切断されているかもしれません
      Networkの中にWi-Fi系のブロックがありますので確認したほうがよいのかもしれません

      ずっと
       もし [Network:Wi-Fiと接続している]
        であれば
         接続中と表示
        そうでなければ
         切断と表示
         [Network:Wi-Fiの再接続を行う]

      みたいな感じで状態表示と、再接続ができるかもしれません

      https://qiita.com/intm/items/15af98ab3ef5e367e009

      あとは上記のようにタイマーをつかって、ハングアップしたら再起動することも可能です
      現在はシステムの中に「システムをリセット」ブロックがあったはずです

      • tadachan より:

        ご返信ありがとうございます。
        リモコン機能と同時に、http通信でGoogle Apps Script(GAS) へ定期的にデータを送信しています。
        連続稼働でも、GASへのデータ送信は問題なく継続しているので、WiFiの問題ではないと考えています。
        https://flow.m5stack.com/remote?id=xx174xx63xx041008xx
        上記URLのリモコンid  ixx174xx63xx041008xx が、何かの要因でリセットされるのではないかと推測しているのですが、その要因がわかれば対策もできるかと思いご相談しました。

        また、いろいろ情報検索してみます。

        • たなかまさゆき より:

          https://docs.m5stack.com/en/uiflow/blockly/ezdata/remote+
          「生成された Web ページの QR コードの位置とサイズを設定します。注: Web ページが初めて実行されると、コード内の URL のリモート パラメータが自動的に更新されるため、最初にこの API を UIFlow オンライン モードで 1 回実行する必要があります。」

          もしかしたらQRコードを表示した瞬間に更新されている感じですので、URLを特定できたら次からは表示させないと固定化できる可能性があります
          その場合にはボタンを押して起動したときだけ表示するみたいなロジックがいいのかな?

          現状はIDが更新されるタイミングを確認したほうがよいのかもしれません
          すみませんが、現在UIFlow1系が動く端末が手元にないので動作確認できませんでした

          サーバー側が無効にしている場合には定期的な本体再起動か、外部から定期的にRemoteのURLにアクセスするなどで無効にならなくなる可能性があると思います

          • tadachan より:

            やはり、発行されたIDには、期限がありそうですね。発行されたID(URL)に一定時間以上アクセスがない場合は、リセットされるような気がします。

            現在、共通のプログラムを複数の端末で動作するようにしています。
            各端末でプログラム(xxxxx.m5f)において、RUNモード(オンラインモード)で動作確認したのち、ダウンロードしてアプリモードで長時間動作させています。

            各端末の動作状況を確認するため、起動時に表示されるQRコードをメモしておいて、必要な時にアクセスして端末の動作を確認するようにしています。
            なので、端末によっては長時間アクセスせずIDがリセットされる場合がありそうですね。

            IDがリセットされた場合は、アプリモードで再起動をしても旧のIDのままなので、再度RUNモード(オンラインモード)で動作させてQRコードを更新し、アプリモードにする必要があるみたいですね。

            ありがとうございます。