#include <WiFi.h>
#include <AsyncTCP.h>
#include <ESPAsyncWebServer.h>
#include <FastLED.h>

const char *ssid = "mkHome_2.4Ghz";        //设置WiFi账号 Set up WiFi account
const char *password = "mk800130";  //设置WiFi密码 Set WiFi password

#define LED_PIN 6    // WS2812B连接的引脚 The pin for WS2812B connection
#define NUM_LEDS 12  // WS2812B上的灯数量 Number of lights on WS2812B

CRGB leds[NUM_LEDS];  // 创建RGB灯数组 Create an array of RGB lights

// 创建 AsyncWebServer 对象 Create an AsyncWebServer object
AsyncWebServer server(80);

// 处理根路径的函数 A function to handle the root path
void handleRoot(AsyncWebServerRequest *request) {
  request->send(200, "text/html", getIndexHtml());
}

// 处理颜色控制请求的函数 A function that handles requests for color control
void handleColor(AsyncWebServerRequest *request) {
  // 读取参数值 Reading parameter values
  if (request->hasParam("red") && request->hasParam("green") && request->hasParam("blue")) {
    int red = request->getParam("red")->value().toInt();
    int green = request->getParam("green")->value().toInt();
    int blue = request->getParam("blue")->value().toInt();

    // 设置ws2812颜色 Set the ws2812 color
    for (int i = 0; i < NUM_LEDS; i++) {
      leds[i] = CRGB(red, green, blue);
    }
    FastLED.show();// 更新ws2812颜色 Update ws2812 color
  }
  request->send(200, "text/plain", "OK");
}

// 生成网页的 HTML 代码 Generates the HTML code for the web page
String getIndexHtml() {
  String html = "<!DOCTYPE html>";
  html += "<html><head><title>ESP32 Web controls WS2812B LED</title>";
  html += "<meta name='viewport' content='width=device-width, initial-scale=1'>";
  html += "<link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.2/css/all.css'>";
  html += "</head><body style='text-align:center;'>";
  html += "<h2>ESP32 Web Control</h2>";

  html += "<p><i class='fas fa-circle' style='color:red;'></i> Red:</p>";
  html += "<input type='range' min='0' max='255' value='0' id='red' onchange='changeColor()' style='width: 80%;'><br>";

  html += "<p><i class='fas fa-circle' style='color:green;'></i> Green:</p>";
  html += "<input type='range' min='0' max='255' value='0' id='green' onchange='changeColor()' style='width: 80%;'><br>";

  html += "<p><i class='fas fa-circle' style='color:blue;'></i> Blue:</p>";
  html += "<input type='range' min='0' max='255' value='0' id='blue' onchange='changeColor()' style='width: 80%;'><br>";

  html += "<script>function changeColor() {var red = document.getElementById('red').value;";
  html += "var green = document.getElementById('green').value;";
  html += "var blue = document.getElementById('blue').value;";
  html += "var xhttp = new XMLHttpRequest();";
  html += "xhttp.open('GET', '/color?red='+red+'&green='+green+'&blue='+blue, true);";
  html += "xhttp.send();}</script>";
  html += "</body></html>";
  return html;
}

void setup() {
  Serial.begin(9600);                                     // 设置串口波特率 Set the serial port baud rate
  FastLED.addLeds<WS2812B, LED_PIN, GRB>(leds, NUM_LEDS); // 初始化ws2812灯条 Initialize the ws2812 light bar

  // 设置 WiFi 连接  setting up WiFi connection
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println("Connecting to WiFi...");
  }
  Serial.println("Connected to the WiFi network");
  Serial.print("IP Address: ");
  Serial.println(WiFi.localIP());  //打印IP地址

  // 设置请求处理函数 Set up the request handler function
  server.on("/", HTTP_GET, handleRoot);
  server.on("/color", HTTP_GET, handleColor);

  // 启动服务器 Starting the server
  server.begin();
}

void loop() {
  // 处理异步事件
  // AsyncWebServer 使用了事件驱动模型，所以不需要在循环中处理
}
