[ Node-RED ] 設定 Node-RED 來視覺化顯示感測資料教學

學習目標

  • 於 AWS 建立設定 Node-RED 來視覺化顯示感測資料

前置準備作業

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

  2. 一個 AWS 帳號
    【 註冊 AWS 帳號教學 】


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

        ☆ 請參考下方網址中的 【 Step 4. 開啟 Node-RED 編輯環境 】
           https://oranwind.org/-aws-zai-ec2-an-zhuang-node-red/


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

             ☆ 點選右上角 【 ≡ 】 圖示

             ☆ 點選 【 Manage palette 】 

             ☆ 點選 【 Install 】 頁籤 

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

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

             ☆ 點選 【 Install 】 按鈕

             ☆ 安裝完成


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

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

❖ 4.2  點選編輯區中的 【 mqtt 】 節點

❖ 4.3  點選 【 server 】 欄位右邊的畫筆

❖ 4.4  在 【 server 】 欄位中輸入 【 mqtt.mcs.mediatek.com 】

❖ 4.5  點選右上方 【 Add 】 按鈕

❖ 4.6  在 【 Topic 】 欄位輸入 【 mcs/DeviceId/DeviceKey/+ 】
        ㊟ 請修改 DeviceId 與 DeviceKey ,請參考 【 啟用 MCS MQTT Broker 教學 】 文中的 【 Step 4. 取得 DeviceId 與 DeviceKey 】,參考紽頁如下:
           https://oranwind.org/-aws-windows-chuan-song-dang-an-dao-aws-ec2-jiao-xue-2/

❖ 4.7  點選右上方 【 Done 】 按鈕


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

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

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

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

❖ 5.4  在 【 function 】 欄位中輸入以下程式,在點選右上方的 【 Done 】 按鈕
       var Ultrasonic = JSON.parse(msg.payload); msg.payload = Ultrasonic.datapoints[0].values.value; return {payload: msg.payload}


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

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

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

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

❖ 6.4  點選 【 + tab 】 

❖ 6.5  點選 【 + group 】

❖ 6.6  點選 【 + edit 】

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

❖ 6.8  點選 【 gauge 】 節點

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

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

❖ 6.11  部署成功後的畫面

❖ 6.12  執行 Arduino 程式

【 LinkIt 7697 串接 Node-RED Dashboard 教學 】

❖ 6.13  點選右上角的 【 dashboard 】 頁籤  ➙ 【 Site 頁籤右邊的開啟視窗 】 按鈕

❖ 6.14  Node-RED Dashbaord 顯示數據畫面


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