Node-RED使用箇所の解説 : Node-REDとクラウドを用いたセンシングデータのAR可視化サンプル

#Node-RED使用箇所の解説
Node-REDとクラウドを用いたセンシングデータのAR可視化サンプル で扱っているサンプルについて解説します。

Node-REDでは、ノード(箱上のブロック)をつなげて出来たプログラムを「フロー」と言います。また各ノードをダブルクリックすることで、各ノードの編集画面が開きます。

① IBM IoT

「ibmiot in」ノードを使用しています。仮想センサーを使用している場合は、デバイスIDを入れるだけです。実物のセンサーを使用している場合は、「Authentication」などを変更する必要があります。

② Insert Sensor data to Flow variable

「change」ノードを使用。フロー変数を使用し、①で取得したセンシングデータをフロー変数「temp」に代入します。

③ Flow variable

「function」ノードを使用。フロー変数「temp」の値を、「Debug: Flow variable」に渡します。

④ Debug: Flow variable

「Debug」ノードを使用。フロー変数「temp」の値を、Node-REDのデバッグタブで表示します。

⑤ [get]/aframe

「http in」ノードを使用。AR表示の際に利用するAR表示用URLについて定義します。

Node-REDのURLのうち、mybluemix.netの手前の/(スラッシュ)までを削除し、末尾に上図のようにURLに記述した、/aframeを追加します。
たとえば、https://node-red-xxxx.mybluemix.net/aframe といったようになるはずです。xxxx の部分は各自で異なりますのでご注意ください。この/aframeで終わるURLに、PCやスマートフォンのWebブラウザからアクセスすることで、Webブラウザ経由でカメラがARマーカーを認識し、ARコンテンツを表示することができます。

⑥ Get Flow variable

「function」ノードを使用。フロー変数「temp」の値を取り出し、次の「switch」に渡します。

⑦ switch

「switch」ノードを使用。「Get Flow variable」から受け取ったフロー変数「temp」の値に対して、30℃以上と29℃以下で、処理を分ける定義を行います。

この設定により、30℃以上なら、「Set Color: over 30 degrees Celsius」へ、29℃以下なら「Set Color: under 29 degrees Celsius」に処理が引き継がれます。

⑧ Set Color: over 30 degrees Celsius

「function」ノードを使用。30℃以上の場合、ARとして表示するコンテンツは、立方体を縦に3つ積み重ねたものに、下から、黄色、オレンジ色、赤色を表示します。
ここでは、次の「A-Frame」に引き渡す色コードを呼び出しています。

⑨ Set Color: under 20 degrees Celsius

「function」ノードを使用。29℃以下の場合、ARとして表示するコンテンツは、立方体を縦に3つ積み重ねたものに、下から、黄色、オレンジ色、グレー系の色を表示します。
ここでは、次の「A-Frame」に引き渡す色コードを呼び出しています。

⑩ A-Frame

「template」ノードを使用。前の処理で指定した色を用いて、ARコンテンツとして、VR/ARフレームワークの「A-Frame」を用いて生成しています。

A-FrameにおけるARの実装については、詳しくは下記をご確認ください。
https://aframe.io/blog/arjs/

⑪ http

「http response」ノードを使用。「[get]/aframe」で「http in」ノードを使用していますので、「http in」ノード使用時にペアで必要になる「http response」ノードを配置しています。