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".
Written by Cory Guynn 2016
[{"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"}]
