One of my friends visited a while ago and put some valid questions.
He: "Why are you writing this blog, there are already millions of tutorials regarding configuring esp8266."
Me: "Most tutorials just talk of a specific thing to do with esp. I am writing to build a real product."
He: "There are already Hundreds of similar products in the market, why are you building your own?"
At this point, I have to pause and ask my self why? Although I did not get a satisfactory response but yet I do not have those devices in my house. Hopefully by the time I complete building this whole product I have an answer.
Past few months, was bit busy and hence could not work this.
So, in the previous post, we have seen how we can send a command to the ESP module and made the module work on those commands. Eventually, we would require knowing if the command is completed or not, or what is the current status of the esp module.
In this post we would see how to respond from the esp module also, we are going to see how we can respond a small webpage from esp.
Tools: Nothing new, same tools we used in the previous post.
(You may copy code and refer from my git repo WifiConnect.ino file if you run out in an issue).
Lets first understand what we wanted to do. The user makes an HTTP request to the esp, means the esp is working like a web server here. The HTTP request must also respond something, right? so we will return an HTML string as a response. The HTML will render as a page in the browser who made the request.
To achieve this we will be using two functions of client object println() and print(), both of these accepts a string and does output the string to the connected client. the only difference in these two functions is the println causes a new line after the string hence the whole text goes structured to the client. we would use the println to send the whole line while print to go string concatenated over multiple statements.
We are going to pick up where we left in the previous post and add following lines below the 'if' statements, where we digitalwrite the HIGH / LOW to LED_BUILTIN.
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
These lines will respond header to the
client.println("<!DOCTYPE HTML>");
client.println("<html>");
From here the HTML starts, we are sending doctype and starting <html> tag.
client.print("Led is now: ");
if(value == HIGH) {
client.println("On");
} else {
client.println("Off")
}
So inside the <html> node, we would just send the current value of our variable 'value'. So it would be like 'Led is now: On' or 'Led is now Off'
client.println("</html>");
The last line is just the closing statement of html tag we opened.
We are all done, just upload the sketch to esp and lets test.
Now when you call the same URL as we did in the previous post, in addition to turning led on or off you will also get the set value. You may also verify the whole response by checking the source of the responded page.
Now you have learned how to create a small web server in esp and let it do some digital functions also how to respond from that web server. You may try out my other examples in the same GitHub repo to master coding esp, you will find example to creating an on/off switch using relay and capacitive touch sensor, and also you can find example for creating a LED strip with patterns. I will try to update readme in each example of GitHub to show the plan and how to use it.
In the Next few Posts we will concentrate on creating servers so that the esp devices can be controlled from inside and outside of our home as well as we will try to integrate them with various assistants like Google assistant, Alexa, Siri and others.
He: "Why are you writing this blog, there are already millions of tutorials regarding configuring esp8266."
Me: "Most tutorials just talk of a specific thing to do with esp. I am writing to build a real product."
He: "There are already Hundreds of similar products in the market, why are you building your own?"
At this point, I have to pause and ask my self why? Although I did not get a satisfactory response but yet I do not have those devices in my house. Hopefully by the time I complete building this whole product I have an answer.
Past few months, was bit busy and hence could not work this.
So, in the previous post, we have seen how we can send a command to the ESP module and made the module work on those commands. Eventually, we would require knowing if the command is completed or not, or what is the current status of the esp module.
In this post we would see how to respond from the esp module also, we are going to see how we can respond a small webpage from esp.
Tools: Nothing new, same tools we used in the previous post.
(You may copy code and refer from my git repo WifiConnect.ino file if you run out in an issue).
Lets first understand what we wanted to do. The user makes an HTTP request to the esp, means the esp is working like a web server here. The HTTP request must also respond something, right? so we will return an HTML string as a response. The HTML will render as a page in the browser who made the request.
To achieve this we will be using two functions of client object println() and print(), both of these accepts a string and does output the string to the connected client. the only difference in these two functions is the println causes a new line after the string hence the whole text goes structured to the client. we would use the println to send the whole line while print to go string concatenated over multiple statements.
We are going to pick up where we left in the previous post and add following lines below the 'if' statements, where we digitalwrite the HIGH / LOW to LED_BUILTIN.
client.println("HTTP/1.1 200 OK");
client.println("Content-Type: text/html");
client.println(""); // do not forget this one
These lines will respond header to the
client.println("<!DOCTYPE HTML>");
client.println("<html>");
From here the HTML starts, we are sending doctype and starting <html> tag.
client.print("Led is now: ");
if(value == HIGH) {
client.println("On");
} else {
client.println("Off")
}
So inside the <html> node, we would just send the current value of our variable 'value'. So it would be like 'Led is now: On' or 'Led is now Off'
client.println("</html>");
The last line is just the closing statement of html tag we opened.
We are all done, just upload the sketch to esp and lets test.
Now when you call the same URL as we did in the previous post, in addition to turning led on or off you will also get the set value. You may also verify the whole response by checking the source of the responded page.
Now you have learned how to create a small web server in esp and let it do some digital functions also how to respond from that web server. You may try out my other examples in the same GitHub repo to master coding esp, you will find example to creating an on/off switch using relay and capacitive touch sensor, and also you can find example for creating a LED strip with patterns. I will try to update readme in each example of GitHub to show the plan and how to use it.
In the Next few Posts we will concentrate on creating servers so that the esp devices can be controlled from inside and outside of our home as well as we will try to integrate them with various assistants like Google assistant, Alexa, Siri and others.
