[Node-RED] dashboard儀表板

  1. 安裝dashboard。
    安裝dashboard01
  2. 切換到「安裝」的頁面,再輸入「dashboard」查詢,找到「node-red-dashboard」後,點擊「安裝」。
    安裝dashboard02
  3. 點擊安裝後,會出現下圖,繼續點擊「安裝」。(如果有興趣也可以點擊「打開節點資訊」,來看要安裝的節點資訊)
    安裝dashboard03
  4. 安裝完畢後,剛剛安裝的前顯示「安裝」的文字,就被改成「已安裝」,然後點擊「關閉」來關閉節點管理的視窗
    安裝dashboard04
  5. 安裝完節點後,就可以在左邊的節點清單找到剛剛安裝的「dashboard」。
    安裝dashboard05
  6. 測試 dashboard,在左邊的節點清單找到「共通」下的「inject」,並將這個節點拖曳到流程畫面中,如下圖:
    dashboard01
  7. 在「時間戳」節點上,連續點擊滑鼠左鍵二下,設定該節點屬性如下圖:
    dashboard02
  8. 在左邊的節點清單找到「功能」下的「function」,並將這個節點拖曳到流程畫面中,如下圖:
    dashboard03
  9. 在「函數」節點上,連續點擊滑鼠左鍵二下,設定該節點屬性如下圖:
    步驟3的函數內容:
    msg.payload = Math.random();
    return msg;
    dashboard04
  10. 在左邊的節點清單找到「dashboard」下的「chart」,並將這個節點拖曳到流程畫面中,如下圖:
    dashboard05
  11. 在「chart」節點上,連續點擊滑鼠左鍵二下,設定該節點屬性如下圖:
    dashboard06
    步驟1的設定內容如下圖:
    dashboard07
  12. 以上設定完成後,將所有節點連接起來。
    dashboard08
  13. 最後,部署流程。
    dashboard09
  14. 部署成功後,開啟瀏覽器,輸入網址「http://127.0.0.1:1880/ui/」,即可看到每秒產生一個亂數的折線圖。
    dashboard10
  15. 如果要使用儀表板,其設定跟折線圖一樣,設定後再重新部署。
    dashboard11
  16. 回到瀏覽器,可以看到折線圖及儀表板。
    dashboard12