超音波測距(HC-SR04)&網頁顯示(wifi_server)
超音波測距(HC-SR04)&網頁顯示(wifi_server)
接線
程式碼
#include <Arduino.h>
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <Ultrasonic.h>
// --------------------- --------------------- -------------------
// * | HC-SC04 | Arduino | | PING))) | Arduino | | Seeed | Arduino |
// * --------------------- --------------------- -------------------
// * | Vcc | 5V | | Vcc | 5V | | Vcc | 5V |
// * | Trig | 12 | AND | SIG | 10 | AND | SIG | 8 |
// * | Echo | 13 | | Gnd | GND | | Gnd | GND |
// * | Gnd | GND | --------------------- -------------------
// * ---------------------
const char* ssid="基地台名稱";
const char* password="基地台密碼";
AsyncWebServer server(80);
Ultrasonic ultrasonic1(32, 33); //ultrasonic(trig, echo)
const char indexHtml[] PROGMEM = R"===(
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="0.5" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h1 {text-align: center; background-color: rgb(226, 155, 23); color: rgb(47, 49, 42); margin-right: 5px;}
dl {width: 320px; margin: auto;}
dt {font-size: 20pt; color: rgb(36, 45, 168); background-color: rgb(197, 194, 11);
margin: 6pt 0; padding: 6pt 12pt;}
dd {text-align: left; padding-right: 6pt;}
.val { font-size: 30pt; color: rgb(255, 120, 30); }
</style>
</head>
<body>
<p><h1>HC-SR04超音波測距實驗</h1></p>
<dl>
<dt>偵測物體距離</dt>
<dd class=val>%distance% 公分</dd>
</dl>
</body>
</html>
)===";
String readDist(){
unsigned int distance=ultrasonic1.read(CM);
Serial.print(distance); Serial.println(" CM");
return String(distance);
}
String hcsr04Processors(String(value)){
if (value=="distance"){
return readDist();
}
}
void setup(){
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED){
Serial.print(".");
delay(500);
}
Serial.println("Connected successful!");
Serial.print("IP: "); Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", indexHtml, hcsr04Processors);
});
server.on("/distance", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDist().c_str());
});
server.begin();
}
void loop(){
}
解析
匯入WiFi和超音波及網路伺服器模組
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <Ultrasonic.h>
定義基地台名稱和密碼,並指定端口號80埠
const char* ssid = "基地台名稱";
const char* password = "基地台密碼";
AsyncWebServer server(80);
這個模組是呼吸超音波用的
#include <Ultrasonic.h>
設制超音波腳位
Ultrasonic ultrasonic1(32, 33); //ultrasonic(trig, echo)
前端網頁
這一行是每隔0.5秒自動更新一次網頁 <meta http-equiv="refresh" content="0.5" />
const char indexHtml[] PROGMEM = R"===(
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="refresh" content="0.5" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h1 {text-align: center; background-color: rgb(226, 155, 23); color: rgb(47, 49, 42); margin-right: 5px;}
dl {width: 320px; margin: auto;}
dt {font-size: 20pt; color: rgb(36, 45, 168); background-color: rgb(197, 194, 11);
margin: 6pt 0; padding: 6pt 12pt;}
dd {text-align: left; padding-right: 6pt;}
.val { font-size: 30pt; color: rgb(255, 120, 30); }
</style>
</head>
<body>
<p><h1>HC-SR04超音波測距實驗</h1></p>
<dl>
<dt>偵測物體距離</dt>
<dd class=val>%distance% 公分</dd>
</dl>
</body>
</html>
)===";
讀取數值和前端同步數值的函式
String readDist(){
unsigned int distance=ultrasonic1.read(CM);
Serial.print(distance); Serial.println(" CM");
return String(distance);
}
String hcsr04Processors(String(value)){
if (value=="distance"){
return readDist();
}
}
網路連線
void setup(){
Serial.begin(115200);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED){
Serial.print(".");
delay(500);
}
Serial.println("Connected successful!");
Serial.print("IP: "); Serial.println(WiFi.localIP());
網路伺服器的請求和回應
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", indexHtml, hcsr04Processors);
});
server.on("/distance", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readDist().c_str());
});
server.begin();
}
留言
張貼留言