Jak wykonać Dashboard w Node-RED

Jak wykonać Dashboard w Node-RED

Kiedyś przychodzi taki moment, że chcemy w prosty i zarazem ładny sposób zaprezentować wyniki pomiarów z czujników. Tak się składa, że do Node-RED dostępny jest od standardowo od wersji 1.0 komponent do stworzenia własnego dashboarda, czyli strony WWW z prezentacją pomiarów.

Załóżmy, że po protokole MQTT otrzymujemy odczyt temperatury z czujnika umieszczonego na zewnątrz. Odczyt jest w postaci

"{"temperature":"4.25"}"

Tworzymy w Node-Red flow jak na poniższym obrazku

Flow tworzący interfejs wskaźnika temperatury

Kod tego flow jest następujący:

[{"id":"6538b8b4.41d358","type":"tab","label":"UI","disabled":false,"info":""},{"id":"8cc62337.5c064","type":"mqtt in","z":"6538b8b4.41d358","name":"","topic":"/sensors/outside","qos":"2","datatype":"auto","broker":"c7190093.9f2bb","x":200,"y":240,"wires":[["cf4da040.edd388","52f65e50.382b3"]]},{"id":"2dbf4e8e.0053e2","type":"function","z":"6538b8b4.41d358","name":"","func":"var temp = {payload: msg.payload.temperature};\n\nreturn temp;","outputs":1,"noerr":0,"x":510,"y":240,"wires":[["dc65dc53.87d0a"]]},{"id":"cf4da040.edd388","type":"json","z":"6538b8b4.41d358","name":"","property":"payload","action":"","pretty":false,"x":370,"y":240,"wires":[["2dbf4e8e.0053e2"]]},{"id":"dc65dc53.87d0a","type":"ui_gauge","z":"6538b8b4.41d358","name":"","group":"4e116acb.00a85c","order":0,"width":0,"height":0,"gtype":"gage","title":"Temperatura","label":"*C","format":"{{value}}","min":"-25","max":"35","colors":["#005db5","#f0992d","#ca3838"],"seg1":"5","seg2":"25","x":670,"y":240,"wires":[]},{"id":"52f65e50.382b3","type":"debug","z":"6538b8b4.41d358","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":440,"y":340,"wires":[]},{"id":"c7190093.9f2bb","type":"mqtt-broker","z":"","name":"mqtt on NAS","broker":"192.168.88.245","port":"1883","clientid":"","usetls":false,"compatmode":false,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"4e116acb.00a85c","type":"ui_group","z":"","name":"Na zewnatrz","tab":"51fff302.7d28a4","disp":true,"width":"6","collapse":false},{"id":"51fff302.7d28a4","type":"ui_tab","z":"","name":"Home","icon":"dashboard","disabled":false,"hidden":false}]

Po wysłaniu przyciskiem Deploy, klikając na ikonkę wykresu zostaniemy przeniesieni na stronę z stworzonym interfejsem:

Wskaźnik temperatury wykonany w Node-Red Dashboard
Posted in node-red and tagged , , .

Artur Wronowski

Właściciel firmy digi-led. Od młodych lat jego pasją jest elektronika, informatyka i programowanie(Python).