DHT11/12網路監測-ESP32
DHT11/12網路監測-ESP32
單純實驗DHT11/12參考-https://esp32-blairan.blogspot.com/2021/07/dht11dht12-esp32.html
先下載伺服器的庫-ESPAsyncWebServer
完整程式碼如下:
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
#include <DHT_U.h>
const char* ssid = "CTK";
const char* password = "ctk674011";
AsyncWebServer server(80);
#define DHTPIN 4
#define DHTTYPE DHT11 // DHT 11
sensors_event_t event;
DHT_Unified dht(DHTPIN, DHTTYPE);
const char indexHtml[] PROGMEM = R"===(
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h1 {text-align: center; background-color: orange; margin-right:5px;}
dl { width: 320px; margin: 12px auto; }
dt {
font-size: 20pt; color: #444; background-color: #ddd;
margin: 6pt 0; padding: 6pt 12pt;
}
dd {
text-align: right; padding-right: 6pt;
}
.num { font-size: 36pt; color: dodgerblue; }
</style>
</head>
<body>
<p><h1>ESP32 溫溼度顯示計</h1></p>
<dl>
<dt>溫度</dt>
<dd class=num>%TEMP% °C</dd>
<dt>濕度</dt>
<dd class=num>%HUMI% %</dd>
</dl>
</body>
</html>
)===";
String readTemp(){
dht.temperature().getEvent(&event);
if (isnan(event.temperature)) {
Serial.println(F("Error reading temperature!"));
return "--";
}
else {
Serial.print(F("Temperature: "));
Serial.print(float(event.temperature));
Serial.println(F("°C"));
return String(float(event.temperature));
}
}
String readHumi(){
dht.humidity().getEvent(&event);
if (isnan(event.relative_humidity)) {
Serial.println(F("Error reading humidity!"));
return "--";
}
else {
Serial.print(F("Humidity: "));
Serial.print(float(event.relative_humidity));
Serial.println(F("%"));
return String(float(event.relative_humidity));
}
}
String tmplProcessor(const String & var){
if (var == "TEMP"){
return readTemp();
}else if (var == "HUMI"){
return readHumi();
}
return String();
}
void setup() {
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password); Serial.print("基地台名稱: "); Serial.println(ssid);
while (WiFi.status() != WL_CONNECTED){
delay(1000);
Serial.println(".");
}
Serial.print("IP: "); Serial.println(WiFi.localIP());
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", indexHtml, tmplProcessor);
});
server.on("/TEMP", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readTemp().c_str());
});
server.on("/HUMI", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readHumi().c_str());
});
server.begin();
}
void loop() {
}
載入WiFi,DHT11/12和伺服器所須的庫
定義基地台名稱和密碼,並指定端口號80埠
#include <WiFi.h>
#include <ESPAsyncWebServer.h>
#include <Adafruit_Sensor.h>
#include <DHT.h>
#include <DHT_U.h>
const char* ssid = "基地台名稱";
const char* password = "基地台密碼";
AsyncWebServer server(80);
定義DHT11/12腳位/型號
#define DHTPIN 4
#define DHTTYPE DHT11 // DHT 11
sensors_event_t event;
DHT_Unified dht(DHTPIN, DHTTYPE);
主要這裡是html網頁的代碼
const char indexHtml[] PROGMEM = R"===(
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style>
h1 {text-align: center; background-color: orange; margin-right:5px;}
dl { width: 320px; margin: 12px auto; }
dt {
font-size: 20pt; color: #444; background-color: #ddd;
margin: 6pt 0; padding: 6pt 12pt;
}
dd {
text-align: right; padding-right: 6pt;
}
.num { font-size: 36pt; color: dodgerblue; }
</style>
</head>
<body>
<p><h1>ESP32 溫溼度顯示計</h1></p>
<dl>
<dt>溫度</dt>
<dd class=num>%TEMP% °C</dd>
<dt>濕度</dt>
<dd class=num>%HUMI% %</dd>
</dl>
</body>
</html>
)===";
其中有兩個函式一個是readTemp()和readHumi()是讀取溫度和濕度
String readTemp(){
dht.temperature().getEvent(&event);
if (isnan(event.temperature)) {
Serial.println(F("Error reading temperature!"));
return "--";
}
else {
Serial.print(F("Temperature: "));
Serial.print(float(event.temperature));
Serial.println(F("°C"));
return String(float(event.temperature));
}
}
String readHumi(){
dht.humidity().getEvent(&event);
if (isnan(event.relative_humidity)) {
Serial.println(F("Error reading humidity!"));
return "--";
}
else {
Serial.print(F("Humidity: "));
Serial.print(float(event.relative_humidity));
Serial.println(F("%"));
return String(float(event.relative_humidity));
}
}
這個函式意指如果讀到網頁請求的字串是TEMP就回傳readTemp()裡的溫度數值以字串回傳
如果網頁請求的字串是HUMI就回傳readHumi()裡的濕度數值並以字串回傳
String tmplProcessor(const String & var){
if (var == "TEMP"){
return readTemp();
}else if (var == "HUMI"){
return readHumi();
}
return String();
}
在void stup(){ }裡
先把esp32連到基地台的設制寫好
Serial.begin(115200);
dht.begin();
WiFi.begin(ssid, password); Serial.print("基地台名稱: "); Serial.println(ssid);
while (WiFi.status() != WL_CONNECTED){
delay(1000);
Serial.println(".");
}
Serial.print("IP: "); Serial.println(WiFi.localIP());
剩下就是伺服器的回應方式
server.on("/", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/html", indexHtml, tmplProcessor);
});
server.on("/TEMP", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readTemp().c_str());
});
server.on("/HUMI", HTTP_GET, [](AsyncWebServerRequest *request){
request->send_P(200, "text/plain", readHumi().c_str());
});
server.begin();
程式碼上傳後可以看在顯示的ip打開瀏覽器就會呈現如下:
留言
張貼留言