MyReskill IoT

Node-Red, Serial
My Reskill IoT
Day 2
Node-RED, Serial, Gauge, Line Chart
Agenda
1. Introduction to Node-RED 5. Gauge
• Node
• Core Node 6. Line Chart
• My First Flow
• Installing Node-RED Palette 7. Notification

2. Introduction to Node-RED Dashboard

• Node-RED Functionality

3. Dashboard Overview
• Group and Tabs

4. Creating Flows
• Serial Communication
• Function
• Debug
 Introduction to Node-RED Dashboard
Node-RED dashboard module provides a set of nodes that allow the user to quickly create a live
data dashboard. After installing Node-RED dashboard user can see additional nodes on their
editor page. Node-RED dashboard can be configure into many different theme.

Reference link: https://www.npmjs.com/package/node-red-dashboard

Dashboard Sidebar
• Widget layout is managed by dashboard tab in the
sidebar of the Node Red Editor
Layout
• Tab: Can rearrange tabs, groups and widgets and add
and edit their properties.
• Links: Links to other web pages can be added to the
menu. Can optionally be opened in an iframe – if
allowed by target page.
Site
• Title: Set the title of the UI page.
• Options: Can hide the title bar and allow swiping between tabs on
touch screen. Can also set whether the template uses the selected
theme or uses underlying Angular Material theme. The Angular
Material theme can be chosen everywhere.
• Date Format: Sets default date format for chart and other labels.
• Sizes: Sets the basic geometry of grid layout in pixels. Width and
height of widgets can be set, as the width of the groups. These are
the basic definitions of ‘units’ used elsewhere within the dashboard.
Widgets

• A read only widget, the layout of the label and value can be configured.
• Has 4 modes – standard, donut, compass and wave. You can also specify the color
range of the standard and donut gauges.
• Has line, bar and pie chart modes. The X-Axis labels can be customized using a date
formatter string.
• Let you play audio (wav or mp3) or send Text to Speech (TTS) to the client.
Widgets

• Create alerts to user. Can either be a toast popup or dismissable alert box.
• Allow some dynamic control of the dashboard. Sending a msg.payload to redirect to
another dashboard tab.
• Allow user to specify and create their own widget using HTML, JavaScript framework.
Agenda
1. Introduction to Node-RED 5. Gauge
• Node
• Core Node 6. Line Chart
• My First Flow
• Installing Node-RED Palette 7. Notification

2. Introduction to Node-RED
Dashboard
• Node-RED Functionality

3. Dashboard Overview
• Group and Tabs

4. Creating Flows
• Serial Communication
• Function
• Debug
 Tabs
By adding new tab under Layout, the list of tabs will be shown on the dashboard.

Image 1 Image 2 Image 3

- Edit the name of your new tab as this will be synced to the dashboard. Image 2 showed that the name
‘New Tab’ appears on the dashboard.
- As more tabs are added, these tabs will be listed on the left side of your dashboard, refer Image 3.
Tab works like pages in the Dashboard. You can see below I have two different tab in my Dashboard
MyReskill Dashboard Tab and also Demo Tab.
 Groups
- Each nodes will be required to be assigned in specific group.
- Each groups will separate the widgets into a specific column in
the dashboard tab.
- Add group by clicking the next to the new tab and edit
the group’s name by clicking edit.
Agenda
1. Introduction to Node-RED 5. Gauge
• Node
• Core Node 6. Line Chart
• My First Flow
• Installing Node-RED Palette 7. Notification

2. Introduction to Node-RED
Dashboard
• Node-RED Functionality

3. Dashboard Overview
• Group and Tabs

4. Creating Flows
• Serial Communication
• Function
• Debug
 Serial Nodes
This Serial node will retrieve data from a local serial port.

User will need to configure the Serial Port that it should be listening
and the Baud Rate.
 1. Drag the Serial In node and place it on Flow 1.
2. Double Click on the Serial node.

(2)
(1)
3. Click on the Edit Button.
4. Enter your specific Name (Arduino).

(3)
(4)
5. Change the Serial Port Name to COM3
6. Change the Baud Rate to 115200.
7. Click Update. (7)

(5)

(6)
8. Click Done.

(8)
9. Your node will look something like this.

(9)
10. Next, Let’s drag in a debug node and see what are we receiving from Arduino
11. Link the Arduino node to the Debug node and Deploy the flow
12. Navigate to the debug tab to see the output
The data we retrieve from Arduino is “49.00, 28.30, 78.00” it’s in a string, now we will need to split the string
accordingly. First reading represent humidity, second reading represent temperature reading and the third
reading represent brightness reading**
 1. Remove the Debug node and drag in a Function node.
2. Double Click on the Function node.

(2)
(1)
1. Navigate to MyReskill Folder On Desktop
2. MyReskill > NodeRED_Code> nodered_function.txt
3. Launch this file and copy the text inside
3. Paste the copied code. 6. Click Done.
4. Enter Split Data.
5. Increase the Output value to 3.
(6)

(4)

(3)

(5)
7. Connect the Serial node to the Function node.
8. Your flow will look something like this.
9. Drag the Debug node and place it in to the flow.

(7) (9)
10. Connect the Function node to the Debug 13. Click on Debug to view the
node. messages.
11. Your flow will look something like this.
12. Click on Deploy.

(12)

(13)
(10)
14. Your Output will look something like this.

Now we have successfully split the data we can use the data to create meaningful dashboard
 MyReskill IoT

Node-Red Gauge, Line Chart

Agenda
1. Introduction to Node-RED 5. Gauge
• Node
• Core Node 6. Line Chart
• My First Flow
• Installing Node-RED Palette 7. Notification

2. Introduction to Node-RED Dashboard

• Node-RED Functionality

3. Dashboard Overview
• Group and Tabs

4. Creating Flows
• Serial Communication
• Function
• Debug
 Gauge Node
The gauge node is a data visualisation tools, it allow user to choose
different type of gauge, E.G. Gauge, Compass, Level and Donut
Besides, user can set the Min & Max value shown on the gauge
 1. Drag the Gauge node and place it on Flow 1.
2. Double Click on the Gauge node.

(1)

(2)
3. Click on the Edit Button.

(3)
4. Select the Tab you created In the
beginning.
5. Click the edit button.

(4) (5)
6. Key in MyReSkill Dashboard and Click Add
*Now we are creating a New Tab in the dashboard

(6)
7. Click Add
*You can change the Name to other name but for now we will use default.
*We are creating a New Group in the dashboard Tab
6. Select the type of gauge (Gauge, Donut, 9. Enter Minimum Range
Compass, Level). and Maximum Range
7. Enter Label. 10. Click Done.
8. Enter Units.

(10)

(6)
(7)

(8)
(9)
11. Connect the Function node to the Gauge node. 14. Select the drop down arrow > choose Dashboard
12. Your flow will look something like this. then click this button
13. Click on Deploy.
(13)
(14)

(11)
You will be able to see the dashboard here
You can try out different type of gauge in the selection box.

Gauge

Compass

Donut
Agenda
1. Introduction to Node-RED 5. Gauge
• Node
• Core Node 6. Line Chart
• My First Flow
• Installing Node-RED Palette 7. Notification

2. Introduction to Node-RED
Dashboard
• Node-RED Functionality

3. Dashboard Overview
• Group and Tabs

4. Creating Flows
• Serial Communication
• Function
• Debug
 Chart Node
The chart node is also a data visualisation tools similar with gauge
node , it allow user to choose different type of chart.
E.G. Line Chart, Bar Chart, Pie Chart and etc.

User can also set the Min & Max value shown on the Y-axis
1. Drag the Chart node and place it in Flow 1.
2. Double Click on the Chart node.

(2)

(1)
3. Select the Group. 6. Enter Minimum Range and Maximum
4. Enter Humidity Chart. Range
5. Select the type of chart (Line Chart, Bar Chart, Pie Chart, Level). 7. Click Done.

(7)

(3)

(4)
(5)

(6)
11. Connect the Function node to the Chart node. 14. Click on Dashboard icon to view the dashboard.
12. Your flow will look something like this.
13. Click on Deploy. (13)

(14)

(11)
MyReskill IoT

Node-Red Notification
Agenda
1. Introduction to Node-RED 5. Gauge
• Node
• Core Node 6. Line Chart
• My First Flow
• Installing Node-RED Palette 7. Notification

2. Introduction to Node-RED Dashboard

• Node-RED Functionality

3. Dashboard Overview
• Group and Tabs

4. Creating Flows
• Serial Communication
• Function
• Debug
 Notification
- Notification can be inserted to alert user if the sensor reached certain type of value.
1.Drag the node into the flow, together with a F node.
2.Connect the node to the required sensor and insert this function:
var value = msg.payload;
3. Set your own threshold value.
if (value < 30) 4.Connect the with the
{
msg.payload = "Light Too Dim"; 5.Click
return msg;
}
else if (value > 85)
{
msg.payload = "Light Too Bright";
return msg;
}

- Now, alert is received when the reading of the brightness reached below 30% and
above 85%.
1. First drag in a function node
2. Then link the node to the Split Data node
3. Then double click on the function node (a.)

a
.
3. Navigate to MyReskill > Arduino_Code > nodered_notification.txt 6. Click Done
4. Copy the code and paste it in (a.). !
5. Change the name to notification (b.).

b
.
a
.
8. Drag in a notification node and link it with the notification node.
9. Now when the treshold is hit you will be able to see the notification on the
dashboard.
The notification will be triggered when the brightness is > 85
The notification will be triggered when the brightness is < 30
 Agenda
• Preparation of Hands-on Lab
• Raspberry Pi, Arduino and Sensor
• Hardware Hook Up
• Arduino IDE
• Node-RED
• Start to Collect Sensor Data
• Q &A
• Appendix
 Complete !
You have learn the basic of Node-RED function, now you will be expected to come out with similar flow
as below :
This Dashboard will show the real time sensor data and also the history data for the last 8 hours, and
also notification.
Q&A ?
 How to view Node-RED
Dashboard from other Device
Go to your Windows PC Desktop and Select Terminal
You will see this terminal windows pops up.
Type in ipconfig and click enter
Please write down the Ip Address of your Windows PC
in this case it’s “192.168.68.133”
 Find any device which have the same connection as the Windows PC (WiFi, LAN)
 Go to the Web Browser on that device, key in this on the address bar
“192.168.68.133:1880/ui”
 Replace the 192.168.68.133 to your IP address which is shown to you in the “ifconfig”
 You will be able to see the dashboard
Node-RED dashboard on Windows PC web browser
Node-RED dashboard on other device’s web browser
 How to join live quiz

1 2 3 4 5
Thank You

67