Monitor Sensor, Control Appliances locally from scratch using ESP32 or NodeMCU board

in this video I will let you know how to send the census data to the client connected with the ESP web server through WebSocket server programming using the decent syntax so let's get started so those who are new to my channel let me tell you that I am currently turning a series of making our own local area network based home automation system from scratch using the ESP 3/2 and the node MCU board and you this journey will be learning about WebSocket server web server JavaScript HTML seasoned and stuff like that so if you are interested in making your own local area network based home automation system or maybe very interested in any of the topics I discuss this now make sure you subscribe the channel so you don't miss out any of the episode that being said let us start with the fifth episode of this series so this is the code which I have written for the fifth episode which is for sending the census data to that you know client connected to the server now till the four that we saw we were able to successfully control the glances connected to the ESP board using a web page maybe on your smart phone or a laptop okay or we have used that WebSocket server programming and the Jason syntax for transferring the data now in this video I will just let you know how to send the census data from the server to the client okay so if you missed out any of the episode then I will touch the link for all the episodes in the description of this video give let me say let's start with the code for this fifth episode okay now here in this code I would only let you know the changes which I made as compared to the code which we use for the fourth episode okay so first of all I am declared one library called DST taught as because in this video I will be using the dht11 temperature and humidity sensor for sending the data to that client okay that's why I will declare this DST library if you don't have that library you can just download it by going to sketch to include library in to manage libraries okay so you have to install this library okay after that y'all you also need to install this Adafruit sensor library whose link is attached here okay so you to download installed both the libraries in your arduino ide after that I have used the sticker library whose link is also mentioned here so make sure you download and install these all libraries okay after that I have defined the DHT sensor pin as for so I connected a sensor digital pin four of ESP three to board after that I have just used this much line of code which is mandatory if you want to use a DHT sensor okay after that here is when there is one function called sensor which I will discuss later on and after that I have used this sticker and defined one object called timer this thing I will let you know after you know completion of the HTML page okay so let us jump onto the HTML page and let us see what changes I made as compared to the previous cool let me just cope with this much line of for HTML page I'll open the sublime text editor and I will paste that code here okay so this is the HTML page now what are the changes here let me tell you first of all I have used one new tag which is called the meter tank now what is this meter tank all about let's just simplify that website to learn about this tag and that website is nothing but this w3schools dot-com okay so I will search for this meter time here so here's the meter tag so let us click on this try it yourself to just visualize about what is the use of this meter tag okay so as you can see the meter tag is used to define a meter okay so basically meter tag is used to or display a visual representation of the data as you can see there is a disk usage see at least use HD and both of the usages are defined with the visual representation okay so that same meter tag I have used inside our code to represent the data which will be receiving from the sensor okay so one of the tag I created is for temperature I'm another thing I have created is for humidity okay so the format of the text goes like first of all I have defined HT which is a heading tag of course and I have defined one heading called temperature okay after that I've just closed this heading tag after that I have written as meter I opened the meter tag inside the meter day I have a couple of parameters or you can say attributes about that tag okay so what are they at that attribute first of all the value so by default the value of that meter tag is defined s2 okay then the minimum and maximum value this is a range of that meter okay so the range goes from 0 to 100 and here I defined one ID which will be useful when we need to assign the data to this particular meter okay I will let you know in a while okay but but right now I have defined the ID of this meter tag as temp underscore meter okay then after that I just close this meter Dyke here okay now if I write this was amount of colleges Tilly dogs things so let me just execute this much amount of course I will open that Google Chrome and open that HTML file okay as you can see we have one temperature heading and under that heading we have a meter tag displayed here okay so first of all I just missed out this line which is this division okay this is kind of a CSS used just to make the alignment of the temperature in the center of that webpage now the question is is that we can use this center tag as well which we have used previously but no that won't work if you if you need to test what happens when you use this center tag then I won't let you know here this will be your assignment or maybe or your homework just test out this center tag inside this temperature meter and see what results you get okay but let me tell you this Center tech won't work with this meter the other than you have to define this division tag inside which we have one attribute called style and the other side were just you know centering everything okay so after that after that tag we have to find the temperature and the meter and everything is inside the center okay and as we have defined the value - as you can see there's a little portion of the meter is green which is like two percent of that whole meter okay if I just change the value to maybe the 50 then the meter will be like half filled okay great so our tag is completely working now what we have to do here is just a visual representation of that meter tag but what the actual value like by this by looking at this we can say yeah it is half mil so it may be 50 but what if it is one-third or 3/4 or anything so what's the exit value for that what I will do I will define one more heading tag here okay so that was written here so here I've created one more heading tag which with the font size of h3 here I've defined one more ID whose ID value whose ID is tempered to score value this is again I will let you know further in the code okay so just think about we have one heading tag whose activities ID and one of the activity style which is also used just to you know display the data just after that meter tag okay so if I just remove unnecessary lines of code and and just save this much line of code and if i refresh this page as you can see I'm not only getting the visual representation of the meter but I'm also getting actual number just after that meter tag okay so if I just remove this style attribute you will see a visible difference I'll save it as you can see the number is this place behind Bao sorry below this meter Tyagi so let's just put that CSS style back okay so this much line of code is used to make a meter tag and just to display the value of that meter deck just you know after that meter okay similarly okay demand more meter tight for humidity so again humidity then meter values to zero to hundred maximum values I de still here the ID is Hg which stands for humility underscore meter after that I have created one more heading and his ID is given as humidity underscore value which will display the actual value of the humidity okay so if I save this much sign of port and refresh this page as you can see I got two more heading which says temperature humidity and both the temperature humidity has their separate meter tag okay to display the values okay so this is all about the visual representation part of edge table now we need to define the logic using which will be fetching the data coming from the server and display that data here inside the meter tag okay father will take the help of JavaScript so he has been see first of all have declared two variables named temperature data and humidity data whose initial value is assigned as zero cool after that here is one new function which we haven't used in the previous episode which is connection dot on message okay so this function will be called whenever any new data is coming from the server side okey so as soon as we get any data that data is saved inside this event and we can you know fetch that data by using the dot representation so if I write event dot data I can get the full data received from the server-side okay so I just saved that full data inside one new variable called full data and after that I'm just printing that full data using the console dot log function so this is basically a serial monitor which I have discussed previously so what this two line of code will do if any data is received from the server side it will save it inside this variable and it will simply display it on the console side cool nothing crazy in it after that let's assume that the data coming from the server side is formatted with anoche we will be formatting the data in Jason and then we'll be sending to the client okay so just think just imagine right now that data coming here is in the form of Jason so first of all me to pass the decent data for that I will use the function called Jason got passed this is a built-in function okay so Jason got passed inside that will provide our full data okay what this will do it will pass all the jason data inside the variable called data now we can fetch any object using this data variable for example so here advocating to or Jason objects so if I need if I need to show you the data or representation then that data will be sent in this format like temperature then T then unity and adzuki so everyone that supply tonight so what I'm doing is I am just fetching the temperature humidity data using the dot representation okay so if I write date that dot temp temp is nothing but this first JSON object okay using this much line of code we can get the temperature data which is T and that will be saved inside temperature school data similarly I can get the data of that hgm which is humidity of value by just writing data dot H um okay mixture was the thing which you're writing here must be matched with the jason object okay it is case sensitive so make sure you write it very properly okay so by writing data dot humm or h um i can get the actual cumulative value data which will send from the server to the client okay so this is how we have successfully saved a temperature data and humidity data in the separate variables now we are left with sending this data to the meter tab okay for that way to learn one more object or one more you know interesting thing in HTML that is document not get element by ID okay so let us jump onto our favorite website which is w3schools comm here just type document dot get element by ID okay okay so if i click on try it your sir so this is a very basic example which will let you understand like what is the use of this document or document get element by ID okay so most of all just think about the dot representation in the java script ml is just like going inside that function for example so here document represents a whole HTML page now here we have to go inside that HTML document so we'll use the dot operation okay so after dot operation we are inside the HTML page now what we need to do we need to get al okay so we need to get element by ID okay so here ID is one attribute okay so what we are doing is after writing not get element by ID we need to define the ID name so here the ID name define s demo now this will sign of or will serves the whole HTML document with the ID demo so as you can see here is the paragraph tag whose ID is them okay so we got the tag whose ID is demo now what wait to do this is defined here so dot representation now with this dot representation will go inside that paragraph track okay so as you can see document inside it will search for the tag whose ID is demo we got the diary demo will go inside that tag now what we need to do here it is written as inner HTML HTML stands for everything which is written inside that tag okay as you can see that click the button to change the text this is the inner HTML now we are just changing that data to hello world okay so what this much line of code says as soon as the button is pressed my function will be called inside my function we are just changing that inner HTML of demo ID with hello world so if I click on this track but then this much line of code should get changed to hello world let us test it out great this is working so this is the use of document dot get element by ID dot inner HTML okay so dot inner HTML is the one thing which will be using inside the code so let me just tell you so if you see is look at the second line of the code which is same which we have seen just now what we are doing is we have just written as document dot that means we are going inside the document again element by ID temperature underscore value let us see which tag has this ID so temperature underscore value it is the ID of H three okay cool one way to do we are going inside an h2 tag so with this dot representation we are going inside the h3 tag after that I have written as inner HTML that means we have to change something inside that h3 tag okay so that means this so the value two will be change now two will be replaced with what value that we have defined here as temperature theta that means as soon as we get the temperature data this this much line of code will change this value to with the actual temperature data I hope the things are pretty clear okay so now there is one more thing which is dot value let's see what not value represent okay so let's look at this code line by line first of all document cool HTML document dot go inside the HTML document get element by ID template underscore meter let just see a temperature into school meter ID so temperature underscore meter ID is oh here okay so temperature underscore meter ID is assigned to the meter tag okay cool now here it is written as dot means we to go inside that meter tag then it is written s value now we are not changing the inner HTML now we will be changing the value of that tag okay so if I look at the values okay the initial value is 2 okay so that initial value 2 will be replaced with the temperature data getting my point so as soon as we receive the temperature data this line of code will replace the value of the meta tag while the second line of code will replace the actual data represented after that meta tag okay so this is the beauty of this document dot get element by ID so we are just no getting the data throwing that data the HTML page according to their IDs okay so this is a beauty or this is the most useful thing about the ID in this HTML document okay similarly we are just descending the hum data to the hum meter and hum data to the hum value okay this is same as we have discussed before with the temperature value so this is all about the HTML page or just to send the census data to that you know client side of me so yeah this is all about the HTML page now let's see how we will be sending the data or collected by our ESP board to the client formatted with TC nogi so let me start with the setup part of the code so as you can see I have written as DHT dot begin this is the mandatory function to initialize the DHT sensory ok after that I've initialized as time or not attach okay so let us discuss what timer is so as you can see here first of all we declare the library called ticker and after that we have created an object called timer now here in this kind of code where there is a loop function running inside the void loop that may be a blink code or maybe this WebSocket server or any server code make sure you don't write anything inside that loop or at least of what adding Biel is in that loop okay so if you don't want to write anything in loop but in our case we need to send the sensors well you continuously do the client okay so we need to add something in the loop so for that this timer or ticker function will be useful okay so we won't be writing anything in this loop rather will be assigning one timer function which will be called after every or interval which will define my us okay so as we declare this timer object now we'll utilize this timer object here by writing as timer dot attached okay after then we have to write the time in seconds and we have to define which function we need to call after every second okay so here I have written as point five which I will change to maybe two seconds for every two seconds same sensor function will be called okay now what is inside the sense sensor function let's have a look so here's the same sensor function first of all I am reading the humidity value reading the temperature value with the predefined functions of the DHD library nothing crazy in it if there is no data receive of the sensor is not connected it will just print as field to read from DHD sensor okay after that I am just formatting that raw data with Jason syntax okay so as you can see we have to format the data in this particular format like double inverted comma temp colon the actual temperature data comma double inverted comma H um colon extra humidity data semicolon and double inverted commas I think this is no we don't have tried WP form okay so this is a format in which way to send the census data what I've created is first of all greater one string called JSON data is equal to this temperature then actual value T and unity then actual value add and disclose that curly braces okay so with this much line of code we are able to get this straight formatted with Jason then we have to send this data to the class okay for that we'll be using this function called WebSocket dot broadcast txt dot broadcast txt will broadcast the message to all the clients connected to that server okay if there are multiple clients connected we'll send the data to all the clients at the same time okay so inside that I have just written as T sin underscore data so this much line of code we'll protocals the json formatted data to the clients so this is all about the programming of this fifth episode in which we will be able to send the census value to that server so let's just connect my ESP to board and let's upload this code and see this project in action so select write board and board and hit the upload button so then the goat gets uploaded make sure you like this video if we are learning something new or if you're finding this video interesting ok do like the video because my liking the video the YouTube algorithm will come to know that this video is good and worth watching hence it will try to promote this video with other viewers as well ok so make sure you like this video because the code is successfully uploaded I just open the serial monitor and let me just reset this board okay so MD and this monitor started and we just open the web browser make sure you are connected with the web server created by your ESP board okay good so on the new team I will open ESP dot local minimize this okay great so as you can see I'm getting the temperature value as 25 point fine and the humidity value as 44 which is represented with the meter tag as well okay so here in the Sierra Madres you can see the same data is received here now if I burn the console you can see that same data on the console as well okay so here is the same data and in end simultaneously you can also control the LEDs connected to that ESP board without any you know a problem okay so everything is real-time everything is like really very fast real time then we are getting the census data we are able to send the data to the server and client and yeah everything is connected everything is sending the data each other at the same time so this is the beauty of WebSocket server programming okay so you have this is it about our whole series so we are able to control the clients as we are able to you know monitor the census data so here for the demo purpose I have just used two LEDs and two census data maybe you can attach multiple sensors data you can attach multiple appliances and create your own home automation system from scratch so you have this was a more four series now one thing which I need to discuss is this particular code with a DHT sensor won't work with node MCU I really don't know why but when I have loaded the code I'm getting the adder the ESP also known MC mode is constantly getting resented with the DHT sensor but when I attach any other sensor just like the proximity sensor the code was working with the node MCU board as well let me just show you the demo so here's the code which I modified for node MSU more just to make it compatible with the proximity sensor attached to its right just see the HTML code as well as the actual server code as well okay so let me just select the right board and port and hit the upload button folks with Cory successfully uploaded that is upon the serial monitor let me just reset this board let's open the web browser make sure your computer is connected with you access point created by ASP board okay let us open that webpage cool as you can see here is one web page with the two editing buttons and only one meter tag on it because I modified this code just for proximity sensor to be connected with a node MCU boroni so currently it is showing one on the meter on the serial monitor as well but as soon as I bring my hand close to the sensor as you can see the value goes to zero one zero one zero one zero okay so that means this code is also working perfectly with the node MC would but there's something problem with the ds3 sensor connected with an ODBC board it was not at all able to read the census data I don't know why what's the error but if you try it out and if that census example works perfectly with the no names you put as well do let me know in the comments because it will not only help me but it'll also help a lot other community members as well if they are they want to make the same project is Rotem simple so yeah I think this was all about this complete series because this is all which I wanted to share with all of you guys okay so I completely share my knowledge of this WebSockets JavaScript Jason and everything ok so I hope you enjoyed this series I hope you got to know so many things during this journey during this series now if you love my work and if you want to support me in any manner go onto patreon.com slash tech SMS end and well you may get some benefits of supporting mate so yeah ending this video here now just wait for my Knights it isn't like slow land share with me take a service

Channel: techiesms

Views: 9,063

Keywords: javascript websocket, nodemcu esp8266, esp32, esp32 arduino, home automation system, w3schools, w3schools html, html button, html meter, javascript getelementbyid, getelementbyid, dht11, asyncwebserver esp32

Id: 3_JADrq3m48

Length: 22min 24sec (1344 seconds)

Published: Sat May 30 2020