Hello everyone! In previous tutorial, we have learnt how to use Arduino IDE to create and upload firmware to ESP8266 WiFi module and make it a hello world server. But what if we want it to be more than just a hello world server?
May be you want something like this?
HTML layout template
ESP8266 GPIO Control
This tutorial will show you how to customise your web server using Arduino IDE. Basic understanding on how HTML works and how web server and client communicate with each other would help in this tutorial. Below are some useful links for these topics.
How HTML works:
- Introduction to HTML
How web server and client communicate:
- Web server – Wikipedia
- What is web client and web server?
In short, when a web client send a HTTP request to a web server, the web server will send the information back to the client based on the requests made from web client. It can be HTML web page, or redirect the client to another website, etc.
Let’s try some modifications!
In this tutorial, we are going to use the same example sketch mDNS_Web_Server again but this time we will do some modification to see different outcome. First let’s take a look on the sketch.
How the server get the HTTP request from client?
This part of code demonstrates how the server retrieve first line of HTTP request content and filter it furthermore to get the path. This path will be the key on how the server handle the requests from the client. For example, if the user sends 192.168.1.xxx or 192.168.1.xxx/ in web browser, the first line of HTTP request sent will be GET / HTTP/1.1. If the user types something else like 192.168.1.xxx/aaa, the first line will be GET /aaa HTTP/1.1. In general, 192.168.1.xxx/(path) will give GET /(path) HTTP/1.1. In example sketch, string req will be filtered until it becomes /(path). Thus in this case, if users browse for the server homepage, the final result for req will be / only.
Handling HTTP requests
This is the part where the server handles the HTTP requests and respond to them accordingly. If the req = “/”, meaning if the user browse for server home page, the outgoing HTML code will be HTTP status code OK, followed by the type of content, then finally the content to be displayed on the web page which is “Hello from ESP8266 at 192.168.1.xxx”. Otherwise the server will send HTTP error status code. client.print(s) is the function where the server send the HTML code to the client.
OK now we know String s is the key to change the display of the webpage, therefore, if we want a different webpage displayed, we should play with this s. You can try out with different HTML code and put them as String s, then use client.print(s) function to display the webpages. There are many online HTML editors such as Online HTML Editor which provide platforms for you to customise your webpage using drag and drop interface while the HTML code is auto-generated for you!! Let’s try out this example.
Open Online HTML Editor, choose full screen and click on Source Code button.
Copy the whole content.
Create a new notepad file, paste the content and save it as example.htm on Desktop. Remember to chooseSave type as: All Files.
You can check the content by right click the example.htm file on Desktop and open with one of your web browsers. The content should be shown as below.
HTML code is ready, but we still need to convert the code into string form to be put into Arduino sketch. You can download this software convertHtml.exe to do the trick.
Open convertHtml.exe. Search for example.htm file on Desktop and click Generate. A header file withexample.h will appear on Desktop. This file contains html code in string form.
Drag the example.h file into Arduino IDE. Now the HTML code is stored as String file1 (You can modify the name as you like later, but now we are using file1 as the name)
Modify part of the sketch as below. At the end of the sketch, client.print(s) is modified into a longer version just in case the size of HTML code from example.h file is too large. The maximum size of s in client.print function is 2048 bytes, therefore if the size of the HTML code is larger than that, it has to be separated into different parts before being sent.
Upload the sketch. Enter the IP address in one of your web browsers and see the content of the webpage shown. The output should be as the picture below.
Now you are free to try out other HTML codes. You can also download some html examples here. You may also try some HTML templates from Online HTML editor.
You can also try this example sketch ioControl. You can simply download this sketch, upload it and try it out!! This sketch involves the actions taken by the server according to different HTTP requests from the client.
That’s all for this tutorial. Hope you enjoy experimenting and learning. Next tutorial we are going to configure ESP8266 as standalone access point. Stay tuned and have fun!
If you have any inquiry, please post in our technical forum as we seldom check the comments section in tutorial site.