2020.07.14「Node-REDで可視化してみた」

4b2f3a64637b51e81813accbe8a98083?s=47 KMiura
July 14, 2020

 2020.07.14「Node-REDで可視化してみた」

2020.07.04「IoT縛りの勉強会! IoTLT vol.65 @Youtube」

4b2f3a64637b51e81813accbe8a98083?s=128

KMiura

July 14, 2020
Tweet

Transcript

  1. Node-REDでDBを可視化してみた KMiura

  2. 自己紹介 • 三浦 耕生(こうき) • 名古屋のゲーム会社 のサーバーエンジニア

  3. SORACOMから小包が • SORACOMのブログ投稿キャンペーン に応募したらノベルティが届いた • 思ってたよりも早く着いた(ありがとうご ざいます!)

  4. とりあえず動かしてみた • SORACOMコンソールから受け取り確認を 入れてデバイス登録すると開通する • これでSORACOM Harvestから温湿度を とってみる 1時間おきに点滅→

  5. もう少しなにかしたいな • IBM Cloud Functionsでデータを取ってCloudantにためてみる • SORACOM FuncではIBM Cloud Functionsと連携できない(知っ

    てた • SORACOM BeamでRest API経由でデータを送信してみることに
  6. 続きを書いてみた https://qrgo.page.link/KoPoB

  7. 今回はその続編

  8. データの可視化 • せっかくDBにためてるならデータを可視化したい • とりあえずNode-RED使うか • Dashboard使う ここまでがテンプレ

  9. しかし、罠が… Dashboardを使うときには今動かしているデバイスの データを一定間隔で取得してグラフにプロットする DBのデータを可視化するにはあまり使えない…

  10. さすがに初参加の方に失礼

  11. 他の手段はないのか?? • どうやらChartjsをNode-REDで使えるっぽい • 予めグラフに使う値を定義して出力させるっぽい https://github.com/masalinas/node-red-contrib-chartjs

  12. フロー • Cloudantのデータに全文検索かけて直近 の100件に絞り込み • Chartjsノードに渡せる形に成形

  13. 完成 • トリガーを実行することでプロットが 行われる • 配列の立て方もシンプルでグラフの カスタムが自由にできそう

  14. なんとグラフを出力出来る • PNGとPDF • でもPDFは出力されず…

  15. 複数のグラフを表示する • iframeで自力で組み込むしかない • 安定のBootstrap

  16. DEMO

  17. まとめ • リアルタイムでモニタリング • Dashboard • DBから持ってくる • Chartjs •

    Node-REDを使えばパーツ単位でUIを管理できる Node-RED最高!
  18. 次回予告 • Raspberry Piでこのご時世に使い たいもの作ってみる • 絶賛準備中

  19. END