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

const char *ssid = "XXXXXX";        //设置WiFi账号 Set up WiFi account
const char *password = "XXXXXXXX";  //设置WiFi密码 Set WiFi password
const int buzzerPin = 21;  // 21引脚连接到有源蜂鸣器  The 21 pins are connected to the active buzzer
bool isBuzzerOn = false;  // 跟踪蜂鸣器的状态 Track the state of the buzzer
AsyncWebServer server(80);  // 创建 AsyncWebServer 对象

// 生成网页的 HTML 代码  Generate 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;
    }
    h2 { font-size: 3.0rem; }
    p { font-size: 3.0rem; }
    .units { font-size: 1.2rem; }
    .dht-labels{
      font-size: 1.5rem;
      vertical-align:middle;
      padding-bottom: 15px;
    }
  </style>
</head>
<body>
  <h2>ESP32 Buzzer Control</h2>
  <p>
    <i id="buzzerIcon" class="fas fa-volume-mute" style="color:#059e8a; cursor: pointer;"></i> 
    <span class="dht-labels">Buzzer Control</span>
  </p>
</body>
<script>
document.getElementById("buzzerIcon").addEventListener("click", function() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      if (document.getElementById("buzzerIcon").classList.contains("fa-volume-up")) {
        document.getElementById("buzzerIcon").classList.remove("fa-volume-up");
        document.getElementById("buzzerIcon").classList.add("fa-volume-mute");
      } else {
        document.getElementById("buzzerIcon").classList.remove("fa-volume-mute");
        document.getElementById("buzzerIcon").classList.add("fa-volume-up");
      }
    }
  };
  xhttp.open("GET", "/toggleBuzzer", true);
  xhttp.send();
});
</script>
</html>)rawliteral";

void setup() {
  Serial.begin(9600);
  pinMode(buzzerPin, OUTPUT);    // 设置引脚工作模式为输出 Set the pin operation mode to output
  digitalWrite(buzzerPin, LOW);  // 蜂鸣器初始设置关闭 The initial setting of the buzzer is off

  // 设置 WiFi 连接 Setting up WiFi connection
  WiFi.begin(ssid, password);
  Serial.println("Connecting to WiFi");
  while (WiFi.status() != WL_CONNECTED) {
    delay(1000);
    Serial.println(".");
  }

  Serial.println(WiFi.localIP());  //打印IP地址 Printing IP addresses

  server.on("/", HTTP_GET, [](AsyncWebServerRequest *request) {
    request->send_P(200, "text/html", index_html);
  });

  server.on("/toggleBuzzer", HTTP_GET, [](AsyncWebServerRequest *request) {
    if (isBuzzerOn) {
      digitalWrite(buzzerPin, LOW);  // 关闭蜂鸣器  Turn off the buzzer
      isBuzzerOn = false;
    } else { 
      digitalWrite(buzzerPin, HIGH);  // 打开蜂鸣器  Turn on the buzzer
      isBuzzerOn = true;
    }
    request->send(200, "text/plain", "Buzzer toggled");
  });

  //启用服务器  Enabling the server
  server.begin();
}

void loop() {
  //在这里添加任何需要持续运行的额外代码
}
