Build an ESP32 Web Server with Arduino IDE

in this video we're going to learn how to create the simple web server with the ESB 32 to control outputs the webserver you'll build can be accessed with any device that has a browser in your local network before going straight to the project it's important to outline what the webserver will do so that it's easier to follow the steps later on the webserver you'll build can control two LEDs connect to the ESP 32 GPIO is 26 and 27 you can access the ESB 32 webserver by typing the ESB 32 IP address on a browser on the local network by clicking the buttons on your webserver page you can instantly change the state of each LED this is just a simple example to illustrate how to build the webserver the idea is to replace those LEDs with a relay or any other electronic component that you want to control start by building the circuit connect 12 is 2 RESP 32 as shown in the following schematic diagram with one LED connect to GPIO 26 and another 2 GPIO 27 after wiring the circuit the next step is uploading the code gr e SP 32 copy the code provided in the project page to your Arduino IDE but don't upload it yet you need to make some changes to make it work for you first you need to modify these two variables with your network credentials type your SSID and password so that your SP 32 can establish a connection with your router now you can upload the code and it will work straight away don't forget to check if you have the right board and compart selected otherwise you'll get an error message when trying to upload open the serial monitor at the but read of 11 5200 the ESP 32 connects to Wi-Fi and that puts the ESP IP address on the serial monitor copy that IP address because you need it to access the web server open your browser type the ESP IP address and you'll see this page this page is sent by the ESP 32 when you make a request on the ESP IP address if you take a look at the serial monitor you can see what's going on on the background the ESP receives an HTTP request from a new client in this case your browser you can also see other information about the HTTP request these fields are called HTTP other fields and they define the operating parameter of an HTTP transaction let's test the web server click the button to turn GPIO 26 on the ESP receives a request on the slash 26 slash on URL and turns the LED 26 on and the LED state is also updated on the web page as you can see test GPIO 27 button and check that it works in a similar way now let's take a closer look at the code to see how it works the very first thing you need to do is to include the Wi-Fi library as mentioned previously you need to insert your SSID and password in these variables then this line sets your web server to part eighty this line declares the string variable to start the other of the HTTP requests here you create some variables to start the current state of your outputs if you want to add more outputs and save the corresponding state you need to create more variables you also need to assign a GPIO to your outputs in this case we're using GPIO 26 and GPI 27 you can use any other suitable GPIO s now let's see what happens in the set up the setup function only runs once when your ESP first boots first we start the serial communication at the word rate of 11 5200 for debugging purposes you also define your GPIO s as outputs and set them to low to start a Wi-Fi connection use the Wi-Fi dot begin function you wait for a successful connection and then the ESP IP address is printed in the serial monitor in the loop we program what happens when a new client establishes a connection with the webserver the ESP is always listening for incoming clients with this line when a request is received from a client we'll save the incoming data this while loop will always be running as long as the client stays connected we don't recommend changing this part of the code unless you know exactly what you're doing this section of v and else statements checks which button was pressed in your webpage and controls the outputs accordingly as we've seen previously we make a request on a different urls depending on the button we press for example if you press the GPIO 26 unbuttoned the URL changes to the ESP IP address followed by slash 26 slash on and we received that information on the HTTP either so we can check if the error contains the expression get slash 26 slash on and if it contains the code prints the message on the serial monitor changes the output 26 state variable to 1 and turns the LED on this process is similar for the other buttons so if you want to add more outputs you should modify this part of the code to include them the next thing you need to do is generate the webpage the ESP 32 will be sending a response to your browser with some HTML text to display the web page the web page is sent to the client using the client dot println function you should enter what you want to send to the client as an argument the first text you should always send is this line that indicates that we're sending HTML then this line makes the web page responsive in any web browser and this one is used to prevent requests related to the favicon you don't need to worry about this line next we have some CSS to style the buttons and the webpage appearance we choose dal Vatika font define the content to be displayed as a block and aligned at the center we style our buttons with some properties to define color size border and so on it will defining the style for a second button with all the properties of the button we've defined earlier but with a different color this will be the style for the off button in this line you set the first styling of your webpage you can change this text whatever you like this line writes a paragraph to display the gpio 26 current state as you can see we used output 26 state variable so that the state updates instantly when these variable changes then we display the on or the off button depending on the current state of the gpio we use the same procedure for GPIO 27 finally when the HTTP request and response ends we cleaved the other variable and stopped the connection with a client in summary now that you know how the code works you can modify the code and duplicate some parts to add more outputs click the first link in the video description to download the code and find all the resources needed to complete this project thanks for watching and don't forget subscribe

Channel: Rui Santos

Views: 137,943

Keywords: rui santos, randomnerdtutorials, random nerd tutorials, ESP32 Web Server Arduino IDE, ESP32 Web Server Arduino code, ESP32 Web Server Arduino Tutorial, ESP32 Web Server project, Build an ESP32 Web Server with Arduino IDE, Build an ESP32 Web Server with Arduino IDE code and schematics

Id: ApGwxX6VVzk

Length: 8min 12sec (492 seconds)

Published: Mon Jul 16 2018