Rapid dashboarding with Node-RED

Node-RED is great tool for data flow integrations. Even if Node-RED itself has graphical Web UI, it is not originally intended for UI development. Don't worry, awesome people in the open source community have contributed an extension to Node-RED for rapid dashboard development. 

Example dashboard made with Node-RED.

Project called node-red-contrib-ui introduces number of widgets (nodes) in Node-RED enabling rapid dashboard implementation. At the moment there are following input and output widgets:

Output:

• Text
• Gauge
• Chart

Input:

• Numeric
• Text
• Button (plain, row, radio)
• Switch
• Slider 
• Debug (toast)

Creating custom dashboard is very easy, just drag-and-drop widgets (nodes) into the Node-RED flow. There are two concepts to define the layout of the dashboard: tab and group, configured in each node of the dashboard. The dashboard may consists of several tabs, and inside individual tabs there may exists several groups. In the screenshot above, each white box (Temperature, Humidity, Pressure, RSSI) forms a separate group with two widgets: chart and gauge.

Node-RED flow implementing the dashboard presented above.

The package node-red-contrib-ui is not distributed with Node-RED by default, but it is very easy to install. If you're running Node-RED in your local PC or embedded Linux like Raspberry Pi, just type at the command line:

    npm install node-red-contrib-ui

In case of IBM Bluemix with Node-RED service, one line needs to be added in the package.json configuration file of the application, and then re-deploy it. Bluemix will then fetch the package from the Node-Red flows server. package.json:

    "node-red-contrib-ui":"1.x",

Adding custom dashboard to any embedded or cloud application is now easier than ever. This is great tool for all kinds of rapid prototyping and hobby projects. For professional-made multi-user web applications other technologies are needed, as Node-RED does not currently support user management (only simple password protection), user profiles, or multi-user access. Multiple users may access the UI simultaneously, but all will see the same data.

I wish to express my greatest thanks to the primary developer of the project Andrei Tatar and all other contributors for the great effort providing such a capability in Node-RED. Good job!