Node-RED UI 和儀表板技術
基本儀表板示例
在此流程中，我們將學習儀表板節點的基礎知識，並構建一個包含按鈕、警報、儀表、滑塊、折線圖和條形圖的 UI 儀表板
將一個按鈕節點拖出托盤並雙擊以編輯該按鈕的屬性
標籤描述按鈕的名稱，單擊按鈕時發送當前時間戳。雙擊組字段旁邊的鉛筆按鈕並指明組名稱和該字段屬於哪個選項卡。在我的例子中，我將選項卡 Demo 和組稱為按鈕。一旦您向頁面添加更多 UI 元素，就會使用此選項卡和組。
完成此 UI 元素的編輯後，單擊更新並完成。您會在佈局選項卡的右側注意到您的選項卡和組名稱。您也可以在此處添加選項卡和組。
將調試節點連接到此按鈕節點，然後進行部署。要查看儀表板的外觀，請單擊帶有向上箭頭的小方塊以在另一個網頁選項卡中查看儀表板。您應該會看到一個按鈕，當您單擊它時，您應該會在調試控制台的 node -RED 中看到當前時間戳。
拖動一個文本節點並將其連接到按鈕節點的輸出
確保文本節點的組和選項卡與按鈕的組和選項卡相同。這可確保文本框與按鈕 UI 元素相對應。單擊部署並刷新儀表板網頁，您應該會看到：
將通知節點拖到工作區並將其與按鈕節點的輸出連接
編輯通知節點的佈局
現在，一旦您單擊該按鈕，您應該會看到帶有時間戳的警報
將音頻輸出節點連接到按鈕輸出
確保音頻輸出與按鈕元素具有相同的標籤和組
Audio Out 僅接收文本並將其轉換為音頻。因此，將按鈕節點的時間戳輸入更改為字符串。
部署 ，當您單擊儀表板上的按鈕時，您應該會聽到音頻輸出。
的
這另一個組將被稱為模擬，它將在同一個儀表板網頁上，但它將包括一個滑塊、一個儀表、一個折線圖和一個條形圖！
的
拖動滑塊節點並將其輸出連接到儀表節點、圖表節點（線）和圖表節點（條）。
確保所有節點都是模擬組的一部分，並設置範圍為 0 - 200
部署所有更改並打開儀表板 UI。您應該會看到儀表、折線圖和條形圖根據滑塊輸入而波動。
[{"id":"fd446b54.5da24","type":"ui_button","z":"9583b8de.96bc48","name":"","group":"2fb9c205.dae50e","order":2,"width":0,"height":0,"passthru":false,"label":"click me","tooltip":"","color":"","bgcolor":"","icon":"","payload":"Hi This is a Demo","payloadType":"str","topic":"","x":180,"y":120,"wires":[["9569387b.fc24f","103477f0.45b588","b7e35051.2b75b","3375341f.88f7e4"]]},{"id":"103477f0.45b588","type":"ui_text","z":"9583b8de.96bc48","group":"2fb9c205.dae50e","order":1,"width":0,"height":0,"name":"","label":"Click Here !","format":"","layout":"row-spread","x":370,"y":100,"wires":[]},{"id":"9569387b.fc24f","type":"debug","z":"9583b8de.96bc48","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":370,"y":140,"wires":[]},{"id":"3692c3e.596783c","type":"ui_gauge","z":"9583b8de.96bc48","name":"","group":"122a9c51.bdf31c","order":1,"width":0,"height":0,"gtype":"gage","title":"gauge","label":"units","format":"","min":0,"max":"200","colors":["#00b500","#e6e600","#ca3838"],"seg1":"75","seg2":"150","x":350,"y":220,"wires":[]},{"id":"b5c97926.f8f0e","type":"ui_slider","z":"9583b8de.96bc48","name":"","label":"slider","tooltip":"","group":"122a9c51.bdf31c","order":1,"width":0,"height":0,"passthru":true,"outs":"all","topic":"","topicType":"str","min":0,"max":"200","step":1,"className":"","x":190,"y":260,"wires":[["3692c3e.596783c","be838f3e.6af14","da3a316d.a4e43"]]},{"id":"be838f3e.6af14","type":"ui_chart","z":"9583b8de.96bc48","name":"","group":"122a9c51.bdf31c","order":3,"width":"0","height":"0","label":"line chart","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"200","removeOlder":"2","removeOlderPoints":"","removeOlderUnit":"60","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":360,"y":260,"wires":[[]]},{"id":"da3a316d.a4e43","type":"ui_chart","z":"9583b8de.96bc48","name":"","group":"122a9c51.bdf31c","order":4,"width":"0","height":"0","label":"bar chart","chartType":"bar","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"","dot":false,"ymin":"0","ymax":"200","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"outputs":1,"x":360,"y":300,"wires":[[]]},{"id":"b7e35051.2b75b","type":"ui_toast","z":"9583b8de.96bc48","position":"top right","displayTime":"3","highlight":"","outputs":0,"ok":"OK","cancel":"","topic":"","name":"","x":390,"y":180,"wires":[]},{"id":"3375341f.88f7e4","type":"ui_audio","z":"9583b8de.96bc48","name":"","group":"2fb9c205.dae50e","voice":"en-US","always":"","x":360,"y":60,"wires":[]},{"id":"2fb9c205.dae50e","type":"ui_group","name":"Button","tab":"de296677.584f4","order":1,"disp":true,"width":"6","collapse":false},{"id":"122a9c51.bdf31c","type":"ui_group","name":"Analog","tab":"de296677.584f4","order":2,"disp":true,"width":"6","collapse":false},{"id":"de296677.584f4","type":"ui_tab","name":"Demo","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
沒有留言:
張貼留言