--MQTT and Node-Red-- [Part 3] Create Dashboard Node-RED

This Project is part of main project MQTT and Node-Red. This Project will be describe how to create MQTT dashboard using Node-RED.

IntermediateFull instructions provided2 hours5,257

--MQTT and Node-Red-- [Part 3] Create Dashboard Node-RED

Things used in this project

Software apps and online services

Node-RED

Make Sure installed on your computer.

MQTT

Make Sure installed on your computer.

Story

Preparation

Node-RED

Make sure Node-Red installed in your computer. You can check version (in Command Line) before starting Node-Red using command node-red -h

Mosquitto MQTT Broker

Make sure Mosquitto MQTT Broker running in your computer.

Create MQTT Dashboard using Node-RED

1. Running Node-RED using command node-red

2. Navigate to Node-RED page http://127.0.0.1:1880 or http://localhost:1880 (i'm using default port for Node-RED)

3. To Create Dashboard we need node-red-dashboard palette. by default node-red-dashboard palette is not installed in Node-Red, so we should install dashboard palette using ManagePalette.

4. Search node-red-dashboard palette. Then install node-red-dashboard palette.

5. Create new flow in Node-RED or import Example Flow Dashboard Node-RED

(in Attachment Code).

6. Import the example flow dashboard.

7. You can browse json file or direct paste from example.

8. Flow Dashboard will be appeared in Node-RED.

9. You can change the setting URL mosquitto MQTT broker, and MQTT topic.

Mosquitto MQTT Broker = Localhost:1883

Temperature Topic = nodemcu/temperature

Humidity Topic = nodemcu/humidity

LED State Topic = nodemcu/ledstate

10. After configure the setting. You should to deploy the flow dashboard. Click Deploy.

11. Navigate to http://127.0.0.1:1880/ui or http://localhost:1880/ui

NOTE: for the first time, dasahboard data/value will be empty. Because no data/value in Topic MQTT.

Example Flow Dashboard Node-RED

[{"id":"5e04b9dd.81c658","type":"tab","label":"Dashboard","disabled":false,"info":""},{"id":"e0fbecd8.faa57","type":"mqtt out","z":"5e04b9dd.81c658","name":"","topic":"nodemcu/ledstate","qos":"","retain":"","broker":"5e3de42f.1e83bc","x":350,"y":440,"wires":[]},{"id":"235eb13c.0e6e6e","type":"mqtt in","z":"5e04b9dd.81c658","name":"","topic":"nodemcu/temperature","qos":"2","broker":"5e3de42f.1e83bc","x":144,"y":347,"wires":[["7e75f56e.a3ef1c","125d1072.694a2"]]},{"id":"7e75f56e.a3ef1c","type":"debug","z":"5e04b9dd.81c658","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","x":341,"y":314,"wires":[]},{"id":"98d00e19.a6762","type":"mqtt in","z":"5e04b9dd.81c658","name":"","topic":"nodemcu/humidity","qos":"2","datatype":"auto","broker":"5e3de42f.1e83bc","x":133,"y":231,"wires":[["89bc352.e41bac8"]]},{"id":"ea3a1253.5422c","type":"ui_switch","z":"5e04b9dd.81c658","name":"LED control","label":"Output","tooltip":"","group":"92a9cd27.99b9d","order":2,"width":0,"height":0,"passthru":true,"decouple":"false","topic":"","style":"","onvalue":"on","onvalueType":"str","onicon":"","oncolor":"","offvalue":"off","offvalueType":"str","officon":"","offcolor":"","x":149,"y":440,"wires":[["e0fbecd8.faa57"]]},{"id":"89bc352.e41bac8","type":"ui_gauge","z":"5e04b9dd.81c658","name":"Humidity","group":"92a9cd27.99b9d","order":0,"width":0,"height":0,"gtype":"gage","title":"Humidity","label":"%","format":"{{value}}","min":0,"max":"100","colors":["#00b3d9","#0073e6","#001bd7"],"seg1":"33","seg2":"66","x":320,"y":258,"wires":[]},{"id":"125d1072.694a2","type":"ui_chart","z":"5e04b9dd.81c658","name":"Temperature","group":"92a9cd27.99b9d","order":1,"width":0,"height":0,"label":"Temperature","chartType":"line","legend":"false","xformat":"HH:mm","interpolate":"linear","nodata":"","dot":false,"ymin":"","ymax":"","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"3600","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e","#2ca02c","#98df8a","#d62728","#ff9896","#9467bd","#c5b0d5"],"useOldStyle":false,"outputs":1,"x":341,"y":374,"wires":[[]]},{"id":"5e3de42f.1e83bc","type":"mqtt-broker","z":"","name":"","broker":"localhost","port":"1883","clientid":"","usetls":false,"compatmode":true,"keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","closeTopic":"","closeQos":"0","closePayload":"","willTopic":"","willQos":"0","willPayload":""},{"id":"92a9cd27.99b9d","type":"ui_group","z":"","name":"Default","tab":"6f670e80.d2e0f","order":1,"disp":true,"width":"6","collapse":false},{"id":"6f670e80.d2e0f","type":"ui_tab","z":"5e04b9dd.81c658","name":"Dashboard","icon":"dashboard"}]

--MQTT and Node-Red-- [Part 3] Create Dashboard Node-RED