• Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • HOME
  • Arduino
    • Arduino初心者編
    • Arduino基礎編
    • Arduino応用編
    • Arduino実践編
  • Raspberry Pi
  • microbit
  • XBee
  • Scratch
  • Contact Us
  • Privacy Policy

STEMSHIP

ものづくりを通して、科学を学ぼう!

現在の場所:ホーム / Arduino / Arduino応用編 / ArduinoでSTEM教育​ 応用編:MQTTとNode-REDを用いたLED制御 その2

ArduinoでSTEM教育​ 応用編:MQTTとNode-REDを用いたLED制御 その2

2020年10月15日 by STEMSHIP コメントを書く

前回に引き続き、Node-REDを使用して、PCでグラフィカルユーザーインターフェースを作成し、そのインターフェースからArduinoのLEDを制御する方法を紹介します。

ブローカーの起動

まず、インストールしたMQTTブローカー Mosquittoを起動します。インストールしたフォルダ(標準ではC:/Program Files/mosquitto)を開き、mosquitto.exeをダブルクリックします。一瞬だけコマンドプロンプトが表示されて消えてしまうかもしれませんが、タスクマネージャーを起動して、「mosquitto.exe」というプロセスが動いていれば問題ありません。

図1 タスクマネージャーでmosquitto.exeが動作しているか確認

これでブローカーの準備が整いました。次に、スタートメニューからMQTTクライアントソフトウェアMQTT.fxを開きます。

図2 スタートメニューからMQTT.fxを起動する

クライアントソフトウェアMQTT.fxに接続するブローカーを設定します。ブローカーはウインドウ左上のリストで選択します。最初の状態ではmosquittoがまだ設定されていないので、新しくエントリを作成します。歯車のマークをクリックして、現れたダイアログボックスで図3のように設定します。

図3 ダイアログボックスを使用してブローカーの設定をする

ここで重要な点が、ブローカーのIPアドレスとポートです。IPアドレスは先ほど調べたものとは違う、「127.0.0.1」となっています。これは特別なIPアドレス(シンボリックIPアドレス)で、常に自分と同じコンピュータを意味します。ポートはMQTTで一般的に使われる1883とします。

それ以外の設定はデフォルトそのままで構いません。「OK」をクリックしてダイアログボックスを閉じます。
ウインドウ左上の「connect」ボタンを押せばブローカーに接続、「disconnect」ボタンを押せばブローカーとの接続を切断できます。接続中はグレーだったウインドウ右上の丸印が緑色に変わります。

「Subscribe」タブをクリックしてトピックの受信画面に移ります。
左上の入力フィールドに「#」を入力して、すべてのトピックを受信してみます。

図4 サブスクリプション「#」を指定してすべてのトピックを受信

左側のフィールドで、トピックごとに受信のミュートや受信解除ができます。
マイコン(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を付け加えずに送ってみてください。)

図5 メッセージの送信

スケッチにはSerial.print()コマンドを各所に入れてあるので、Arduino IDEのシリアルモニタで動作確認できます。

図6 シリアルモニタでマイコンの動作を確認

これでMQTT通信ができるようになりましたが、LEDの制御の手順がまだ複雑に感じられます。次の項目ではNode-REDを活用して、より操作しやすく改良します。

Node-REDによるビジュアル化

MQTT.fxは終了してかまいませんが、mosquittoは動作したままにしておきます。新しくコマンドプロンプトを起動し、次のように入力してEnterキーを押します。

Node-RED

図7 Node-REDサーバー

これでNode-REDサーバーが起動しました。このコマンドプロンプト画面は最小化しても構いませんが、閉じてはいけません。
次に、ブラウザのアドレスバーにアドレスを入力します。

127.0.0.1:1880

Node-REDのインターフェース画面が開きます。
最初の状態では「フロー」が空の状態です。フローはArduino IDEのスケッチのように、サーバーの動作を指示するものです。Node-REDではほとんどArduino IDEのようなプログラムではなく、ノード(要素)のつながりをビジュアルに表現していきます。

図8 Node-REDはwebブラウザ上で設定します。

まず、追加で必要なモジュール(Arduinoのライブラリのようなもの)をインストールします。
右上の3本バーのマークをクリックしてメニューを開き、「パレットの管理」をクリックします。「ノードを追加」タブを開き、検索フィールドに「dashboard」を入力して、「node-red-dashboard」をインストールします。

図9 モジュール「node-red-dashboard」をインストールしておく

これから作っていく操作・表示画面の完成図を図10に示します。
画面左側に読み込んだアナログ値を表示し、右側でLEDの明るさを簡単にコントロールします。

図10 今回製作する操作・表示画面の完成図

Node-REDのフロー作成画面で、使用するノード(要素)を左のバーからフローにドラッグして配置します。
図11のように配置します。要素を間違えないように注意してください。

図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のように設定します。

図12 「LED ON」ボタンの設定

Webページとして表示する際に、LEDの制御に関する要素とアナログ値の受信に関する要素を分けて表示するため、グループを定義します。
「Group」の入力欄の右側にある鉛筆マークをクリックして、グループの名前を設定します。LEDの制御に関する要素は「Control」としました。
「Label」でwebページ上での表示名、「Payload」で送信する値を設定します。それぞれ「LED ON」「255」とします。
設定後、「完了」ボタンをクリックして設定画面を閉じます。

同様に、2つ目のボタンを「LED OFF」ボタンに設定します。LabelとPayloadの値が異なります。

図13 「LED OFF」ボタンの設定

続いてスライダーの設定をします。「Range」でスライダーが送信する値の上限と下限を決めます。

図14 スライダーノードの設定


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;
図15 先頭に「0」をつける処理をJavaScriptで表現

次に、MQTT outノードを設定して、ブローカーに数値を送信します。トピックも定義しておきます。

図16 MQTT outノードの設定

ブローカーのアドレスを設定する必要があります。「サーバ」欄ヨコの鉛筆マークをクリックして、設定画面に図17のように設定します。

図17 ブローカーの設定

MQTTブローカーに送信すると同時に、設定した明るさの値をwebページ上で表示するためにテキストノードを使用します。

図18 テキストノードの設定

ここまでがLEDの制御に関するフローです。ここからは、アナログ値の受信に関するフローを組み立てていきます。
まず、MQTT inノードがMQTTブローカーからメッセージを受け取ります。トピック「Arduino/AnalogValue」を設定すると、それ以外のトピックは受信しません。

図19 MQTT inノードの設定

受信した値を「Gauge」ノードに転送すると、値をメーター表示できます。数値の範囲によって表示の色を変えるオプションも付いています。文字列としてデータを受信しますが、Node-REDが自動で数値に変換してくれます。アナログ値の受信に関するノードのグループ名は「Evaluation」にします。

図20Gaugeノードの設定

同じ受信した値を「Chart」ノードに転送すると、時系列の折れ線グラフとして表示できます。
Y軸の最小値と最大値を正しく設定すると見やすいチャートになります。

図21 Chartノードの設定

すべてのノードの設定が終わったら、右上の「デプロイ」ボタンをクリックします。これで設定が保存されます。

図22 デプロイボタンで設定を保存する

動かしてみよう

Webページを表示させてみましょう。新しくブラウザタブを開き、アドレスバーにアドレスを入力します。

127.0.0.1:1880/ui

これで、図10のようなwebページが表示され、LEDの制御、アナログ値の表示を行うことができます。
各要素の順番が異なる場合や、入れ替えたい場合には、フロー画面右側の「dashboard」タブで順番を入れ替えできます。

図23 webページ上での要素の配置を変更できる

ブローカーとなるパソコンやArduino/ESPと同じWiFiに接続していれば、スマートフォンなどからでも接続・制御ができます。スマートフォン・パソコンなど、複数の端末からの同時利用も可能です。
この時、アドレスにはipconfigで調べたパソコンのIPアドレスを指定します。図23の場合、「192.168.1.137:1880/ui」になります。

図24 スマートフォンから接続

まとめ

非常にシンプルな例でしたが、MQTTが使いやすいということが分かります。
家中に温度センサを設置して温度を測定したり、屋外の天候によってリビングの照明の雰囲気を変えたりといったことが簡単に行えます。

MQTTには、特にインターネットと接続して使用する場合の利点がいくつかあります。

  • クライアントはブローカーのIPアドレスさえ知っていれば通信が行える
    つまり、通信したいクライアントのIPアドレスを知らなくても通信ができる
  • クライアントはいつでも追加・削除できる
  • 転送するデータの構造や通信頻度など、自由度が高く、プログラム作成がしやすい
  • MQTT.fxのようなクライアントソフトを使ってトラフィックを確認することができる

この例では、データ転送を行う間は常にパソコンを起動させ、mosquittoやNode-REDが動作している必要があります。実験ではなく長期で稼働させる場合、MQTTブローカーやNode-REDソフトウェアの実行用に、ミニコンピュータ(Raspberry Piなど)を利用することが多くあります。また、インターネット上のサーバーを利用してブローカーとすることも可能です。

一方で、特に初心者が見落としがちな点ですが、暗号化やパスワードによる保護といった、不正アクセスに対するセキュリティ対策も必要になります。

家庭内のネットワークであっても場合によっては外部からMQTTトラフィックを読み取ることができてしまう危険性があります。(例えば、マルウェアに感染したスマートフォンがホームネットワークに接続されている、など)

一見、外部に漏洩しても問題ないと思われるデータが、思わぬトラブルを引き起こす可能性は十分あります。

例えば室温や部屋の明るさ、テレビのON/OFF状況などは、「あなたが家を留守にしているタイミング」を知ることができるデータです。あなたの家に侵入しようとする不届き者に知られてしまえば、それは侵入しやすいタイミングを教えることになってしまいます。

Filed Under: Arduino応用編 関連タグ:IoT, LED, MQTT, Node-RED

Reader Interactions

コメントを残す コメントをキャンセル

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください。

最初のサイドバー

CONTACT US

  • Facebook
  • Twitter
  • Youtube

More to See

Arduinoベースのセンサノード:XBeeデータ収集ノードの製作

2021年9月27日 By STEMSHIP

Arduinoベースのセンサノード:Arduinoを使った温度センサの作製

2021年9月21日 By STEMSHIP

XBeeモジュールとBMP280センサを使用してデータ収集する

2021年5月31日 By STEMSHIP

XBeeモジュールでMicroPythonを使ってセンサを読み取る

2021年5月24日 By STEMSHIP

XBeeモジュールでセンサを読み取る:センサノードの設定と測定

2021年5月17日 By STEMSHIP

カテゴリー

  • Arduino (44)
    • Arduino初心者編 (15)
    • Arduino基礎編 (11)
    • Arduino実践編 (4)
    • Arduino応用編 (11)
    • Arduino番外編 (3)
  • MakeyMakey (1)
  • microbit (11)
  • Raspberry Pi (13)
  • Scratch (6)
  • STEM教育 (5)
  • XBee (15)
  • ものづくり教育 (2)
  • 子供の教育 (2)
  • 科学 (6)
  • 算数 (5)

Tags

BLE DCモータ EEPROM ELEGOO ESP32 ESP8266 IoT LCD LED makeymakey MQTT Node-RED scratch STEM教育 WiFi XBee アニメーション オンラインゲーム カメラ クローン ゲーム コスチュームの変更 サーボモータ ステッピングモータ ステートマシン スピーカ タイマー ピンポン ブロック定義 ペン ライントレース ラジコン リスト 分数 割り込み 実験 工作 幼児 当たり判定 温度センサ 無線通信 物理 角度制御 重力 音楽

Footer

最近の投稿

  • Arduinoベースのセンサノード:スケッチ(プログラム)の作製
  • Arduinoベースのセンサノード:XBeeデータ収集ノードの製作
  • Arduinoベースのセンサノード:Arduinoを使った温度センサの作製
  • XBeeモジュールとBMP280センサを使用してデータ収集する
  • XBeeモジュールでMicroPythonを使ってセンサを読み取る

タグ

BLE DCモータ EEPROM ELEGOO ESP32 ESP8266 IoT LCD LED makeymakey MQTT Node-RED scratch STEM教育 WiFi XBee アニメーション オンラインゲーム カメラ クローン ゲーム コスチュームの変更 サーボモータ ステッピングモータ ステートマシン スピーカ タイマー ピンポン ブロック定義 ペン ライントレース ラジコン リスト 分数 割り込み 実験 工作 幼児 当たり判定 温度センサ 無線通信 物理 角度制御 重力 音楽

Search

2023年3月
月 火 水 木 金 土 日
 12345
6789101112
13141516171819
20212223242526
2728293031  
« 10月    

Copyright © 2023 · STEMSHIP.COM