Node-RED uibuilder Dashboard: uibuilder Node with Example


UIBuilder Example Flow to send and receive multiple data from node-red to webpage and vice versa

Node-RED is an IoT platform. This is a flow-based programming platform to connect hardware devices together. Node-red was developed by IBM based on the node.js platform. There is a default dashboard that comes with Node-RED default. But uibuilder dashboard is a very efficient and customizable dashboard for the Node-RED platform. 

Uibuilder Node
Node-RED uibuilder Dashboard

Uibuilder Node:

Uibuilder is an excellent Node-red node for a custom dashboard. This is the alternative to the Node-red Dashboard. The user can make a complete dynamic dashboard or user interface in this node. Uibuilder is a really awesome Node to make customized dashboards using HTML, CSS, and javascript. Visit Node-RED uibuilder official page for more details. 

How to install uibuilder Node in Node-RED:

Please watch this video to know how to install the uibuilder node in Node-red. Or visit uibuilder official homepage. 

Use the following nmp command to install the uibuilder.

npm install node-red-contrib-uibuilder

node-red-contrib-uibuilder code-box

Node-red web user interface to build a custom user dashboard. 

uibuilder example flow:

In this Example flow, I will show some simple operations using uibuilder. We will take input from users in a form and send data to node-red from uibuilder. Then at the same time, we will receive data from node-red to our uibuilder webpage. 

uibuilder Dashboard HTML code: 

The HTML code used in this Node-RED uibuilder Dashboard project is given below:

Node-RED uibuilder Dashboard Index.js code:

The .js code used for this demo project on Uibuilder dashboard Node is given below:

How to install Node-RED on the Windows platform: 


0/Post a Comment/Comments