Arduino Nano ESP32 - Control LED via Web

In this tutorial, we are going to learn how to control an LED through a web interface using a browser on a PC or smartphone, utilizing the Arduino Nano ESP32. In detail, , the Arduino Nano ESP32 will be programmed to work as a web server. Let's assume that the IP address of the Arduino Nano ESP32 is 192.168.0.3. Here are the details of how it works:

Arduino Nano ESP32 LED web browser

We will learn through two example codes:

The tutorial offers the fundamentals that you can readily and innovatively customize to achieve the following:

Hardware Preparation

1×Arduino Nano ESP32
1×USB Cable Type-C
1×LED
1×220 ohm resistor
1×Breadboard
1×Jumper Wires
1×(Recommended) Screw Terminal Adapter for Arduino Nano

Or you can buy the following sensor kit:

1×DIYables Sensor Kit 30 types, 69 units
Disclosure: Some of the links provided in this section are Amazon affiliate links. We may receive a commission for any purchases made through these links at no additional cost to you. We appreciate your support.

Overview of LED and Arduino Nano ESP32

If you do not know about LED and Arduino Nano ESP32 (pinout, how it works, how to program ...), learn about them in the following tutorials:

Wiring Diagram

The wiring diagram between Arduino Nano ESP32 and LED

This image is created using Fritzing. Click to enlarge image

Arduino Nano ESP32 Code - HTML content is embedded into Arduino Nano ESP32 code

/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-led-via-web */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to LED const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT AsyncWebServer server(80); int LED_state = LOW; String getHTML() { String html = "<!DOCTYPE HTML>"; html += "<html>"; html += "<head>"; html += "<link rel='icon' href='data:,'>"; html += "</head>"; html += "<p>LED state: <span style='color: red;'>"; if (LED_state == LOW) html += "OFF"; else html += "ON"; html += "</span></p>"; html += "<a href='/led1/on'>Turn ON</a>"; html += "<br><br>"; html += "<a href='/led1/off'>Turn OFF</a>"; html += "</html>"; return html; } void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // home page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); Serial.println("GET /"); request->send(200, "text/html", getHTML()); }); // Route to control the LED server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); Serial.println("GET /led1/on"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); request->send(200, "text/html", getHTML()); }); server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); Serial.println("GET /led1/off"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); request->send(200, "text/html", getHTML()); }); // Start the server server.begin(); } void loop() { // Your code here }

Detailed Instructions

To get started with Arduino Nano ESP32, follow these steps:

  • If you are new to Arduino Nano ESP32, refer to the tutorial on how to set up the environment for Arduino Nano ESP32 in the Arduino IDE.
  • Wire the components according to the provided diagram.
  • Connect the Arduino Nano ESP32 board to your computer using a USB cable.
  • Launch the Arduino IDE on your computer.
  • Select the Arduino Nano ESP32) board and its corresponding COM port.
  • Open the Library Manager by clicking on the Library Manager icon on the left navigation bar of Arduino IDE.
  • Search “ESPAsyncWebServer”, then find the ESPAsyncWebServer.
  • Click Install button to install ESPAsyncWebServer library by lacamera.
Arduino Nano ESP32 ESPAsyncWebServer library
  • You will be asked to install the dependency. Click Install All button.
Arduino Nano ESP32 ESPAsyncWebServer dependencies library
  • Copy the above code and open with Arduino IDE
  • Change the wifi information (SSID and password) in the code to yours
  • Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
  • Open the Serial Monitor
  • Check out the result on the Serial Monitor.
COM6
Send
Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.3
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • You will see an IP address, for example: 192.168.0.3. This is the IP address of the Arduino Nano ESP32 Web Server
  • Open a web browser and enter one of the three formats below into the address bar:
192.168.0.3
192.168.0.3/led1/on
192.168.0.3/led1/off
  • Kindly be aware that the IP address might vary. Please verify the current value on the Serial Monitor.
  • You will also see the below output on Serial Monitor
COM6
Send
Connecting to WiFi... Connected to WiFi Arduino Nano ESP32 Web Server's IP address: 192.168.0.3 Arduino Nano ESP32 Web Server: New request recieved: GET / Arduino Nano ESP32 Web Server: New request recieved: GET /led1/on Arduino Nano ESP32 Web Server: New request recieved: GET /led1/off
Autoscroll Show timestamp
Clear output
9600 baud  
Newline  
  • Check LED state
  • You will see the web page of Arduino Nano ESP32 board on the web browser as below
Arduino Nano ESP32 LED web browser
  • You are now able to control the LED on/off via the web interface

Arduino Nano ESP32 Code - HTML content is separated from Arduino Nano ESP32 code

As a graphic web page contains a large amount of HTML content, embedding it into the Arduino Nano ESP32 code as before becomes inconvenient. To address this, we need to separate the Arduino Nano ESP32 code and the HTML code into different files:

  • The Arduino Nano ESP32 code will be placed in a .ino file.
  • The HTML code (including HTML, CSS, and Javascript) will be placed in a .h file.

Detailed Instructions

  • Open Arduino IDE and create new sketch, Give it a name, for example, newbiely.com.ino
  • Copy the below code and open with Arduino IDE
/* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-led-via-web */ #include <WiFi.h> #include <ESPAsyncWebServer.h> #include "index.h" // Include the index.h file #define LED_PIN D5 // The Arduino Nano ESP32 pin connected to LED const char *ssid = "YOUR_WIFI_SSID"; // CHANGE IT const char *password = "YOUR_WIFI_PASSWORD"; // CHANGE IT AsyncWebServer server(80); int LED_state = LOW; String getHTML() { String html = webpage; // Use the HTML content from the index.h file html.replace("%LED_STATE%", LED_state ? "ON" : "OFF"); // update the led state return html; } void setup() { Serial.begin(9600); pinMode(LED_PIN, OUTPUT); digitalWrite(LED_PIN, LED_state); // Connect to Wi-Fi WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("Connecting to WiFi..."); } Serial.println("Connected to WiFi"); // Print the ESP32's IP address Serial.print("Arduino Nano ESP32 Web Server's IP address: "); Serial.println(WiFi.localIP()); // home page server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); Serial.println("GET /"); request->send(200, "text/html", getHTML()); }); // Route to control the LED server.on("/led1/on", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); Serial.println("GET /led1/on"); LED_state = HIGH; digitalWrite(LED_PIN, LED_state); request->send(200, "text/html", getHTML()); }); server.on("/led1/off", HTTP_GET, [](AsyncWebServerRequest *request) { Serial.println("Arduino Nano ESP32 Web Server: New request received:"); Serial.println("GET /led1/off"); LED_state = LOW; digitalWrite(LED_PIN, LED_state); request->send(200, "text/html", getHTML()); }); // Start the server server.begin(); } void loop() { // Your code here }
  • Change the WiFi information (SSID and password) in the code to yours
  • Create the index.h file On Arduino IDE by:
    • Either click on the button just below the serial monitor icon and choose New Tab, or use Ctrl+Shift+N keys.
    Arduino IDE 2 adds file
    • Give the file's name index.h and click OK button
    Arduino IDE 2 adds file index.h
    • Copy the below code and paste it to the index.h.
    /* * This Arduino Nano ESP32 code was developed by newbiely.com * * This Arduino Nano ESP32 code is made available for public use without any restriction * * For comprehensive instructions and wiring diagrams, please visit: * https://newbiely.com/tutorials/arduino-nano-esp32/arduino-nano-esp32-controls-led-via-web */ #ifndef WEBPAGE_H #define WEBPAGE_H const char* webpage = R"=====( <!DOCTYPE HTML> <html> <head> <link rel='icon' href='data:,'> </head> <p>LED state: <span style='color: red;'>%LED_STATE%</span></p> <a href='/led1/on'>Turn ON</a> <br><br> <a href='/led1/off'>Turn OFF</a> </html> )====="; #endif
    • Now you have the code in two files: newbiely.com.ino and index.h
    • Click Upload button on Arduino IDE to upload code to Arduino Nano ESP32
    • Access the web page of Arduino Nano ESP32 board via web browser on your PC or smartphone as before. You will see it similar to the previous code as below:
    Arduino Nano ESP32 LED web browser

    ※ NOTE THAT:

    • If you modify the HTML content in the index.h and does not touch anything in newbiely.com.ino file, when you compile and upload code to ESP32, Arduino IDE will not update the HTML content.
    • To make Arduino IDE update the HTML content in this case, make a change in the newbiely.com.ino file (e.g. adding empty line, add a comment....)

    You can readily and innovatively customize the above ocde to achieve the following:

    • Controlling multiple LEDs through the web
    • Redesigning the web user interface (UI)