The Internet of LEGO city is generating a ton of MQTT messages!

By using the MQTT Dashboard Console with Node-RED, I can now easily view all of these messages and publish new ones!

Flow

Download

The “Store and shift msg” function node will store the recent MQTT msg objects in a local “context” object. This will then build an array of objects to be shifted and displayed in the Dashboard UI Template node.

// initialize the text to an empty array if it doesn't exist already in context var text = context.get('text')|| []; text.push(msg); if (text.length > 20){ text.shift(); text.length = 20; } // store the value back context.set('text',text); // make it part of the outgoing msg object msg = {}; msg.payload = text; return msg;

The Dashboard UI Template node will then use an AngularJS directive to iterate through each MQTT msg and scroll them on the screen.

<ul> <li ng-repeat="x in msg.payload"> <font color="red">{{x.topic}}</font> <ul> <li>{{x.payload}}</li> </ul> </li> </ul>

Console

Usage

Install Node-RED

$ sudo npm install -g node-red $ node-red

Install Dashboard

Run the following command in your Node-RED user directory

(typically ~/.node-red ):

npm install node-red-dashboard

Copy Flow

Download

Configure MQTT broker

Double click on the MQTT nodes and configure your broker

Your MQTT Dashboard Console should now be available using your server’s address from a browser