Host website on ESP32

Hosting a Web Server on ESP32 to Control LEDs with mDNS Implementation

The ESP32, a powerful microcontroller with integrated Wi-Fi and Bluetooth, is widely used in IoT applications due to its versatility and ease of use. One common project is hosting a web server on the ESP32 to control LEDs. In this article, we’ll walk through setting up a web server on the ESP32 to turn two LEDs on and off. We'll also implement mDNS (Multicast DNS) to simplify accessing the web server without needing to know its IP address.

Prerequisites

1. Hardware:

• ESP32 development board
• Two LEDs

2. Software:

• Arduino IDE with ESP32 board support installed
• mDNS library (usually included with the ESP32 core for Arduino)

Step-by-Step Guide

1. Setting Up the Arduino IDE

First, ensure you have the ESP32 board support installed in the Arduino IDE. If not, follow these steps:

1. Go to File > Preferences.

2. In the "Additional Boards Manager URLs" field, add the following URL:

https://dl.espressif.com/dl/package_esp32_index.json

3. Open the Boards Manager from Tools > Board > Boards Manager, search for "esp32, " and install the package.

2. Circuit Setup

Connect the LEDs to the ESP32 as follows:

• Connect the anode of the first LED to GPIO 2 (D2) and the cathode to GND.
• Connect the anode of the second LED to GPIO 4 (D4) and the cathode to GND.

3. Writing the Code

Here's the complete code to set up the web server and mDNS:

// Load Wi-Fi library
#include <WiFi.h>
#include <WiFiClient.h>
#include <WebServer.h>
#include <ESPmDNS.h>

// Replace with your network credentials
const char* ssid = "your ssid";
const char* password = "your pass";

// Set web server port number to 80
WebServer server(80);

// Variable to store the HTTP request
String header;

// Auxiliar variables to store the current output state
String led1State = "off";
String led2State = "off";

// Assign output variables to GPIO pins
const int outputled1 = led1;
const int outputled2 = led2;

// Current time
unsigned long currentTime = millis();

// Previous time
unsigned long previousTime = 0;

// Define timeout time in milliseconds (example: 2000ms = 2s)
const long timeoutTime = 2000;


void setup() {
Serial.begin(115200);

// Initialize the output variables as outputs
pinMode(outputled1, OUTPUT);
pinMode(outputled2, OUTPUT);

// Set outputs to LOW
digitalWrite(outputled1, LOW);
digitalWrite(outputled2, LOW);

// Connect to Wi-Fi network with SSID and password
Serial.print("Connecting to ");
Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) {
delay(500);
Serial.print(".");
}

if (!MDNS.begin("robocircuits")) {
Serial.println("Error setting up MDNS responder!");
while (1) {
delay(1000);
}
}
Serial.println("mDNS responder started");

// Print local IP address and start web server
Serial.println("");
Serial.println("WiFi connected.");
Serial.println("IP address: ");
Serial.println(WiFi.localIP());

server.begin();
}

void loop() {
WiFiClient client = server.available();  // Listen for incoming clients

if (client) {  // If a new client connects,
currentTime = millis();
previousTime = currentTime;
Serial.println("New Client.");                                             // print a message out in the serial port
String currentLine = "";                                                   // make a String to hold incoming data from the client
while (client.connected() && currentTime - previousTime <= timeoutTime) {  // loop while the client's connected

currentTime = millis();

if (client.available()) {  // if there's bytes to read from the client,
char c = client.read();  // read a byte, then
Serial.write(c);         // print it out the serial monitor
header += c;

if (c == '\n') {  // if the byte is a newline character
// if the current line is blank, you got two newline characters in a row.
// that's the end of the client HTTP request, so send a response:
if (currentLine.length() == 0) {
// HTTP headers always start with a response code (e.g. HTTP/1.1 200 OK)
// and a content-type so the client knows what's coming, then a blank line:
client.println("HTTP/1.1 200 OK");
client.println("Content-type:text/html");
client.println("Connection: close");
client.println();

// turns the GPIOs on and off
if (header.indexOf("GET /led1/on") >= 0) {
Serial.println("GPIO led1 on");
led1State = "on";
digitalWrite(outputled1, HIGH);
} else if (header.indexOf("GET /led1/off") >= 0) {
Serial.println("GPIO led1 off");
led1State = "off";
digitalWrite(outputled1, LOW);
} else if (header.indexOf("GET /led2/on") >= 0) {
Serial.println("GPIO led2 on");
led2State = "on";
digitalWrite(outputled2, HIGH);
} else if (header.indexOf("GET /led2/off") >= 0) {
Serial.println("GPIO led2 off");
led2State = "off";
digitalWrite(outputled2, LOW);
}

// Display the HTML web page
client.println("<!DOCTYPE html><html>");
client.println("<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">");
client.println("<link rel=\"icon\" href=\"data:,\">");
// CSS to style the on/off buttons
// Feel free to change the background-color and font-size attributes to fit your preferences

client.println("<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}");
client.println(".button { background-color: #4CAF50; border: none; color: white; padding: 16px 40px;");
client.println("text-decoration: none; font-size: 30px; margin: 2px; cursor: pointer;}");
client.println(".button2 {background-color: #555555;}</style></head>");
// Web Page Heading
client.println("<body><h1>ESP32 Web Server with mDNS</h1>");
client.println("<body><h1>RoboCircuits</h1>");
// Display current state, and ON/OFF buttons for GPIO led1
client.println("<p>GPIO led1 - State " + led1State + "</p>");

// If the led1State is off, it displays the ON button
if (led1State == "off") {
client.println("<p><a href=\"/led1/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/led1/off\"><button class=\"button button2\">OFF</button></a></p>");
}
// Display current state, and ON/OFF buttons for GPIO led2
client.println("<p>GPIO led2 - State " + led2State + "</p>");
// If the led2State is off, it displays the ON button
if (led2State == "off") {
client.println("<p><a href=\"/led2/on\"><button class=\"button\">ON</button></a></p>");
} else {
client.println("<p><a href=\"/led2/off\"><button class=\"button button2\">OFF</button></a></p>");
}
client.println("</body></html>");
// The HTTP response ends with another blank line
client.println();
// Break out of the while loop
break;
} else {  // if you got a newline, then clear currentLine
currentLine = "";
}
} else if (c != '\r') {  // if you got anything else but a carriage return character,
currentLine += c;      // add it to the end of the currentLine
}
}
}
// Clear the header variable
header = "";
// Close the connection
client.stop();
Serial.println("Client disconnected.");
Serial.println("");
}
}

4. Uploading the Code

1. Connect your ESP32 to your computer via USB.

2. Select the appropriate board and port from Tools > Board and Tools > Port.

3. Upload the code by clicking the Upload button (right arrow icon).

5. Accessing the Web Server

After uploading the code, open a web browser and navigate to `robocircuits.local`. You should see the following routes available:

• `/led1/on` to turn on LED 1
• `/led1/off` to turn off LED 1
• `/led2/on` to turn on LED 2
• `/led2/off` to turn off LED 2

Clicking these links will control the LEDs as specified.

Conclusion

Hosting a web server on the ESP32 to control LEDs is a simple yet powerful project that demonstrates the capabilities of this microcontroller. Implementing mDNS makes it easier to access the web server without needing to remember the IP address. This setup can be extended to control more devices and integrate with other IoT systems, making it a great starting point for more complex projects