Build an ESP8266 Web Server with Arduino IDE - Code and Schematics

in this video you're going to learn how to create a simple web server with the esp8266 to control outputs the web server 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 web server will do so that it's easier to follow the steps later on the web server you'll build controls to LEDs connect to the esp8266 GPIO s 4 and 5 you can access the ESP web server by typing the ESP IP address on a browser in your local network by clicking the buttons on your web server page you can instantly change the state of each LED this is just a simple example to illustrate how to build the web server the idea is to replace those LEDs with a relay or any other electronic component you want to control start by building the circuit connect two LEDs to your ESP as shown in the following schematic diagram with one LED connect two GPIO five and another two GPIO 4 after wiring the circuit the next step is uploading the coachee RESP make sure you have the esp8266 add-on installed in your arduino ide 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 you need to modify these two variables with your network credentials type your SSID and password so that your ESP connect stablish a connection with your router now you cannot pull the code and it will work straight away don't forget to check if you have the right board and compart selected open the serial monitor at the budget of 11 5200 the ESP connects to Wi-Fi and not 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 when you make a request to 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 parameters of an HTTP transaction let's test the web server click the button to turn GPIO 5 on the ESP receives a request on the / 5 / on URL and turns LED 5 on the LED state is also updated on the web page test the GPIO 4 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 first thing you need to do is to include the Wi-Fi library as mentioned previously you need to insert your SSID and password inside the double quotes 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 each of your outputs in this case we're using GPIO 5 and GPIO 4 you can use any other suitable GPIO s now let's see what happens in the setup 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 the Wi-Fi connection use the Wi-Fi dot begin function 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 X tablished is 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 well loop will be running as long as the clients disconnect we don't recommend changing this part of the code and unless you know exactly what you're doing this section of V final statements checks which button was pressed in your webpage and controls the outputs accordingly as we've seen previously we make a request on different URLs depending on the button we press for example if you press GPIO v on the URL changes to the ESP IP address followed by / v / on and we receive that information on the HTTP header so we can check if the other contains the expression get / v / on if it contains the code prints a message on the serial monitor changes the output v state variable to 1 and turns the LED on this works similarly 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 web page the ESP 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 request is 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 the Alva tikka 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 etc ear we're 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 said the first having of your webpage you can change this text whatever you like this line writes a paragraph to display the GPI of five current state as you can see we use the output five state variable so that the state updates instantly when these variable changes then we display the yarn or the off button depending on the current state of the GPIO we use the same procedure for GPIO for finally when the HTTP request and response ends we click the other variable and stop the connection with a client in summary now that you know other code works you can modify the code and duplicate some parts to add more outputs you can find all the resources for this project in the link in the description thanks for watching and don't forget subscribe

Channel: Rui Santos

Views: 467,617

Keywords: rui santos, randomnerdtutorials, random nerd tutorials, ESP8266 Web Server Tutorial, ESP8266 Web Server code, ESP8266 Web Server schematics, ESP8266 Web Server project, how to build an ESP8266 web server, Make an ESP8266 web server, Build an ESP8266 Web Server Code and Schematics

Id: dWM4p_KaTHY

Length: 7min 53sec (473 seconds)

Published: Tue Feb 20 2018