ESP32+WebServer+LD2402实现人体/宠物感知

一、功能需求

使用的ESP32 Arduino-WebServer设计一个LD2402程序，界面现代化UI界面，实时显示LD2402的检测数据。

LD2402模块在调试时，较好的方式是通过手机访问设备Web界面查看模块对人体/宠物感知情况。

功能：

✅ 现代美观网页 UI（黑色科技感）

✅ 实时显示：有无目标、距离 (cm)、实时更新

✅ 自动判断 LD2402 文本模式

✅ 网页自动刷新，无卡顿

✅ 手机 / 电脑都能打开

✅ 配网直接写死在代码里

二、功能实现

1、硬件环境

ESP32-S3 具有多种子型号，例如 N8R8、N16R8 等等。N16 表示具有 16 MB 的 Flash，R8 表示具有 8MB 的 PSRAM。

推荐使用 ESP32-S3-DevKitC-1 开发板（或兼容板）。

2、软件环境

开发环境：Arduino IDE

ESP32 的WebServer库是 ESP32 Arduino 核心库的一部分（无需额外安装），它的核心作用是：

让 ESP32 作为HTTP 服务器，监听指定端口（默认 80）；
接收浏览器 / 客户端的 HTTP 请求（如访问http://192.168.1.100/led/on）；
绑定 "URL 路径（路由）" 和 "处理函数"，比如访问/led/on就执行点亮 LED 的函数；
向客户端返回网页内容、状态码或重定向指令。

3、程序代码

复制代码

/*
  ESP32 + LD2402 雷达实时监控网页
  现代UI + 实时数据显示
  LD2402 文本模式 115200 波特率
*/

#include <WiFi.h>
#include <WebServer.h>

// ==================== 配网信息 ====================
const char* ssid = "你的WiFi名称";
const char* password = "你的WiFi密码";

// ==================== LD2402 串口引脚 ==============
#define UART2_TX 17
#define UART2_RX 18

// ==================== WEB 服务 =====================
WebServer server(80);

// 全局数据
String ld2402_status = "OFF";
float ld2402_distance = 0.0;
String last_line = "";

// ==================================================
// 网页 HTML（现代化UI）
// ==================================================
String getHTML() {
    String html = "<!DOCTYPE html>";
    html += "<html lang='zh-CN'><head><meta charset='UTF-8'>";
    html += "<meta name='viewport' content='width=device-width, initial-scale=1.0'>";
    html += "<title>LD2402 雷达监控</title>";
    html += "<style>";
    html += "*{margin:0;padding:0;box-sizing:border-box;font-family:'Segoe UI',sans-serif}";
    html += "body{background:#121212;color:#fff;padding:20px;display:flex;justify-content:center;align-items:center;min-height:100vh}";
    html += ".card{background:#1e1e1e;width:100%;max-width:480px;padding:30px;border-radius:16px;box-shadow:0 0 25px rgba(0,200,255,0.2)}";
    html += ".title{text-align:center;font-size:24px;margin-bottom:20px;color:#00c8ff}";
    html += ".item{margin:16px 0;padding:12px;background:#2a2a2a;border-radius:10px}";
    html += ".label{color:#aaa;font-size:14px}";
    html += ".value{font-size:28px;font-weight:bold;color:#fff;margin-top:4px}";
    html += ".status-on{color:#00ff6a}";
    html += ".status-off{color:#ff4444}";
    html += ".footer{text-align:center;margin-top:24px;color:#666;font-size:12px}";
    html += "</style></head><body>";
    html += "<div class='card'>";
    html += "<div class='title'>LD2402 毫米波雷达监控</div>";

    // 状态
    html += "<div class='item'>";
    html += "<div class='label'>检测状态</div>";
    if (ld2402_status == "ON") {
        html += "<div class='value status-on'>有人/宠物存在</div>";
    } else {
        html += "<div class='value status-off'>无目标</div>";
    }
    html += "</div>";

    // 距离
    html += "<div class='item'>";
    html += "<div class='label'>实时距离</div>";
    html += "<div class='value'>" + String(ld2402_distance) + " cm</div>";
    html += "</div>";

    html += "<div class='footer'>自动刷新 · ESP32 WebServer</div>";
    html += "</div>";
    html += "<script>setTimeout(()=>location.reload(),300)</script>";
    html += "</body></html>";
    return html;
}

void handleRoot() {
    server.send(200, "text/html", getHTML());
}

void readLD2402() {
    if (Serial2.available()) {
        String line = Serial2.readStringUntil('\n');
        line.trim();
        if (line.length() == 0) return;
        last_line = line;

        if (line == "OFF") {
            ld2402_status = "OFF";
            ld2402_distance = 0;
        } 
        else if (line.startsWith("distance:")) {
            ld2402_status = "ON";
            ld2402_distance = line.substring(9).toFloat();
        }
    }
}

void setup() {
    Serial.begin(115200);
    Serial2.begin(115200, SERIAL_8N1, UART2_RX, UART2_TX);

  // WiFi 连接
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("\nWiFi 连接成功！");
  Serial.print("访问地址：");
  Serial.println(WiFi.localIP());

  server.on("/", handleRoot);
  server.begin();
}

void loop() {
  readLD2402();    // 实时读取雷达
  server.handleClient();
}

三、使用方法

把 WiFi 名称和密码改成你自己的
接线：

- ESP32 GPIO17 → LD2402 RX
- ESP32 GPIO18 → LD2402 TX

烧录
打开串口监视器，查看 IP 地址
浏览器输入 IP，即可看到现代化实时监控页面