ESP32 Devlog 9— Real-Time Weather Station Web

With AJAX, XML, and HTTP Connection Control

It was hard to learn AJAX and XML in a short time. Now, i’m going to utilize the asynchronous requests with AJAX and data sending with XML for the ESP32 Weather Station

A. The Basics of AJAX

AJAX Stands for Asynchronous Javascript and XML. It is a method to send a customized request from the client to the server. On javascript lingo, there is a built in object called XMLHttpRequest(). In this devlog, you can do an array of utilities such as:

• Customize your own HTTP Header using open() method
• Control the HTTP Header timeout using setTimeout() method

You can learn more about AJAX in w3schools.

B. The Basics of XML

XML Stands for eXtensible Markup Language, which the structure is more like your friend HTML. It uses custom tags to define the data structure within an file and in my opinion, a graceful way to write a tree structure which data usually comes with. But in this devlog, fortunately the height of the data tree is only 1. The data we are using are none other than the readings from BMP180. which is temperature, pressure, and altitude. Javascript users can fetch the XML file in form of an array literal or collection of objects.

You can learn more about XML in w3schools.

C. The Concept

1. First, the ESP32 web server responses the HTTP GET request from the client with HTML content. The HTML consists of a javascript code snippet and body of HTML.
2. Then, the browser used by the client has an AJAX script which sends a “send me a XML data” HTTP GET signal with customized header to the server asynchronously.
3. The ESP32 web server receives the GET request and reads the customized header value that acts like a sensor.
4. The ESP32 web server sends the client an XML data which transported with HTTP GET
5. The client browser read the data and update the value
6. Repeat step 2 indefinitely

By making the loop from step 2 and step 6, we just made a perpetual updating weather sensor. Works great huh?

D. Configuration and Hardware Requirements

The configuration is basically the same as my previous devlog about BMP180 wiring schema. You just need a functional BMP180, ESP32, and 4 female-female cable. If you able to buy a breadboard or other things to hold those up, i’d really recommend it.

E. Coding

Okay, for the code which i ripped off from Random Nerd Tutorial and modify it to some extent, you just need 3 libraries. That is WiFi, Wire, and Adafruit_BMP085. Do the usual setup with BMP180 and Webserver for ESP32. Then you might see that the HTTP GET header has a custom value, that is update_readings which if you inspect it closer, it gives you -1 value. You might utilize this update_header as a state of the website. You might find the explaination here.

You might get a blank page if you copy the code wrong (as i did when i customize the code snippet). That means you didn’t get the HTML at all which i find it strange until now.

F. Next Project

For simplicity sake, i make the HTML looked ugly and plain. Next time, i’ll make a data visualization using graph.