Home Automation via HTML page on ESP32 or NodeMCU board

so in this video I will let you know how to make your own HTML page and deploy the HTML page on the web server running on the ESP board that may be sp3 to board or the node MCU board using which you will be able to control the real is attached to the ESP board from your web browser so let's get started so those who are new to my channel let me tell you that I am running a series whose aim is to make our own local area network based home automation system from scratch using which will be able to control the appliances and will also be able to monitor the census data on the web page in a web browser ok so during this journey will be learning about web servers WebSocket server M DNS server JavaScript HTML and so many stuff so if you're interested in making this kind of a home automation system by yourself or maybe you're interested in any of the topic which I discussed earlier make sure you subscribe the channel so you don't miss any of the episode that being said let's start with the second episode and learn about the HTML language let's move on to the computer so this is the code which we have written in the first episode so those who missed out the first episode well I will leave the link for that in the description as well as in the I button so make sure you watch that video because that would have we discussed about how to run the MD and a server and a web server on the ESP base pause okay so let us start with this episode so earlier we were sending the plain text masses as a payload to our clients connected to the ESP web server but now in this episode we'll be creating our own HTML page and we'll be sending that HTML page in the payload to the clients ok so for that we first need to learn about the basics of HTML ok before that I will recommend one website called w3 school store Chrome now this is an amazing website for learning several languages that include HTML CSS JavaScript SQL and many more such languages now why I like this website because here in this website we don't only learn about that language learn about the syntax and tags and everything but this website has also built-in editor built in terminal when we can visualize the code which we have written in real time ok so we don't need any external software known in acne external website the stay on the website learn from it and test your code here on the same page as well this is an amazing website I'll definitely recommend you for learning any new language ok so on this website we will be learning about HTML so I'll on this learn HTML pattern so let us discuss about what hTML is in just three lines okay so let us read out the line so hTML is a standard markup language for web pages so all the web pages you see on the Internet are written with the HTML language or even this website you are saying is written in HTML okay so the standard markup language for web pages with HTML you can create your own website of course you can obviously create your own website HTML is easy to learn you'll enjoy it so that's the basic introduction and so with that basic introduction let's start learning the HTML language so we'll first we'll go to the HTML basics so here in the basics part you can see there are three important texts which are mandatory to be included in HTML document and they are so first of all we have a doctype HTML which is all the HTML document must start with this document type declaration going here this website says the HTML document itself begins with the HTML tag and ends with the closing HTML tag okay so every code will start with this HTML tag and will end with this cruising HTML tag after that the visible part of the HTML document is between the opening tag body and the close Nick closing tag body okay so here we have the visible part which will be printed on the web page and this is written inside the body tag okay so this three are the basic things that you need included in the HTML document now you can understand like in the Arduino programming we do have void setup and void loop and that is mandatory in the ID no coding okay same in the similar manner we do have this HTML and body which are mandatory part of an HTML document okay so let this speak here on try it yourself to see our HTML document in you know running and running in practical man rocki so if I click on try it your self button it will open a new window with the with a terminal okay kind of a terminal okay so here is my code and here is the output of the code okay so as you can see first of all the HTML is written after that the body is written and let us keep this both part right now the code will end with the closing body tag and with the closing HTML tag now let this focus on these two things so first of all it says h1 so here is the h1 tag and here is the P tag okay so h1 tag so H stands for heading and while P stands for paragraph so HTML we have different kinds of heading starting from h1 to h6 with different font sizes okay so if I go back to the HTML basic page that's very the second learning is about HTML headings only so if I click on this try it yourself as you can see here we have h1 h2 up to at 6 heading and on the right hand side you can see the output as the h1 heading has the biggest font well the at 6 heading has the smallest one so this is the difference between the h1 to h6 okay so you can choose any of the adding according to the font size you want okay so this was about the heading the tag after that we do have one more tag which is the paragraph tag this is just to write a paragraph so this is like a basic thing we write the title and the title we write the paragraph so let me just modify this so we want a heading as my home automation okay so if I click on this I missed out that tag okay okay so if I click on this run as you can see your dis printed as my home automation which is a title of my web page okay so after that here I will remove this paragraph I will write one more heading with the font size of H free and I will write here as led one okay I'll close this heading with h3 okay if I click on this Run button I can see LED one under my home automation title okay so what am I doing here is basically I will be controlling this two LEDs attached to my sp3 two board using the webpage running on the web server of IE sp3 to bowl okay so I'll create a two LEDs title here okay one is the LED one and I will create one more heading with the same font of h3 and write as led to close this with that three tag and if I click on this Run button as you can see I got two LEDs under the my home automation title okay now let's just move everything in center so for mowing everything in center what we'll do is we'll use this center tag we'll open the center time here and we'll close the center tag here at the end okay so this will align everything in center okay so this looked much more neat now okay so my home automation LED one and I'll do now we are left with adding the buttons on the LED ones like LED one on and off the LED to do on and off okay so for that made to learn the button tag inside the HTML page so below so below this heading part we do have the HTML buttons as well okay so if we need to add but I made to write this much line of code inside the HTML document if I copy this much line of code going to the editor and if I paste that tag here and if I run this as you can see I got one button called click me under the LED one title or I'd leave one heading okay so this rename this button as on and I will create one more button as off and this similar I will add on/off button under the led to section as well so click on the Run button as you can see a basic HTML structure is already created like LED one on and off any two on and off so this is our HTML document code now we are left with to assign the task unit button just like if we click on the button what we should do we need to define the actions after clicking that button okay so for that let me just give you a basic scenario okay what I will do is I will assign a link to each button for example if on button is pressed I will be requesting the link called my IP address slash LED 1 slash on and if I click on this off button under LED one section other requesting the link like IP address slash LED 1 slash off and similarly for the buttons under LED - I will be requesting the links like I will request in the similar links but the LED one will be changed to LED - okay so I need to assign the task that whenever the buttons are pressed requests the respected links now how I can do for that way to learn about this on click ok so using on click event we will be able to assign any task to the button ok so whenever the button is click what we need to do that we can define it's in the onclick event okay so here as you can see on the website we need to define the event inside the button tag okay so here it is defined as on click and insert the on click they have assigned for function so whenever the button is pressed they will call this my function okay so if I click on try it yourself here is the button and inside the button they are calling the my function ok and my function will print hello world on the screen so if I click here I can say that HelloWorld is printed on the screen okay but we don't want to print anything rather we want to request one link and for requesting one link we have to learn about one more object and that is this one this window dot location okay so what window slot location do is the windows dot location object can be used to get the current page address and to redirect the browser to a new web page so this object can return the current URL also and it can also transfer the web browser to a new web page okay so we'll be using it to transfer our browser to a new web page okay so the syntax of this on click and this Windows dot location will look something like this so let me show you by it going to editor so what I will do is here I will write as on click ok is equal to and 2ee noted comma I will use the function object called window dot location okay here will assign the IP address again I will click is equal to into single inverted comma HTTP colon slash less I will write the IP address of my web browser which he is 192.168.1.1 slash as it is the on button under led one section I will request led one slash on closed the single inverted comma then I will close the double inverted comma as well so with this much line of code I event is assigned to the button okay so whenever the button on is pressed under the LED one title this button will request this web page in the web browser okay so I click on this Run button I won't be able to see any difference because this terminal won't allow us to request any other link inside this HTML window okay so what I will do is I will simply copy this much HTML page okay I will copy it and open one editor I do have this sublime text with me so I'll open this I will paste that HTML code here I will save it as dot HTML then I will open my Google Chrome I will open this saved HTML file which is sample dot HTML okay I'll open this so as you can see our web page is appeared on the screen so let us one button as you can see we are landed up on the dedicated page which is the IP address slash led one slash on okay it returned as not fun because there is no such pace defined inside the web server of IE sp3 two board okay but we are successfully landed on that page okay now let's just more back to that terminal now here is one problem okay so currently we know the IP address of our web browser okay but just imagine if you are using ESP as a web server which is connect to are connected to a router and the router assigned in local IP address to es people and if we are not aware about that IP address okay so what we should do is we should make this code more generic okay but right now it is dedicated to one IP address let is make a flexible to work with any IP address for that I've used one object called location dot host on him okay so here location dot hostname returns the current URL okay so current IP address assigned to the web server okay so what I will do I will go to that editor I will close this HTTP here click on this plus button I will write location dot host name I will click on plus and open that inverted comma okay so this much line of code makes our HTML document more generic now it is not limit it to one IP address now this HTML code works with all the webserver and it will automatically reads out the IP address assigned to that web server okay so similarly I will assign the on click event to all the buttons with different different links okay so for the off button I will just copy this much line of code okay and for the off button I will just write LED one slash off for the led to on button I will just write led to slash on and for the led to off button I will just write led to slash off okay click on run okay so we have successfully created our own HTML page from scratch using which will be able to turn on and turn off the two LEDs connected to the web server that is our ESP board okay so congratulations you have successfully learned at least the basics about HTML and now this much basic knowledge will prove very useful for your projects and this is a strong learning yogi so now let this copy this with HTML code and move on to the ESP code and let's see how we can deploy that HTML page on that you know yes we observer okay so what I will do I simply copy this much line of code I'll go to my SP code now here I will write the web page so to write the web page first of all I'll create a character array and name it as a web page okay now I will be storing this HTML page inside the program memory now this may be a new learning for some of you so what's the difference when we write program mam and when we don't write program mam okay so when we write the program mam it means that that particular data will be stored inside the flash memory and when we don't write this program mam that particular data will be stored in the RAM okay now as you must be knowing that the amount of RAM provided in particular chip is less than the flash memory obviously the flash memory will be more in size as compared to the in the as compared to that Ram okay so whenever you are using a static character area of static string just like this web page which is a big character array which will which will which do require a lot of memory okay so rather than storing that particular thing in Graham will be storing that whole long HTML page inside the flash memory and we'll be getting some more space inside the RAM okay so that's the benefit of this program mam so we will write as program mam after that we will write this particular syntax which is so this notation is basically called a draw string the literal now what the benefit of this I will let you know but this kind of new thing I learned from one of the video bike robotics all your big shout out to AK robotics youtube channel or from which I got to learn this amazing method ok so by just defining this string letter we can just paste our HTML code as it is okay so if I if I haven't defined this what I need to do is I need to write that whole HTML code in one single line okay I can't write you know everything in a new line in a C++ programming language okay but by the use of the string literal the slower string literal notation I can write the HTML code in the way I want okay so I get more freedom by using this particular string literal okay so this is how I store my webpage inside the flash memory okay so this is the web page now we will see how to serve this web page to the client okay so go ahead with the code and here in the home page as soon as the client requests a home page what we'll do we'll first of all remove this string oh we will send a text slash HTML this time because we are serving HTML page and I will write here as web page which is defined here okay now here one more change here to do is you have to rights and underscore P while this it because whenever you're ready anything from flash memory you have to define that by writing underscore P okay so if I if I was reading it from Ram I will just write sin but if I were reading through it from slash memory I will rights and underscore T okay so that's the difference so this much line of code will serve web page whenever the client requests the home page so now let us see this much code in action okay just select the right board and port so currently I'm using the SP two votes I wouldna get selected straightaway upload this code okay so our code is successfully uploaded let us connect my laptop to the Nike SMS access point which is already connected so I'll open up my web browser and go to the link ESP dot local okay okay so as you can see I got the same web page which we have created inside that terminal okay so that same web page is now deployed on our ESP web server and we are able to get that web page in one of the client that is the laptop connected to my web server okay so we are in the right path now what we need to do is we need to define that paths inside the code okay so as soon as I click on this on button as you can see it has requested one link as ESP dot locals less led one slash on ok so we have to define this you are I inside the web server anyway to assign the task in that URI okay so what I will do is I will just remove this page one and here I will write as LED one slash on okay so whenever the client is requesting this page the LED one slash on page what we need to do that we have define inside that function okay so what we'll do is I will just turn on the LED one so first of all I define the LED here so LED 113 define LED 212 okay I will define both of them as output okay so as soon as the client requires this LED 1 slash on what I will do is just turn on LED 1 great I will remove the string and after that we'll be sending that same webpage okay so I'll write a webpage here and I will sending my texts and texts less HTML format okay so what I did here is as soon as the client requests slash LEDs as soon as the client requires this less LED one slash on page I'll turn on the LED one on my ace potato board and I will be sending that same webpage again to that client connected to it okay what should happen with this much code is as soon as I click on the one button the LED should get turn on and on the client I should get the same webpage ok let's just upload this much code and see everything in action ok so the code is successfully uploaded let us open the web browser make sure your client is connected to the web server I will just request ESP dot local okay I got that web page now the fingers are crossed other LED green the green LED should get turned on as soon as I click on the one button okay let us see who everything works on okay so led the green LED on the ESP 3d board is turned on and on the client side I got the same web page and response ok so now what we'll do is we'll assign one more page to turn off the LED and similarly we'll assign two more pages for turning on of this LED as well so let us move up to the code so I'll copy this much amount of code and paste it just below it I'll just write here as off and as soon as I get the request of this page I will turn off the LED and I will return the same web page similarly if I copy both the functions and paste them below so if I get led to slash on request I will turn on LED 2 and if I get LED to slash of request I will turn off led to so I think we are done with the coding of our second episode let us click on the port button for the last time and say this complete project in action ok click on this upload button ok the code is successfully uploaded let's open the web browser make sure you connected to this ESP server just request the ESP dot local web page to just land on to the home at home page of our server ok so here on the home page now with that led one led two buttons we should be able to turn on and off both the LEDs on the connector to ESP three to four okay let us drive the LED one which is the green LED ok turned on and turned off on off on off similarly you can also see that the links are also changing by the according to the button for all a DS LED one slash on for off it is additive on /off let us try this led to on as you can see the LED red LED on the ESP board turned on and the link is also changed to led to slash on on ok it is working so I let it - on led to off ok let me just turn on both the LEDs ok so as you can see I am able to control this LEDs on the on the ESP through to board using my web browser using an HTML page which is which is created from scratch by myself only and now you also know how to create it by yourself ok so yeah this was all about the second episode where you learn how to create your own HTML page to turn on and off the LEDs connected to your ESP board acting as a server now this same code will flawlessly work on the node MCU board as well so in definitely try that out and if you face any problem you can definitely tell me in the comments or maybe on the whatsapp number defined in the description of the video and with this you can also attach the relays instead of LD and well you can control the bulbs as well connected to various with a table now in the third episode I'll be talking about the WebSocket server ok and I will let you know what's the difference between the VEX akkad server and this HTTP server ok I will let me know the difference between both of them and I will also let you know how app socket is bad and then there's TTP protocol ok and let you know everything about that in the third episode ok so you find this video useful make sure to like this video and if you low my videos if you want to support me well I am also on patreon so you can go on to page / techie SMS and you will support me and you will also get benefits of supporting me so yeah that's all about a second episode of series I hope you enjoyed it I hope you liked it I hope you loved it so just stay tuned and wait for my next row and the next row learnt share with me take a SMS

Channel: techiesms

Views: 22,278

Keywords: espasyncwebserver, webserver, softap, mdns, esp32, nodemcu, webpage, websockets, javascript, http, html, home automation

Id: uRzK6o_mEyw

Length: 22min 30sec (1350 seconds)

Published: Sat May 02 2020