# 14. Webswitch control LED

## 14.1 Overview
 This section focuses on learning the WiFi function of ESP32S3 and controlling the LED on the web page.
 
## 14.2 Working principle
 
 Connect to a WiFi hotspot with smooth network through ESP32, and then use other devices such as computers or mobile
 phones to connect to the same WiFi. Enter the IP in the browser address bar to open the web interface created by ESP32,
 and control it through the web page containing the LED switch. LED.

<img src="https://mkpark.iptime.org:10443/esp32S3_tscinbuny_tutorial/images/upload_code_program.png" width="800" height="200"/>

## 14.3 Connection lines

<img src="https://mkpark.iptime.org:10443/esp32S3_tscinbuny_tutorial/images/14.lession_connect_line.png" width="800" height="600"/>

## 14.4 Upload code program
 
### 14.4.1 Connect the main control board to the computer using a USB cable

<img src="https://mkpark.iptime.org:10443/esp32S3_tscinbuny_tutorial/images/upload_code_program.png" width="600" height="200"/>
 
### 14.4.2 Open the program file (path: 2_ESP32_S3_PLUS \ Lesson_14_Web_key_controls_LED )
 
 Modify the WiFi account and password to which ESP32 is connected in the code. (This WiFi can be the router WiFi at home
 or the WiFi transmitted by the mobile hotspot, but make sure it is 2.4G and not 5G)

```cpp
const char *ssid = "xxxxxxx"; // Enter the WiFi account to which your ESP32 will connect
const char *password = "xxxxxxx";  //Set WiFi password
```

 Then select the board type as ESP32S3 Dev Module and select the COM number newly displayed when the USB is plugged
 in . Then click "Upload" to start compiling and uploading the program to the main control board, and wait for the program
 upload to be completed .
 After the program upload is completed, open the serial monitor to view the IP address.
 Here the IP is 192.168.8.1, but everyone will get a different IP.
 Connect to the same WiFi with your mobile phone, then open the browser, enter the IP address above and enter the page.
 Click the icon to control the corresponding LED switch.
 
 ## 14.5 Code analysis

 Declare the required libraries primarily for creating web services and handling asynchronous event-driven models

```cpp
#include <Arduino.h>
#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
```

 Initialize the WiFi to be connected to ESP32, set the three LED pins and the initial state is off
 
```cpp
const char *ssid = "xxxxxxx"; // Enter the WiFi account to which your ESP32 will connect
const char *password = "xxxxxxx";  //Set WiFi password

const int greenLEDPin = 13;   // Green LED control pin
const int yellowLEDPin = 11;  // Yellow LED control pin
const int redLEDPin = 10;     // Red LED control pin

int greenLEDState = LOW;   // Green LED initial state (off)
int yellowLEDState = LOW;  // Yellow LED initial state (off)
int redLEDState = LOW;     // Red LED initial state (off)
```

Create AsyncWebServer object

```cpp
// Create an AsyncWebServer object
AsyncWebServer server(80);
```

 Generate the HTMLcode of the web page , in which the web page icon is obtained from an external link, so the connected
 WiFi must be a valid WiFi to obtain the icon normally.

```cpp
// Generates the HTML code for the web page
const char index_html[] PROGMEM = R"rawliteral(
<!DOCTYPE HTML><html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
  <style>
    html {
     font-family: Arial;
     display: inline-block;
     margin: 0px auto;
     text-align: center;
    }
  </style>
</head>

```

 The GetLEDState function implements web page update operations. When the icon is clicked, it updates the icon status
 accordingly and issues instructions to the ESP32.

```cpp
String getLEDState() {
  String json;
  json += "{\"greenColor\":\"" + String(greenLEDState == HIGH ? "#66CC33" : "#808080") + "\",";   
  json += "\"yellowColor\":\"" + String(yellowLEDState == HIGH ? "#FFCC33" : "#808080") + "\",";  
  json += "\"redColor\":\"" + String(redLEDState == HIGH ? "#FF0000" : "#808080") + "\",";        
  json += "\"greenText\":\"" + String(greenLEDState == HIGH ? "LED ON" : "LED OFF") + "\",";      
  json += "\"yellowText\":\"" + String(yellowLEDState == HIGH ? "LED ON" : "LED OFF") + "\",";    
  json += "\"redText\":\"" + String(redLEDState == HIGH ? "LED ON" : "LED OFF") + "\"}"; 
  return json;
}
```
 Set the request processing function in the step
```cpp
// Set up the request handler function
  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html);
  });
  server.on("/toggle", HTTP_GET, [](AsyncWebServerRequest *request) {
    String color = request->getParam("color")->value();
    if (color == "green") {
      greenLEDState = !greenLEDState;
      digitalWrite(greenLEDPin, greenLEDState);
    } else if (color == "yellow") {
      yellowLEDState = !yellowLEDState;
      digitalWrite(yellowLEDPin, yellowLEDState);
    } else if (color == "red") {
      redLEDState = !redLEDState;
      digitalWrite(redLEDPin, redLEDState);
    }
    request->send(200, "application/json", getLEDState());
  });
  server.on("/ledstate", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send(200, "application/json", getLEDState());
  });

```
 
Finally start the server

```cpp
// Starting the server
server.begin();
```
