前言
光有逻辑,没有界面怎么能行,这里教大家一点比较简单的界面制作,高大上的也能做,但是需要耗费大量时间去研究,大家可以自行研究。像这么好看的也可以的。
control interface.png
1. 安装node-red-dashboard
不会安装的看前期教程。
2. 了解node-red-dashboard
dashboard拥有很多节点,按钮,滑块,日期选择,文本输入,文本展示,表单等。这里就不逐一介绍了,也是非常简单的。大家自行研究,这里简单做个界面去控制灯光。
dashboard.png3. 使用node-red-dashboard
案例:按钮开灯,场景调用
这个流程是带反馈的,调用场景的时候,滑条也会跟着变。
流程图.png
从效果图可以看出,这是客厅柔和的场景。
效果图.png
[{"id":"4be6456a.196f9c","type":"ui_button","z":"63da8941.7cd5c8","name":"","group":"8c7a9f74.9a9e1","order":1,"width":0,"height":0,"passthru":false,"label":"客厅明亮","tooltip":"","color":"","bgcolor":"","icon":"","payload":"1","payloadType":"num","topic":"","x":570,"y":2460,"wires":[["962c7b87.738578"]]},{"id":"f52555ad.187c98","type":"ui_button","z":"63da8941.7cd5c8","name":"","group":"8c7a9f74.9a9e1","order":2,"width":0,"height":0,"passthru":false,"label":"客厅柔和","tooltip":"","color":"","bgcolor":"","icon":"","payload":"2","payloadType":"num","topic":"","x":560,"y":2520,"wires":[["962c7b87.738578"]]},{"id":"962c7b87.738578","type":"knxUltimate","z":"63da8941.7cd5c8","server":"dcc22daf.66f09","topic":"1/0/0","outputtopic":"","dpt":"5.001","initialread":false,"notifyreadrequest":false,"notifyresponse":false,"notifywrite":true,"notifyreadrequestalsorespondtobus":false,"notifyreadrequestalsorespondtobusdefaultvalueifnotinitialized":"0","listenallga":false,"name":"客厅场景","outputtype":"write","outputRBE":true,"inputRBE":false,"formatmultiplyvalue":1,"formatnegativevalue":"leave","formatdecimalsvalue":999,"passthrough":"no","x":780,"y":2500,"wires":[[]]},{"id":"50fcdfb0.cb11b","type":"ui_slider","z":"63da8941.7cd5c8","name":"","label":"客厅吊灯","tooltip":"","group":"8c7a9f74.9a9e1","order":3,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":560,"y":2600,"wires":[["3c98c0ef.3b3ef"]]},{"id":"3c98c0ef.3b3ef","type":"knxUltimate","z":"63da8941.7cd5c8","server":"dcc22daf.66f09","topic":"1/1/1","outputtopic":"","dpt":"5.001","initialread":false,"notifyreadrequest":false,"notifyresponse":false,"notifywrite":true,"notifyreadrequestalsorespondtobus":false,"notifyreadrequestalsorespondtobusdefaultvalueifnotinitialized":"0","listenallga":false,"name":"客厅吊灯","outputtype":"write","outputRBE":true,"inputRBE":false,"formatmultiplyvalue":1,"formatnegativevalue":"leave","formatdecimalsvalue":999,"passthrough":"no","x":750,"y":2600,"wires":[["50fcdfb0.cb11b"]]},{"id":"1c441477.ffe84c","type":"ui_slider","z":"63da8941.7cd5c8","name":"","label":"客厅侧边筒灯","tooltip":"","group":"8c7a9f74.9a9e1","order":4,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":580,"y":2660,"wires":[["7337e45b.8ea29c"]]},{"id":"7337e45b.8ea29c","type":"knxUltimate","z":"63da8941.7cd5c8","server":"dcc22daf.66f09","topic":"1/1/2","outputtopic":"","dpt":"5.001","initialread":false,"notifyreadrequest":false,"notifyresponse":false,"notifywrite":true,"notifyreadrequestalsorespondtobus":false,"notifyreadrequestalsorespondtobusdefaultvalueifnotinitialized":"0","listenallga":false,"name":"客厅侧边筒灯","outputtype":"write","outputRBE":true,"inputRBE":false,"formatmultiplyvalue":1,"formatnegativevalue":"leave","formatdecimalsvalue":999,"passthrough":"no","x":760,"y":2660,"wires":[["1c441477.ffe84c"]]},{"id":"7104623d.7e46fc","type":"ui_slider","z":"63da8941.7cd5c8","name":"","label":"客厅背景墙射灯","tooltip":"","group":"8c7a9f74.9a9e1","order":5,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":580,"y":2720,"wires":[["a417db4c.a4a078"]]},{"id":"a417db4c.a4a078","type":"knxUltimate","z":"63da8941.7cd5c8","server":"dcc22daf.66f09","topic":"1/1/3","outputtopic":"","dpt":"5.001","initialread":false,"notifyreadrequest":false,"notifyresponse":false,"notifywrite":true,"notifyreadrequestalsorespondtobus":false,"notifyreadrequestalsorespondtobusdefaultvalueifnotinitialized":"0","listenallga":false,"name":"客厅背景墙射灯","outputtype":"write","outputRBE":true,"inputRBE":false,"formatmultiplyvalue":1,"formatnegativevalue":"leave","formatdecimalsvalue":999,"passthrough":"no","x":770,"y":2720,"wires":[["7104623d.7e46fc"]]},{"id":"4d732531.747a9c","type":"ui_slider","z":"63da8941.7cd5c8","name":"","label":"客厅灯带","tooltip":"","group":"8c7a9f74.9a9e1","order":6,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":560,"y":2780,"wires":[["1e9f3d2.19081c3"]]},{"id":"1e9f3d2.19081c3","type":"knxUltimate","z":"63da8941.7cd5c8","server":"dcc22daf.66f09","topic":"1/1/4","outputtopic":"","dpt":"5.001","initialread":false,"notifyreadrequest":false,"notifyresponse":false,"notifywrite":true,"notifyreadrequestalsorespondtobus":false,"notifyreadrequestalsorespondtobusdefaultvalueifnotinitialized":"0","listenallga":false,"name":"客厅灯带","outputtype":"write","outputRBE":true,"inputRBE":false,"formatmultiplyvalue":1,"formatnegativevalue":"leave","formatdecimalsvalue":999,"passthrough":"no","x":750,"y":2780,"wires":[["4d732531.747a9c"]]},{"id":"78462467.64ea4c","type":"ui_slider","z":"63da8941.7cd5c8","name":"","label":"客厅柜灯","tooltip":"","group":"8c7a9f74.9a9e1","order":7,"width":0,"height":0,"passthru":false,"outs":"end","topic":"","min":0,"max":"100","step":1,"x":560,"y":2840,"wires":[["5bf81cd3.a29fa4"]]},{"id":"5bf81cd3.a29fa4","type":"knxUltimate","z":"63da8941.7cd5c8","server":"dcc22daf.66f09","topic":"1/1/5","outputtopic":"","dpt":"5.001","initialread":false,"notifyreadrequest":false,"notifyresponse":false,"notifywrite":true,"notifyreadrequestalsorespondtobus":false,"notifyreadrequestalsorespondtobusdefaultvalueifnotinitialized":"0","listenallga":false,"name":"客厅柜灯","outputtype":"write","outputRBE":true,"inputRBE":false,"formatmultiplyvalue":1,"formatnegativevalue":"leave","formatdecimalsvalue":999,"passthrough":"no","x":750,"y":2840,"wires":[["78462467.64ea4c"]]},{"id":"8c7a9f74.9a9e1","type":"ui_group","z":"","name":"客厅灯光","tab":"7ae61e2b.96fe2","disp":true,"width":"8","collapse":false},{"id":"dcc22daf.66f09","type":"knxUltimate-config","z":"","host":"224.0.23.12","port":"3671","physAddr":"15.15.22","suppressACKRequest":false,"csv":"","KNXEthInterface":"以太网","KNXEthInterfaceManuallyInput":"","statusDisplayLastUpdate":true,"statusDisplayDeviceNameWhenALL":true,"statusDisplayDataPoint":false,"stopETSImportIfNoDatapoint":"stop","loglevel":"info","name":"Gateway","localEchoInTunneling":true},{"id":"7ae61e2b.96fe2","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]
其他效果图(已在使用)
天气预报效果图,从小米天气获取的数据
空调控制效果图
模拟Nest外观控制效果图
image.png
网友评论