Table of Contents

We have learned how to display dynamic information using a Web Server. In this project, we will take it a step further by enabling interaction with the user to capture input from the website. The user can toggle a checkbox to turn the LED on or off. The ESP32 will then respond by sending the LED’s current state back to the webpage, where it will be displayed in real-time.

#include <WebServer.h>

const int ledPin = 23;
WebServer webServer(80);

void handleRoot() {
    String htmlContent = R"rawliteral(
        <html>
        <body>
        <h1>LED Controller</h1>
        <input type="checkbox" id="ledCheckbox" onchange="sendCheckboxStatus()">
        <label id="ledLabelText">Turn LED On/Off</label><br>
        <script>
        function sendCheckboxStatus() {
            // Check if the checkbox is checked
            var isChecked = document.getElementById("ledCheckbox").checked;
            // Send the checkbox status (true or false) to the ESP32
            fetch('/setLedStatus?status=' + isChecked)
            .then(response => response.text())
            .then(data => {
            // Update the text next to the checkbox with the server response
            document.getElementById("ledLabelText").innerText = data;
            });
        }
        </script>
        </body>
        </html>
        )rawliteral";

    webServer.send(200, "text/html", String(htmlContent));
}

void handleSetLedStatus() {
    // Get the value of the "status" parameter from the URL
    String status = webServer.arg("status");
    if (status == "true") {
        digitalWrite(ledPin, HIGH); // Turn the LED on
        webServer.send(200, "text/plain", "LED is On");
    } else {
        digitalWrite(ledPin, LOW); // Turn the LED off
        webServer.send(200, "text/plain", "LED is Off");
    }
}

void setup() {
    Serial.begin(115200);
    pinMode(ledPin,OUTPUT);
    connectToWiFi();

    webServer.on("/", HTTP_GET, handleRoot);
    webServer.on("/setLedStatus", HTTP_GET, handleSetLedStatus);

    webServer.begin();
}

void loop() {
    webServer.handleClient();
}
webServer.on("/", HTTP_GET, handleRoot);
webServer.on("/setLedStatus", HTTP_GET, handleSetLedStatus);

We have two routes in this project. The root route serves the HTML page to the user. When the user toggles the checkbox, JavaScript sends the checkbox status to the /setLedStatus route, which is handled by the handleSetLedStatus function.

function sendCheckboxStatus() {
            // Check if the checkbox is checked
            var isChecked = document.getElementById("ledCheckbox").checked;
            // Send the checkbox status (true or false) to the ESP32
            fetch('/setLedStatus?status=' + isChecked)
            .then(response => response.text())
            .then(data => {
            // Update the text next to the checkbox with the server response
            document.getElementById("ledLabelText").innerText = data;
            });
}

This function sends the status of a checkbox (checked or unchecked) to the ESP32 using a fetch request. It then updates the text next to the checkbox with the response received from the ESP32.

String status = webServer.arg("status");

This line retrieves the value of the “status” parameter from the HTTP request sent to the server and stores the extracted value as a String. It captures the “status” sent from the web page, such as “true” or “false”.

if (status == "true") {
        digitalWrite(ledPin, HIGH); // Turn the LED on
        webServer.send(200, "text/plain", "LED is On");
    } else {
        digitalWrite(ledPin, LOW); // Turn the LED off
        webServer.send(200, "text/plain", "LED is Off");
}

This code checks the value of status. If status is “true”, it turns the LED on and sends “LED is On” as a response. Otherwise, it turns the LED off and sends “LED is Off” as a response.

Categorized in:

Web Server,

Tagged in: