ESP8266 (Web Server – Part 2): Interaction between Arduino code and HTML interface

Here is the second part of the tutorials devoted to the creation of an HTML interface stored in the SPIFFS zone of an ESP8266 functioning like a web server. In this tutorial, we will add the code needed to implement the interactions between the Web interface and the Arduino code. We will implement automatic updating of the measurement table and displays. We will manage the commands to enable and disable GPIOs. Finally, some resources will be placed in the SPIFFS zone (Bootstrap and jquery CSS and JS files) to reduce the loading time.

A little JSON before you start

JSON is a method for structuring data for storage and transfer. It replaces very advantageously the XML especially in the Javascript language or it is supported natively. It is also very simple to create a JSON structure in the Arduino code. Without going into too much detail, here’s how it works:

  • The data is stored as key: value
  • Each pair must be separated by a comma, except the last pair
  • Several types of values ​​exist
    • string
    • array []
    • A free data structure object respecting the JSON formalism => key: value, key: {}, key: []

For example,

Or an array

To test your JSON, I advise you It is enough to carry out many projects, but to know more, you can consult this article in French of our friends of alsacreation.

Automatic updating of the table and measurement displays

As much as let the browser regularly update the measurements made using the ESP8266. We will take the code from the interface developed in the previous tutorial and make it evolve so that all the interactions are managed on the client side (on the Internet browser).

HTML code

Let’s resume the code on the Measures tab. Three navigation buttons have been added to create 3 displays. Each button has a badge marked with an identifier (#temperature, #humidite and #pa) that will allow us to update the measurement.

Then a table consisting of three columns displays the measurement type, the current value and a previous value. Each column is associated with a data field that will be associated with a JSON sent by the Arduino code. The contents of each column are formatted by a function specified in the data-formatter attribute.

Everything is ready on the side of the web interface

Javascript code

The Bootstrap-table plugin will simplify our lives to update the data. Indeed, it will suffice to call the method refresh and to indicate the url of return of the data (all the functions are presented here). However, we must make sure that the table exists before we can start, so we must include this call in a $ (document) .ready () test. It will also be used to call a function that will update the displays. Here is the code

Small problem, this solution does not work in case the table is integrated into a tab (div tab-pane). Fortunately, the solution was presented in issue 1760 on Github. On the class of the tag a [data-toggle = ‘tab’], we test the presence of the tab_mesures attribute, which corresponds to the tab containing the measure table. If this is the case, the refresh of the table and the 3 displays are started.

To update the data at regular intervals, we will create a Timer which will execute a function after one minute (6000ms) for example. In order for the timer to be invoked recursively, it is sufficient to restart it each time the measurement table has just been updated (on.(‘’)). We will also test that the tab of the table is active. The following code is obtained:

In the updateMesures() function, we are going to make a call $.getJSON which takes in parameter a URL, here /mesures.json .

Note. We could extract the data when formatting the table but I prefer to introduce a new jquery function.

As soon as the data is received, the function is executed. The jquery html method updates the contents of the badge. Since this is a JSON object, the value is accessed by data.name_element. To facilitate the development, the function fail can also be called. The JSON object is sent to the console. To be able to read it, one uses the Javascript function JSON.stringify.

It only remains to format the display of the columns of the table. To understand what is happening, here is the JSON returned by ESP8266. The Bootstrap-table plugin expects a table of data. If this is not the case, you will get an error returned by the function .fail()

For each line, we will recover:

  • The label of the measure
  • The current value
  • The unit
  • The symbol avoids a test client side (browser) and Arduino code is downloaded more quickly if modified than SPIFFS files.
  • A previous value

We will now create a function that will take care of creating the label that will correspond to each column. For the Measure column, the labelFormatter() function is called.

Note. The type of measure could be coded so that the label is fetched in a table or a JSON file for each language. Here it is just an example to show the architecture of the system.

We test the label and build a string that contains the label. We add a span tag that will add just before the pull-left a glyphicon icon contained in the JSON (row.glyph). You will find all the glyphicons offered by Bootstrap here. Alternatively, you can use the Fontawesome library.

Let’s move on to the current measure that is formatted by the valueFormatter() function. Since the content of the line is available, a test can be made to determine whether the current value is greater or lower than the previous one. One can thus construct a label of the form: value + unit + icon (up / down).

Finally for the previous value, we simply assemble value + unit.

Everything is ready on the side of the web interface, let’s move to the code Arduino listed ESP8266.

Arduino Code

We will add functions that will be called when the server receives a request on /mesures.json and /tabmesures.json (just before starting the server).

For both functions, we will create a string text respecting the formalist JSON. For the sendMesures() function, this will be a simple object.

{“t”: “21.50”, “h”: “31.80”, “pa”: “990.53”}

Or in a more readable form

As you can see in the code, each key and value must be enclosed by a double quotation mark (“), so you must precede it with the escape character so that the string can be compiled (\”). The server.send() method is then called to send the JSON object to the client.

For the table, an object consisting of a table must be sent, each line being an object containing the necessary information (label, current value, unit, symbol, previous value). The chain is more tricky to build. For the moment we send 0 for the previous value.

Little advice. Feel free to cut out your channel and go to the browser to retrieve the JSON sent. An extra or missing comma and nothing works. Also consider jsonlint to check your JSON.

esp8266 web server http post json console google chrome bootstrap

Driving the GPIO from the Web Interface

There is nothing more complicated to drive the GPIO from the WEB interface, we will send a request of HTTP type POST using the command jsquery $ .post (). In return, the display of the GPIO (On or Off) will be updated according to the response sent by the server.

HTML code

We will take advantage of the power of the jquery library to intercept a click on the command button (ON, OFF) of each GPIO. The HTML code becomes very simple.

Javascript code

The Javascript code will run in two steps. First we intercept a click on the button using the command jquery $(‘#Dx_State’). On a click, the setButton function is called and the parameters (GPIO, State) are passed to it. The state will be set to 1 to enable output and 0 to stop!

Then the setButton function sends an HTTP request of type POST. To do this, use the $ .post function of jquery (official documentation). Here are how it works:

  • The URL contains parameters and values. We could also pass a JSON but it’s easier to manage it on the Arduino side with the server.arg (“xx”) method. The URL will take the form gpio?id=id_gpio&state=state_gpio
  • The done function is used to execute code as soon as a valid response is received from the server
  • The fail function is used to perform a processing in the event of an error. Practice for the development

The processing is very simple, by convention, the Arduino code returns the request completed by a success flag which takes the value 1 if the ESP8266 has correctly performed the requested request, 0 if it is not. One could imagine other states and modify the display accordingly or make appear a notification …

Arduino Code

This is exactly the same as for measurements. The updateGpio() function is called when the server receives a request to /gpio.

We will retrieve the parameters passed to the server (gpio, state) using the server.arg(“id”) method. Then it’s classic cooking. We just need to be careful because we get a character string, so we need to make a small conversion to point to the correct pin (Pin). Regardless of the treatment, what matters is to respond to the client, as he awaits his response impatiently. We build a JSON in which we copy (for example) the request and add a success (success) which could take 1s if OK, 0 if KO, another value in case of error … and we send it all with A server.send().

For example, to activate pin D7 the following JSON object

Adding resources to the SPIFFS file system

It is possible to avoid fetching resources on the Internet (jquery, bootstrap, bootstrap-table …) by embarking all the resources in the Data directory. After doing some tests, there is not really any gain in terms of performance. The ESP8266 has a fairly limited power, so it does not deliver resources to the browser faster than the CDN.

On the other hand, if you do not want the ESP8266 to be able to access the internet and access it in AP mode (access point), it is necessary to take everything into the SPIFFS zone

esp8266 firefow temps chargement ressources webserver

To retrieve the resources, paste the URL into a browser and paste the resulting text into a text file. It is best to place the files in separate folders to facilitate the now. Be careful that the full path (directory / file.ext) does not exceed 31 characters (SPIFFS limitation).

Ressource Folder File name
 bootstrap.min.css css bootstrap.min.css
 bootstrap-table.min.css css bootstrap-table.min.css

It only remains to modify the paths in the Head, which gives for example.

Assemble everything

As usual, here is the Pug code to generate the HTML interface file. You can modify it according to your needs and to do your tests.

Interface Pug Template

HTML code generated

Otherwise here is the HTML file

Arduino code

And finally the Arduino code

The resulting interface

By accessing the ESP8266, you now have measurements that are displayed

esp8266 webserver dht22 bmp180 bootstrap

As well as full interaction with the GPIO. The label (On / Off) is updated after the ESP8266 has executed the command.

esp8266 webserver dht22 bmp180 bootstrap gpio

In the next tutorial we will see how to save measurements to create a history and create graphs and gauges.

Subscribe to the weekly newsletter

No spam and no other use will be made of your email. You can unsubscribe anytime.

  • tiago

    Congratulations big project, I did not understand the name of the json file and the html file to salver in arduino IDE.

DIY Projects