Dear friends welcome to another ESP32 video tutorial! In this video, we are going to build a simple ESP32 Web Server! We are also going to learn how to make some requests to it using a web browser. There is a lot to cover, so let’s get started!
Intro to the ESP32 Web Server Tutorial
Hello, guys, I am Nick and welcome to educ8s.tv a channel that is all about DIY electronics projects. In this channel, I share everything about the projects I build to help you develop similar projects or inspire you to start making things because it is easy, fun and creative. Subscribe to the channel now if you do not want to miss any future video.
Today’s project is this. An easy to build ESP32 Web Server. If we open a Web Browser and make a request to the IP address of the ESP32, an HTML page will be loaded with the readings we get from the BME280 sensor. The values are updated once every minute. The BME280 sensor can measure the temperature, the humidity, and the barometric pressure and it communicates with the ESP32 using the I2C interface. Check the ESP32 Weather Station project for more information. The HTML page also enables us to control the state of an LED which is connected to the ESP32 board. We can set the state of the LED here and when we press the Submit button the state of the LED changes. How cool is that! In my opinion, this is a very useful functionality that it will enable us to build some very interesting projects in the future! Let’s now see how to build this project.
WHERE TO BUY
100Ω Resistor: http://educ8s.tv/part/Resistors
Small Breadboard: http://educ8s.tv/part/SmallBreadboard
Full disclosure: All of the links above are affiliate links. I get a small percentage of each sale they generate. Thank you for your support!
The total cost of the project is around 10$. You can find links to all the parts I use in the description of the video below. You can also use an ESP8266 if you wish but you will have to make some changes to the code of the project.
If you are not familiar with it, the ESP32 is a new WiFi-enabled chip that just hit the market. It offers everything a maker wants, like WiFi, Bluetooth, two processing cores and a large amount of memory with a cost of around 7$.
Schematic Diagram of the ESP32 Web Server Project
I have connected the BME280 sensor to pins 26 and 27 of the ESP32 board, and the LED to digital pin 32 according to this schematic diagram. You can find a link to the schematic diagram in the description of the video below. As you can see the connection is extremely easy. Now, all we have to do is to load the code. If you have a problem uploading the code to the board try pressing the Boot button after pressing the upload button on the Arduino IDE. After the uploading procedure is complete, open the serial monitor and write down the local IP address of the ESP32 server. Now, if we open up any web browser and type in this IP address of the server, the server will create an HTML page with the values from the sensor and two radio buttons that control the state of the LED. We can turn the LED ON or OFF by selecting a state and pressing the Submit button! Our ESP32 web server works fine! Let’s now see the software side of the project.
📥 ESP32 BME280: https://github.com/Takatsuki0204/BME280-I2C-ESP32
📥 Web Server: https://github.com/bbx10/WebServer_tng
In order the code to compile we need to download two libraries. We need a library for the sensor and the WebServer library. The WebServer library for the ESP32 is not ready yet, so I am going to use a port of the ESP8266 WebServer library for the ESP32 which works fine. This library provides some very useful methods that will help us set up the server and handle incoming HTTP requests without needing to worry about low-level implementation details. You can find links to all the libraries in the description of the video below.
At first, we create a WebServer object, and we will pass the port where the server will be listening to. Since 80 is the default port for HTTP, we will use this value. Next, we initialize the sensor, we connect to the wifi network, and after this, we start the server.
In the beginServer function, we define a handling function for a request to the server. So, if we receive a request to the root path, it will trigger the execution of the handleRoot function. If the request does not contain any arguments, the server will reply with an OK message, and it will load the HTML page with values from the sensor. If the request to the server contains the LED argument, it will trigger the handleSubmit function.
This function retrieves the value of the LED variable and sets the state of the LED which is connected to the ESP32 board. Finally, it updates the HTML page.
Finally, to handle the actual incoming requests, we need to call the handleClient method on the server object in the main loop function. Please study the code and experiment with it to better understand it. Only by building this project and by experimenting with it you are going to understand exactly how it works. You can easily modify this code if you wish to satisfy your needs and handle many more requests. As always you can find the code of the project in a link in the video description.
CODE & SCHEMATICS
SUBSCRIBE ON YOUTUBE
Never miss a video: Subscribe to educ8s.tv