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.
```cpp
#include
const int ledPin = 23;
WebServer webServer(80);
void handleRoot() {
String htmlContent = R"rawliteral(
)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(); } ``` ```cpp 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. ```JavaScript 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. ```cpp 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”. ```cpp 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. ![[Screen Recording 2025-01-26 at 10.41.51 pm.gif]]
LED Controller
)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(); } ``` ```cpp 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. ```JavaScript 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. ```cpp 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”. ```cpp 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. ![[Screen Recording 2025-01-26 at 10.41.51 pm.gif]]
