Hello and welcome to High Voltages. In the previous video, we saw how
we can create a circuit in Wokwi to simulate our IoT projects. We learned how
to publish and subscribe to MQTT messages using ESP32 and visualize the data
on the dashboard created in Node RED. In the previous video, I didn't go into
the details of how I created the dashboard, but in this video, I'm going to show how we
can create a similar dashboard in Node RED. So, in this video, we will discuss
how to use MQTT in Node RED, how to create a dashboard, and
how to log data to CSV files. Before starting, let's discuss what Node RED is. Node RED is an open-source visual
programming tool that simplifies the development of IoT applications. It provides
a browser-based interface that allows users to create flows by connecting nodes, and in
this video, that's what we are going to do. We are going to use the MQTT
functionality in Node RED and use the data that is coming through
MQTT to visualize it on the dashboard. All the codes and functions that we are going to
write, or the complete tutorial in written form, will be available on the High Voltages website,
and I will put the link in the description. So, before starting, make sure
to like, subscribe, and share. The first thing that we will do is to install Node
RED. To install Node RED, we will go to this URL: NodeRED.org/docs/getting-started. Here,
you will find instructions to install Node RED on different platforms such
as Raspberry Pi, Docker, Android, etc. But since we are using a Windows system and
planning to use it locally, we will go to this URL. Here, you'll see the prerequisites, and
we will need a supported version of Node.js. Since we are using Windows, we will go to this
URL here. The first thing that we need to do is install Node.js. To do that, we will go to this
URL, and from here, we can install the latest version of Node.js. Make sure, after installation,
that Node.js and npm have been added to your path. Since I have already installed Node.js, I will
open the PowerShell window and verify it using this command, which will tell us the Node
and npm version. So, you see, we have the 18.1 6.1 node version and 9.5.1 npm version.
It verifies that we have Node.js in our system. Then, we will copy this URL and paste it here
to install Node RED. It will take some time, and once the installation has been completed,
we will write Node-RED. You will see various messages on the PowerShell window, and you
can see "Server now running at this URL." So, we will copy this URL and paste
it in our browser. You will see this flow which we created for the last
video. This flow was responsible for creating the dashboard. Let
me show you the dashboard. So, we will remove this and add "SL UI" to
the URL, and you will see different gauges and buttons to control the ESP32. Since
ESP32 is not connected at the moment, it looks empty. So, we will go back, and
now we will be working on another flow. This empty window is called the flow, and on the
left-hand side, we have different nodes. There are different nodes for different purposes. Firstly,
we will do a "Hello World" example in Node RED. So, firstly, I will drag and drop this inject
node, which is the input node as well. To show the messages, I will drag and drop this debug node
and connect these two nodes. Since this inject node shows the timestamp, once I click it, I will
be able to see the timestamp in the debug window. So, I will click this, and you will
see a warning, "Node has undeployed changes. It is necessary to deploy after
any change you made." Once we have deployed, now let's try running it again. You will be
able to see the timestamp in the debug window. So, you can access the debug window from here.
Now, let's double click on this inject node, and you will be able to see some properties that
you can change. Let's write the name "input," and we will change it to a string. In the string, we
will write "hello world." I will press "done," and then we will have to deploy. Once deployed, click
here, and you will see "Hello World" message. Now we will need to install some palettes to
use the dashboard functionalities. Palettes are the connection of nodes. For example, here, you
see function palette, which includes different functions. Similarly, we need a palette for
using the dashboard nodes. We will have to click on this hamburger button and go to this option
"manage palette." We will go to "install," and here we have to search "Node RED cont open."
We will need this palette. We will click on "install." Since I have already installed it,
I am not seeing the option for installation, but you will see the option here,
and you can click on "install" here. Similarly, we will need the Node RED dashboard.
This is the palette that we will need, and you will have to click "install" here to
install that. Once you have done installing, you can click on "close." Now,
when you will look at your nodes, you will find a dashboard palette
here with different functions. So, the first thing that we are going to create is
to create a dashboard. I will delete all of this, click on "deploy," confirm, and then I will
drag and drop gauges. Then I will need a chart, and then I will need buttons. I will rename this
to "temperature gauge," and the group is, we will have to define all the elements of our dashboard
in a group. So, I will create a new group. I will call it "our dashboard," and I will add it to the
"Home" tab. Then I will update this and click on "done." Here, I will select the "our dashboard"
and rename it to "humidity gauge." Similarly, here, I will change the label to "temperature
chart," and the group is "our dashboard." The label is "humidity chart." Then button, I will
call it "temperature logs," and this one is "humidity logs." Okay, once you have renamed, you
can click on "deploy," and it will be deployed. Now I will go to UI, and you will see the "our
dashboard" that we have created. This is the humidity gauge, this is the temperature gauge,
then we have temperature chart, humidity chart, temperature logs, and humidity logs button. We
will rearrange them later. So, I'll go back, and similarly, I will add a few more blocks. I
will add this switch, and I will call it "LED." Then I will get this slider, and I will call
it "Servo." I can change it from minimum 0 to 180 degrees, and the step is one. I will click on
"done," and then I will select this Color Picker, and I will call it "neopixel Color Picker." I
think I forgot to change the group of the previous one, so I will change the group of these as well.
Okay, then I will deploy this, and if I go to UI now, you will see this is the switch for LED,
this is the Color Picker that we be using for the neopixel LED, and we will be changing
color from here. This is for Servo motor, and the previous, and these are the humidity and
temperature gauges. So, the basic layout of the dashboard is ready. To rearrange these elements,
we will go back to the flow, click here on this, and go to "view," and click on "dashboard." Here,
you will be able to change that. For example, I would like to pull this temperature gauge at the
top. I will deploy it, and if I go back to the UI, you will see the temperature gauge and humidity
gauge, temperature chart, humidity chart, or you can do it this way. Deploy, see temperature
gauge, temperature logs, and okay. Now we will change a few properties of these elements. For
example, for the temperature gauge, we will change the units to degrees Celsius, and we can set the
max-min value to -20 to 60 degrees Celsius. So now, our temperature gauge will only show the
values between -20 to 60 degrees Celsius. Then, done. Similarly, for humidity, units should
be percentage, 0 to 100, and done. For LED, we will change it to string, and here we will
write "on" and "off" for payload string. Here, we will write "off," and we will press "done."
For the Servo motor, we have already changed the minimum range to zero and maximum to 180, and we
will press "done." Then, for the neopixel color, we have already changed the label and changed the
format. We will change the format to RGB. That's it. We have already added the properties of these
CES. Let's see what difference it has made. Now you can see we are seeing the units here, and this
is from 0 to 180. Now we are going to use the MQTT nodes in our user interface. The MQTT nodes can be
found in the network palette, and we have MQTT in and MQTT out. MQTT in is more like subscribing
to a topic, and once you receive a message on that topic, this node will be triggered. MQTT out
is for publishing the messages. Firstly, we will use the MQTT out function, and we will connect it
to the LED. We see this warning here, so we will click on this, and we have already set up our MQTT
broker, which is the public MQTT broker. If you haven't, you can click on "add new MQTT broker,"
and you can write the server protocol, client ID, for security, username, password, and everything
you can configure your MQTT broker here. Since I have already done that, I will select this broker.
In the topics, I will write "lights," quality of service should be one, and I will click on "done."
So, you see this has disappeared. I will click on "deploy," and you should see a message here in
Powell that you are connected to MQTT broker. Now let's check if we are able to send MQTT
messages from our dashboard. I'll go to UI, and this is the LED button, and I will open the
Wokwi project that we created. I will run this as well. Now let's click on LED, and you see the
LED is turned on. Now let's work on the other functionalities. Similarly, we will send this MQTT
out for neopixel and for Servo. I will connect the Servo, and I will change the topic to "Servo,"
quality of service one, and for neopixel, we will change the topic to "lights/neopixel," quality
of service one. We will connect these two. We will deploy this. We will go to UI and run this.
As you can see, the Servo. Let's move it. You see the Servo is moving. Let's try the neopixel. Let's
change the color to red. Neopixel returns the data in the RGB form, and ESP32 expects the data in RGB
form. I mean, we have to change the format. So, what we are going to do is we are going to delete
this and add a function here between these two nodes. We will add the function. We'll double
click the function, and we can call it "Parse RGB values." We will paste this. What this function
is doing is it is getting the values in the form of RGB RGB, and it is converting to RGB. It
is just removing this and this bracket. So, we'll click on "done." We will connect it to this,
and now we'll deploy this. We'll go back to UI, and here. Okay, now let's try. Okay, now you
see the colors are matching. See, that's it. Now we will try to receive the data from ESP32.
I will stop this for now and go back. So, this is our flow. To receive the data, we will need the
MQTT in function. We are going to subscribe to a desired topic and wait for the message. Once the
message is received, it returns the message. ESP32 will be sending data on "temp" topic, as we have
defined it here, "temp data," and it will send the data in the comma-separated values. So, what we
are going to do is we are going to receive that data, and for now, I will show it in the form of
debug to show how we are receiving the data. Here, the topic is "temp data." We will deploy, we
will go to debug, and run this. So, let's wait, and you see we are receiving the values in the
comma-separated values. What we are going to do is we are going to separate these two values and
send them to their respective gauges. For that, I'm going to remove this. I'm going to add a
function here and call it "Extract Temperature," and I will call this "Extract Humidity." For
temperature, I'm going to use this function. What it is doing is it is reading the payload,
then it is removing any white spaces, and then it is splitting it using the comma as a delimiter,
and then it is converting the values into a float, and it is returning the first value. So, we
will click on "done." Similarly, we will need a function for extracting the humidity, and we will
paste it like this. The function is similar; the only change is this. It is returning the second
value, which is the first index of the values. So, we will click on "done," and we will connect these
two with this, and now we will send this value to the temperature gauge and temperature chart, and
the humidity, we will send it to humidity gauge and humidity chart. We will deploy it to see
the changes. I'll click on UI, so you see the temperature here and the humidity is here. Let's
try to change the temperature to, let's say, 39, humidity to 39, and you see the charts and the
gauges are functional now. Now we'll go back. Now, let's move on. Next, we're going to
log MQTT data to a CSV file. To do that, we'll drag and drop the "write file" node. In
the "write file" node, we'll set the path of the file. I have a path; I've created a folder, and
here I will create a file named "data_log.csv." I will click on "done," and now we will
get the data and write it to the CSV file. If I connect it directly to the file, it will
start logging data. However, we want to add a timestamp, so we'll add a function here and
call it "add timestamp." In the function, we will paste this. What we're doing in this
function is getting the data using the date function, converting it to the ISO string, and
then adding it to the value coming from the MQTT message. We will click on "done" and connect it
to this. From here, we will connect it to this, and now we will click on "deploy."
Let's see if we are getting some data. We'll go to the UI, and yes, we have received a
few values. Now, let's try to open the file. You see, the file has been created. Let's open it.
So, you see, now we are getting some data here with the date and time. I will close this, and
that's it. Let's give it a try. I will run this. You see the temperature; let's change the
temperature to 32, humidity to 74. Let's see if it changes here. Yes, it has been changed,
and the temperature chart is working as well. Now, let's try to see if we are able to turn on
the LED. Yes, it's working. Let's change the angle of the servo; it works. Let's
change the Neopixel color; it works. So, yes, that's it. Thank you for watching. Please
like, share, and subscribe for more such videos.
