
一、准备硬件Arduino官网下载软件安装包Software | Arduinohttps://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.jsonhttps://arduino.me/packages/esp8266.json3、双击esp32或esp8266的.exe文件等待进度条完成。同样如果只用到esp32的可以不安装esp8266。4、安装完成后重启软件就可以选择esp32/8266系列的各个开发板。有红色框的内容就代表安装成功了3.写代码1根据传感器还需要安装两个库不然会报错编译前必须安装 2 个库OneWireby Paul StoffregenDallasTemperatureby Miles Burton4.烧录代码(注意修改里面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 RHTML( !DOCTYPE html html langzh-CN head meta charsetUTF-8 titleESP32-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 classcard h3实时监测数据/h3 div当前距离span iddist classdata green0.00/span cm/div div当前温度span idtemp classdata green0.00/span ℃/div /div div classcard h3报警阈值设置/h3 div距离阈值input classinput-box iddistLimit value50 cm/div div stylemargin-top:10px温度阈值input classinput-box idtempLimit value40 ℃/div button classbtn idset保存阈值/button /div div classcard button classbtn idstart开始检测/button button classbtn idpause暂停检测/button /div script // 定时刷新数据 function updateData(){ fetch(/data) .then(resres.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?cmd1); document.getElementById(pause).onclick ()fetch(/run?cmd0); /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 供电不要接 5VHC-SR04 引脚ESP32-S3 引脚VCC3.3VTrigGPIO2EchoGPIO3GNDGND2. DS18B20 温度传感器 TO-92DS18B20 引脚ESP32-S3 引脚VCC3.3VDATAGPIO4建议串联 4.7K 上拉电阻到 3.3VGNDGND3. GB 三色全彩 LED共阴极模块自带限流电阻LED 引脚ESP32-S3 引脚RGPIO18GGPIO17BGPIO16GNDGND4. 有源蜂鸣器蜂鸣器引脚ESP32-S3 引脚VCC3.3VSIGGPIO19GNDGND编译前必须安装 2 个库OneWireby Paul StoffregenDallasTemperatureby Miles Burton四、效果演示1.通电后状态把掉线再插上IP自动出来2.工作状态