03 ESP32 Wi-Fi and Web Server | Web Pages to Control LEDs over Wi-Fi in Access Point & Station Modes

for today's lesson you'll learn how to configure the built-in Wi-Fi of your esp32 via the station mode and access point mode you'll learn how to scan available Wi-Fi networks connect to an existing Network and turn your esp32 into station mode to serve up web pages to any connected client within the same network you'll also learn how to create a standalone esp32 web server that can be accessed by any device on a local network at the end of this lesson you will be able to conduct your own experiment to control sequences of the LEDs attached to your esp32 through your laptop or phone's browser hi my name is Joe edgo and welcome to lesson 3 of the iot development training course with esp32 for this experiment you'll need the following materials your esp32 development board three LEDs red green and blue three current limiting resistors values could range from 150 ohms to 470 Ohms a couple of connecting wires a breadboard and a micro USB data cable our circuit connection is fairly easy the blue LED is connected to gpio2 the green LED is connected to gpio 22 and the red LED is connected to gpio23 so let's begin the concept the esp32 supports Wi-Fi protocols 802.11 b g and n and it operates at 2.4 gigahertz in Arduino IDE we will be using the wi-fi.h library to handle the Wi-Fi capability of your esp32 with this we can use the esp32 in either a station mode or a soft access point mode so what's the difference between these two modes in station mode or sta the esp32 connects to an existing Wi-Fi network this is the one created by your wireless router it means that it is just another client to your router similar to your computer tablet or phone in a spatial mode your esp32 gets its IP address from your wireless router's Dynamic host control protocol or DHCP to which it is connected however in soft access point mode or sap mode your esp32 creates its own Wi-Fi network just like Wi-Fi router and acts as a hub for one or more stations in sap mode your esp32 is the center of the network providing connections to other devices like computers tablets or phones it means that your esp32 assigns the IP addresses to the clients however unlike a Wi-Fi router it does not have an interface to a wired Network to connect to the internet thus such mode of operation is called Soft access point also note that the maximum number of stations that can connect to it is only limited to 5. now both the station and soft access point modes allow your esp32 to act as a web server basically it allows to store process and deliver web pages to web clients so let's start writing codes to explore these features let's have a program that scans all the available Wi-Fi networks within the range so I'll start by including the wi-fi.h library and then I'll Define three LEDs red green and blue at gpio 23 22 and 2 respectively in the setup function I'll set the pin mode of these three LEDs as output then start the serial communication and finally set the Wi-Fi mode to station mode Wi-Fi SDA also we need to disconnect from any existing access point if it was previously connected then let's have one second delay before we continue inside the loop function I'll print a message scanning available Networks then as a physical indicator in our prototype I'll turn on the red LED and then turn off the green LED so to scan for available Wi-Fi networks we need to call the scan networks function now this function returns a number that represents the total number of networks found with this we can create a condition that checks if there is an existing Network found then I'll change my LED indicator turn off the red LED and then turn on the green LED and in my serial monitor I'll display the total number of networks found after this I want to display all the available networks found and to do this I need to create a for Loop that iterates from zero up to the total number of networks found represented by n and for each network is starting from Network one I'll print its service set identifier or SSID this is commonly known as the Network's name then after this in close in parenthesis I also want to display the Network's received signal strength indicator or RSSI it is a measurement of how well our esp32 can hear signal from an access point or a router the unit of measure is in decibels or dbm and basically the closer to 0 dbm the better the signal is and then lastly let's also print the Wi-Fi's encryption type if it is open then I'll print open otherwise print three asterisks to denote password protected so let's have a short delay of 50 milliseconds for each Network information to be displayed however if n is 0 it means that there is no available Wi-Fi signal being detected so I'll turn off both the green and the red LEDs I'll put a separator here and then let's pause for about five seconds so we can investigate on the networks found if any before it Loops back to scan again for all available Networks okay let's upload the code I'll open my serial monitor and as you can see the red LED is turned on and the message is scanning available networks is displayed then the green LED is turned on and the four networks were found then it repeats the same process after 5 seconds so Network 1 here has the strongest signal relative to this esp32 it is actually my phone's hotspot and this is the one I'm using to record this circuit so it's very close to my esp32 that's why it has negative 39 decibels which is very very good the three asterisk denote password protected however Network 2 here is my xiaomi repeater placed inside my room and it has open authentication and the signal is also pretty good well typically signal strength reading around negative 60 to negative 70 is good while signal ranging from negative 90 and below is not good and very unstable so that's it for our simple Wi-Fi scanner now let's create a simple Wi-Fi server actually there's a lot of sample codes here and let's check this wi-fi and then simple Wi-Fi server so it says here that this program is a simple web server and lets you blink an LED via the web and that we can turn on and off the LED via the IP address that is dynamically assigned by the router's DHCP so it starts with the same directive wi-fi.h okay let's modify this code by getting three defined constants from our previous code and then paste it here and then these two constants SSID and password correspond to our Target Network's SSID and password to which we want to connect so I'll want to connect to jogo Galaxy and its password is one two three four five six seven eight then this code sets the web server port to a T in the setup function I'll change this gpio5 to red LED beam duplicate this code to include the green and the blue pin as well as output and then this wi-fi that begin initializes the Wi-Fi libraries network setting and provides the current status so the next code block is a while loop it checks if the Wi-Fi status is not yet connected to a network it continuously prints this dot every 500 milliseconds so I'll insert here the red lead indicator that blinks while it is trying to connect by the way this code is one of the simplest way to make the LED Blink by reading its current status using the digital read function and then negating it now once it gets out of the loop it means that the esp32 is successfully connected this wi-fi that local IP function gets the dynamically assigned IP address to our esp32 and when this happened I'll turn off the red LED and then turn on the green LED finally the web server can begin so inside the void Loop there's a couple of codes here with their corresponding explanation so basically this code listens for incoming clients we will be using a web browser through this laptop or through my phone then if you get a client this string current line will hold the incoming data from the client and then this while loop will happen so long as the client is connected then if there is a buy to read from the client read that byte and if that byte is a new line character perform another check if that current line is a blank that's the end of the client HTTP request so send a response now in here the HTTP headers always starts with a response code and the content type so the client knows what's coming followed by a blank line and this is the content of the HTTP response that follows the header these two hyperlinks responses slash H to turn the blue LED on pin 2 on and then the slash L to turn the blue LED on pin 2 off and the HTTP responds ends with another blank line now this is where the control happens this code checks if the client request was get slash H to turn on the blue LED pin or get slash L to turn off the blue LED pin then close the connection and repeat the entire process again to listen for incoming clients again so let's upload this code to see how it works and as you can see the red LED is blinking as it tries to connect to jogo Galaxy Network by the way I intentionally turn off my mobile hotspot so that you can see it connecting now I'll enable my mobile hotspot and the green LED turns on and a message says Wi-Fi connected and the assigned IP address to this device is displayed so I'll copy this one and now to test if the web server is working I'll connect this laptop to this jogo Galaxy Network as well so that they are using the same network and then I'll open a browser and paste this IP address and you can see the content of the HTTP response you can also verify this in the serial monitor that a new client was received responded to and then disconnected so when I click this link the client request was get each and the blue LED turns on and then if I click the other link the client request was get L and the blue LED turns off so for every client request either to turn on or off the led the client gets disconnected and repeats the same process for another incoming client's request now let's have another example and this time instead of using a Wi-Fi server we'll use the web server.h Library why because it has some additional methods that will help us to set up a server and handle incoming HTTP request easily also instead of connecting to an existing Network as we did in station mode we'll create our own Wi-Fi network via soft access point mode so I'll Define the name of my network esp32 underscore AP I'll also set the password to one two three four five six seven eight and for this experiment I'll be working with just the blue LED at gpio2 now to configure our soft access point we need to set an IP address you can set it to your preferred IP address but mine I'll use the commonly used default router IP address which is 192.168.1.1 also the Gateway and the subnet mask next is to create an instance of our web server Library so we can use its function The Constructor of this object takes Port as a parameter this is where the server will be listening to and the default port for HTTP is AD and now you can access the server without needing to specify the port in the URL also I'll declare and initialize our LED status variable so in the setup function I'll set up the serial communication and then set the blue LED pin as output and then we set up the soft access point to establish the Wi-Fi network by providing SSID and then password as well as the local IP Gateway and then the subnet mask now in order to handle the incoming HTTP request we need to specify which code to execute when a particular URL is hit thus we use the on method this method takes two parameters the first one is the URL path and the second one is the name of the function which we want to execute when the URL is hit so for example when a server receives an HTTP request on the root slash LED on path it will trigger the handle underscore LED on function which we are about to create later so we'll do similarly to handle the lead off as well as if the client requested for any URL beyond the specified server on functions it should respond with an HTTP status 404 not found message for our user now let's start our server we call the begin method and to handle the actual incoming HTTP request we need to call the handle client method on the server object and depending on the request this led status variable could change its value and this is the one that we need to check in order to change the blue LED pin State accordingly okay I mistyped here the Blue lead pin and now the next thing to do is for us to create these four functions that will handle the corresponding actions for each request so let's start with the handle on connect this function sets the lead status to low and then prints a message Led status off and finally respond to the HTTP request here we use the send method of the web server object now this method can accept multiple parameters but in its simplest form it accepts three the HTTP Response Code the content type and the actual content so code 200 is one of the HTTP status codes which corresponds to the OK response and then we specify the content type as text HTML and finally the content in HTML well instead of placing a bunch of HTML codes here I'll simply create a function get HTML that returns an HTML content and call it from here so this get HTML function will be responsible for generating a web page whenever the esp32 web server gets a request from a web client so I'll start by creating a string variable HTML code and then this doctype declaration indicates that we are sending HTML code so what we're going to do here is to Simply concatenate HTML codes into a big string and then return it to the server.send function so next to concatenate is this head containing the meta viewport element which makes the web page responsive in any web browser and then of course the title of the page now I will not add any Styles yet to make it simple so I'll close the head and add the body section I'll add headings of the web page esp32 web server and then a simple demo using access point mode and now depending on the value of our lead status variable the HTML code will vary if the LED status is high which evaluates as true we add a paragraph blue LED status on Then followed by a hyperlink to the root address slash LED off that says turn it off otherwise the paragraph will be displayed in the web page is blue LED status off and then the hyperlink points to the root address is slash LED on with the text that says turn it on and that's it our get HTML function looks complete now let's implement the rest of these functions to actually handle the lead on lead off and not found request so I'll duplicate this function and change the name to lead on and then set the LED status to high and print the lead status on again I'll duplicate this one more time and then change the name of this function to let off and then this lead status variable must be set to low as well as in the serial monitor and lastly I'll create a function for this handle not found so it is just a simple 404 error page and then a plain text that says not found so let's upload our code and there's an error okay it looks like we're missing a backslash here so let's try again and it succeeded so now we can see the esp32 underscore AP SSID that we've just created so I'll connect to this network and the password is a one two three four five six seven eight and now to test if our web server is working first I'll open the serial monitor and then hit the reset button and the HTTP server has started now I'll open my browser and then make a request to 192.168.1.1 and there we have it our simple web page being served by the esp32 web server so if I click on this link that says turn it on it requests for the slash LED on and the blue LED turns on and a response of blue LED status on with a new link that says turn it off so now clicking it performs another request and the corresponding handle LED off function is fired thus we see another response from the web server so the ESP is 32 web server simply stores processes and then delivers web pages to web clients well web clients is nothing but a web browser on our laptops and smartphones the communication between client and server takes place using a special protocol called hypertext transfer protocol or HTTP and in this protocol a client initiates communication by making a request for a specific web page using HTTP and the server responds with the content of that web page or an error message if unable to do so like the famous 404 error so the pages delivered by our esp32 web server are mostly HTML documents now if you're good in web development you might want to apply styles to it so I have here some CSS to style the button and the web page appearance now I'll apply my style here for button off as well as four button on and again let's test it one more time to see the effect okay just make sure that we are connected to the esp32ap network I'll open the serial Monitor and the web browser and then perform a request and a more pleasing web page is served again I'll test all the functions that handle the different requests so let's see if the request is not found and we have the net found message we can also test it using our phone's browser just make sure to connect to the same esp32 underscore AP Network as well now for our programming challenge try to create a similar prototype but instead of only one button to turn on and turn off the LED use three buttons to perform two different sequences the green LED turns on when the web server has started and then when the blink LED button is clicked the blue and red LEDs blink accordingly the button change its color and the LED status also change the blinking similarly when the alternate LED button is clicked the blue and the red LEDs blink alternately the buttons change their colors and the LED status is updated clicking the turn off button turns off the blue and the red LEDs and then resets the buttons color and the LED status to off [Music] [Music] again thank you very much for watching and if you've learned something of value here please click the like And subscribe button and don't forget to hit that Bell icon to get notifications for every new video I uploaded for this course see you in the next lesson foreign [Music]

Channel: Education is Life

Views: 29,299

Keywords: STA, station mode, AP, SAP, access point, Wi-Fi, wifi, wi fi, esp32 wifi, soft access point, web server, wi-fi server, wifi server, server.on, server.send, server.begin, wifi.softAP, wifi.softAPConfig, webserver.h, wifi.h, WIFI_STA

Id: rw_1E-2Dwrs

Length: 27min 51sec (1671 seconds)

Published: Wed Sep 28 2022