Node-RED MQTT UI Console

A simple flow to create a Dashboard UI for monitoring MQTT data and submitting a topic & message.

This flow is also a good example of how to store data in an array of objects and then send it to a UI Template node, leveraging the AngularJS Directive "ng-repeat".

alt tag

Written by Cory Guynn 2016

http://www.InternetOfLEGO.com

[{"id":"cf1f57dd.e70f18","type":"mqtt in","z":"13e1bd9.697ca42","name":"","topic":"#","qos":"2","broker":"","x":170,"y":200,"wires":[["5b5bba07.effcf4","3b0692e.23e386e"]]},{"id":"5b5bba07.effcf4","type":"debug","z":"13e1bd9.697ca42","name":"MQTT # RAW","active":false,"console":"false","complete":"payload","x":780,"y":200,"wires":[]},{"id":"3b0692e.23e386e","type":"function","z":"13e1bd9.697ca42","name":"Store and shift msg","func":"\n\n\n// initialise the counter to 0 if it doesn't exist already\nvar text = context.get('text')|| [];\n\ntext.push(msg);\nif (text.length > 20){\n    text.shift();\n    text.length = 20;\n} \n\n// store the value back\ncontext.set('text',text);\n// make it part of the outgoing msg object\nmsg = {};\nmsg.payload = text;\nreturn msg;\n","outputs":1,"noerr":0,"x":450,"y":260,"wires":[["493c86c1.1f7388","b9902227.731fc"]]},{"id":"493c86c1.1f7388","type":"debug","z":"13e1bd9.697ca42","name":"mqtt array","active":true,"console":"false","complete":"payload","x":770,"y":280,"wires":[]},{"id":"b9902227.731fc","type":"ui_template","z":"13e1bd9.697ca42","group":"b4369782.5d07d8","name":"MQTT Output","order":1,"width":"9","height":"10","format":"<ul>\n <li ng-repeat=\"x in msg.payload\">\n <font color=\"red\">{{x.topic}}</font>\n    <ul>\n        <li>{{x.payload}}</li>\n    </ul>\n </li>\n</ul>","storeOutMessages":true,"fwdInMessages":true,"x":780,"y":240,"wires":[[]]},{"id":"7929381a.0c1408","type":"mqtt out","z":"13e1bd9.697ca42","name":"","topic":"","qos":"","retain":"","broker":"","x":790,"y":380,"wires":[]},{"id":"1ea084cb.7c956b","type":"ui_text_input","z":"13e1bd9.697ca42","group":"b4369782.5d07d8","order":3,"width":"","height":"","name":"Message","mode":"text","delay":"300","label":"Message","topic":"message","x":180,"y":320,"wires":[["c86065df.39d708"]]},{"id":"db4fda25.152948","type":"ui_button","z":"13e1bd9.697ca42","name":"Submit","group":"b4369782.5d07d8","order":4,"width":"6","height":"2","label":"SUBMIT","color":"black","icon":"fa-arrow-circle-o-up","payload":"submit","topic":"submit","x":170,"y":360,"wires":[["c86065df.39d708"]]},{"id":"c86065df.39d708","type":"function","z":"13e1bd9.697ca42","name":"Store and Submit","func":"context.msg = context.msg || {};\n\nswitch (msg.topic){\n    case 'message':\n        context.msg.payload = msg.payload;\n        break;\n    case 'topic':\n        context.msg.topic = msg.payload;\n        break;\n    case 'submit':\n        if(context.msg.topic){\n            return context.msg;\n        }else{\n            context.msg.topic=\"#\"; // set default topic\n            return context.msg;\n        }\n}","outputs":"1","noerr":0,"x":450,"y":340,"wires":[["7929381a.0c1408","62ea5ab.6406aa4"]]},{"id":"62ea5ab.6406aa4","type":"debug","z":"13e1bd9.697ca42","name":"MQTT Monitor","active":true,"console":"false","complete":"true","x":760,"y":340,"wires":[]},{"id":"4e339217.a012dc","type":"ui_text_input","z":"13e1bd9.697ca42","group":"b4369782.5d07d8","order":2,"width":"","height":"","name":"Topic","mode":"text","delay":300,"label":"Topic/","topic":"topic","x":170,"y":280,"wires":[["c86065df.39d708"]]},{"id":"ef37f9e7.82d848","type":"ui_button","z":"13e1bd9.697ca42","name":"Clear","group":"b4369782.5d07d8","order":0,"width":"4","height":"2","label":"CLEAR","color":"black","icon":"fa-trash","payload":"","topic":"","x":170,"y":400,"wires":[["4e339217.a012dc","1ea084cb.7c956b"]]},{"id":"d995458d.8ba688","type":"comment","z":"13e1bd9.697ca42","name":"MQTT Console","info":"This flow demonstrates how to view MQTT data\n\nIt is also a nice demonstration how you can\nuse an array to shift data into the UI template\n\n\nUI Viewable:\nhttp://localhost:1880/ui\n\nWritten by\nCory Guynn\n2016\nwww.InternetOfLEG0.com","x":200,"y":160,"wires":[]},{"id":"b4369782.5d07d8","type":"ui_group","z":"13e1bd9.697ca42","name":"MQTT Console","disp":true,"width":"12"}]
dexterlabora

Flow Info

created 8 months ago

Node Types

Core
  • comment (x1)
  • debug (x3)
  • function (x2)
  • mqtt in (x1)
  • mqtt out (x1)
Other
  • ui_button (x2)
  • ui_group (x1)
  • ui_template (x1)
  • ui_text_input (x2)

Tags

  • mqtt
  • dashboard
  • ui
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option