學習目標
- 安裝與設定 Node-RED Dashboard
前置準備作業
一台已連上網路的電腦
已安裝 Mosquitto MQTT Broker 【 安裝教學 】
已安裝 Node-RED 【 安裝教學 】
已設定完成 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 部署成功後的畫面
