【Xi IoTで映えるデモがしたい 第21回】管理画面をどう作るか

LEGOをスマートファクトリー化する道のり

1. 画像取得
2. MQTT送信（Publish）
3. Xi IoT Data Pipelineで MQTT受信（Subscribe）
   • その２
4. Xi IoT Data Pipelineで画像処理して送信（Publish）
5. 管理画面を作って確認（Subscribe/Publish） ←今回はココ
6. RasPi+BrickPiで結果受信（Subscribe）してモーター制御
7. スイッチ ON/OFF制御を組み込んで完了

ここまでコマンド/コードレベルでデバッグをしながら進んできましたが、一旦色判定までは、Xi IoTのData Pipeline上でpythonとMQTTを使えばなんとかなりそうな気がしてきました
ここらへんで管理画面を作成にも取り組んでみたいと思います

管理画面作成には、Node-REDを使うことにします
ラズパイにRaspbianをインストールすると標準で入ってたりします
nodered.org

もちろん初めて使ったのですが、こいつを使えば IoT環境の簡単な GUIなんかはめっちゃ簡単に作れちゃいますね
ちょっとした処理（いや、作り込み次第では複雑な処理も）を GUIベースでサクサクっと作れちゃいます

このNode-REDを Xi IoT で使うポイントとして、コンテナで提供されているので Xi IoTアプリケーションとして Service Domain（Xi Edge OS）上に設置できてしまうのです
Xi IoTではkubernetesが標準で動いてるん

データの流れイメージ

Node-REDのインストール

Xi IoT上へのインストール方法を見ていきましょう

kubernetes Apps

kubernetsのyaml設置

kubernete用のyamlファイル設置してやるだけでOK

いたって簡単です

Node-REDへ設定画面への接続

Service Domain上にインストールされているので "http:// Service Domain（Xi Edge OS）のIP:1880"
でNode-REDの設定画面へ接続できます

Node-RED設定画面

node-red-dashuboardの追加

初期設定でもいろーんなノードが用意されていますが、簡単に管理画面を作る用のノード群を追加してやります
パレットから「node-red-dashboard」を追加

　　

node-red-dashboardの追加

[参考URL]
基本ノードについて
ユーザガイド : Node-RED日本ユーザ会
node-red-dashboardについて
node-red-dashboard (node) - Node-RED

証明書の設置

次にXi IoTのData PipelineとMQTT接続するのに大切お作法、Service Domain（Xi Edge OS） 証明書の設置をしてやります
証明書の入手はこちら

MQTTメッセージを Sub するためのノード mqtt inを選択して設定していきます

mqtt inノード

mqtt接続してくるサーバの設定

証明書の選択

　・証明書：certificate.crt
　・秘密鍵：privateKey.key
　・CA証明書：CACertificate.crt

これで、Xi IoT Data Pipeline で Publish された、MQTTメッセージを Subscribe する準備が整いました

ノードの設置

現在、Xi IoT Data Pipelineからは、色判定の結果と画像データがこんな感じで送られていました

mqtt-test - b'{"SherlockTimestamp":1576687996517,"state":blue,"image":/9j/4QFWR～}'

Node-REDで受け取ってみます
mqtt inノードに debug ノードを繋げて確認してみましょう

debugノードで受け取ってみる

無事受け取れているようです

色の判定結果を読み取って、分岐するのは感じで作りました
jsonノードを使って、色の判定結果 [state] と 画像 [image] で処理を分岐させます

色判定と画像表示

色の判定結果に応じて MQTTメッセージの変更してみたり
画像データを元に、htmlを生成し管理画面に画像表示させてみたりします

判定分岐と画像表示

管理画面に画像表示

めっちゃ簡単
ちょっとしたプログラミンもしつつ管理画面もいじっていきます

単純に受信した画像を表示するだけでなく、

• 現在のLEGOの状況をRasPi+BrickPiからも LEGO の状況を受信してモーターの状況を表示するgaugeノード
• LEGOを起動するスイッチをbuttonノード
• 判定する色を決めるswitchノード

などなど配置していくと

管理画面完成！

この次は、この管理画面に合わせて RasPi+BrickPi側の pythonコードを工夫していきます

Node−RED奥が深いですね、これだけでしっかり時間をとっていろいろ調べて取り組んでみたいところ