一、准备硬件

Arduino官网下载软件安装包:Software | Arduino

https://www.arduino.cc/en/software

        选择自己电脑对应的型号,下载时选择JUST DOWNLOAD即可。(提供的资料包中带有软件安装包,但不是最新版)

        软件安装部分就跳过了,一直点下一步就可以,不想安装在C盘的可以自行修改路径。

二、准备软件

三、安装软件

1.安装Arduino IDE

 安装好之后打开软件,单击左上角“File ”→“Preferences...”,再把Language改成中文(简体),选好后点OK;

这个是安装后的截图,并且安装了esp32_package_2.0.9_arduinome,的截图,“搜索开发板里有选型”,没有安装的话是没法选,浅灰色字体。

2.安装ESP32开发包

安装离线包(推荐)
        1、等待软件重启中文显示之后,点击菜单栏 “文件”→“首选项”;

        2、点击“其他开发板管理器地址”右边的图标,把esp32/esp8266的开发板管理器地址填进去,注意每行一个。(注意:在哪个板子上开发就填哪个)

        如果只用到esp32或者只用到esp8266,也可以单独只添加对应的那个地址,当然也可以都添加安装,不使用也不影响。

https://arduino.me/packages/esp32.json
https://arduino.me/packages/esp8266.json
        3、双击esp32或esp8266的.exe文件,等待进度条完成。同样,如果只用到esp32的,可以不安装esp8266。

        4、安装完成后,重启软件就可以选择esp32/8266系列的各个开发板。

有红色框的内容就代表安装成功了!

3.写代码

(1)根据传感器还需要安装两个库,不然会报错

编译前必须安装 2 个库:

  1. OneWire by Paul Stoffregen
  2. DallasTemperature by Miles Burton

4.烧录代码(注意修改里面WIFI名和密码)

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

// 引脚配置 适配HC-SR04 + GB全彩三色LED + DS18B20
#define LED_R 18
#define LED_G 17
#define LED_B 16   // 全彩蓝色通道
#define BUZZER 19
#define DS18B20_PIN 4
// HC-SR04超声波模块引脚
#define SR04_TRIG 2
#define SR04_ECHO 3

// WiFi配置 修改为你的WiFi名称密码
const char* ssid = "LVJU Factory Store";
const char* password = "88888888";

WebServer server(80);
OneWire oneWire(DS18B20_PIN);
DallasTemperature sensors(&oneWire);

// 全局参数
float distanceVal = 0.0;
float tempVal = 0.0;
int limitDist = 50;    // 默认报警距离50cm
int limitTemp = 40;     // 默认报警温度40℃
bool runFlag = false;   // 运行开关
unsigned long blinkTimer = 0;
bool ledState = false;

// HTML网页界面 完全保留原页面无修改
String htmlPage = R"HTML(
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>ESP32-S3 监测面板</title>
<style>
*{box-sizing:border-box;font-family:Arial}
body{max-width:600px;margin:30px auto;padding:20px;background:#f5f5f5}
.card{background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #ddd;margin-bottom:15px}
.data{font-size:28px;font-weight:bold;margin:10px 0}
.red{color:#f44336}
.green{color:#2e7d32}
.input-box{width:100px;padding:8px;font-size:16px;margin:0 8px}
.btn{padding:10px 24px;font-size:16px;border:none;border-radius:6px;cursor:pointer;margin:8px}
#start{background:#2196F3;color:white}
#pause{background:#666;color:white}
#set{background:#4CAF50;color:white}
</style>
</head>
<body>
<div class="card">
<h3>实时监测数据</h3>
<div>当前距离:<span id="dist" class="data green">0.00</span> cm</div>
<div>当前温度:<span id="temp" class="data green">0.00</span> ℃</div>
</div>
<div class="card">
<h3>报警阈值设置</h3>
<div>距离阈值:<input class="input-box" id="distLimit" value="50"> cm</div>
<div style="margin-top:10px">温度阈值:<input class="input-box" id="tempLimit" value="40"> ℃</div>
<button class="btn" id="set">保存阈值</button>
</div>
<div class="card">
<button class="btn" id="start">开始检测</button>
<button class="btn" id="pause">暂停检测</button>
</div>

<script>
// 定时刷新数据
function updateData(){
  fetch("/data")
  .then(res=>res.json())
  .then(json=>{
    document.getElementById("dist").innerText = json.dist;
    document.getElementById("temp").innerText = json.temp;
    // 超阈值标红
    let distDom = document.getElementById("dist");
    let tempDom = document.getElementById("temp");
    if(json.dist > json.distLimit) distDom.className = "data red";
    else distDom.className = "data green";
    if(json.temp > json.tempLimit) tempDom.className = "data red";
    else tempDom.className = "data green";
  })
}
setInterval(updateData, 800);

// 保存阈值
document.getElementById("set").onclick = ()=>{
  let d = document.getElementById("distLimit").value;
  let t = document.getElementById("tempLimit").value;
  fetch(`/set?d=${d}&t=${t}`);
}

// 开始暂停
document.getElementById("start").onclick = ()=>fetch("/run?cmd=1");
document.getElementById("pause").onclick = ()=>fetch("/run?cmd=0");
</script>
</body>
</html>
)HTML";

// ========== 替换原微波测距函数,HC-SR04超声波测距 ==========
float readUltrasonicDist(){
  digitalWrite(SR04_TRIG, LOW);
  delayMicroseconds(2);
  digitalWrite(SR04_TRIG, HIGH);
  delayMicroseconds(10);
  digitalWrite(SR04_TRIG, LOW);
  
  // 读取回声时间,换算厘米
  unsigned long echoTime = pulseIn(SR04_ECHO, HIGH);
  float distCM = echoTime * 0.034 / 2.0;
  
  // 限制HC-SR04有效测距范围2~400cm
  if(distCM > 400) distCM = 400;
  if(distCM < 2) distCM = 2;
  return distCM;
}

void setup() {
  Serial.begin(115200);
  // IO初始化 全彩LED + HC-SR04 + 蜂鸣器
  pinMode(LED_R, OUTPUT);
  pinMode(LED_G, OUTPUT);
  pinMode(LED_B, OUTPUT);
  pinMode(BUZZER, OUTPUT);
  pinMode(SR04_TRIG, OUTPUT);
  pinMode(SR04_ECHO, INPUT);
  
  // 初始状态:绿灯常亮,红蓝关闭,蜂鸣关闭
  digitalWrite(LED_R, LOW);
  digitalWrite(LED_G, HIGH);
  digitalWrite(LED_B, LOW);
  digitalWrite(BUZZER, LOW);

  sensors.begin();
  // WiFi连接
  WiFi.begin(ssid, password);
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }
  Serial.println("\nWiFi连接成功,IP:" + WiFi.localIP().toString());

  // Web路由 完全保留不变
  server.on("/", [](){
    server.send(200, "text/html", htmlPage);
  });

  // 获取实时数据接口
  server.on("/data", [](){
    String json = "{\"dist\":" + String(distanceVal,2) + ",\"temp\":" + String(tempVal,2) + ",\"distLimit\":" + String(limitDist) + ",\"tempLimit\":" + String(limitTemp) + "}";
    server.send(200, "application/json", json);
  });

  // 设置阈值接口
  server.on("/set", [](){
    if(server.hasArg("d")) limitDist = server.arg("d").toInt();
    if(server.hasArg("t")) limitTemp = server.arg("t").toInt();
    server.send(200, "text/plain", "设置成功");
  });

  // 启停控制
  server.on("/run", [](){
    if(server.arg("cmd") == "1") runFlag = true;
    else runFlag = false;
    server.send(200, "text/plain", runFlag ? "已启动检测" : "已暂停检测");
  });

  server.begin();
}

void loop() {
  server.handleClient();
  if(!runFlag){
    // 暂停状态:绿灯常亮,红蓝熄灭、蜂鸣关闭
    digitalWrite(LED_R, LOW);
    digitalWrite(LED_G, HIGH);
    digitalWrite(LED_B, LOW);
    digitalWrite(BUZZER, LOW);
    delay(200);
    return;
  }

  // 采集传感器数据(HC-SR04测距 + DS18B20测温)
  distanceVal = readUltrasonicDist();
  sensors.requestTemperatures();
  tempVal = sensors.getTempCByIndex(0);

  bool alarmFlag = (distanceVal < limitDist) || (tempVal > limitTemp);

  if(alarmFlag){
    // 报警:红灯闪烁,绿蓝熄灭,蜂鸣同步间歇响
    if(millis() - blinkTimer > 300){
      blinkTimer = millis();
      ledState = !ledState;
      digitalWrite(LED_R, ledState);
      digitalWrite(LED_G, LOW);
      digitalWrite(LED_B, LOW);
      digitalWrite(BUZZER, ledState);
    }
  }else{
    // 正常:常亮绿灯,红蓝熄灭,蜂鸣关闭
    digitalWrite(LED_R, LOW);
    digitalWrite(LED_G, HIGH);
    digitalWrite(LED_B, LOW);
    digitalWrite(BUZZER, LOW);
  }
  delay(100);
}

5.检查是否烧录成功

手机数据线能传数据的线连接电脑和板子的EPS32 的com 接口

6.传感器接线

硬件接线指南(ESP32-S3 ↔ 各模块)
1. HC-SR04 超声波模块(3.3V 供电!不要接 5V)
HC-SR04 引脚 ESP32-S3 引脚
VCC 3.3V
Trig GPIO2
Echo GPIO3
GND GND
2. DS18B20 温度传感器 TO-92
DS18B20 引脚 ESP32-S3 引脚
VCC 3.3V
DATA GPIO4(建议串联 4.7K 上拉电阻到 3.3V)
GND GND
3. GB 三色全彩 LED(共阴极,模块自带限流电阻)
LED 引脚 ESP32-S3 引脚
R GPIO18
G GPIO17
B GPIO16
GND GND
4. 有源蜂鸣器
蜂鸣器引脚 ESP32-S3 引脚
VCC 3.3V
SIG GPIO19
GND GND

编译前必须安装 2 个库:

  1. OneWire by Paul Stoffregen
  2. DallasTemperature by Miles Burton

四、效果演示

1.通电后状态

把掉线再插上,IP自动出来

2.工作状态

Logo

智能硬件社区聚焦AI智能硬件技术生态,汇聚嵌入式AI、物联网硬件开发者,打造交流分享平台,同步全国赛事资讯、开展 OPC 核心人才招募,助力技术落地与开发者成长。

更多推荐