目錄

• 7.1 儀表板安裝與介紹
• 7.1.1 儀表板的安裝
• 7.1.2 檢驗安裝結果
• 7.1.3 儀表板簡介
• 7.2 常見的輸入型儀表板控制元件應用
• 7.2.1 按鈕button簡介
• 7.2.2 使用按鈕實現簡易電話撥號介面
• 7.2.3 開關switch的使用
• 7.2.4 滑塊slider的使用
• 7.2.5 輸入框text input的使用
• 7.2.6 使用文字輸入的取色功能為按鈕設定顏色
• 7.2.7 下拉選單dropdown的使用

　　Node-red基於，這是前端技術的“三駕馬車”之一。前端技術主要負責介面呈現，與使用者互動等等，很多炫酷的特效都是前端呈現的。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://.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，在框架內建立自己的小部件。

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","order":2,"label":"2","payload":"2","y":100,{"id":"ded462b1.c2e2b","order":3,"label":"3","payload":"3","y":140,{"id":"857ebe34.c8d85","order":4,"label":"4","bgcolor":"light blue","payload":"4","y":180,{"id":"f11b9214.04659","order":5,"label":"5","payload":"5","y":220,{"id":"94ebe434.733518","order":6,"label":"6","payload":"6","y":260,{"id":"4043b4bf.bcc71c","order":7,"label":"7","bgcolor":"orange","payload":"7","y":300,{"id":"2301a306.95065c","order":8,"label":"8","payload":"8","y":340,{"id":"aa51af93.26b73","order":9,"label":"9","payload":"9","y":380,{"id":"85bdbffa.6a1dc","order":0,"width":"2","label":"call","color":"yellow","bgcolor":"green","icon":"phone","payload":"0","topic":"call","y":460,";wires":[["cc35b265.c22d"]]},{"id":"cc35b265.c22d","type":"function","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","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":750,"wires":[]},{"id":"d011a93b.f06a78","name":"0","label":"","icon":"exposure_zero","y":420,{"id":"72c43141.3520c","type":"ui_Group","z":"","name":"phone","tab":"aacbcc03.d359b","disp":true,"width":"3","collapse":true},{"id":"aacbcc03.d359b","type":"ui_tab","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來設定按鈕，這裡正好QSfGiDPY來把兩者結合一下。　　

首先，我們把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","label":"選擇文字或圖示顏色","group":"bd84de44.ae507","width":0,"height":0,"passthru":true,"mode":"color","delay":"300","x":220,"y":120,"wires":[["69912933.9c62e8","4dd666d2.d144e8"]]},{"id":"4dd666d2.d144e8","x":390,{"id":"69912933.9c62e8","type":"change","name":"payload轉字型","rules":[{"t":"move","p":"payload","pt":"msg","to":"colour","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":440,"wires":[["b22f434.b055dc"]]},{"id":"b22f434.b055dc","width":"0","height":"0","color":"{{msg.colour}}","bgcolor":"#ff80ff","icon":"favorite","payload":"","payloadType":"str","x":670,"wires":[[]]},{"id":"bd84de44.ae507","type":"ui_group","name":"CONTROL","width":"6","collapse":false},"icon":"dashboard"}]

7.2.7 下拉選單dropdown的使用

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

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

連線並部署。

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

　程式碼如下：

[{"id":"4989de73.41634","type":"ui_dropdown","label":"什麼果樹種下了？","place":"請選擇水果","options":[{"label":"桃","value":"3年","type":"str"},{"label":"杏","value":"4年",{"label":"李","value":"5年",{"label":"蘋果","value":"8年",{"label":"棗子","value":"1年","type":"str"}],"x":330,"wires":[["ba04c2f1.2e9c1"]]},{"id":"ba04c2f1.2e9c1","type":"ui_text","QSfGiDPYname":"","label":"幾年能結果子？","format":"{{msg.payload}}","layout&quowww.cppcns.comt;:"row-spread","x":540,"icon":"dashboard"}]

到此這篇關於node-red教程之dashboard簡介與輸入型儀表板控制元件的使用的文章就介紹到這了,更多相關node-red dashboard內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！