[ Data Visualization ] Node-RED 設定 Dashboard

學習目標

  • 安裝與設定 Node-RED Dashboard

前置準備作業

  1. 一台已連上網路的電腦

  2. 已安裝 Mosquitto MQTT Broker 【 安裝教學 】

  3. 已安裝 Node-RED 【 安裝教學 】

  4. 已設定完成 Node-RED 串接 Mosquitto MQTT Broker 【 設定教學 】


Step 1. 開啟 Node-RED 編輯頁面

❖ 1.1  查看 AWS EC2 IP 位置
       IP 位於【 IPv4 Public IP 】

❖ 1.2  開啟 Chrome 瀏覽器
        ☆ 在網址列輸入上一步驟的 IP ,最後在加上 【 :1880 】,例如:IP:1880


Step 2. 新增 【 node-red-dashboard 】 節點

☆ 點選右上角 【 ≡ 】 圖示

☆ 點選 【 Manage palette 】 

☆ 點選 【 Install 】 頁籤 

☆ 在【 search modules 】欄位中輸入【 node-red-dashboard 】

☆ 點選 【 node-red-dashboard 】 欄位右邊的 【 install 】 按鈕

☆ 點選 【 Install 】 按鈕

☆ 安裝完成


Step 3. 建立 Node-RED 處理程式

❖ 3.1  從設備端傳送來的資料格式如下

❖ 3.2  將 【 function 】 中的 【 function 】 節點拉到 Node-RED 編輯區域

❖ 3.3  建立 【 mqtt 】 節點與【 function 】 節點之間的關聯

❖ 3.4  點選編輯區中的 【 function 】 節點

❖ 3.5  在 【 function 】 欄位中輸入以下程式,在點選右上方的 【 Done 】 按鈕
       var mosquitto = JSON.parse(msg.payload); 
       if(mosquitto.dataChnId === "Temperature") {
          msg.payload = mosquitto.value; 
          return {payload: msg.payload}
       }


Step 4. 建立 Node-RED 串接 Dashboard 程式

❖ 4.1  將 【 dashboard 】 中的 【 gauge 】 節點拉到 Node-RED 編輯區域

❖ 4.2  建立 【 gauge 】 節點與【 function 】 節點之間的關聯

❖ 4.3  點選右上角的 【 dashboard 】 頁籤 

❖ 4.4  點選 【 + tab 】 

❖ 4.5  點選 【 + group 】

❖ 4.6  點選 【 + edit 】

❖ 4.7  將 【 Name 】 欄位的值改成 【 Status 】再點選 【 Update 】按鈕

❖ 4.8  點選 【 gauge 】 節點

❖ 4.9  ① 點選 【 Group 】 欄位的下拉選單為 【 Status[Tab 1] 】
       ② 將 【 Range 】 欄位的 max 改成 100
       ③ 點選 【 Done 】

❖ 4.10  將 【 dashboard 】 中的 【 chart 】 節點拉到 Node-RED 編輯區域

❖ 4.11  建立 【 chart 】 節點與【 function 】 節點之間的關聯

❖ 4.12  點選 【 chart 】 節點

❖ 4.13  ① 點選 【 Group 】 欄位的下拉選單為 【 Status[Tab 1] 】
        ② 點選 【 Done 】

❖ 4.14  點選右上角的 【 Deploy 】 的按鈕

❖ 4.15  部署成功後的畫面


Reference
GitHub
List of blogs
ALL RIGHTS RESERVED. COPYRIGHT © 2018. Designed and Coded by Makee.io