esp12f-实现远程控制

@Utah

于 2025-05-20 11:21:41 发布

阅读量470

点赞数 5

CC 4.0 BY-SA版权

分类专栏： arduino/stm32 文章标签： c esp8266（12f）

本文链接：https://blog.youkuaiyun.com/FrountBackmirror/article/details/148083559

arduino/stm32 专栏收录该内容

1 篇文章

订阅专栏

一、项目概述

本方案基于ESP8266（ESP-12F模块）实现了一个可通过Web界面远程控制的智能继电器系统。项目通过WiFi接入局域网，用户可通过任意设备的浏览器进行继电器状态控制和实时状态查看，典型应用场景包括智能家居设备控制、工业设备远程操作等。

二、开发环境准备

所需硬件
ESP-12F开发板
5V继电器模块（光耦隔离型）
杜邦线若干
220V负载设备（灯泡/插座等）
软件依赖
必装库文件：
ESP8266WiFi (内置)
ESP8266WebServer (内置)
3 引脚图

开发工具：

Arduino IDE 2.3+
ESP8266开发板支持包（3.1.2+）

安装步骤：
Arduino IDE → 文件 → 首选项
附加开发板管理器URL添加：
http://arduino.esp8266.com/stable/package_esp8266com_index.json
工具 → 开发板 → 开发板管理器 → 搜索安装esp8266

三、测试步骤

1 在Arduino IDE中上传代码到开发板
2 打开串口监视器（波特率115200）查看连接信息（获取开发板获得的ip地址）
3 在PC端浏览器或手机端浏览器访问第二步得到的ip地址即可看见控制网页
4 测试
界面如下

四、项目源代码

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

const char* ssid = "WiFi名称"; // 替换成你的WiFi名称
const char* password = "WiFi密码"; // 替换成你的WiFi密码

#define RELAY_PIN 5 // GPIO5 控制继电器
ESP8266WebServer server(80); // Web服务器端口80

// 网页HTML代码
const char* htmlPage = R"=====(
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>设备控制</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            text-align: center;
            margin: 20px;
        }
        .status-box {
            padding: 15px;
            margin: 20px auto;
            width: 80%;
            border-radius: 8px;
            font-size: 1.2em;
        }
        .status-on {
            background: #4CAF50;
            color: white;
        }
        .status-off {
            background: #f44336;
            color: white;
        }
        .btn-group {
            margin: 30px 0;
        }
        button {
            padding: 15px 32px;
            font-size: 18px;
            margin: 10px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            min-width: 120px;
        }
        .btn-on {
            background: #45a049;
            color: white;
        }
        .btn-off {
            background: #d32f2f;
            color: white;
        }
    </style>
</head>
<body>
    <h1>设备状态控制</h1>
    <div id="status" class="status-box status-off">状态：未连接</div>
    
    <div class="btn-group">
        <button class="btn-on" onclick="controlDevice('on')">启 动</button>
        <button class="btn-off" onclick="controlDevice('off')">关 闭</button>
    </div>

    <script>
        // 获取设备状态
        function updateStatus() {
            fetch('/status')
                .then(response => response.json())
                .then(data => {
                    const statusDiv = document.getElementById('status');
                    statusDiv.className = `status-box ${data.status === 'on' ? 'status-on' : 'status-off'}`;
                    statusDiv.textContent = `当前状态：${data.status === 'on' ? '运行中' : '已关闭'}`;
                });
        }

        // 控制设备
        function controlDevice(action) {
            fetch(`/relay/${action}`)
                .then(() => {
                    updateStatus(); // 操作后立即更新状态
                })
                .catch(err => {
                    console.error('控制失败:', err);
                });
        }

        // 每2秒更新状态
        setInterval(updateStatus, 2000);
        updateStatus(); // 初始加载
    </script>
</body>
</html>
)=====";

void setup() {
    Serial.begin(115200);
    pinMode(RELAY_PIN, OUTPUT);
    digitalWrite(RELAY_PIN, LOW);

    WiFi.begin(ssid, password);
    while (WiFi.status() != WL_CONNECTED) {
        delay(500);
        Serial.print(".");
    }
    
    Serial.println("\nWiFi已连接");
    Serial.print("IP地址: ");
    Serial.println(WiFi.localIP());

    // 新增状态查询接口
    server.on("/status", []() {
        String state = (digitalRead(RELAY_PIN) == HIGH) ? "on" : "off";
        server.send(200, "application/json", "{\"status\":\"" + state + "\"}");
    });

    server.on("/", handleRoot);
    server.on("/relay/on", handleOn);
    server.on("/relay/off", handleOff);
    server.begin();
}


void loop() {
    server.handleClient(); // 处理客户端请求
}

// 处理主页请求
void handleRoot() {
    server.send(200, "text/html", htmlPage);
}

// 打开继电器
void handleOn() {
    digitalWrite(RELAY_PIN, HIGH);
    server.send(200, "text/plain", "Relay ON");
}

// 关闭继电器
void handleOff() {
    digitalWrite(RELAY_PIN, LOW);
    server.send(200, "text/plain", "Relay OFF");
}