You can create a basic Dashboard in Node-RED by following the steps given here. Firstly, the Dashboard is not built-in so you first need to install the Dashboard.
Installing Dashboard and Initializing Node-RED
Assuming you have already installed Node.js and Node-RED follow the steps given below. If you have now installed the Node-RED or need to understand basic concepts on Node-RED click here.
- Find and open the .node-red folder as shown below
- Type cmd in the address bar and press enter. This will open the command prompt
- Type the command given below and it will start installing the dashboard
npm install node-red-dashboard- After successful installation you can see a folder named node-red-dashboard created in node_modules folder
Now as you have installed the dashboard we will start node-red using command prompt by typing the following command
node-redThen copy the http link generated in command prompt in the browser to open Node-RED
Node-red consists of node palette at the left which consists of all the nodes, workspace in the centre where we define our model by connecting various nodes and output panel at the right.
Here in the node palette, you can now see the dashboard section on the left side. So this dashboard consists of various node like button, dropdown, switch, etc. You can also create your own dashboard widget node for more information click here.
Creating a Node-RED dashboard
- Firstly we select a node switch from the node palette and place it in the workspace. Here you can see 2 symbols i.e. a triangle and circle. The triangle symbol indicates it needs to be configured and the circle symbol indicates it needs to be saved and deployed.
- Double click on the switch node to open its properties
Here you need to define the Group, initially, there is no group defined so we create one by clicking on the pen icon given besides the dropdown of Group attribute. This will open properties for adding new dashboard group as shown below
Here we need to select or create a Tab in which the group will be placed. So First we Create a Tab (UI_tab), in the tab we add or create groups (UI_group) and then we assign the node to groups. Initially, no tab is present so first, we create a tab by clicking on the pen icon beside the dropdown of Tab attribute. This will open the properties for adding new dashboard tab as shown below.
Here we define a name to the tab in my case I named it Home and then click on add. This will create a tab named Home and you will be redirected back to add new dashboard group config, and you can now select tab named ‘Home’ (in my case) from the dropdown as shown below
Now give a name to the group in my case I name it ‘Control’ and Select ‘Home’ Tab and click on add.
- So now you can see the group name as [Home] Control ( i.e. [Tab] Group name) as shown below. You can alter the name in Label attribute this will change the name of node in workspace. Once completed click on Done, Now you could see the triangle has disappeared.
- Next Click on Deploy which is present at the right side of the window. You will get a message saying ‘Successfully Deployed’. After that open a new tab enter the link obtained from command prompt and append /ui at the end of the url as shown below:
http://127.0.0.1:1880/ui- Now you can see a dashboard on the screen.
So here at the top left is the name of the Tab, and inside the tab we have created a group named Control which consist of switch node. You can create multiple groups in the present tab. In addition you can also create multiple tabs which can be selected to view in UI by clicking on the hamburger sign at the left (it appears when there are more than one tab) as shown below.
This way you can create multiple Tabs and multiple groups with nodes in Tab in Node-RED Dashboard.
