arduinoesp

ESP8266 Tutorial Part III – Customise Your Web Server with Arduino

Note**: Please go through Tutorial Part I and II first to get an understanding of ESP8266 WiFi Module and how it works with Arduino IDE.

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

HTML layout template

Or this?

ESP8266 GPIO Control Server

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:

How web server and client communicate:

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?

1

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

2

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.

HTML coding

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.

Step 1:

Open Online HTML Editor, choose full screen and click on Source Code button.

html1

Step 2:

Copy the whole content.

html2

Step 3:

Create a new notepad file, paste the content and save it as example.htm on Desktop. Remember to choose Save type as: All Files.

html3

Step 4:

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.

html4
html5

Step 5:

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. **Make sure you install latest Oracle JRE to run this application. Download page is here.

Step 6:

Open convertHtml.exe. Search for example.htm file on Desktop and click Generate. A header file with example.h will appear on Desktop. This file contains html code in string form.

html6i
html6ii
html6iii

Step 7:

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)

html7

Step 8:

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.

html8i
html8ii

Step 9:

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.

html9

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.

Conclusion

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.

Buy

8 thoughts on “ESP8266 Tutorial Part III – Customise Your Web Server with Arduino

  1. Hi,
    I tried following your tutorial (very well written by the way) but I can’t get the htmlconvert app to work, any specific versions of Java required for this ?

    Thanks,
    Deskwizard

Leave a Reply

Your email address will not be published. Required fields are marked *