ESP32 Devlog 8 — Wifi LED Switch

That was a long break

The wait is over. Now, i’m going to all out utilizing the ESP32 builtin WiFi. This time, i shall cover the HTTP Connection over the wireless access point from ESP32 to your phone.

A. The Basics of Arduino WiFi Connection

Connecting to a wireless network is easier to do with your android mobile hotspot. You may easily setup your hotspot name, which later we call that ssid, and the password your phone are using for the mobile hotspot.

For starters, include the WiFi library to your code and save the mobile hotspot name and the password to a global scoped variable.

At the setup, begin ESP32 serial connection at 115200 baud rate to monitor the ESP32 connection status. The WiFi module is instatiated with WiFi begin method using ssid and password as a parameter. You may check the WiFi Status using while loop which the loop ends where the WiFi status returns WL_CONNECTED enumeration. I’ve checked that the status is 6 when not connected and 3 when connected.

After the loop, you may print the local IP address assigned to your ESP32 using the WiFi localIP method.

This status appears at the IDE Serial Monitor. the IP Address may varies.

B. WiFi Connection In-Depth

The WiFi library supported several encryption types like:

• WIFI_AUTH_OPEN for open connection
• WIFI_AUTH_WEP for Wired Equivalent Privacy
• WIFI_AUTH_WPA_PSK for WIFI Protected Access Pre-shared Key
• WIFI_AUTH_WPA2_PSK for 2nd version of WPA/PSK
• WIFI_AUTH_WPA2_ENTERPRISE for WPA Enterprise

The WiFi library also has other functions to read the wireless network name (SSID), Signal strength (RSSI), and MAC Address for the wireless network interface (BSSIDstr). You can also check your Wireless Network Receiver Interface MAC Address by using macAddress getter method.

You may scan all existing network within your area by using the WiFi scanNetworks method, then traverse all of the possibilities using foreach-like loop.

The scanConnection function scans all the available networks.

C. Building a Web Server

The basics of a web server is to understand the networking protocol behind those. Those steps are really complex and quite difficult to be understood. I’m going to break down the loop step one by one:

1. WiFiServer server(80); sets up the server connection over networking media on port 80.
2. WiFiClient client = server.available(); makes the ESP32 opens up a server connection on the same port as we initialize on WiFiServer. The client variable holds the status of the connection and will be passed upon the next conditional procedure.
3. The client connection checker block. When using netcat on linux, you may send the GET / HTTP/1.1 message to the server and the server returns the HTTP GET appropriately with an HTTP/1.1 200 OK reply. The technical HTTP response description can be found here.

Below you could see the connection in action. It was a very low level example of the code without string parser to get the absolute path of the GET request and so on.

You may imagine how much of a work to make the procedures for the HTTP codes like 404 file not found or 503 internal server error. In this simple web server, i only made the 200 OK HTTP server response for sake of simplicity. you may use the netcat command and connect to the local IP with port 80. Then breakspace by pressing the enter button twice and you may see the result.

The process of HTTP Connection from Client (Right) to Serial (Left)

D. CDN is your best friend

Oh yea, i tested it out. You can use Bootstrap 4 CDN and/or FontAwesome 4 CDN to that your webpage server shouldn’t be shabby enough to display static text. You may also use jquery CDN to maximalize the web scripting.

Consider the flash memory limits of the ESP32, you may not store too much due to the limited nature of ESP32. Content Delivery Network (CDN) is great to minimize your ESP32 memory load.

E. Trying out The Web Server Switch

I’m using the Random Nerd Tutorial article about ESP32 Web Server as a reference to make a simple LED switch from a website by utilizing the HTTP GET client message. In this section, the logic behind those are to make several anchor hyperlinks which refers to itself. For example, from your IP address 192.168.0.1, you may assign the href like this:

<a href=“/switchA/off”>Turn Off</a>

Then, the anchor element prompts to the client computer to send a HTTP GET message like this:

GET /switchA/off HTTP/1.1

Finally, the ESP32 server reads the GET message from the client by using the header.indexOf() method. Afterwards, you may assign for each the GET element responses associated to a certain page. This phenomenon in modern web development is called routing. Here’s the example of page routing with arduino server:

if (header.indexOf("GET /26/on") >= 0) {
   Serial.println("GPIO 26 on");
   output26State = "on";
   digitalWrite(output26, HIGH);
} else if (header.indexOf("GET /26/off") >= 0) {
   Serial.println("GPIO 26 off");
   output26State = "off";
   digitalWrite(output26, LOW);
} else if (header.indexOf("GET /27/on") >= 0) {
   Serial.println("GPIO 27 on");
   output27State = "on";
   digitalWrite(output27, HIGH);
} else if (header.indexOf("GET /27/off") >= 0) {
  Serial.println("GPIO 27 off");
  output27State = "off";
  digitalWrite(output27, LOW);
}

Here’s the lamp project from Random Nerd Tutorials. You may seek to their website for the full explaination about the code for setting up a web server LED switch using ESP32 as a web server.

F. Conclusion

Now, by utilizing the world’s probably most customizable switch and server at the cost of low level programming, i could manage to automate the process of data collection from environment and digitalize that data in real time.

I can’t wait to get my hands and to build a mini weather station complete complete with web API shenanigans.