美文网首页
可视化网关编程系列教程-----(7)可视化界面

可视化网关编程系列教程-----(7)可视化界面

作者: Songzh | 来源:发表于2020-07-19 19:00 被阅读0次

    前言

    光有逻辑,没有界面怎么能行,这里教大家一点比较简单的界面制作,高大上的也能做,但是需要耗费大量时间去研究,大家可以自行研究。像这么好看的也可以的。


    control interface.png

    1. 安装node-red-dashboard

    不会安装的看前期教程。

    2. 了解node-red-dashboard

    dashboard拥有很多节点,按钮,滑块,日期选择,文本输入,文本展示,表单等。这里就不逐一介绍了,也是非常简单的。大家自行研究,这里简单做个界面去控制灯光。

    dashboard.png

    3. 使用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}]
    
    其他效果图(已在使用)

    天气预报效果图,从小米天气获取的数据

    天气预报.png

    空调控制效果图

    image.png
    模拟Nest外观控制效果图
    image.png

    相关文章

      网友评论

          本文标题:可视化网关编程系列教程-----(7)可视化界面

          本文链接:https://www.haomeiwen.com/subject/uplrkktx.html