Node-red基于JS，這是前端技術(shù)的“三駕馬車(chē)”之一。前端技術(shù)主要負(fù)責(zé)界面呈現(xiàn)，與用戶交互等等，很多炫酷的特效都是前端呈現(xiàn)的。Node-red技術(shù)有這樣的“基因”，界面當(dāng)然不會(huì)差勁。它只需要一個(gè)控件就可以實(shí)現(xiàn)一個(gè)頁(yè)面。由于本書(shū)講述的應(yīng)用與頁(yè)面關(guān)系不大，就不講HTTP與websocket相關(guān)的控件了。強(qiáng)烈建議感興趣的讀者自己研究一下?！　?/p>

Node-red支持自定義節(jié)點(diǎn)，當(dāng)然也就支持自定義圖形化的節(jié)點(diǎn)。也有優(yōu)秀的開(kāi)發(fā)者把自己建立的圖形化節(jié)點(diǎn)無(wú)償分享。這里給出一個(gè)股票界面的例子，讓大家看一看優(yōu)秀的node-red界面能做到什么樣子。

7.1 儀表板安裝與介紹

7.1.1 儀表板的安裝

　　我們常用的圖形化節(jié)點(diǎn)叫做儀表板，dashboard，也能做出效果不錯(cuò)的界面，例如

　Dashboard還有一些其它控件，例如

　　儀表板的安裝與串口類(lèi)似，在安裝節(jié)點(diǎn)的輸入框內(nèi)輸入“dashboard”，找到名為“node-red-dashborad”的控件并點(diǎn)擊安裝即可。

　安裝完以后在屏幕左邊會(huì)多出很多新的控件

7.1.2 檢驗(yàn)安裝結(jié)果

　　我們從中隨便選擇一個(gè)控件來(lái)檢驗(yàn)安裝好的控件是否能夠使用。在deshboard的控件區(qū)找到“date picker”控件，拖入工作區(qū)，然后雙擊節(jié)點(diǎn)，點(diǎn)擊Group輸入框后邊的編輯按鈕，如圖所示，把Group節(jié)點(diǎn)與Tab節(jié)點(diǎn)分別命名為Group與Tab。

　拖入一個(gè)debug節(jié)點(diǎn)并連線部署。在瀏覽器中輸入地址http://localhost:1880/ui　　能正確打開(kāi)此網(wǎng)頁(yè)，已經(jīng)可以說(shuō)明安裝成功了?！　∪缓罂梢钥吹矫麨閐ate的一行內(nèi)容。

我們可以隨便選擇一個(gè)日期，例如北京奧運(yùn)會(huì)開(kāi)幕

在調(diào)試窗口下就可以看到一個(gè)時(shí)間戳。

能用一個(gè)控件很簡(jiǎn)單地就搭建出一個(gè)看上去還不錯(cuò)的網(wǎng)頁(yè)，這就是dashboard的方便之處。

7.1.3 儀表板簡(jiǎn)介

在已經(jīng)使用過(guò)儀表板以后再來(lái)看它的簡(jiǎn)介，不容易被弄糊涂。
　　dashboard主要用于快速創(chuàng)建實(shí)時(shí)數(shù)據(jù)儀表板。它需要node-red版本為0.14或更高。
　　儀表板的布局依賴于Tab和Group屬性。Tab可以理解為頁(yè)面，Group是分組。Tab可以包含Group。我們?cè)谶x擇“北京開(kāi)幕式”那天的圖片里，就有一個(gè)名為Group的分組。每個(gè)組的元素默認(rèn)寬度是6個(gè)單位。每個(gè)單位默認(rèn)寬度是48PX，間距6PX。一個(gè)頁(yè)面里可以有多個(gè)分組，建議使用多個(gè)分組，而不是一個(gè)大組。因?yàn)閚ode-red可以根據(jù)頁(yè)面的大小動(dòng)態(tài)調(diào)整分組的位置。
　　使用dashboard節(jié)點(diǎn)時(shí)，屏幕右側(cè)“調(diào)試窗口”的旁邊會(huì)多一個(gè)名為dashborad的小標(biāo)簽，下邊有Layout，Theme和Site三個(gè)選項(xiàng)。
　　Layout意思是布局，在Layout里可以重新排列Tab，Group與控件，并編輯其屬性。也可以把其它網(wǎng)頁(yè)添加到Tab中。
　　Theme意思是主題?？梢赃x明亮的，或者暗的，或者自定義。
　　Site意為地址，可以設(shè)置標(biāo)題的UI，或者選擇標(biāo)題欄。也能夠以像素為單位設(shè)置網(wǎng)格布局的基本圖形，就是剛剛提到默認(rèn)是48像素的那個(gè)“單位”，或者單獨(dú)設(shè)置控件，組的大小。

　Dashboard的控件一般都可以設(shè)置Label或名字，Label和名字也可以通過(guò)傳入消息的屬性來(lái)指定或修改。其實(shí)控件的內(nèi)容都可以用消息來(lái)配置，這屬于比較高階的用法，感興趣的可以參考https://github.com/node-red/node-red-dashboard/blob/master/config-fields.md
Dashboard帶有的控件簡(jiǎn)介見(jiàn)下表。
名稱 中文名 詳細(xì)信息
button 按鈕 可以點(diǎn)擊，發(fā)送一個(gè)msg
dropdown 下拉菜單 可以指定標(biāo)簽與值的對(duì)應(yīng)關(guān)系
switch 開(kāi)關(guān) 添加一個(gè)開(kāi)關(guān)到用戶界面，開(kāi)關(guān)變化的切換可以產(chǎn)生一個(gè)msg
slider 滑塊 水平滑塊，可變步長(zhǎng)
numeric 數(shù)字選擇 帶有上、下按鈕的數(shù)字輸入控件
text input 文本輸入 帶有可選標(biāo)簽的文本，還可以支持密碼，電子郵件和顏色模式
date picker 日期選擇器 用于選擇日期
colour picker 拾色器 用于選擇顏色
form 表單 一個(gè)可由多個(gè)子小部件組成的小部件。提交時(shí)，所有值均作為單個(gè)消息提交。
text 文本 一個(gè)只讀控件，可以配置Label和Value
gauge 儀表 有四種模式，標(biāo)準(zhǔn)，甜甜圈，指南針和波形?？梢灾付?biāo)準(zhǔn)儀表或甜甜圈測(cè)量?jī)x的顏色范圍
chart 圖表 具有折線、條形與餅圖模式，可以使用日期格式化程序字符串來(lái)自定義X軸標(biāo)簽
audio out 音頻輸出 用于播放音頻或發(fā)送文本到語(yǔ)音客戶端
notification 通知 為用戶創(chuàng)建警報(bào)，可以是彈出窗口或是報(bào)警框
ui control UI控制 允許對(duì)儀表板進(jìn)行動(dòng)態(tài)控制
template 模板 模板節(jié)點(diǎn)允許用戶使用HTML，Javascript在框架內(nèi)創(chuàng)建自己的小部件。

7.2 常見(jiàn)的輸入型儀表板控件應(yīng)用

　　從儀表板的簡(jiǎn)介表中可以看出，儀表板控件的類(lèi)型可以分為兩種：一種是輸入型，功能類(lèi)似于inject控件，用于生成msg。另一種是顯示型，或者說(shuō)是輸出型，與debug控件類(lèi)似，用于展示某些數(shù)據(jù)。本章節(jié)只講述輸入型的控件。

7.2.1 按鈕button簡(jiǎn)介

按鈕的幫助信息
　　　　向用戶界面添加一個(gè)按鈕。
　　　　單擊該按鈕會(huì)生成帶有載荷的消息。如果沒(méi)有指定載荷，則使用節(jié)點(diǎn)id。
　　　　按鈕的圖標(biāo)、文字、背景都可以自定義，也可以使用消息屬性來(lái)設(shè)置，例如msg.background，msg.topic。還可以使用　msg.enabled來(lái)使能或禁用按鈕。
　　　　使用msg來(lái)設(shè)置的方法要用到函數(shù)節(jié)點(diǎn)，比如在函數(shù)節(jié)點(diǎn)內(nèi)使用代碼設(shè)置msg.background為“black”，并返回msg。此處對(duì)于使用函數(shù)來(lái)設(shè)置控件的方法不做講解。
　　在工作區(qū)拖入一個(gè)按鈕節(jié)點(diǎn)，并把Tab和Group分別設(shè)置為home和control。

　再拖入一個(gè)debug節(jié)點(diǎn)，連線并部署。

在http://localhost:1880/ui頁(yè)面下就可以看到剛剛設(shè)置的的按鈕，點(diǎn)擊按鈕，可以在調(diào)試窗口看到以下信息。

　這說(shuō)明，點(diǎn)擊按鈕以后，按鈕可以給流注入一個(gè)數(shù)據(jù)包。

7.2.2 使用按鈕實(shí)現(xiàn)簡(jiǎn)易電話撥號(hào)界面

　　我們?cè)诰庉嫲粹o節(jié)點(diǎn)時(shí)，其實(shí)有很多選項(xiàng)都空著，例如尺寸、圖標(biāo)、標(biāo)簽、顏色等等。合理使用這些選項(xiàng)，即便是只用按鈕控件也能做出來(lái)一些有意思的東西，例如做一個(gè)簡(jiǎn)易的電話撥號(hào)界面。

接下來(lái)結(jié)合這和撥號(hào)界面，來(lái)講講我們?cè)O(shè)置了哪些參數(shù)。以下是button節(jié)點(diǎn)可以設(shè)置的參數(shù)。

首先，很直觀可以看到，數(shù)字的背景是不一樣的，123的背景是灰色，456的背景是淺藍(lán)，　　

所以123控件的Background處應(yīng)當(dāng)填寫(xiě)“gray”。

　按鍵的大小也是不一樣的。一般來(lái)說(shuō)，按鍵的大小默認(rèn)是自動(dòng)，也就是長(zhǎng)度跟隨Group，寬度是1。Group的寬度是多少呢？默認(rèn)是6，可以修改，撥號(hào)界面就改成了3。修改的界面在屏幕右側(cè)的dashboard界面下：

Width就是寬度。順帶提一下，下邊的兩個(gè)選項(xiàng)分別是顯示組的名字，和允許收縮。效果就是這樣的：

顯而易見(jiàn)，普通數(shù)字按鈕的寬度都是1，撥號(hào)鍵的寬度是2。還有文字的顏色不一樣。這個(gè)就很簡(jiǎn)單了，修改colour即可，比如數(shù)字的文字都是black。

另外，還可以看出，撥號(hào)的按鍵上有一個(gè)小小的電話圖標(biāo)；按鍵0的大小好像比別的數(shù)字也大一點(diǎn)，這其實(shí)也是一個(gè)圖標(biāo)。圖標(biāo)如何設(shè)置？
　　在別的軟件里，設(shè)置圖標(biāo)可能需要一個(gè)本地的圖片。Node-red使用的是一個(gè)在線的圖標(biāo)庫(kù)（不聯(lián)網(wǎng)的時(shí)候顯然沒(méi)辦法使用），地址是https://material.io/tools/icons/?style=baseline
　　這個(gè)網(wǎng)頁(yè)里有很多圖標(biāo)，我截取一些放在這里：

　每個(gè)圖標(biāo)下邊都有名字，如果你需要使用這個(gè)圖標(biāo)，把名字輸入到Icon后邊即可，例如按鍵0的圖標(biāo)：

既然是電話撥號(hào)按鍵，當(dāng)然要有撥號(hào)的功能。我們讓每一個(gè)數(shù)字按鍵被按下去的時(shí)候，都可以把數(shù)字發(fā)送到流里邊去；再按下“CALL”的時(shí)候，就把之前按下的數(shù)字全部打印出來(lái)，暫時(shí)用debug節(jié)點(diǎn)來(lái)顯示。
　　分析以后，發(fā)現(xiàn)需要一個(gè)函數(shù)節(jié)點(diǎn)利用context功能保存之前按下的數(shù)字，等到收到CALL的命令以后，一次性打印出來(lái)。函數(shù)節(jié)點(diǎn)的程序如下：

var temp = context.get('num')||"";
if (msg.topic != "call"){
    temp = temp + ""+msg.payload;
    context.set('num',temp);
}
else{
    msg.payload = temp;
    return msg;
}

　　如圖設(shè)置流：

　　如果在儀表板的界面，有數(shù)字的順序是顛倒的，可以再屏幕右側(cè)dashboard頁(yè)面下通過(guò)拖拽節(jié)點(diǎn)調(diào)整順序：

我們來(lái)“撥打”友道（我的公司）的電話，借以觀察現(xiàn)象：按下數(shù)字按鍵時(shí)，并不會(huì)顯示單個(gè)數(shù)字；按下CALL以后，一串電話號(hào)碼都能顯示出來(lái)。

　　我們舉例子詳細(xì)地介紹了按鈕控件的各個(gè)選項(xiàng)的作用，其它儀表板控件的選項(xiàng)功能類(lèi)似，聰明的讀者要學(xué)會(huì)舉一反三哦?！　〈a在這里，導(dǎo)入你的node-red工作區(qū)好好研究下吧。

[{"id":"e9614f74.8d223","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":1,"width":"1","height":"1","passthru":false,"label":"1","color":"black","bgcolor":"gray","icon":"","payload":"1","payloadType":"num","topic":"","x":190,"y":60,"wires":[["cc35b265.c22d"]]},{"id":"b98d8139.972c8","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":2,"width":"1","height":"1","passthru":false,"label":"2","color":"black","bgcolor":"gray","icon":"","payload":"2","payloadType":"num","topic":"","x":190,"y":100,"wires":[["cc35b265.c22d"]]},{"id":"ded462b1.c2e2b","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":3,"width":"1","height":"1","passthru":false,"label":"3","color":"black","bgcolor":"gray","icon":"","payload":"3","payloadType":"num","topic":"","x":190,"y":140,"wires":[["cc35b265.c22d"]]},{"id":"857ebe34.c8d85","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":4,"width":"1","height":"1","passthru":false,"label":"4","color":"black","bgcolor":"light blue","icon":"","payload":"4","payloadType":"num","topic":"","x":190,"y":180,"wires":[["cc35b265.c22d"]]},{"id":"f11b9214.04659","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":5,"width":"1","height":"1","passthru":false,"label":"5","color":"black","bgcolor":"light blue","icon":"","payload":"5","payloadType":"num","topic":"","x":190,"y":220,"wires":[["cc35b265.c22d"]]},{"id":"94ebe434.733518","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":6,"width":"1","height":"1","passthru":false,"label":"6","color":"black","bgcolor":"light blue","icon":"","payload":"6","payloadType":"num","topic":"","x":190,"y":260,"wires":[["cc35b265.c22d"]]},{"id":"4043b4bf.bcc71c","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":7,"width":"1","height":"1","passthru":false,"label":"7","color":"black","bgcolor":"orange","icon":"","payload":"7","payloadType":"num","topic":"","x":190,"y":300,"wires":[["cc35b265.c22d"]]},{"id":"2301a306.95065c","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":8,"width":"1","height":"1","passthru":false,"label":"8","color":"black","bgcolor":"orange","icon":"","payload":"8","payloadType":"num","topic":"","x":190,"y":340,"wires":[["cc35b265.c22d"]]},{"id":"aa51af93.26b73","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":9,"width":"1","height":"1","passthru":false,"label":"9","color":"black","bgcolor":"orange","icon":"","payload":"9","payloadType":"num","topic":"","x":190,"y":380,"wires":[["cc35b265.c22d"]]},{"id":"85bdbffa.6a1dc","type":"ui_button","z":"c1c86dfa.43a1a","name":"","Group":"72c43141.3520c","order":0,"width":"2","height":"1","passthru":false,"label":"call","color":"yellow","bgcolor":"green","icon":"phone","payload":"0","payloadType":"num","topic":"call","x":190,"y":460,"wires":[["cc35b265.c22d"]]},{"id":"cc35b265.c22d","type":"function","z":"c1c86dfa.43a1a","name":"儲(chǔ)存數(shù)字，撥號(hào)","func":"var temp = context.get('num')||\"\";\nif (msg.topic != \"call\"){\n    temp = temp + \"\"+msg.payload;\n    context.set('num',temp);\n}\nelse{\n    msg.payload = temp;\n    context.set('num',\"\");\n    return msg;\n}\n","outputs":1,"noerr":0,"x":560,"y":240,"wires":[["c96d8af2.f3a4b8"]]},{"id":"c96d8af2.f3a4b8","type":"debug","z":"c1c86dfa.43a1a","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":750,"y":240,"wires":[]},{"id":"d011a93b.f06a78","type":"ui_button","z":"c1c86dfa.43a1a","name":"0","Group":"72c43141.3520c","order":9,"width":"1","height":"1","passthru":false,"label":"","color":"black","bgcolor":"orange","icon":"exposure_zero","payload":"0","payloadType":"num","topic":"","x":190,"y":420,"wires":[["cc35b265.c22d"]]},{"id":"72c43141.3520c","type":"ui_Group","z":"","name":"phone","tab":"aacbcc03.d359b","disp":true,"width":"3","collapse":true},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

接下來(lái)修改按鈕，

7.2.3 開(kāi)關(guān)switch的使用

Dashboard中的switch可以增加一個(gè)開(kāi)關(guān)到用戶界面。
　　開(kāi)關(guān)狀態(tài)的每一個(gè)變化都會(huì)產(chǎn)生一個(gè)帶有on或off值的msg.payload。
　　開(kāi)關(guān)的顏色與圖標(biāo)是可以配置的，也可以由傳入的msg更新，方法跟button類(lèi)似。
　　之前已經(jīng)用過(guò)函數(shù)控件switch了，當(dāng)時(shí)用“岔路口”來(lái)比喻那個(gè)函數(shù)控件。儀表板中的switch是真正的開(kāi)關(guān)，功能上像是一個(gè)具備“開(kāi)”與“關(guān)”兩種狀態(tài)的按鈕。
　　直接拖入一個(gè)switch節(jié)點(diǎn)，修改它的Group和Tab，并與debug節(jié)點(diǎn)連接，部署。 

在http://localhost:1880/ui/下可以看到這個(gè)開(kāi)關(guān)。點(diǎn)擊開(kāi)關(guān)可以看到調(diào)試窗口下輸出了true。

　其中的true與false當(dāng)然也可以改為別的載荷，跟inject節(jié)點(diǎn)類(lèi)似

7.2.4 滑塊slider的使用

手機(jī)在調(diào)節(jié)屏幕亮度的時(shí)候，常常出現(xiàn)一個(gè)橫線，串著一個(gè)圓球，拖拽圓球就可以改變屏幕亮度。橫線加圓球組成的就是一個(gè)滑塊?？瓷先ビ悬c(diǎn)像被吃的只剩下一個(gè)的糖葫蘆，或者就叫做滑球更貼切。
　　Dashboard中的滑塊可以幫助用戶在最小值與最大值的范圍內(nèi)，改變?cè)O(shè)置的值。每次變化都會(huì)把值作為消息的載荷。
拖入一個(gè)slider控件，修改Group與Tab，然后與debug節(jié)點(diǎn)連接，部署。
　　滑塊形狀如下

　拖動(dòng)滑塊，可以在調(diào)試窗口見(jiàn)到當(dāng)前滑塊的值。

　　注意，假如需要從0到3，那么拖動(dòng)滑塊時(shí)，1和2的值也會(huì)發(fā)送?？梢灾苯狱c(diǎn)擊到3的位置。

默認(rèn)情況下，滑塊的范圍是從0到10，步進(jìn)1，也可以修改，例如10到80，步進(jìn)2。

7.2.5 輸入框text input的使用

Text input可以向用戶界面添加一個(gè)文本輸入?yún)^(qū)域，格式可以是常規(guī)文本、電子郵件或顏色選擇器等。
　　輸入都以msg.payload的形式發(fā)送。也可以通過(guò)輸入msg的載荷來(lái)預(yù)設(shè)輸入的文本。
　　Delay參數(shù)可以設(shè)置從輸入字符到發(fā)送的延時(shí)，默認(rèn)是300毫秒。也可以設(shè)置為0，等待按下“Enter”或“Tab”鍵發(fā)送。
　　電子郵件模式可以使用紅色來(lái)表示無(wú)用的地址。
　　時(shí)間輸入類(lèi)型返回從午夜開(kāi)始的毫秒值。
　　接下來(lái)通過(guò)實(shí)踐來(lái)驗(yàn)證下text input的功能。
　　拖入一個(gè)text input節(jié)點(diǎn)，修改Group與Tab，然后與debug節(jié)點(diǎn)連接，并部署。

　輸入任意的文字，在調(diào)試窗口可以看到。

　不過(guò)，你需要輸入的稍微快一點(diǎn)，兩個(gè)字符輸入間隔大于300ms的話就會(huì)輸出不止一條，你會(huì)看到這樣的結(jié)果：

所以我建議把輸入的延時(shí)設(shè)置為0，用“Enter”和“Tab”作為結(jié)束的標(biāo)記。　　

再來(lái)試一試輸入框的別的功能，比如密碼：

我們把Label也寫(xiě)上，在儀表板的頁(yè)面可用于顯示一些提示。

　輸入密碼時(shí)，提示的文字會(huì)變小，且密碼會(huì)用點(diǎn)來(lái)代替。

　　在“number”的模式下，沒(méi)辦法輸入其它的字符。

7.2.6 使用文本輸入的取色功能為按鈕設(shè)置顏色

　　文本輸入的模式里有顏色選擇，可以調(diào)出一個(gè)取色板，并返回顏色的編碼。我們?cè)谥v述按鈕的時(shí)候，說(shuō)過(guò)可以使用msg來(lái)設(shè)置按鈕，這里正好來(lái)把兩者結(jié)合一下?！　?/p>

首先，我們把text input的模式設(shè)置為picker，并用debug節(jié)點(diǎn)來(lái)看一看選中顏色以后會(huì)輸出什么。

點(diǎn)擊儀表板頁(yè)面的顏色輸入框，可以看到這樣的一個(gè)取色板：

我們隨便選一個(gè)顏色并點(diǎn)擊確定。比如紅色。再來(lái)看調(diào)試窗口的信息。

　收到消息是#ff0000，這就是紅色的編號(hào)。我們也可以在設(shè)置顏色的頁(yè)面用這種方式。用顏色選擇器看顏色的編碼，再進(jìn)行顏色設(shè)置的辦法很方便。7.2.1小節(jié)設(shè)置按鈕的顏色時(shí)，想出gray，orange和light blue這幾個(gè)單詞我都有點(diǎn)絞盡腦汁了?！　?/p>

接下來(lái)改進(jìn)程序，由于比較簡(jiǎn)單，我就直接把源碼附在下邊，你們看一看源碼應(yīng)該就能理解。需要注意的點(diǎn)就是，用change節(jié)點(diǎn)把msg.payload的屬性賦給msg.colour，然后button里的colour并不是空著，而是{{msg.colour}}。

Background直接用編碼來(lái)設(shè)置。

　效果就是，不論你選擇什么顏色，中間的心就變成什么顏色。

　　也可以使用這種方法來(lái)動(dòng)態(tài)地設(shè)置背景或文字的內(nèi)容，感興趣的同學(xué)可以自己研究下。參考代碼在這里：

[{"id":"1fbb5eaf.febb51","type":"ui_text_input","z":"7a8c632b.0c701c","name":"","label":"選擇文字或圖標(biāo)顏色","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"mode":"color","delay":"300","topic":"","x":220,"y":120,"wires":[["69912933.9c62e8","4dd666d2.d144e8"]]},{"id":"4dd666d2.d144e8","type":"debug","z":"7a8c632b.0c701c","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":390,"y":60,"wires":[]},{"id":"69912933.9c62e8","type":"change","z":"7a8c632b.0c701c","name":"payload轉(zhuǎn)字體","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"y":120,"wires":[["b22f434.b055dc"]]},{"id":"b22f434.b055dc","type":"ui_button","z":"7a8c632b.0c701c","name":"","group":"bd84de44.ae507","order":0,"width":"0","height":"0","passthru":false,"label":"","color":"{{msg.colour}}","bgcolor":"#ff80ff","icon":"favorite","payload":"","payloadType":"str","topic":"","x":670,"y":120,"wires":[[]]},{"id":"bd84de44.ae507","type":"ui_group","z":"","name":"CONTROL","tab":"aacbcc03.d359b","disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

7.2.7 下拉菜單dropdown的使用

　　下拉菜單是輸入框與按鈕的結(jié)合體，常用于有指定選項(xiàng)的輸入。例如，您住在哪個(gè)?。窟@個(gè)答案就可以用下拉菜單，只不過(guò)選型可能會(huì)多一點(diǎn)。但是可以避免用戶輸入信息，也可以避免他犯錯(cuò)。接下來(lái)就使用下拉菜單來(lái)做一個(gè)簡(jiǎn)單的例子。俗話說(shuō)，“桃三杏四李五年，要吃蘋(píng)果等八年，棗子當(dāng)年能賣(mài)錢(qián)”。這句話里包含5個(gè)鍵值對(duì)，也就是關(guān)鍵字與數(shù)值的對(duì)應(yīng)，及桃對(duì)應(yīng)5年……棗對(duì)應(yīng)1年，我們使用下拉菜單來(lái)完成這樣的任務(wù)：選擇某個(gè)水果，就輸出對(duì)應(yīng)的年份。拖入一個(gè)dropdown節(jié)點(diǎn)，如圖進(jìn)行配置：

再拖入一個(gè)text節(jié)點(diǎn)。注意不是text input。我們以前一直使用debug節(jié)點(diǎn)來(lái)顯示信息，現(xiàn)在想把信息顯示在儀表板的頁(yè)面上，就用這么個(gè)節(jié)點(diǎn)。然后進(jìn)行如下修改：

連線并部署。

在儀表板的頁(yè)面，就可以看到這樣的頁(yè)面。點(diǎn)擊下拉菜單，就可以看到候選框。

　代碼如下：

[{"id":"4989de73.41634","type":"ui_dropdown","z":"7a8c632b.0c701c","name":"","label":"什么果樹(shù)種下了？","place":"請(qǐng)選擇水果","group":"bd84de44.ae507","order":0,"width":0,"height":0,"passthru":true,"options":[{"label":"桃","value":"3年","type":"str"},{"label":"杏","value":"4年","type":"str"},{"label":"李","value":"5年","type":"str"},{"label":"蘋(píng)果","value":"8年","type":"str"},{"label":"棗子","value":"1年","type":"str"}],"payload":"","topic":"","x":330,"y":260,"wires":[["ba04c2f1.2e9c1"]]},{"id":"ba04c2f1.2e9c1","type":"ui_text","z":"7a8c632b.0c701c","group":"bd84de44.ae507","order":0,"width":0,"height":0,"name":"","label":"幾年能結(jié)果子？","format":"{{msg.payload}}","layout":"row-spread","x":540,"y":260,"wires":[]},{"id":"bd84de44.ae507","type":"ui_group","z":"","name":"CONTROL","tab":"aacbcc03.d359b","disp":true,"width":"6","collapse":false},{"id":"aacbcc03.d359b","type":"ui_tab","z":"","name":"home","icon":"dashboard"}]

到此這篇關(guān)于node-red教程之dashboard簡(jiǎn)介與輸入型儀表板控件的使用的文章就介紹到這了,更多相關(guān)node-red dashboard內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論