In this project you’ll create a standalone web server with an ESP32 that can toggle two LEDs using the Arduino IDE programming environment. If you want to learn more about the ESP32 dev board, read my Getting Started Guide with ESP32.
First, watch the video demonstration below
Preparing the ESP32 board in Arduino IDE
There’s an add-on for the Arduino IDE that allows you to program the ESP32 using the Arduino IDE and its programming language. Follow this tutorial to prepare your Arduino IDE:
- Windows instructions – Installing the ESP32 Board in Arduino IDE
- Mac and Linux instructions – Installing the ESP32 Board in Arduino IDE
Uploading the code
In this example, you’re going to connect two LEDs to the ESP32 that can be controlled remotely through a browser.
Copy the following code to your Arduino IDE to upload it to your ESP32 Dev Module.
/* * Rui Santos * Complete Project Details http://randomnerdtutorials.com */ #include <WiFi.h> // Replace with your network credentials const char* ssid = "YOUR_SSID"; const char* password = "YOUR_PASSWORD"; WiFiServer server(80); const int led1 = 16; // the number of the LED pin const int led2 = 17; // the number of the LED pin // Client variables char linebuf[80]; int charcount=0; void setup() { // initialize the LEDs pins as an output: pinMode(led1, OUTPUT); pinMode(led2, OUTPUT); //Initialize serial and wait for port to open: Serial.begin(115200); while(!Serial) { ; // wait for serial port to connect. Needed for native USB port only } // We start by connecting to a WiFi network Serial.println(); Serial.println(); Serial.print("Connecting to "); Serial.println(ssid); WiFi.begin(ssid, password); // attempt to connect to Wifi network: while(WiFi.status() != WL_CONNECTED) { // Connect to WPA/WPA2 network. Change this line if using open or WEP network: delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); Serial.println("IP address: "); Serial.println(WiFi.localIP()); server.begin(); } void loop() { // listen for incoming clients WiFiClient client = server.available(); if (client) { Serial.println("New client"); memset(linebuf,0,sizeof(linebuf)); charcount=0; // an http request ends with a blank line boolean currentLineIsBlank = true; while (client.connected()) { if (client.available()) { char c = client.read(); Serial.write(c); //read char by char HTTP request linebuf[charcount]=c; if (charcount<sizeof(linebuf)-1) charcount++; // if you've gotten to the end of the line (received a newline // character) and the line is blank, the http request has ended, // so you can send a reply if (c == '\n' && currentLineIsBlank) { // send a standard http response header client.println("HTTP/1.1 200 OK"); client.println("Content-Type: text/html"); client.println("Connection: close"); // the connection will be closed after completion of the response client.println(); client.println("<!DOCTYPE HTML><html><head>"); client.println("<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"></head>"); client.println("<h1>ESP32 - Web Server</h1>"); client.println("<p>LED #1 <a href=\"on1\"><button>ON</button></a> <a href=\"off1\"><button>OFF</button></a></p>"); client.println("<p>LED #2 <a href=\"on2\"><button>ON</button></a> <a href=\"off2\"><button>OFF</button></a></p>"); client.println("</html>"); break; } if (c == '\n') { // you're starting a new line currentLineIsBlank = true; if (strstr(linebuf,"GET /on1") > 0){ Serial.println("LED 1 ON"); digitalWrite(led1, HIGH); } else if (strstr(linebuf,"GET /off1") > 0){ Serial.println("LED 1 OFF"); digitalWrite(led1, LOW); } else if (strstr(linebuf,"GET /on2") > 0){ Serial.println("LED 2 ON"); digitalWrite(led2, HIGH); } else if (strstr(linebuf,"GET /off2") > 0){ Serial.println("LED 2 OFF"); digitalWrite(led2, LOW); } // you're starting a new line currentLineIsBlank = true; memset(linebuf,0,sizeof(linebuf)); charcount=0; } else if (c != '\r') { // you've gotten a character on the current line currentLineIsBlank = false; } } } // give the web browser time to receive the data delay(1); // close the connection: client.stop(); Serial.println("client disconnected"); } }
RECOMMENDED: Read our Home Automation using ESP8266 Course
Don’t forget to add your network credentials in the preceding code (SSID and Password).
Plug your ESP32 Dev Module to your computer and follow these next instructions:
Read more: ESP32 Web Server – Arduino IDE
