前回に引き続き、Node-REDを使用して、PCでグラフィカルユーザーインターフェースを作成し、そのインターフェースからArduinoのLEDを制御する方法を紹介します。
ブローカーの起動
まず、インストールしたMQTTブローカー Mosquittoを起動します。インストールしたフォルダ(標準ではC:/Program Files/mosquitto)を開き、mosquitto.exeをダブルクリックします。一瞬だけコマンドプロンプトが表示されて消えてしまうかもしれませんが、タスクマネージャーを起動して、「mosquitto.exe」というプロセスが動いていれば問題ありません。
これでブローカーの準備が整いました。次に、スタートメニューからMQTTクライアントソフトウェアMQTT.fxを開きます。
クライアントソフトウェアMQTT.fxに接続するブローカーを設定します。ブローカーはウインドウ左上のリストで選択します。最初の状態ではmosquittoがまだ設定されていないので、新しくエントリを作成します。歯車のマークをクリックして、現れたダイアログボックスで図3のように設定します。
ここで重要な点が、ブローカーのIPアドレスとポートです。IPアドレスは先ほど調べたものとは違う、「127.0.0.1」となっています。これは特別なIPアドレス(シンボリックIPアドレス)で、常に自分と同じコンピュータを意味します。ポートはMQTTで一般的に使われる1883とします。
それ以外の設定はデフォルトそのままで構いません。「OK」をクリックしてダイアログボックスを閉じます。
ウインドウ左上の「connect」ボタンを押せばブローカーに接続、「disconnect」ボタンを押せばブローカーとの接続を切断できます。接続中はグレーだったウインドウ右上の丸印が緑色に変わります。
「Subscribe」タブをクリックしてトピックの受信画面に移ります。
左上の入力フィールドに「#」を入力して、すべてのトピックを受信してみます。
左側のフィールドで、トピックごとに受信のミュートや受信解除ができます。
マイコン(ArduinoまたはESP)が5秒ごと送信しているアナログ値を受信できます。受信できない場合はマイコンを再起動してみます。それでも受信できなければ、スケッチに入力したWiFiのネットワーク名やパスワード、ブローカーとなるパソコンのIPアドレスが間違っていないか確認してみてください。
次に、マイコンにデータを送ってみます。
「Publish」タブをクリックして送信画面に移ります。ウインドウ上部のフィールドにトピック「Arduino/LED」を入力し、下の入力エリアに0～255の数字を入力して「Publish」ボタンを押すとLEDがその明るさで点灯します。
ただし、0～99の値を送信する場合は、頭に「0」を付け加えて必ず3桁で送信します。「5」なら「005」、「64」なら「064」とします。ESPを使っている場合に、atoi()という関数が使えないということで、文字列から数値への返還を手動で行う処理を作成しました。この処理が常に3桁分のデータを必要とするため、送信時に必ず3桁ないと誤動作をします。(一度0を付け加えずに送ってみてください。)
スケッチにはSerial.print()コマンドを各所に入れてあるので、Arduino IDEのシリアルモニタで動作確認できます。
これでMQTT通信ができるようになりましたが、LEDの制御の手順がまだ複雑に感じられます。次の項目ではNode-REDを活用して、より操作しやすく改良します。
Node-REDによるビジュアル化
MQTT.fxは終了してかまいませんが、mosquittoは動作したままにしておきます。新しくコマンドプロンプトを起動し、次のように入力してEnterキーを押します。
Node-RED
これでNode-REDサーバーが起動しました。このコマンドプロンプト画面は最小化しても構いませんが、閉じてはいけません。
次に、ブラウザのアドレスバーにアドレスを入力します。
127.0.0.1:1880
Node-REDのインターフェース画面が開きます。
最初の状態では「フロー」が空の状態です。フローはArduino IDEのスケッチのように、サーバーの動作を指示するものです。Node-REDではほとんどArduino IDEのようなプログラムではなく、ノード(要素)のつながりをビジュアルに表現していきます。
まず、追加で必要なモジュール(Arduinoのライブラリのようなもの)をインストールします。
右上の3本バーのマークをクリックしてメニューを開き、「パレットの管理」をクリックします。「ノードを追加」タブを開き、検索フィールドに「dashboard」を入力して、「node-red-dashboard」をインストールします。
これから作っていく操作・表示画面の完成図を図10に示します。
画面左側に読み込んだアナログ値を表示し、右側でLEDの明るさを簡単にコントロールします。
Node-REDのフロー作成画面で、使用するノード(要素)を左のバーからフローにドラッグして配置します。
図11のように配置します。要素を間違えないように注意してください。
青緑色のノード(button/Slider/text/gauge/chart)は「dashboard」、ピンク色のノード(MQTT in/MQTT out)は「ネットワーク」、オレンジ色のノード(function)は「機能」のグループにそれぞれあります。ノードの配置が終わったら、ノードどうしを接続していきます。各ノードの左右に出ている白丸から別の白丸にドラッグすると接続できます。各ノードは左側が入力、右側が出力になっていて、あるノードの出力を別のノードの入力にルーティングすることでサーバーの動作を組み立てます。
次に、各ノードの設定を行います。ノードをダブルクリックすると設定画面が開きます。
LEDのONボタンから設定していきます。LED ONのbuttonノードをクリックすると、スライダーに数値255を送信する動作をします。数値はFunctionノードを通ってMQTTブローカーに送信され、Arduino/ESPが受け取るとLEDの明るさを変更する、という流れです。一番上のbuttonノードを図12のように設定します。
Webページとして表示する際に、LEDの制御に関する要素とアナログ値の受信に関する要素を分けて表示するため、グループを定義します。
「Group」の入力欄の右側にある鉛筆マークをクリックして、グループの名前を設定します。LEDの制御に関する要素は「Control」としました。
「Label」でwebページ上での表示名、「Payload」で送信する値を設定します。それぞれ「LED ON」「255」とします。
設定後、「完了」ボタンをクリックして設定画面を閉じます。
同様に、2つ目のボタンを「LED OFF」ボタンに設定します。LabelとPayloadの値が異なります。
続いてスライダーの設定をします。「Range」でスライダーが送信する値の上限と下限を決めます。
Functionノードでは、単純なノードで表現できない複雑な計算を行います。
先ほど、MQTT.fxでの動作確認の際に、「0～99の値を送信する場合は、頭に「0」を付け加えて必ず3桁で送信する」ということを説明しました。この処理をNode-REDに自動で行わせます。ボタンやスライダーで設定した数値のデータに、必要に応じて先頭の「0」を追加します。
Functionノードの動作はJavaScriptというプログラミング言語で表現します。
JavaScriptの表記方法はArduino IDEで使われているC++の表現方法と若干異なりますが、そんなに難しいものではありません。ここでは次のスクリプトを使用します。後でわかりやすいように名前も付けておきましょう。
var submit = msg.payload;
if(submit<100)
msg.payload = '0' + msg.payload;
if(submit<10)
msg.payload = '0' + msg.payload;
return msg;
次に、MQTT outノードを設定して、ブローカーに数値を送信します。トピックも定義しておきます。
図16 MQTT outノードの設定
ブローカーのアドレスを設定する必要があります。「サーバ」欄ヨコの鉛筆マークをクリックして、設定画面に図17のように設定します。
図17 ブローカーの設定
MQTTブローカーに送信すると同時に、設定した明るさの値をwebページ上で表示するためにテキストノードを使用します。
ここまでがLEDの制御に関するフローです。ここからは、アナログ値の受信に関するフローを組み立てていきます。
まず、MQTT inノードがMQTTブローカーからメッセージを受け取ります。トピック「Arduino/AnalogValue」を設定すると、それ以外のトピックは受信しません。
受信した値を「Gauge」ノードに転送すると、値をメーター表示できます。数値の範囲によって表示の色を変えるオプションも付いています。文字列としてデータを受信しますが、Node-REDが自動で数値に変換してくれます。アナログ値の受信に関するノードのグループ名は「Evaluation」にします。
同じ受信した値を「Chart」ノードに転送すると、時系列の折れ線グラフとして表示できます。
Y軸の最小値と最大値を正しく設定すると見やすいチャートになります。
すべてのノードの設定が終わったら、右上の「デプロイ」ボタンをクリックします。これで設定が保存されます。
動かしてみよう
Webページを表示させてみましょう。新しくブラウザタブを開き、アドレスバーにアドレスを入力します。
127.0.0.1:1880/ui
これで、図10のようなwebページが表示され、LEDの制御、アナログ値の表示を行うことができます。
各要素の順番が異なる場合や、入れ替えたい場合には、フロー画面右側の「dashboard」タブで順番を入れ替えできます。
ブローカーとなるパソコンやArduino/ESPと同じWiFiに接続していれば、スマートフォンなどからでも接続・制御ができます。スマートフォン・パソコンなど、複数の端末からの同時利用も可能です。
この時、アドレスにはipconfigで調べたパソコンのIPアドレスを指定します。図23の場合、「192.168.1.137:1880/ui」になります。
まとめ
非常にシンプルな例でしたが、MQTTが使いやすいということが分かります。
家中に温度センサを設置して温度を測定したり、屋外の天候によってリビングの照明の雰囲気を変えたりといったことが簡単に行えます。
MQTTには、特にインターネットと接続して使用する場合の利点がいくつかあります。
- クライアントはブローカーのIPアドレスさえ知っていれば通信が行える
つまり、通信したいクライアントのIPアドレスを知らなくても通信ができる - クライアントはいつでも追加・削除できる
- 転送するデータの構造や通信頻度など、自由度が高く、プログラム作成がしやすい
- MQTT.fxのようなクライアントソフトを使ってトラフィックを確認することができる
この例では、データ転送を行う間は常にパソコンを起動させ、mosquittoやNode-REDが動作している必要があります。実験ではなく長期で稼働させる場合、MQTTブローカーやNode-REDソフトウェアの実行用に、ミニコンピュータ(Raspberry Piなど)を利用することが多くあります。また、インターネット上のサーバーを利用してブローカーとすることも可能です。
一方で、特に初心者が見落としがちな点ですが、暗号化やパスワードによる保護といった、不正アクセスに対するセキュリティ対策も必要になります。
家庭内のネットワークであっても場合によっては外部からMQTTトラフィックを読み取ることができてしまう危険性があります。(例えば、マルウェアに感染したスマートフォンがホームネットワークに接続されている、など)
一見、外部に漏洩しても問題ないと思われるデータが、思わぬトラブルを引き起こす可能性は十分あります。
例えば室温や部屋の明るさ、テレビのON/OFF状況などは、「あなたが家を留守にしているタイミング」を知ることができるデータです。あなたの家に侵入しようとする不届き者に知られてしまえば、それは侵入しやすいタイミングを教えることになってしまいます。
コメントを残す