HomeLinkSpriteIOLinkNodeNode-RED MQTT Dashboard Console

Node-RED MQTT Dashboard Console

Posted by: ,

Node-RED MQTT Dashboard Console

Node-RED MQTT Console Flow

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.

  1. // initialize the text to an empty array if it doesn’t exist already in context
  2. var text = context.get(‘text’)|| [];
  4. text.push(msg);
  5. if (text.length > 20){
  6. text.shift();
  7. text.length = 20;
  8. }
  10. // store the value back
  11. context.set(‘text’,text);
  12. // make it part of the outgoing msg object
  13. msg = {};
  14. msg.payload = text;
  15. 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.

  1. <ul>
  2. <li ng–repeat=“x in msg.payload”>
  3. <font color=“red”>{{x.topic}}</font>
  4. <ul>
  5. <li>{{x.payload}}</li>
  6. </ul>
  7. </li>
  8. </ul>

 

Console

Node-RED MQTT Console Flow

Usage

Install Node-RED

  1. $ sudo npm install -g node-red
  2. $ node-red

Install Dashboard

Run the following command in your Node-RED user directory

(typically ~/.node-red):

  1. 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

the original post is from http://www.internetoflego.com/node-red-mqtt-console/

Leave a Reply

You must be logged in to post a comment.

Category