Exploring Node-Red, Dashboard 2.0, and MQTT - Step By Step Guide

hi welcome to donsky Tech would you like to create your own custom iot web application for your electronic circuit but you don't know HTML CSS JavaScript in this video I will share with you how you can use node red in the new flow fuse dashboard 2.0 package to quickly build web user interface that will control your Arduino electronic circuits using the browser-based flow editing feature of node red then we can easily create web user interface we can then configure it to communicate with an mqtt broker such as the mosquito to publish messages we program our Arduino electronic circuit to subscribe or listen to mqtt topics once a message is received by the mosquito mqtt broker then an mqtt message is forwarded to our Arduino circuit our circuit can then light up the LED change the RGB color or move the servo motor in minutes you could develop your own iot application capable of controlling your circuits without programming any HTML CSS JavaScript how cool is that so for the demo of the program or the or this project I have here my web application that I have created using the no rad node red flows here and the new dashboard 2.0 Library uh by pluse and as you have noticed uh I only have this node here and I was able to create a web application without programming any HTML CSS or JavaScript and beside here is my circuit where I am using an esp32 with an RGB LED an LED and a serbo motor sg90 together with my external power supply that will power up the sg90 and an an external capacitor just to prevent the servo Jeter so so as you can see in the web in the web application that I have created with node dread if I Tagle the LED button here like this one then you would notice that the LED turn on if I click the red here in the RGB then you would notice that the RGB turned red green and then the blue so using this RGB uh position uh option I can change the color of the RGB and for the servo group Servo group if I set the Sero position like 180 then you would notice that the Sero position indeed move so let's try with going into the 90 now it's in the 90° angle go into the 45 so it's now in the 45 same also with the 140 so the servo position changes and if we set it back to the zero position then it's now in the zero position and as you can see the messages that I have here in the uh node rad is being passed using the mqtt or my uh mosquito mqtt server so the web application that I have created using only no dread flows uh is using the mosquito mqt server to pass in the messages into my Arduino circuit so that I can control the uh my electronic circuit uh using my web application so as you can see using the power of node dread and the new uh dashboard 2.0 then we are able to create uh web application or iot application with without having to know um much about the HTML CSS and [Music] [Music] JavaScript okay so to begin with our project then we need to have access to an existing uh node red installation so I have here my node red running on a Windows 11 machine uh as you can see this is the node red terminal or command prom I also have a running uh mosquito mqt server here so the that uh this I will use the mosquito mqt server to pass in the messages coming from my node red dashboard okay so to begin with using the dashboard 2.0 go into your manage pallet and then in the install section search for the node red dashboard so you will see the old node red dashboard here and there's also the one that is uh the new node node red dashboard created by the fluse company so just click the install button here and then click the [Applause] install Okay so once the installation is finished just click close here here so the very first thing that you would notice here is that it created a new set of nodes under the dashboard to so the very first thing that we need to do is to add several buttons or Widgets or nodes additional nodes for our uh web application so for example again uh working with the dashboard to nodes let's first create a new uh flow so let's name this flow as adrino node red node red mqtt so click done so we now have a flow here then we go into the switch button here so when you uh drag down the switch uh node here you would notice the small triangle here which means that that we need to configure some properties so right now we need to manually update or set several properties for this particular node but you will just do this one time so but then I noticed that there is a new issue in the fluse uh node red uh dashboard that they will they are planning to uh automate the configuration so but for now what you can do is just click drag the first node and then click double click it will tell you that you need to create a new group so what you can do is you create click the add new group and then click this pencil button here and then let's say this is the Leed group and then it will tell you that you need to create a page so just click create the new page here so in this new page it says that we need to create a new UI base so let's say the uh page name here is the homepage or homepage so the path would be we change it to home and then the icon would be home we just need to create a new UI base so this is our new UI base so let's just say our uib base is the no dread Mutt and then the path would be dashboards for the style option uh let's just accept the default which is the collapsing then click add for the teams uh let's just create a new team here and then click let's say the no dread mqtt team and then just click the add okay now that we have created the UI page the team and then just click add and then the group is Led group and then click add again then click done so for the name of the switch node that's just say this is the LED switch and for the label let's say we add tle LED and then just click the done okay now that the LED switch is created here if you go into the configuration notes you would notice that it created several uh hierarchy here so we have a UI base here the group The Page and the team so right now we have the LED switch in here so if we click the deploy button so it says that it is successfully deployed now there is a context menu here called the dashboard 2.0 and if you click the open dashboard at the right hand side you would notice that it created the LED group and then we have the Tagle LED here but it is not centered right now so it says its homepage so if we want to Center the content here we can go back into our configuration nodes and let's go into the UI page and in the layout just select the notebook type in the notebook type it just will create several uh partition where in each partition will be set aside and be put on top of each other so let let's set the notebook type update and then click the deploy once we deploy this you would notice that we now have the Tagle LED group and the Tagle LED here we will use the first one to control the our LED and now we need to add the ability to change the color of the RGB so we will use the radio group here and in the radio group here what we're going to do is we will create a new UI group and we will say it is the RGB group and we click add and then for the label let's say choose color and then for the name let's say this is for the RGB select okay for the value we need to add three so let's say we wanted this to be a red and then the value would be red and then green would be green the label would be blue and then it would be blue here and then once everything is okay we click done okay right now we have the RGB LED if we go again into our dashboard then you would notice that there is an RGB group here now let's click deploy once we have clicked the deploy we would you would notice that there is now choose color and then the red green and the blue next we will need to add the ability to change the position of the servo with that we need the switch button oh sorry we need the slider button so in the slider button what we're going to do is to create again a new group so for the name of the group what we're going to do is to set this into the serbo group okay and then we click update and for the name of the group let's say Servo move movement and then for the label we just say set Servo position and for the range it would be zero up to the 180° since the servo will move from zero to 180 the step would be five and for the output we just wanted to send the message once we uh click or release the mouse so we'll click the only on release here once everything is okay we just click the done button here okay now we have this Servo movement and oops as you can see it it is under the servo group so there is some problem so let's go back in here and oops let's edit this one this should be led group and then we click update and then done so what we need to do is just create a new UI group and then let's just say this is Sero group and then click add once it is uh added we click done so right now if we take a look at our user uh interface here we have the LED group RGB and the servo group and then we click deploy once we have deployed everything you would notice that I have here the servo group RGB and the LED so we can you can now move the value here and you would notice that is 0 to 180 okay now the next thing that we need to do is I wanted to show some messages when I click the LED switch or the RGB select so to do that we can do the notification so in the notification you just select the base to the node rad mqt dashboard and let's just say this is the notification and then the position would be top right and then we click done now now with the notification what we can do is just drag the node of the LED switch the RGB select and the servo movement okay after connecting this three to the notification let's click deploy now that the deploy is created once we click the um toggle switch here you would notice that it says through and if we uh move it to the left it says false true same also with the color here if we select red we'll select red green blue okay now if we move the servo you would see that when I release my mouse it says 40 and then it says 140 and 175 so the we have created now the user interface that we are going to use us to control the our uino circuit so in the previous part of the video we were able to create the user interface of our iot application so right now we have created the toggle LED that will turn on or turn off the LED and the RGB using the option and the servo position using this slider so the next thing that we need to configure is the uh sending of the mqt from uh this user interface into our mqtt uh server so in my terminal I have created the I have run the mosquito mqtt server so I have the mosquito MTT server here so once the mosquito Mt server is created then we just need to configure our dashboard to be able to connect or send messages to our mosquito mqt server and to do that let's go back into our node red flows and the next thing that we need to configure is to set an mqt messages so we'll be using an mqtt out so in this mqtt out we just need to configure a broker or an mqt so let's create a new mtq broker for this broker let's say this is the mosquito mqt broker and for the server I just use the Lo host okay and then let's click add so right now we have the mosquito mity broker for the topic uh I will just leave this blank for now because I wanted to send this uh to make this topic to be dynamic such that when I click the Tagle Leed then it will publish a message with the subject tle LED and when I choose a RGB then I should uh send a new uh message to a new topic same also with the seru group and to do that uh what we can do is to use what we call as the change node in node red so in the change node we just need to put the change node in between the uh the LED switch and the mqt out node and we just need to connect them together once they are connected then we need to double click the message and in this case what we wanted to do is that we wanted to set the values incoming from the payload uh for example the LED switch into the uh mqt out so in this case let's set the message into the payload also and then we click done oops I forgot we also need to set the topic so for the topic I'll I'll be setting this one and the name would be message. topic and it would be a string since I'm using the LED switch I'm just going to set the tle LED here and then post it there and I'm also going to set the Q so this just be a string with the value of one and then I click done and then once the setup is there uh for us to verify if everything is working correctly let's add a debug node so in the debug node here I'll just drop the debug node here and then I'll put it here also in the debug configuration I wanted to print the complete payload and then click done and then once everything is okay I'll just deploy it okay once it is deployed you can go into the debug messages and let's go back into our user interface so as you can see the mqtt is now connected which means that we are able to connect to our mosquito mqtt server and right here I am uh going to publish for the topic Tagle LED okay so for test purposes what we can do is we can open a new terminal and using the mosquito command mosquito sub we'll use the Subscribe and then the topic would be tle led and the host will be Local Host I click enter so right now what will happen is that whatever we do with the toggle LED switch then we should be able to receive message here so let's try so since we have already deployed let's go into our home and then let's click this one so it says true then we should be able to receive through here okay so which means that you're able to receive true so I'm just going to put this side by side so if I click this one false I receive false true false true so in here we are able to receive the message mes coming from our uh toggling of the LED switch which is fine and okay so right now what we can do is we follow the same with the RGB select and the servo movement and by the way as you can see in the debug messages here you would notice that this is the message that is coming from our debug and the payload would be something like this and the topic would be tle led and it has the qos of one so right now when I click the LED switch uh it will be able to send the messages into our mqt out node and we are dynamically changing the value of the topic and the payload that we're going to send to our mqt mosquito server so what we're going to do is just copy this one also so let's say we name this one to LED change node okay so I'm going to copy and paste it here now I'm going to change the this one to RGB change node and I wanted to change the topic from uh Tagle led to RGB color set so this would be the name of the topic the qos and the payload would be the same I click done and then for the RGB select I'm just going to pass it here and connect it also here same also for the RGB and copy also then I'm going to change this into the servo change node in the Sero change node we'll just set the topic into Sero position set and then we click done and then we need to wire it also from the this one into this one and this one into this one oops this one into this one same also with the rbgb change node we use one mqt out node okay so right now our LED switch is in here our LED node is in this part and I have an mqt node here notification comes in here and the debug will come at this side so I'm going to deploy and then I'll just delete this one and then the next thing that we need to do is go into the home okay and in my test command prompt let's say we wanted to subscribe into the RGB change node so what we can do is we copy the RGB color set topic oops RGB color set topic here and we just change the topic into we're going to subscribe to the RGB color set and we click enter now we go back into our home dashboard and then what I'm expecting is if I click red then I should be able to receive a message red here let's see you see I am receiving a red green blue which means that everything is working perfect okay now let's try subscribing into the other one which is the Sero position set okay so in the Sero position set I just cancel this one and I'm going to set the topic into this one and then I click enter now when I change the servo here I should receive um message incoming from our dashboard and as you can see I have received 145 40 10 and 155 so the moment I release the mouse then I am receiving an mqt message which will instruct our servo motor to move in that particular angle or degree so in this particular part of the tutorial as you can see we we are able to receive sorry we are able to receive and transfer messages coming from our node red dashboard into our uh terminal and we are able to subscribe to different topics uh that we can listen to so that whenever we do something in our web application then the we are able to receive it in our terminal later in the next section I'm going to show you how uh the changes that we are doing here will be reflected into our Arduino circuit so as you can see from this part of the application it's quite easy to configure the sending of mq messages just by dragging nodes without you knowing how uh it is being done or being sent so if you're not familiar with programming with web application such as programming HTML CSS or JavaScript that's where the low code uh software such as snow dread will come handy in the future so in in the next part of the video we are going to connect our arino circuit into our no dread application so now I'm going to discuss the Arduino project that I have created so that you would know also how the program works so the project that I have here is available on my GitHub repository so it is available in the description of the of this video and as you can see in when you check the platform that I I oh by the way I'm using the platform IO IDE in developing this project but you can use the Arduino IDE if you're comfortable with it so going back the library dependencies for this project is only the pubsub client and the esp32 servo and the pubsub client is used to receive messages using mqtt and the ESP 32 Servo library is used to move the servo and when you go into our main.cpp this is actually the whole program that I have created to control my electronic circuit so let's now try to run over uh What uh each line of the code so that you will understand how it works so the very first thing is to include the different uh header files for our project so we need to communicate using the mqt so I have here the pbab and since we need WiFi so we we have the wii. here and the esp32 servo next you need to update the s ID and the password to match the your Wi-Fi network configuration and for the mqtt server just make sure to change it to match the uh the IP address of your uh mqtt if you're using a different mqtt server then just put it here also next uh I have here created a Wi-Fi client and a pobub client next this is the list of the LED topics that I have so you can see the uh I'm subscribing to the toggle led the RGB color set and the servo position set if you would go back into my node red flows and my change node notice that in the topic section I have here the value as tle led and it matches also whatever is the value here so in the arino code I'm just uh subscribing to this particular mqt topic next I have just declared some of the Hardware pins for the Sero the RGB and the LED and I have created a forward Declaration of the functions that I'm going to use for this project so let's just go over the other parts of the code for the setup as you would notice I just initialize the serial bod rate and then I connected using the setup Wi-Fi connection okay next I have set up the mqtt connection here and the call back function that will be called whenever we receive an mqt message and we initialize the pin after which we have set here the movement of the servo so uh I have just set the period as 50 HZ and then for the servo pin I have set the uh minimum and maximum to 500 and 2450 you can adjust it depending on your uh particular Servo in the loop function as you could as you would notice I just continually check if it's I'm connected with the mqt then I'll just uh pass in the reconnect uh function if not then I just continue looping and wait for mqtt messages in the setup Wi-Fi as you could see I'm just connecting to my Wi-Fi by passing in the SS ID and the password and then wait until I am connected next in the mqtt Callback as you would notice I extracted the name of the the value of the payload and then I'm checking the topic if it is about the LED tling then I call the handle LED tling function if it's about RGB color set then I'll call the handle RGB message same also with the servo position in the reconnect function I just continually check if I am still connected using my client then if it's not then I'm just going to reconnect using the client. connect and resubscribe again after which in the handle LED message message what I'm doing is if I receive a through then I'll just turn on the LED otherwise I'll turn it off next in the handle RGB message uh I'll just check what value is being passed in like if it's red green and then blue then I'll just use the analog right to set the value of the RGB next for the for the handle Servo message I'll just check the the value that is being sent by my web application and then parse it down and then set the servo position and then call the right function and then wait for some time to move the servo into a particular position so in this manner uh this whole program is what I'm using to control my Aro circuit and then just by using this web application or this iot application then you can web control your application as I have mentioned time and time again I did not create the web application here so I did not program any HTML CSS and JavaScript only using the node red flows now let's touch about the topic about the uh changing the color or changing the theme of your uh web application or iot application and as you can see right now the uh user interface that I have is only Pure White so if you wanted to change the color here then by using the node red uh theming node red dashboard to theming then we can change the color of your iot application it's actually easy and you don't need to know so much about how to uh set the color for each HTML element what you can do is just go back into to your uh node red flows then go into the configuration node and in the UI team here double click it you would see that I have here a dashboard and a navigation and I have here the pages and the groups what we can do is just change the value of the uh this navigation color so that it will affect our web interface so I have here a sample so uh let's uh change this to the value of the navigation so I'll just click this one and then 02045 this looks okay and then let's click update and then we deploy once we deployed then you would notice that the application now changes into this blue next we can change also the uh the group so for the group what I I wanted is to change the background color to a little shade of blue so what we can do is Click again the UI team and in the group section I'll change again the color into a different use so 00 3178 so right now it is let me check click enter so 03 178 and then we click update and then we deploy now as you can see we are able to change the color of the uh LED color right now so it's quite uh bluish in color so what we can do uh by just changing the value that I have here in my UI team then you could play around with the colors here so that you can alter the the looks of your uh user interface but this is just basic changes that I did so what I have shown you here is just the basic uh theming process so by changing the color then you are able to change the uh the look and feel of your iot application develop using no dread without you knowing so much about how to do this using a HTML CSS and JavaScript and the good thing about the design of this node red dashboard to is that uh when you go and activate it check the output in a mobile uh phone click like this one you would notice that it aligns perfectly which means that using your mobile phone then you would be able to see uh the values and change it accordingly as the user interface is mobile responsive so as I have uh shown you in this project and in the stepbystep process it's quite easy to uh use the new no dread dashboard 2.0 uh library in your application and it is easy to generate the or create a web application or an iot application for your project without knowing so much about HTML CSS and JavaScript all you need to do is just understand how to use the different node rad flows and uh connect it with each other and set the configuration for each node so this is one of the power of the node rad low code platform such that the beginner or those that are not expert in web application are still able to generate or create their own iot apps so uh that's how easy it is to develop iot application without uh extensive knowledge of HTML CSS and JavaScript uh using only the loow code platform node red and the introduction of the node red dashboard 2.0 will make your user interface much better so I hope uh this has been a lengthy video but it's a stepbystep process for you to get started about using the no rad uh dashboard 2.0 and mqtt in your application so I hope you have learned something the right app for this uh if you if you would like to see the write up for this video then head over to my blog which you can find in the description of this video the code that I have used here including the the flows are available also in my my uh blogs and in my in the description of this [Music] video

Channel: DonskyTech

Views: 684

Keywords: nodered, node-red, flowfuse, dashboard2.0, node-red-dashboard, mqtt, mosquitto, arduino, iot

Id: F8tgzBO4cvQ

Length: 40min 34sec (2434 seconds)

Published: Fri Mar 01 2024