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

安裝與配置Node-RED Dashboard

1. 安裝儀表盤(pán)節(jié)點(diǎn)

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

npm install node-red-dashboard

2. 配置儀表盤(pán)

安裝完成后，在左側(cè)的節(jié)點(diǎn)面板中會(huì)出現(xiàn)一組新的儀表盤(pán)節(jié)點(diǎn)。你可以通過(guò)這些節(jié)點(diǎn)設(shè)計(jì)你的界面，包括圖表、按鈕、開(kāi)關(guān)、文本顯示等。

創(chuàng)建基本界面

1. 設(shè)計(jì)布局

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

2. 添加控件

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

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

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

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

將這些節(jié)點(diǎn)與相應(yīng)的數(shù)據(jù)流連接起來(lái)，配置好數(shù)據(jù)源和顯示參數(shù)。

高級(jí)技巧與美化

1. 自定義主題

Node-RED Dashboard提供了主題選項(xiàng)，可以自定義界面的配色方案。在儀表盤(pán)設(shè)置中，選擇“Site”選項(xiàng)卡，你可以選擇預(yù)設(shè)主題或自定義顏色、字體等。

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

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

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

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

4. 響應(yīng)式設(shè)計(jì)

確保你的界面在不同設(shè)備上都能良好顯示是非常重要的。Node-RED Dashboard默認(rèn)支持響應(yīng)式設(shè)計(jì)，你可以通過(guò)調(diào)整布局和控件大小，確保界面在桌面和移動(dòng)設(shè)備上都能適應(yīng)。

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

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

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

2. 圖表顯示

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

3. 狀態(tài)顯示

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

示例流： [{"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":[]}]

結(jié)語(yǔ)

Node-RED Dashboard 提供了豐富的控件和靈活的布局選項(xiàng)，使你能夠快速創(chuàng)建美觀(guān)實(shí)用的物聯(lián)網(wǎng)界面。通過(guò)學(xué)習(xí)和使用以上技巧，你可以設(shè)計(jì)出功能強(qiáng)大且視覺(jué)效果出色的應(yīng)用界面，無(wú)論是在桌面端還是移動(dòng)端，都能為用戶(hù)帶來(lái)良好的使用體驗(yàn)。繼續(xù)探索和實(shí)踐，你會(huì)發(fā)現(xiàn)更多的可能性和創(chuàng)意，讓你的物聯(lián)網(wǎng)項(xiàng)目更加出色。

審核編輯 黃宇