Node-RED不僅是一個強大的編程工具，還能通過其儀表盤（Dashboard）功能為物聯網應用創建美觀、實用的界面。以下是如何使用Node-RED制作漂亮界面的詳細步驟和技巧。很多公司已經將產品與Node-RED深度融合（如成都的縱橫智控和蘇州穩聯科技將Node-RED與物聯網網關深度融合,打造可視化、硬件加持的物聯網開發平臺,使用者無需編碼即可快速實現各類應用,開拓物聯網無限可能）。未來或許將會有越來越多的企業步入此行業中來。

安裝與配置Node-RED Dashboard

1. 安裝儀表盤節點

要使用Node-RED的儀表盤功能，首先需要安裝node-red-dashboard節點。在Node-RED編輯器的右上角，點擊菜單按鈕，選擇“Manage palette” -> “Install”，然后搜索并安裝node-red-dashboard。

npm install node-red-dashboard

2. 配置儀表盤

安裝完成后，在左側的節點面板中會出現一組新的儀表盤節點。你可以通過這些節點設計你的界面，包括圖表、按鈕、開關、文本顯示等。

創建基本界面

1. 設計布局

布局是創建漂亮界面的基礎。在儀表盤節點中，有一個ui_tab節點和一個ui_group節點，用于管理界面的布局。你可以根據需要創建多個標簽頁和分組，以組織不同的控件和顯示元素。

2. 添加控件

選擇適當的控件節點，根據需要將其拖放到流中。例如：

圖表節點（ui_chart）：用于顯示折線圖、柱狀圖等。

按鈕節點（ui_button）：用于觸發特定操作。

文本節點（ui_text）：用于顯示傳感器數據或狀態信息。

將這些節點與相應的數據流連接起來，配置好數據源和顯示參數。

高級技巧與美化

1. 自定義主題

Node-RED Dashboard提供了主題選項，可以自定義界面的配色方案。在儀表盤設置中，選擇“Site”選項卡，你可以選擇預設主題或自定義顏色、字體等。

2. 動態數據更新

為了讓界面更加動態和互動，可以使用inject節點和function節點實時更新數據。例如，你可以定期從傳感器讀取數據，并通過ui_chart節點實時顯示在圖表上。

3. 使用模板節點

如果你需要更加復雜的布局和樣式，可以使用ui_template節點。這個節點允許你使用HTML、CSS和JavaScript來自定義控件。例如，可以通過HTML代碼創建一個定制的儀表盤或狀態顯示面板。

4. 響應式設計

確保你的界面在不同設備上都能良好顯示是非常重要的。Node-RED Dashboard默認支持響應式設計，你可以通過調整布局和控件大小，確保界面在桌面和移動設備上都能適應。

實例：創建一個實時監控界面

1. 數據采集

假設我們要創建一個環境監控界面，顯示溫度和濕度數據。首先，使用inject節點模擬傳感器數據，然后通過function節點處理數據，最后連接到ui_chart節點。

2. 圖表顯示

在ui_chart節點中，選擇圖表類型（例如折線圖），配置數據源和顯示參數。可以設置不同的數據系列來分別顯示溫度和濕度。

3. 狀態顯示

使用ui_text節點顯示當前溫度和濕度值。你可以配置節點的顯示格式和樣式，使其與整體界面風格一致。

示例流： [{"id":"inject","type":"inject","payload":"","topic":"","repeat":"10","payloadType":"random","x":150,"y":80,"wires":[["function"]]}, {"id":"function","type":"function","func":"msg.payload = { temp: Math.random()*30, hum: Math.random()*100 }; return msg;","x":300,"y":80,"wires":[["ui_chart","ui_text"]]}, {"id":"ui_chart","type":"ui_chart","group":"group","x":450,"y":80,"wires":[]}, {"id":"ui_text","type":"ui_text","group":"group","x":450,"y":140,"wires":[]}]

結語

Node-RED Dashboard 提供了豐富的控件和靈活的布局選項，使你能夠快速創建美觀實用的物聯網界面。通過學習和使用以上技巧，你可以設計出功能強大且視覺效果出色的應用界面，無論是在桌面端還是移動端，都能為用戶帶來良好的使用體驗。繼續探索和實踐，你會發現更多的可能性和創意，讓你的物聯網項目更加出色。

審核編輯 黃宇