Node-red基于JS，這是前端技術的“三駕馬車”之一。前端技術主要負責界面呈現，與用戶交互等等，很多炫酷的特效都是前端呈現的。Node-red技術有這樣的“基因”，界面當然不會差勁。它只需要一個控件就可以實現一個頁面。由于本書講述的應用與頁面關系不大，就不講HTTP與websocket相關的控件了。強烈建議感興趣的讀者自己研究一下。　　

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

7.1 儀表板安裝與介紹

7.1.1 儀表板的安裝

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

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

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

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

7.1.2 檢驗安裝結果

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

　拖入一個debug節(jié)點并連線部署。在瀏覽器中輸入地址http://localhost:1880/ui　　能正確打開此網頁，已經可以說明安裝成功了。　　然后可以看到名為date的一行內容。

我們可以隨便選擇一個日期，例如北京奧運會開幕

在調試窗口下就可以看到一個時間戳。

能用一個控件很簡單地就搭建出一個看上去還不錯的網頁，這就是dashboard的方便之處。

7.1.3 儀表板簡介

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

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

7.2 常見的輸入型儀表板控件應用

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

7.2.1 按鈕button簡介

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

　再拖入一個debug節(jié)點，連線并部署。

在http://localhost:1880/ui頁面下就可以看到剛剛設置的的按鈕，點擊按鈕，可以在調試窗口看到以下信息。

　這說明，點擊按鈕以后，按鈕可以給流注入一個數據包。

7.2.2 使用按鈕實現簡易電話撥號界面

　　我們在編輯按鈕節(jié)點時，其實有很多選項都空著，例如尺寸、圖標、標簽、顏色等等。合理使用這些選項，即便是只用按鈕控件也能做出來一些有意思的東西，例如做一個簡易的電話撥號界面。

接下來結合這和撥號界面，來講講我們設置了哪些參數。以下是button節(jié)點可以設置的參數。

首先，很直觀可以看到，數字的背景是不一樣的，123的背景是灰色，456的背景是淺藍，　　

所以123控件的Background處應當填寫“gray”。

　按鍵的大小也是不一樣的。一般來說，按鍵的大小默認是自動，也就是長度跟隨Group，寬度是1。Group的寬度是多少呢？默認是6，可以修改，撥號界面就改成了3。修改的界面在屏幕右側的dashboard界面下：

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

顯而易見，普通數字按鈕的寬度都是1，撥號鍵的寬度是2。還有文字的顏色不一樣。這個就很簡單了，修改colour即可，比如數字的文字都是black。

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

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

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

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

　　如圖設置流：

　　如果在儀表板的界面，有數字的順序是顛倒的，可以再屏幕右側dashboard頁面下通過拖拽節(jié)點調整順序：

我們來“撥打”友道（我的公司）的電話，借以觀察現象：按下數字按鍵時，并不會顯示單個數字；按下CALL以后，一串電話號碼都能顯示出來。

　　我們舉例子詳細地介紹了按鈕控件的各個選項的作用，其它儀表板控件的選項功能類似，聰明的讀者要學會舉一反三哦?！　〈a在這里，導入你的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":"儲存數字，撥號","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"}]

接下來修改按鈕，

7.2.3 開關switch的使用

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

在http://localhost:1880/ui/下可以看到這個開關。點擊開關可以看到調試窗口下輸出了true。

　其中的true與false當然也可以改為別的載荷，跟inject節(jié)點類似

7.2.4 滑塊slider的使用

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

　拖動滑塊，可以在調試窗口見到當前滑塊的值。

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

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

7.2.5 輸入框text input的使用

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

　輸入任意的文字，在調試窗口可以看到。

　不過，你需要輸入的稍微快一點，兩個字符輸入間隔大于300ms的話就會輸出不止一條，你會看到這樣的結果：

所以我建議把輸入的延時設置為0，用“Enter”和“Tab”作為結束的標記?！　?/p>

再來試一試輸入框的別的功能，比如密碼：

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

　輸入密碼時，提示的文字會變小，且密碼會用點來代替。

　　在“number”的模式下，沒辦法輸入其它的字符。

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

　　文本輸入的模式里有顏色選擇，可以調出一個取色板，并返回顏色的編碼。我們在講述按鈕的時候，說過可以使用msg來設置按鈕，這里正好來把兩者結合一下?！　?/p>

首先，我們把text input的模式設置為picker，并用debug節(jié)點來看一看選中顏色以后會輸出什么。

點擊儀表板頁面的顏色輸入框，可以看到這樣的一個取色板：

我們隨便選一個顏色并點擊確定。比如紅色。再來看調試窗口的信息。

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

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

Background直接用編碼來設置。

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

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

[{"id":"1fbb5eaf.febb51","type":"ui_text_input","z":"7a8c632b.0c701c","name":"","label":"選擇文字或圖標顏色","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轉字體","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的使用

　　下拉菜單是輸入框與按鈕的結合體，常用于有指定選項的輸入。例如，您住在哪個??？這個答案就可以用下拉菜單，只不過選型可能會多一點。但是可以避免用戶輸入信息，也可以避免他犯錯。接下來就使用下拉菜單來做一個簡單的例子。俗話說，“桃三杏四李五年，要吃蘋果等八年，棗子當年能賣錢”。這句話里包含5個鍵值對，也就是關鍵字與數值的對應，及桃對應5年……棗對應1年，我們使用下拉菜單來完成這樣的任務：選擇某個水果，就輸出對應的年份。拖入一個dropdown節(jié)點，如圖進行配置：

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

連線并部署。

在儀表板的頁面，就可以看到這樣的頁面。點擊下拉菜單，就可以看到候選框。

　代碼如下：

[{"id":"4989de73.41634","type":"ui_dropdown","z":"7a8c632b.0c701c","name":"","label":"什么果樹種下了？","place":"請選擇水果","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":"蘋果","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":"幾年能結果子？","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"}]

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

最新評論