Node-REDで作成した折れ線グラフ、ヒストグラム、散布図をMindSphere上のVisualFlowCreatorへ移植してみました

# はじめに

- [Node-REDを利用して基本的なデータ分析をやってみました](https://qiita.com/tota_nissho/items/f6d6d94eb23cd4d9240d)

上記にて作成した、Node-RED上のオブジェクトをMindSphere上のVisualFlowCreatorに移植して、動くかどうか試してみました。

　CO2濃度と温度データについて
　　　１日分の折れ線グラフ
　　　最大値、最小値、平均値、ヒストグラム
　　　散布図　　
をMindSphere上のVisualFlowCreatorで表示させることが今回の目標となります。

※MindSphereは、Siemens社がグローバル展開する「クラウドベースのオープンIoTオペレーティングシステム」です。




# Node-REDからFlowを書き出し（Export）してみます
　当方環境はNode-RED ver2.2.2をWindows上で動かしております。
　フローの全体は以下となります。大きく、「CSVファイル読込」、「折れ線グラフ」、「平均・最大：最小・ヒストグラム」、「散布図」の４つに分かれております。　右上のボタンを押し、「書き出し」を選択します。

![VFC移植書き出し.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/c2227b89-3256-86ec-a3d5-1d8343fb0ffa.png)


「フローを書き出し」でダウンロードを選択します。flow.jsonファイルが作成されます。※今回はflows(10).jsonといった名前で作成しています

![VFC移植フローを書き出し.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/1cf19470-2d5e-a70a-a5c3-90b7bb0c33a4.png)


# MindSphere　VisualFlowCreatorでImportします


　まず、MindSphereへログインします。今回はFree環境を利用します。
　LaunchPadでVisualFlowCreatorを選びます。

![VFC移植MindSphere.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/eb1a659c-0bd3-04d9-cbb9-463ea30f5ca3.png)


　次に、VisualFlowCreatorにてImportを実施します。
![VFC移植VFCImport.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/d4778b31-55ff-00a0-c12a-d3c668e6af0e.png)


　select a file to importを選択し、flows(10).jsonを選択し、開くを押します。　
![VFC移植VFCImport2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/d474677f-2f62-87d9-2f75-3ec536573067.png)



　jsonファイルが読み込まれましたので、importボタンを押します。　
![VFC移植VFCImport3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/5d6e776c-15eb-0150-0e67-470ea4618063.png)


　エラーが２つ出ております。この後、エラー部分を調整していきます。
![VFC移植VFCImport4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/827cc279-590e-3da2-7ff4-95ab63686757.png)




# VisualFlowCreatorにて調整作業を実施します。
　
　ImportしたFlowの全体を見ると、計４か所について、ノードの背景色が薄くなっていることがわかります。この部分のnodeを別のnodeに差し替えていきます。
![VFC移植VFC調整１.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/1f9031cb-d87f-6216-612d-76825542902d.png)




　調整前にMindSphere環境のAsset　MobilePhone　の配下に　co2-20220105.txt　ファイルをアップロードしておきます。
（MindSphereのOperationsInsight、AttachmentsでファイルのUploadが可能です。）
（今回のケースではAsset　MobilePhoneを使用しましたが、他のAssetでも全く問題ございません。）
![VFC移植OIファイルUP.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/e9ab3111-6d97-c37f-2d09-8afd210bf3ac.png)


まず、file inノードをread fileノードに置き換えます。MindSphere上では、AssetのAttachmentの中にあるファイルをread fileノードで読み込むことが可能となっています。
read fileノードのNameはreadに変更しました。Assetの右側にあるボタンを押すとselect File画面が出てきますので、AssetsはMobilePhoneを選択し、Filesはco2-20220105.txt　を選択します。

![VFC移植VFC調整２.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/e7a14a15-307d-3e96-5161-546d5377b00e.png)



次にcaliculatorノードについてです。３つのcaliculatorノードを１つのChangeノード置き換えます　
Changeノードは　温度用のChangeノードをCOPYして、３箇所の　data_c　を　data_b　に変更し、CO2のデータに対応します。
![VFC移植VFC調整3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/09d01cc4-51d1-42c6-d0a1-39c7ae328559.png)


最後に、Edit dashboard tab node　の　Accessについて　Show in Dashboard Viewer and OI　へ変更します。この処理をすることで、VisualFlowCreatorで作成したダッシュボードをMindSphere上のDashboard ViewerやOperationsInsightで参照可能になります。

![VFC移植VFC調整4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/b9001449-37ec-32af-4cfe-1f0b81e0a6ee.png)

　
# Dashboard Viewerからダッシュボードを見てみましょう。

　Dashboard Viewerから　Vegaデータ　を選択します
![VFC移植Dash1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/2336a6d8-fdf0-a34a-8d55-fe2012211f46.png)

　VisualFlowCreatorで処理を実行すると以下が表示されます
![VFC移植Dash2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/66292ab3-38c3-8b31-9c7d-083641a6f321.png)


なお、OperationsInsightからも参照可能となっています。以下が入口となり、表示結果はDashboard Viewerと同じです。

![VFC移植DashOi.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2742464/5c87fecc-2e35-2b21-86ed-cd8c9c87cba7.png)



# おわりに

　Node-REDからの移植作業を通して、MindSphere上にノードがないケースについては、一部作り直しが発生するケースを体験しました。

　MindSphere上でVegaノードを使ってヒストグラムや散布図を表示できたことは、ダッシュボード表示の幅が広がり、大きな収穫と考えております。

　今後　取り組んでいきたいテーマとしては
　　・「箱ひげ図」　の移植
　　・MindSphereのAssetの時系列データからの今回のグラフ表示　
　　　　　　　　　　　　　　　　　　　　　　といったところがあります。

　なお、MindSphere上のVisualFlowCreatorはNode-REDと比較して、以下のような差異があります。
　
　・カスタムノード　
　　　VisualFlowCreatorでは最大5個まで
　　　（移動平均nodeやMindSphereのAssetデータを読み書きできるMindSphere固有のnodeなどが準備されています。）
　　　Node-REDは制限なし

　・1フローの最大実行時間
　　　VisualFlowCreatorでは30秒 (電源モードオプションで最大2分)
　　　Node-REDでは制限なし

　　　等々


差異の詳細は英語版の以下マニュアルの１５ページに「VisualFlowCreatorとNode-REDの差異」として表形式で記載されています。（2022年３月変更版）

- [Visual Flow Creator System Manual]　
https://documentation.mindsphere.io/resources/pdf/visual-flow-creator-en.pdf

※SiemensおよびMindSphereは、Siemensの登録商標または商標です

# 参考資料

- [Node-REDダッシュボードを用いたデータ可視化](https://qiita.com/HiroyasuNishiyama/items/2433d275c667bc75ed8c)
- [Vega](https://vega.github.io/vega/)
- [Vega-lite](https://vega.github.io/vega-lite/)
- [JSONata](https://docs.jsonata.org/overview.html)
- [node-red-node-ui-vegaを使った各種センサーのグラフ表示](https://qiita.com/kz1017/items/a9690f1e7cb06b0e3f24)
- [二酸化炭素濃度モニタリングリモートデモシステムの構築](https://qiita.com/hrsakuma/items/b29de6c1b482ee15f03b)
- [Node-Redを利用して基本的なデータ分析をやってみました](https://qiita.com/tota_nissho/items/f6d6d94eb23cd4d9240d)