當(dāng)前位置：首頁(yè) > 编程资源 > 编程问答 >内容正文

编程问答

node-red教程 7dashboard简介与输入型仪表板控件的使用

發(fā)布時(shí)間：2024/1/23 编程问答 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 node-red教程 7dashboard简介与输入型仪表板控件的使用小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

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)烈建議感興趣的讀者自己研究一下。
　　Node-red支持自定義節(jié)點(diǎn)，當(dāng)然也就支持自定義圖形化的節(jié)點(diǎn)。也有優(yōu)秀的開(kāi)發(fā)者把自己建立的圖形化節(jié)點(diǎn)無(wú)償分享。這里給出一個(gè)股票界面的例子，讓大家看一看優(yōu)秀的node-red界面能做到什么樣子。
這里寫(xiě)圖片描述

7.1 儀表板安裝與介紹
7.1.1 儀表板的安裝
　　我們常用的圖形化節(jié)點(diǎn)叫做儀表板，dashboard，也能做出效果不錯(cuò)的界面，例如
這里寫(xiě)圖片描述
　　Dashboard還有一些其它控件，例如
這里寫(xiě)圖片描述
　　儀表板的安裝與串口類(lèi)似，在安裝節(jié)點(diǎn)的輸入框內(nèi)輸入“dashboard”，找到名為“node-red-dashborad”的控件并點(diǎn)擊安裝即可。
這里寫(xiě)圖片描述
　　安裝完以后在屏幕左邊會(huì)多出很多新的控件
這里寫(xiě)圖片描述

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。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　拖入一個(gè)debug節(jié)點(diǎn)并連線部署。在瀏覽器中輸入地址http://localhost:1880/ui
　　能正確打開(kāi)此網(wǎng)頁(yè)，已經(jīng)可以說(shuō)明安裝成功了。
　　然后可以看到名為date的一行內(nèi)容。
這里寫(xiě)圖片描述
　　我們可以隨便選擇一個(gè)日期，例如北京奧運(yùn)會(huì)開(kāi)幕
這里寫(xiě)圖片描述
　　在調(diào)試窗口下就可以看到一個(gè)時(shí)間戳。
這里寫(xiě)圖片描述
能用一個(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意思是主題。可以選明亮的，或者暗的，或者自定義。
　　Site意為地址，可以設(shè)置標(biāo)題的UI，或者選擇標(biāo)題欄。也能夠以像素為單位設(shè)置網(wǎng)格布局的基本圖形，就是剛剛提到默認(rèn)是48像素的那個(gè)“單位”，或者單獨(dú)設(shè)置控件，組的大小。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　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。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　再拖入一個(gè)debug節(jié)點(diǎn)，連線并部署。
這里寫(xiě)圖片描述
　　在http://localhost:1880/ui頁(yè)面下就可以看到剛剛設(shè)置的的按鈕，點(diǎn)擊按鈕，可以在調(diào)試窗口看到以下信息。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　這說(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)界面。
這里寫(xiě)圖片描述
　　接下來(lái)結(jié)合這和撥號(hào)界面，來(lái)講講我們?cè)O(shè)置了哪些參數(shù)。以下是button節(jié)點(diǎn)可以設(shè)置的參數(shù)。
這里寫(xiě)圖片描述
　　首先，很直觀可以看到，數(shù)字的背景是不一樣的，123的背景是灰色，456的背景是淺藍(lán)，
　　所以123控件的Background處應(yīng)當(dāng)填寫(xiě)“gray”。
這里寫(xiě)圖片描述
　　按鍵的大小也是不一樣的。一般來(lái)說(shuō)，按鍵的大小默認(rèn)是自動(dòng)，也就是長(zhǎng)度跟隨Group，寬度是1。Group的寬度是多少呢？默認(rèn)是6，可以修改，撥號(hào)界面就改成了3。修改的界面在屏幕右側(cè)的dashboard界面下：
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　Width就是寬度。順帶提一下，下邊的兩個(gè)選項(xiàng)分別是顯示組的名字，和允許收縮。效果就是這樣的：
這里寫(xiě)圖片描述
　　顯而易見(jiàn)，普通數(shù)字按鈕的寬度都是1，撥號(hào)鍵的寬度是2。
　　還有文字的顏色不一樣。這個(gè)就很簡(jiǎn)單了，修改colour即可，比如數(shù)字的文字都是black。
這里寫(xiě)圖片描述
　　另外，還可以看出，撥號(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)，我截取一些放在這里：
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　每個(gè)圖標(biāo)下邊都有名字，如果你需要使用這個(gè)圖標(biāo)，把名字輸入到Icon后邊即可，例如按鍵0的圖標(biāo)：
這里寫(xiě)圖片描述
　　既然是電話撥號(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;
}
1
2
3
4
5
6
7
8
9
　　如圖設(shè)置流：
這里寫(xiě)圖片描述
　　如果在儀表板的界面，有數(shù)字的順序是顛倒的，可以再屏幕右側(cè)dashboard頁(yè)面下通過(guò)拖拽節(jié)點(diǎn)調(diào)整順序：
這里寫(xiě)圖片描述
　　我們來(lái)“撥打”友道（我的公司）的電話，借以觀察現(xiàn)象：按下數(shù)字按鍵時(shí)，并不會(huì)顯示單個(gè)數(shù)字；按下CALL以后，一串電話號(hào)碼都能顯示出來(lái)。
這里寫(xiě)圖片描述
　　我們舉例子詳細(xì)地介紹了按鈕控件的各個(gè)選項(xiàng)的作用，其它儀表板控件的選項(xiàng)功能類(lèi)似，聰明的讀者要學(xué)會(huì)舉一反三哦。
　　代碼在這里，導(dǎo)入你的node-red工作區(qū)好好研究下吧。

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)連接，部署。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　在http://localhost:1880/ui/下可以看到這個(gè)開(kāi)關(guān)。點(diǎn)擊開(kāi)關(guān)可以看到調(diào)試窗口下輸出了true。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　其中的true與false當(dāng)然也可以改為別的載荷，跟inject節(jié)點(diǎn)類(lèi)似
這里寫(xiě)圖片描述

7.2.4 滑塊slider的使用
　　手機(jī)在調(diào)節(jié)屏幕亮度的時(shí)候，常常出現(xiàn)一個(gè)橫線，串著一個(gè)圓球，拖拽圓球就可以改變屏幕亮度。橫線加圓球組成的就是一個(gè)滑塊。看上去有點(diǎn)像被吃的只剩下一個(gè)的糖葫蘆，或者就叫做滑球更貼切。
　　Dashboard中的滑塊可以幫助用戶在最小值與最大值的范圍內(nèi)，改變?cè)O(shè)置的值。每次變化都會(huì)把值作為消息的載荷。
拖入一個(gè)slider控件，修改Group與Tab，然后與debug節(jié)點(diǎn)連接，部署。
　　滑塊形狀如下
這里寫(xiě)圖片描述
　　拖動(dòng)滑塊，可以在調(diào)試窗口見(jiàn)到當(dāng)前滑塊的值。
這里寫(xiě)圖片描述
　　注意，假如需要從0到3，那么拖動(dòng)滑塊時(shí)，1和2的值也會(huì)發(fā)送。可以直接點(diǎn)擊到3的位置。
默認(rèn)情況下，滑塊的范圍是從0到10，步進(jìn)1，也可以修改，例如10到80，步進(jìn)2。
這里寫(xiě)圖片描述

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)連接，并部署。
這里寫(xiě)圖片描述
　　輸入任意的文字，在調(diào)試窗口可以看到。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　不過(guò)，你需要輸入的稍微快一點(diǎn)，兩個(gè)字符輸入間隔大于300ms的話就會(huì)輸出不止一條，你會(huì)看到這樣的結(jié)果：
這里寫(xiě)圖片描述
　　所以我建議把輸入的延時(shí)設(shè)置為0，用“Enter”和“Tab”作為結(jié)束的標(biāo)記。
　　再來(lái)試一試輸入框的別的功能，比如密碼：
這里寫(xiě)圖片描述
　　我們把Label也寫(xiě)上，在儀表板的頁(yè)面可用于顯示一些提示。
這里寫(xiě)圖片描述
　　輸入密碼時(shí)，提示的文字會(huì)變小，且密碼會(huì)用點(diǎn)來(lái)代替。
這里寫(xiě)圖片描述
　　在“number”的模式下，沒(méi)辦法輸入其它的字符。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述

7.2.6 使用文本輸入的取色功能為按鈕設(shè)置顏色
　　文本輸入的模式里有顏色選擇，可以調(diào)出一個(gè)取色板，并返回顏色的編碼。我們?cè)谥v述按鈕的時(shí)候，說(shuō)過(guò)可以使用msg來(lái)設(shè)置按鈕，這里正好來(lái)把兩者結(jié)合一下。
　　首先，我們把text input的模式設(shè)置為picker，并用debug節(jié)點(diǎn)來(lái)看一看選中顏色以后會(huì)輸出什么。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　點(diǎn)擊儀表板頁(yè)面的顏色輸入框，可以看到這樣的一個(gè)取色板：
這里寫(xiě)圖片描述
　　我們隨便選一個(gè)顏色并點(diǎn)擊確定。比如紅色。再來(lái)看調(diào)試窗口的信息。
這里寫(xiě)圖片描述
　　收到消息是#ff0000，這就是紅色的編號(hào)。我們也可以在設(shè)置顏色的頁(yè)面用這種方式。用顏色選擇器看顏色的編碼，再進(jìn)行顏色設(shè)置的辦法很方便。7.2.1小節(jié)設(shè)置按鈕的顏色時(shí)，想出gray，orange和light blue這幾個(gè)單詞我都有點(diǎn)絞盡腦汁了。
　　接下來(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è)置。
這里寫(xiě)圖片描述
　　效果就是，不論你選擇什么顏色，中間的心就變成什么顏色。
這里寫(xiě)圖片描述
　　也可以使用這種方法來(lái)動(dòng)態(tài)地設(shè)置背景或文字的內(nèi)容，感興趣的同學(xué)可以自己研究下。參考代碼在這里：

[{“id”:“1fbb5eaf.febb51”,“type”:“ui_text_input”,“z”:“7a8c632b.0c701c”,“name”:"",“l(fā)abel”:“選擇文字或圖標(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,“l(fā)abel”:"",“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”}]
1
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)行配置：
這里寫(xiě)圖片描述
　　再拖入一個(gè)text節(jié)點(diǎn)。注意不是text input。我們以前一直使用debug節(jié)點(diǎn)來(lái)顯示信息，現(xiàn)在想把信息顯示在儀表板的頁(yè)面上，就用這么個(gè)節(jié)點(diǎn)。然后進(jìn)行如下修改：
這里寫(xiě)圖片描述
　　連線并部署。
這里寫(xiě)圖片描述
　　在儀表板的頁(yè)面，就可以看到這樣的頁(yè)面。點(diǎn)擊下拉菜單，就可以看到候選框。
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
這里寫(xiě)圖片描述
　　代碼如下：

[{“id”:“4989de73.41634”,“type”:“ui_dropdown”,“z”:“7a8c632b.0c701c”,“name”:"",“l(fā)abel”

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來(lái)咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的node-red教程 7dashboard简介与输入型仪表板控件的使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

上一篇： Showing multiple lin
下一篇： node-red教程 5 函数节点