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

Node-RED MQTT Flow

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

Node-RED MQTT Console Flow

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

Node-red-clipboardNode-red import

Configure MQTT broker

Double click on the MQTT nodes and configure your broker

Node-RED MQTT nodeNode-RED MQTT config brokerSuccess!

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

http://localhost:1880/ui