node-red教程 7dashboard簡介與輸入型儀表板控件的使用

　　Node-red基於JS，這是前端技術的“三駕馬車”之一。前端技術主要負責界面呈現，與用戶交互等等，很多炫酷的特效都是前端呈現的。Node-red技術有這樣的“基因”，界面當然不會差勁。它只需要一個控件就可以實現一個頁面。由於本書講述的應用與頁面關係不大，就不講HTTP與websocket相關的控件了。強烈建議感興趣的讀者自己研究一下。
　　Node-red支持自定義節點，當然也就支持自定義圖形化的節點。也有優秀的開發者把自己建立的圖形化節點無償分享。這裏給出一個股票界面的例子，讓大家看一看優秀的node-red界面能做到什麼樣子。

7.1 儀表板安裝與介紹

7.1.1 儀表板的安裝

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

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

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

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

7.1.2 檢驗安裝結果

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



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

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

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

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

7.1.3 儀表板簡介

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



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

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

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

7.2.1 按鈕button簡介

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



　　再拖入一個debug節點，連線並部署。

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


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

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

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

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

　　首先，很直觀可以看到，數字的背景是不一樣的，123的背景是灰色，456的背景是淺藍，
　　所以123控件的Background處應當填寫“gray”。

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


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

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

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


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

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

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

　　如圖設置流：

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

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

　　我們舉例子詳細地介紹了按鈕控件的各個選項的作用，其它儀表板控件的選項功能類似，聰明的讀者要學會舉一反三哦。
　　代碼在這裏，導入你的node-red工作區好好研究下吧。

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


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


　　其中的true與false當然也可以改爲別的載荷，跟inject節點類似

7.2.4 滑塊slider的使用

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

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

　　注意，假如需要從0到3，那麼拖動滑塊時，1和2的值也會發送。可以直接點擊到3的位置。
默認情況下，滑塊的範圍是從0到10，步進1，也可以修改，例如10到80，步進2。

7.2.5 輸入框text input的使用

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

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


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

　　所以我建議把輸入的延時設置爲0，用“Enter”和“Tab”作爲結束的標記。
　　再來試一試輸入框的別的功能，比如密碼：

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

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

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

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

　　文本輸入的模式裏有顏色選擇，可以調出一個取色板，並返回顏色的編碼。我們在講述按鈕的時候，說過可以使用msg來設置按鈕，這裏正好來把兩者結合一下。
　　首先，我們把text input的模式設置爲picker，並用debug節點來看一看選中顏色以後會輸出什麼。


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

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

　　收到消息是#ff0000，這就是紅色的編號。我們也可以在設置顏色的頁面用這種方式。用顏色選擇器看顏色的編碼，再進行顏色設置的辦法很方便。7.2.1小節設置按鈕的顏色時，想出gray，orange和light blue這幾個單詞我都有點絞盡腦汁了。
　　接下來改進程序，由於比較簡單，我就直接把源碼附在下邊，你們看一看源碼應該就能理解。需要注意的點就是，用change節點把msg.payload的屬性賦給msg.colour，然後button裏的colour並不是空着，而是{{msg.colour}}。Background直　　接用編碼來設置。

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

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

[{"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節點，如圖進行配置：

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

　　連線並部署。

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



　　代碼如下：

[{"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"}]