ESP8266配置AP模式WEB页面点灯

泰骏兴电子 · 发表于昨天 11:43

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

×

[AppleScript] 纯文本查看 复制代码

#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>

const char *ssid = "ESP8266_AP";
const char *password = "12345678";

ESP8266WebServer server(80);
const int ledPin = 16;
bool ledState = false;

// ========== 先把函数定义放在这里 ==========
String generateMainPage()
{
  String html = R"rawliteral(
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ESP8266 控制面板</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 50px;
            background-color: #f0f0f0;
        }
        .container {
            background-color: white;
            padding: 30px;
            border-radius: 10px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            max-width: 400px;
            margin: 0 auto;
        }
        h1 {
            color: #1a6d8f;
        }
        button {
            font-size: 20px;
            padding: 15px 30px;
            margin: 10px;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        .btn-on {
            background-color: #4CAF50;
            color: white;
        }
        .btn-off {
            background-color: #f44336;
            color: white;
        }
        .status {
            font-size: 18px;
            margin: 20px 0;
            padding: 10px;
            background-color: #e8e8e8;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>ESP8266 控制面板</h1>
        <div class="status">
            LED 状态: <span id="ledStatus">加载中...</span>
        </div>
        <button class="btn-on">打开 LED</button>
        <button class="btn-off">关闭 LED</button>
    </div>
    <script>
        function sendCommand(cmd) {
            var url = cmd === 'on' ? '/ledon' : '/ledoff';
            fetch(url).then(() => updateLedStatus());
        }
        function updateLedStatus() {
            fetch('/ledstatus')
                .then(r => r.text())
                .then(status => {
                    var span = document.getElementById('ledStatus');
                    if (status === 'on') {
                        span.innerHTML = '已点亮';
                        span.style.color = '#4CAF50';
                    } else {
                        span.innerHTML = '已熄灭';
                        span.style.color = '#f44336';
                    }
                });
        }
        updateLedStatus();
        setInterval(updateLedStatus, 1000);
    </script>
</body>
</html>
)rawliteral";
  return html;
}

void setupWebRoutes()
{
  server.on("/", []()
            { server.send(200, "text/html", generateMainPage()); });

  server.on("/ledon", []()
            {
        ledState = true;
        digitalWrite(ledPin, LOW);
        server.send(200, "text/plain", "LED is ON"); });

  server.on("/ledoff", []()
            {
        ledState = false;
        digitalWrite(ledPin, HIGH);
        server.send(200, "text/plain", "LED is OFF"); });

  server.on("/ledstatus", []()
            { server.send(200, "text/plain", ledState ? "on" : "off"); });
}
// =========================================

void setup()
{
  Serial.begin(115200);
  delay(1000);

  pinMode(ledPin, OUTPUT);
  digitalWrite(ledPin, HIGH);

  WiFi.mode(WIFI_AP);
  WiFi.softAP(ssid, password);

  Serial.println();
  Serial.print("AP IP: ");
  Serial.println(WiFi.softAPIP());

  setupWebRoutes();
  server.begin();
  Serial.println("Server started");
}

void loop()
{
  server.handleClient();
}

默认的地址为192.168.4.1

账号		自动登录	找回密码
密码			立即注册