ESP32 server and I/O

In this article, we will add features to our ESP32. The latter will now display the state of an LED, a button and a potentiometer in addition to allowing the state of the LED to be changed.

Be sure to read the article Web Server on the ESP32 before starting this part.

Warning: the ESP32 is not tolerant to 5V on the I/O. Use the 3.3V for as a power supply for your circuits.

Read inputs

Reading a digital pin is done using the digitalRead function. On the circuit, the button will be on pin 23 so it will be possible to display the state of the button with a simple test.

if(digitalRead(23))
  client.print("off");
else
  client.print("on");

Reading the potentiometer uses the analogRead function. On the circuit, the potentiometer will be connected to pin 34 (ADC1:6). The potentiometer value will be displayed directly.

client.print(analogRead(34));

Write outputs

To change the state of the LED, we'll use the digitalWrite function. The LED will be connected to pin 15 with a 1kohm resistor in series. The cathode of the LED will be connected to the GND.

To receive the status command from the browser, we will add a button in our html code. The button will make an html request using an URL that will contain the IP address of the ESP32, as well as the desired state of the LED.

Added the button in the HTML code.

if (led1State) 
  client.println("<p><a href=\"/LED1/off\"><button>ON</button></a></p>"); 
else 
  client.println("<p><a href=\"/LED1/on\"><button>OFF</button></a></p>");

In the previous code, we add a button in the html page which displays the current state of the button, and which calls the URL with the IP and the text /LED1/X where X is the new desired state.

To retrieve the information in the URL, you will first have to keep the html request received, then analyze it to see if you can find the GET command with one of the two hrefs configured in the button.

// add full http request fetching 
char rxData = client.read(); 
rxHttpRequest+=rxData; 
// Added parsing of the request, when it is received in full 
if (rxHttpRequest.indexOf("GET /LED1/on") >= 0) 
{ 
  digitalWrite(15,1); // output management 
  led1State=1; // manage state variable to modify button 
} 
if (rxHttpRequest.indexOf("GET /LED1/off") >= 0) 
{ 
  digitalWrite(15,0); // output management 
  led1State=0; // management of the state variable to modify the button 
}

It will also be necessary to activate the output LED in the setup function with the pinMode function.

pinmode(15,OUTPUT);

Finally, when you close the connection with the client, you have to empty the http request. So here is the full code for now. 

#include <Arduino.h> 
#include <WiFi.h> 
// Wi-Fi network information 
// You must replace the information with your network information 
const char* ssid = "devRouter"; 
const char* password = "#1234#fafa"; 
// Create a server on port 80 
WiFiServer server(80); 
// Create a string to keep the http request 
String rxHttpRequest = ""; 
//Variable to keep the state of the LED 
boolean led1State = 0; 

void setup() 
{ 
  // We will use the console to display information 
  Serial.begin(9600); 
  //Begin network connection 
  Serial.print("Network connection"); 
  Serial.
  WiFi.disconnect(); 
  WiFi.begin(ssid, password); 

  // While status is not connected, wait... 
  while (WiFi.status() != WL_CONNECTED) 
  { 
    delay(500); 
    Serial. print("."); 
  } 
  // Once connected, we display the IP address of the ESP32 
  Serial.println(""); 
  Serial.println("Connected to WiFi"); 
  Serial. println("IP address = "); 
  Serial.println(WiFi.localIP()); 
  server.begin(); 
  pinMode(15,OUTPUT); 
}

void loop() 
{ 
  // Check if there is a client on the 
  WiFiClient server client = server.available(); 
  if(customer) 
  { 
    Serial.println("New Customer."); 
    // stay in the loop as long as the client is connected 
    while (client.connected()) 
    { 
      if (client.available()) // Check if the client has sent data 
      { 
        char rxData = client.read(); 
        rxHttpRequest+=rxData; 
        Serial.write(rxData); 
        if (rxData == '\n') // if this is the end of the received command 
        { 
          //analysis of the received command 
          if (rxHttpRequest.indexOf("GET /LED1/on") >= 0)
          { 
            digitalWrite(15,1); // output management 
            led1State=1; // manage state variable to modify button 
          } 
          if (rxHttpRequest.indexOf("GET /LED1/off") >= 0) 
          { 
            digitalWrite(15,0); // output management 
            led1State=0; // management of the state variable to modify the button 
          } 
          Serial.println(""); 
          Serial.println("Load HTML page"); 
          client.println("HTTP/1.1 200 OK"); //send new page 
          client. println("Content-Type: text/html"); 
          client.println(); 
          client.println("<html>
          client. println("<body>"); 
          client.print("<p>Button="); 
          if(digitalRead(23)) 
            client.print("off"); 
          else 
            client. print("on"); 
          client. println("</p>"); 
          client.print("<p>Potentiometer="); 
          client. print(analogRead(34)); 
          client. println("</p>"); 
          if (led1State) 
            client.println("<p><a href=\"/LED1/off\"> <button>ON</button></a></p>"); 
          else 
            client.println("<p><a href=\"/LED1/on\"><button>OFF</button></a></p>");

          client.println("</body>");
          client.println("</html>");
          client.stop();
          rxHttpRequest = "";
        } 
      } 
    } 
  } 
}

Here is the result you should get in the browser.

If the circuit is completed, you should obtain the reading of the button and the potentiometer, in addition of being able to control the LED.

Note that you need to refresh the browser in order to see the changes for the button and the knob. You can add the following command in the html header to cause the automatic refresh every 2s.

<meta http-equiv="refresh" content="2">

Also, we could improve the aesthetics of our page by using CSS styles. The following code is used to add a style for the button and the text in general.

<style> 
html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;} 
.button1 { background-color: #d1c819; border:2px solid #d1c819;color:white; width: 100px; border-radius: 12px; padding-top: 10px; padding-bottom: 10px; 
transition-duration: 0.1s; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;} 
.button1:hover { background-color: white; color:black ;border: 2px solid #d1c819;} 
.buttonoff {background-color: #27282e;border:2px solid #27282e;} 
.buttonoff:hover { background-color: white; color:black ;border: 2px solid #27282e;} 
</style>

To apply the style to our site, just add this code to our html header and modify the button call as follows:

if (led1State) 
  client.println("<p><a href=\"/LED1/off\"><button class=\"button1\">ON</button></a></p>") ; 
else 
  client.println("<p><a href=\"/LED1/on\"><button class=\"button1 buttonoff\">OFF</button></a></p>");

To simplify the addition of html code in the header, it is possible to use a constant character array and define its content as literal. It avoids having to put the \ everywhere in front of the ” or at the end of the lines.

Complete code

Here is the full code with styling. Note that the site has a title and even an icon.

#include <Arduino.h> 
#include <WiFi.h> 
// Wi-Fi network information 
// You must replace the information with your network information 
const char* ssid = "devRouter"; 
const char* password = "#1234#fafa"; 
// html code of the header  
const char pageHeadHtml[] = R"( 
HTTP/1.1 200 OK 
Content-Type: text/html 
Connection: close 

<!DOCTYPE html> 
<html> 
<meta http-equiv="refresh" content ="2"> 
<head><meta name="viewport" content="width=device-width, initial-scale=1"> 
<title>ESP32 Server</title> 
<link rel="icon" href=" https://www.iconsdb.

html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;} 
.button1 { background-color: #d1c819; border:2px solid #d1c819;color:white; width: 100px; border-radius: 12px; padding-top: 10px; padding-bottom: 10px; 
transition-duration: 0.1s; text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;} 
.button1:hover { background-color: white; color:black ;border: 2px solid #d1c819;} 
.buttonoff {background-color: #27282e;border:2px solid #27282e;} 
.buttonoff:hover { background-color: white; color:black ;border: 2px solid #27282e;} 
</style> 
</head> 
<body><h1> ESP32 server </h1> 
)"; 
// Create a server on port 80 
WiFiServer server(80);
// Create a string to keep the http request 
String rxHttpRequest = ""; 
//Variable to keep the state of the LED 
boolean led1State = 0;

void setup() 
{ 
  // We will use the console to display information 
  Serial.begin(9600); 
  //Begin network connection 
  Serial.print("Network connection"); 
  Serial.println(ssid); 
  WiFi.disconnect(); 
  WiFi.begin(ssid, password); 
  // While status is not connected, wait... 
  while (WiFi.status() != WL_CONNECTED) 
  { 
    delay(500); 
    Serial. print("."); 
  } 
  // Once connected, we display the IP address of the ESP32 
  Serial.println(""); 
  Serial.println("Connected to WiFi"); 
  Serial.println("IP address = "); 
  Serial.println(WiFi.localIP()); 
  server.begin();
  pinMode(15,OUTPUT); 
}

void loop() 
{ 
  // Check if there is a client on the 
  WiFiClient server client = server.available(); 
  if(customer) 
  { 
    Serial.println("New Customer."); 
    // stay in the loop as long as the client is connected 
    while (client.connected()) 
    { 
       if (client.available()) // Check if the client has sent data 
       { 
          char rxData = client.read(); 
          rxHttpRequest+=rxData; 
          Serial.write(rxData); 
          if (rxData == '\n') // if this is the end of the received command 
          { 
           //analysis of the received command 
           if (rxHttpRequest.indexOf("GET /LED1/on") >= 0) 
           {
             digitalWrite(15,1); // output management 
             led1State=1; // manage state variable to modify button 
           } 
           if (rxHttpRequest.indexOf("GET /LED1/off") >= 0) 
           { 
             digitalWrite(15,0); // output management 
             led1State=0; // management of the state variable to modify the button 
           } 
           client.print(pageHeadHtml); 
           client.print("<p>Button="); 
           if(digitalRead(23)) 
             client.print("off"); 
           else 
             client.print("on"); 
           client.println("</p>"); 
           client.print("<p>Potentiometer="); 
           client.print(analogRead(34));
           client. println("</p>"); 
           if (led1State) 
             client.println("<p><a href=\"/LED1/off\"><button class=\"button1\">ON</button></a></p>") ; 
           else 
             client.println("<p><a href=\"/LED1/on\"><button class=\"button1 buttonoff\">OFF</button></a></p>"); 
           client.println("</body>"); 
           client.println("</html>"); 
           client.stop(); 
           rxHttpRequest = ""; 
        } 
      } 
    } 
  } 
}