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

安裝與配置Node-RED Dashboard

1. 安裝儀表盤節(jié)點

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

npm install node-red-dashboard

2. 配置儀表盤

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

創(chuàng)建基本界面

1. 設計布局

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

2. 添加控件

選擇適當?shù)目丶?jié)點，根據(jù)需要將其拖放到流中。例如：

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

按鈕節(jié)點（ui_button）：用于觸發(fā)特定操作。

文本節(jié)點（ui_text）：用于顯示傳感器數(shù)據(jù)或狀態(tài)信息。

將這些節(jié)點與相應的數(shù)據(jù)流連接起來，配置好數(shù)據(jù)源和顯示參數(shù)。

高級技巧與美化

1. 自定義主題

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

2. 動態(tài)數(shù)據(jù)更新

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

3. 使用模板節(jié)點

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

4. 響應式設計

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

實例：創(chuàng)建一個實時監(jiān)控界面

1. 數(shù)據(jù)采集

假設我們要創(chuàng)建一個環(huán)境監(jiān)控界面，顯示溫度和濕度數(shù)據(jù)。首先，使用inject節(jié)點模擬傳感器數(shù)據(jù)，然后通過function節(jié)點處理數(shù)據(jù)，最后連接到ui_chart節(jié)點。

2. 圖表顯示

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

3. 狀態(tài)顯示

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

示例流： [{"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 提供了豐富的控件和靈活的布局選項，使你能夠快速創(chuàng)建美觀實用的物聯(lián)網(wǎng)界面。通過學習和使用以上技巧，你可以設計出功能強大且視覺效果出色的應用界面，無論是在桌面端還是移動端，都能為用戶帶來良好的使用體驗。繼續(xù)探索和實踐，你會發(fā)現(xiàn)更多的可能性和創(chuàng)意，讓你的物聯(lián)網(wǎng)項目更加出色。

審核編輯 黃宇