見出し画像

M5StickC-PlusでUiFlowの「リモコン+」を使用する

こんにちはロック204チャンネルです。
今回は「M5StickC-PlusでUiFlowの「リモコン+」を使用する」と題しお送りします。

「リモコン+」はM5スティックと携帯の間でデータの通信ができるソフトです。
これはUIフローに標準で実装された機能となります。
この機能を使用するには、カテゴリーの中よりリモコンプラスをクリックします。するとこのように携帯端末の画面がプレビューされます。
この画面で、右の帯に配置された部品を、このプレビュー画面にドラッグアンドドロップしてプログラムを作成して行きます。
プログラムの実行はQRコードを携帯より読み取り実施します。

それではプログラムの作成手順を見て行きましょう。
ブレビュー画面が表示されたら、右の部品をドラッグアンドドロップします。ここではラベル部品を配置しました。
この部品の属性を見るには、配置した部品の上でクリックすると左のような形で属性を確認することができます。
またこの画面で属性を変更することもできます。

部品が配置されると コードエディターの上にその部品に対応したブロックが配置されます。
このブロックを使用してプログラムを修正して行きます。

こちらは作成したプログラムの実行方法について説明しています。
プログラムの実行は プレビュー画面の上の部分の暗くなったQRコードをクリックすると、このソフトを起動するQRコードが表示されます。
これを携帯端末で読み取り、プログラムを携帯の画面に表示します。

またM5スティック上にQRコードを表示するには、ここに表示するように「リモコンページの二次元コードを…」というブロックをセットアップの下に表示配置すると左のようにM5スティックにQRコードを表示することができます。
これを携帯で読み取り実施することもできます。

「リモコン+」の使用方法(6/6)

それではサンプルプログラムを見て行きましょう。
「Setup」ブロックの下にQRコードの表示ブロックを配置しています。
x座標、y座標はM5スティックのディスプレイの、どの位置にQRコードを配置するのかを決めます。
またサイズはQRコードの大きさとなります。
プレビュー画面の部品について説明します。
画面上部のLabelは名前がno、ここに表示されるデータは変数pr_label2_dataに保存されます。
その下のボタンには画面でボタンをタップすると変数pr_label2_dataの値を一つ増やす機能を果たします。
その下のスライダーはハンドルを動かすと変数slider_valueの中にスライダーの現在値を保存します。
そして変数rp_label2_dataをslider_valueの値で置き換えるプログラムとなっています。

画面最下部のラベルは、ラベル名Label_textでこちらに表示された値は、rp_label6_dataとして保存されます。
その一つ上のブロック「Input textbox…」は携帯の操作でデータを入力することができるものです。
こちらで入力された値は、input_valueに入力されテキストボックス上に表示されます。
またこの値をrp_label6_dataに出力するようにブロックを配置しています。
それでは実行状態を見て行きましょう。

リモコン+のサンプルプログラム(3/3)
プログラムの実行



この記事が気に入ったらサポートをしてみませんか?