![\"Getting](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-Getting-Started.jpg?resize=1200%2C675&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nTable of Contents:<\/strong><\/p>\n\n\n\n You need a Raspberry Pi board<\/a>\u2014read Best Raspberry Pi Starter Kits<\/a>. We assume that you are familiar with the Raspberry Pi, you know how to install the operating system, and you know how to establish an SSH connection with your Pi. You can take a look at the following tutorials first:<\/p>\n\n\n\n You should have Node-RED installed on your Pi. For an introduction to Node-RED, read this blog post Getting Started with Node-RED on Raspberry Pi<\/a>.<\/p>\n\n\n\n Node-RED Dashboard is a module that provides a set of nodes in Node-RED to quickly create a live data dashboard. For example, it provides nodes to quickly create a user interface with buttons, sliders, charts, gauges, etc.<\/p>\n\n\n\n To learn more about Node-RED Dashboard you can check the following links:<\/p>\n\n\n\n You can install Node-RED dashboard nodes by going to Menu <\/strong>> Manage Palette<\/strong>. Then, search for node-red-dashboard<\/span> and install it.<\/p>\n\n\n After installing, the dashboard nodes will show up on the palette.<\/p>\n\n\n Nodes from the dashboard section provide widgets that show up in your application user interface (UI). The user interface is accessible on the following URL:<\/p>\n\n\n\n For example, in my case:<\/p>\n\n\n\n At the moment, you’ll see the previous screen when you access the UI. That’s because you haven’t added any of those dashboard nodes to the flow. We’ll do that in the following section.<\/p>\n\n\n\n In this section, we’re going to show you how to create your UI (User Interface) in Node-RED using the Node-RED dashboard nodes.<\/p>\n\n\n\n The user interface is organized in tabs<\/strong> and groups<\/strong>. Tabs are different pages on your user interface, like several tabs in a browser. Inside each tab, you have groups that divide the tabs into different sections so that you can organize your widgets (buttons, sliders, charts, gauges, forms, etc.).<\/p>\n\n\n\n Every widget should have an associated group that determines where the widget should appear on the user interface.<\/p>\n\n\n\n To create a tab and a group, follow the next instructions.<\/p>\n\n\n\n On the top right corner, click on the little arrow icon, and click on Dashboard<\/strong>.<\/p>\n\n\n Make sure you have the Layout <\/strong>tab selected. Then, click on the +tab<\/strong> button to create a tab, it will be called Tab 1 by default. <\/p>\n\n\n\n After creating a tab, you can create several groups under that tab. You need to create at least one group to add your widgets. To add a group to the created tab, you need to click on the +group<\/strong> button.<\/p>\n\n\n\n Then, click on the +group<\/strong> button to create a group inside that tab\u2014it will be called Group 1<\/strong> by default.<\/p>\n\n\n You can click on the Tab <\/strong>and Group edit <\/strong>buttons to change their properties.<\/p>\n\n\n\n For example, click the edit <\/strong>button for Tab 1<\/strong>.<\/p>\n\n\n You can edit the tab’s name and change its icon:<\/p>\n\n\n\n After making changes, click the Update <\/strong>button.<\/p>\n\n\n\n Now, edit the group, by clicking on the group edit <\/strong>button. The following window will open.<\/p>\n\n\n You can edit its name, select its corresponding tab and change its width. According to the Node-RED dashboard documentation, each group element has a width of 6 ‘units’ (a unit is 48px wide by default with a 6px gap).<\/p>\n\n\n\n At the moment, you have created a tab and a group using Node-RED dashboard. To see them, you need to add a widget.<\/p>\n\n\n\n For example, add a switch <\/strong>(from the dashboard<\/em> section, not from the function<\/em> section\u2014you need to scroll down through the palette to find the dashboard<\/em> nodes) node to the flow.<\/p>\n\n\n Double-click on it to check its properties. By default, it will be added to the group and tab you created previously. Deploy your app.<\/p>\n\n\n Now, go to the following URL, to access the user interface created.<\/p>\n\n\n\n For example, in my case:<\/p>\n\n\n\n You’ll see something as follows:<\/p>\n\n\n The Node-RED Dashboard has a white background and a light blue bar by default. You can edit its colors and font in the Theme <\/strong>tab when you open the dashboard <\/strong>option.<\/p>\n\n\n Change the style, deploy the changes and see the Dashboard UI changing its colors. For example, like in the following figure:<\/p>\n\n\n At the dashboard <\/strong>window, you have another tab called Site<\/strong> that allows you to do further customization as shown in the figure below.<\/p>\n\n\n Feel free to change the settings, then deploy the changes and see how the UI looks. At the moment you won’t see much difference because you only have one widget. Those changes will be noticeable when you start adding more widgets to the UI.<\/p>\n\n\n\n In this section we’re going to make a dashboard example to show you how you can build and edit your own dashboard – we won’t actually add functionalities to the widgets – we’ll do that in future projects. This dashboard will have the following features:<\/p>\n\n\n\n On the top right corner of the Node-RED window, select the dashboard<\/strong> tab and create two new tabs by clicking on the +tab<\/strong> button.<\/p>\n\n\n\n Edit one tab with the following properties:<\/p>\n\n\n\n And the other one with the following:<\/p>\n\n\n\n Then, add two groups to the Room tab and one group to the Garden tab. The following figure shows how your dashboard layout looks.<\/p>\n\n\n Add a switch<\/strong>, a slider<\/strong>, a colour picker<\/strong> and a gauge <\/strong>to the flow as shown in the following figure:<\/p>\n\n\n Double click on the switch<\/strong>. A new window pops up.<\/p>\n\n\n In this new window, you can choose where you want to place your button widget on the user interface. In this case, we want it to appear in the Room <\/strong>tab, Group 1<\/strong> as highlighted in red in the previous figure.<\/p>\n\n\n\n Then, do the same for the other widgets but add them to the following groups:<\/p>\n\n\n\n Deploy the changes and go to the dashboard UI to see how it looks.<\/p>\n\n\n\n Your dashboard has two tabs: the Room and the Garden as shown in the following figure:<\/p>\n\n\n Here’s what the room tab looks like with the two groups.<\/p>\n\n\n And here’s how the Garden tab looks with one group.<\/p>\n\n\n In this tutorial, you’ve learned how to use Node-RED dashboard nodes to create a user interface. You can add several widgets like sliders, buttons, forms, charts, and gauges to create a nice application for your IoT or Home Automation projects.<\/p>\n\n\n\n In the example presented, we only created the user interface, we haven’t added any functionalities to the widgets. We have several projects that use Node-RED dashboard that you may want to take a look at to learn how to add functionality to your user interface. For example:<\/p>\n\n\n\n We hope you’ve found this tutorial useful.<\/p>\n\n\n\n Thanks for reading!<\/p>\n","protected":false},"excerpt":{"rendered":" This article is an introduction to the Node-RED dashboard with Raspberry Pi. We\u2019ll cover how to install Node-RED Dashboard and exemplify how to build a graphical user interface for your … <\/p>\n\n
Prerequisites:<\/h2>\n\n\n\n
\n
What is Node-RED Dashboard?<\/h2>\n\n\n\n
\n
Installing Node-RED Dashboard<\/h2>\n\n\n\n
![\"Install](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Install-Node-RED-dashboard-palette.png?resize=697%2C377&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-nodes.png?resize=141%2C684&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nhttp:\/\/Your_RPi_IP_address:1880\/ui<\/strong><\/code><\/pre>\n\n\n\nhttp://192.168.1.106:1880\/ui<\/code><\/pre>\n\n\n![\"welcome](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/welcome-node-red-dashboard.png?resize=660%2C420&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCreating a UI (User Interface)<\/h2>\n\n\n\n
The Dashboard Layout<\/h3>\n\n\n\n
![\"Creating](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/open-node-red-dashboard.jpg?resize=561%2C357&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCreating Tabs and Groups<\/h3>\n\n\n\n
![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-create-tab-group.png?resize=423%2C212&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Edit](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Edit-dashboard-tab-node.png?resize=524%2C556&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
![\"edit](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Edit-dashboard-group-node.png?resize=519%2C556&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/10\/switch-node.png?resize=134%2C49&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-deploy-button.png?resize=136%2C35&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nhttp:\/\/Your_RPi_IP_address:1880\/ui<\/strong><\/code><\/pre>\n\n\n\nhttp://192.168.1.106:1880\/ui<\/code><\/pre>\n\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/10\/Node-RED-dashboard-UI-group.png?resize=654%2C317&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nDashboard Theme<\/h3>\n\n\n\n
![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-theme.png?resize=427%2C272&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/10\/Node-RED-dashboard-custom-theme.png?resize=654%2C317&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nDashboard Site<\/h3>\n\n\n\n
![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-site-settings.png?resize=420%2C578&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nCreating a User Interface – Example<\/h2>\n\n\n\n
\n
Creating the Tabs<\/h3>\n\n\n\n
\n
\n
![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-layout-example.png?resize=318%2C377&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nAdding the Widgets<\/h3>\n\n\n\n
![\"Adding](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2017\/08\/flow.png?resize=191%2C292&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-edit-switch-node.png?resize=519%2C694&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n\n
http:\/\/Your_RPi_IP_address:1880\/ui<\/pre>\n\n\n\n
![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-multiple-tabs.png?resize=744%2C497&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-dashboard-UI-example.png?resize=745%2C496&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\n![\"Node-RED](\"https:\/\/i0.wp.com\/randomnerdtutorials.com\/wp-content\/uploads\/2022\/06\/Node-RED-UI-gauge-example.png?resize=745%2C496&quality=100&strip=all&ssl=1\")
<\/figure><\/div>\n\n\nWrapping Up<\/h2>\n\n\n\n
\n