NAME-ESP32-HiveMQ-Node-RED Dashboard
Use this flow to visualize ESP32 sensor data (e.g., DHT11/LDR) from HiveMQ Cloud in a Node-RED Dashboard.
How it works
ESP32 publishes sensor readings to MQTT topic iot/workshop/temp on HiveMQ Cloud (port 8883, TLS).
Node-RED subscribes, parses JSON, and shows a gauge and line chart.
Before you deploy
Open the MQTT Broker config node and set:
Server: your HiveMQ Cloud hostname
Port: 8883
Username / Password: your HiveMQ credentials
TLS: enabled (already added in this flow)
(Optional) Change the topic if you’re using a different one.
Expected ESP32 payloads
Either a raw number: 23.5
Or JSON: {"temp":23.5} or {"temperature":23.5}
Example Arduino publish (every 5s)
mqtt.publish("iot/workshop/temp", String(tempC).c_str()); // raw number // or JSON: String j = String("{"temp":") + String(tempC,1) + "}"; mqtt.publish("iot/workshop/temp", j.c_str());
[{"id":"tab1","type":"tab","label":"ESP32 Monitoring","disabled":false,"info":""},{"id":"mqtt-broker","type":"mqtt-broker","name":"HiveMQ Cloud","broker":"YOUR_CLUSTER_URL","port":"8883","tls":"tls1","clientid":"node-red-viewer","usetls":true,"protocolVersion":"4","keepalive":"60","cleansession":true,"birthTopic":"","birthQos":"0","birthPayload":"","birthMsg":{},"closeTopic":"","closeQos":"0","closePayload":"","closeMsg":{},"willTopic":"","willQos":"0","willPayload":"","willMsg":{},"sessionExpiry":""},{"id":"tls1","type":"tls-config","name":"HiveMQ TLS","cert":"","key":"","ca":"","certname":"","keyname":"","caname":"","servername":"","verifyservercert":true},{"id":"mqtt-in","type":"mqtt in","z":"tab1","name":"ESP32 temp","topic":"iot/workshop/temp","qos":"1","datatype":"auto","broker":"mqtt-broker","nl":false,"rap":true,"rh":0,"x":150,"y":120,"wires":[["json1","debug1"]]},{"id":"json1","type":"json","z":"tab1","name":"Parse JSON","property":"payload","action":"","pretty":false,"x":340,"y":120,"wires":[["fn_to_number"]]},{"id":"fn_to_number","type":"function","z":"tab1","name":"To number","func":"// Accept raw number or {temp: v} / {temperature: v}\nlet v = msg.payload;\nif (typeof v === 'object' && v !== null) {\n if (v.temp !== undefined) v = v.temp;\n else if (v.temperature !== undefined) v = v.temperature;\n}\nmsg.payload = Number(v);\nreturn msg;","outputs":1,"noerr":0,"initialize":"","finalize":"","libs":[],"x":540,"y":120,"wires":[["gauge1","chart1"]]},{"id":"ui_tab","type":"ui_tab","name":"Workshop","icon":"dashboard","order":1,"disabled":false,"hidden":false},{"id":"ui_group","type":"ui_group","name":"ESP32","tab":"ui_tab","order":1,"disp":true,"width":"6","collapse":false},{"id":"gauge1","type":"ui_gauge","z":"tab1","name":"Temperature","group":"ui_group","order":1,"width":0,"height":0,"gtype":"gage","title":"Temperature (°C)","label":"°C","format":"{{value}}","min":0,"max":"60","colors":["#00b500","#e6e600","#ca3838"],"seg1":"","seg2":"","className":"","x":760,"y":80,"wires":[]},{"id":"chart1","type":"ui_chart","z":"tab1","name":"Temp Trend","group":"ui_group","order":2,"width":0,"height":0,"label":"Temp Trend","chartType":"line","legend":"false","xformat":"HH:mm:ss","interpolate":"linear","nodata":"Waiting ...","dot":false,"ymin":"0","ymax":"60","removeOlder":1,"removeOlderPoints":"","removeOlderUnit":"hour","cutout":0,"useOneColor":false,"useUTC":false,"colors":["#1f77b4","#aec7e8","#ff7f0e"],"outputs":1,"x":770,"y":160,"wires":[[]]},{"id":"debug1","type":"debug","z":"tab1","name":"RAW (optional)","active":false,"tosidebar":true,"console":false,"tostatus":false,"complete":"payload","targetType":"msg","x":360,"y":180,"wires":[]}]
