Acoptex.com

members

Raspberry basics: Project 04b

Project name: Raspberry PI 3 Model B board with Node-RED dashboard

Tags: Raspberry, Raspberry PI 3 model B board, Node-RED dashboard

In this project, you need these parts :

1.Raspberry PI 3 model B 1 pc

2. Micro SD card with NOOBS and SD card adapter 1 pc

3. Micro USB power supply (2.1 A, max 2.5 A) 1 pc

4. USB keyboard 1 pc

5. USB mouse 1 pc

6. TV or PC monitor 1 pc

General

We will learn about Node-RED dashboard, how to install it, how to build a graphical user interface.

Understanding the Raspberry PI 3 model B

The Raspberry Pi 3 is the third-generation Raspberry Pi. It replaced the Raspberry Pi 2 Model B in February 2016.

Specification:

• Quad Core 1.2GHz Broadcom BCM2837 64bit CPU
• 1GB RAM
• BCM43438 wireless LAN and Bluetooth Low Energy (BLE) on board
• 40-pin extended GPIO
• 4 USB 2 ports
• 4 Pole stereo output and composite video port
• Full size HDMI
• CSI camera port for connecting a Raspberry Pi camera
• DSI display port for connecting a Raspberry Pi touchscreen display
• Micro SD port for loading your operating system and storing data
• Upgraded switched Micro USB power source up to 2.5A

Understanding the Node-RED dashboard

Node-RED Dashboard is a module that provides a set of nodes in Node-RED to quickly create a live data dashboard.

You can read more about it here and here.

Signals and connections of the Raspberry PI 3 model B

Step by Step instruction

1.Installing Node-RED dashboard

1. We will use the PC with MS Windows 10 OS and Raspberry PI 3 board with Rasbian OS installed.
2. Connect the TV or PC monitor Display port (HDMI Port) to your Raspberry PI 3 board HDMI Port (HDMI cable required).
3. Make sure that your monitor or TV is turned on, and that you have selected the right input (e.g. HDMI 1,  etc).
4. Plug in your USB mouse and USB keyboard to Raspberry PI 3 board USB ports.
5. Connect Micro USB power supply to Raspberry PI 3 board micro USB input.
6. The Raspberry PI desktop will start up.
7. 
8. Go to Terminal.
9. 
10. In the Terminal window, type the following command: sudo raspi-config
11. 
12. You should see the Raspberry Pi software configuration tool. Select the Interfacing Options.
13. 
14. Select P2 SSH and Yes to enable it and Finish.Reboot your Raspberry Pi 3.
15. 
16. Go to Terminal.
17. Use this command to stop Node-RED if it was automatically running on start up: node-red-stop
18. 
    
19. Use this command to install new package: sudo apt-get install npm
20. 
    
21. Use this command to go to installation directory:  cd ~/.node-red
22. Use this command to install Node-RED dashboard: npm install node-red-dashboard
23. 
    
24. Reboot your Raspberry Pi 3 to ensure that all changes take effect on Node-RED software - use this command: sudo reboot
25. When the Raspberry PI desktop start up go to Terminal and use this command: ifconfig
26. You will see some information together with Raspberry Pi 3 IP address. In our case it is 192.168.0.124.
27. 
28. Click on the Raspberry icon, then the Programming menu to start Node-RED.
29. 
30. You should see a window displaying information about Node-RED starting up.
31. 
32. Go to Web browser.
33. Locate the address bar at the top and type intype http://your_Raspberry_Pi_IP_address:1880/ui(in our case that is http://192.168.0.124:1880/ui) then press Enter button. This will display the Node-RED dashboard.   
34. 
35. Your dashboard is empty because you didn't add anything to the dashboard yet.

2. Starting Node-RED dashboard

1. Open another tab in your browser to access Node-RED: http://your_Raspberry_Pi_IP_address:1880 (we have http://192.168.0.124:1880)
2. Scroll down on the nodes section.  You’ll see you have a set of nodes called dashboard:
3. Nodes from the dashboard section provide widgets that show up in your application user interface (UI).
   The user interface is organized in tabs and groups. Tabs are different pages on your user interface, like several tabs in a browser. Inside each tab you have groups that divide the tabs in different sections so that you can organize your widgets.
   Every widget should have an associated group that determines where the widget should appear on the user interface.
   Nodes from the dashboard section provide widgets that show up in your application user interface (UI).
   The user interface is organized in tabs and groups. Tabs are different pages on your user interface, like several tabs in a browser. Inside each tab you have groups that divide the tabs in different sections so that you can organize your widgets. Every widget should have an associated group that determines where the widget should appear on the user interface.
4. On top right corner of the Node-RED window you have a tab called dashboard. Select this tab.
5. To add a tab to the user interface click on the +tab button.
6. 
7. Once created, you can edit the tab by clicking on the edit button.
8. 
9. You can edit the tab’s name and change its icon. Name: you can use any; Icon:  you should use a name accordingly to the icon’s names here.
10. 
11. 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 tab, you need to click on the +group button.
12. 
13. You can edit the created group by clicking on the edit button.
14. 
15. You can edit its name, select its corresponding tab and change its width.
16. 
17. The Node-RED Dashboard has a white background and a light blue bar by default. You can edit its colors in the Theme tab on the up right corner.
18. 
19. At the right upper corner of the Node-RED window, you have another tab called Site that allows you to do further customization.
20. 
21. All changes will be noticeable when you start adding widgets to the UI.

3. How to create a User Interface (UI)

We are going to make a dashboard example to show you how you can build and edit your dashboard. This dashboard will have two different tabs Room1 and Room2, Room1 will have two groups and Room2 will have one group, we will add  and a switch to the Room1 Group1 and a color picker to the Room1 Group2 and gauge to the Room2 Group1.

1. On the top right corner on the Node-RED window, select the Dashboard tab and create two new tabs by clicking on the +tab button.
2. Edit one tab with the following properties - Name: Room1 Icon: invert_colors and the other tab - Name: Room2 Icon: opacity
3. Add two groups to the Room1 tab and one group to the Room2 tab.
4. 
5. Let's add the Widgets - a switch, a slider, a colour picker and a gauge to the flow.
6. 
7. Double click on the switch. A new window pops up. In this new window you can choose where you want your button widget to appear. In this case we want it to appear in the Room1 tab, Group 1.
8. 
9. Do the same for the other widgets but add them to the following groups: slider: Group 1 [Room1], colour picker: Group 2 [Room1], gauge: Group 1 [Room2]
10. Deploy the changes.
11. 
    
12. Go to the dashboard UI to see how it looks like: http://your_Raspberry_Pi_IP_address:1880/ui (we have http://192.168.0.124:1880/ui)
13. Your dashboard have two different tabs Room1 and Room2, Room1 have two groups and Room2 have one group, we added a slider and a switch to the Room1 Group 1 and a color picker to  the Room1 Group 2 and a gauge to the Room2 Group 1.
14. 

Summary

We have learnt about Node-RED dashboard, how to install it, how to build a graphical user interface.

Library

• No libraries needed in this project

Sketch

• No sketches needed in this project