基於arduino 用ESP8266獲取DHT11溫溼度數據顯示在網頁上
原理： ESP8266獲取DHT11溫溼度數據發送到路由器局域網內，局域網內的手機電腦，訪問esp的ip地址，獲取實時的溫溼度數據，每個5秒刷新一次。
網頁顯示內容：
代碼見最後，將代碼拷貝到arduino中，打開串口監視器，編譯上傳。
串口監視器機會如圖二顯示局域網的ip 地址。 局域網內的手機電腦訪問ip地址，如圖一所示：
Html網頁顯示代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Refresh" content="5">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MeiShang Web Server Test System</title>
<style>
/* -------------------------按鈕控制代碼---------------------------------------------------------------- */
h2,h1{line-height:1%;}
body {
margin: 0;
padding: 0;
width: 340px;
background: LightCyan
}
.button {
width: 100px;
height: 100px;
text-align: center;
font-weight: 100;
color: darkcyan;
margin: 0 40px 40px 0;
position: relative;
border: 6px solid darkcyan;
background: LightCyan;
font-size: 20px;
border-radius: 50%;
}
.top1 {
width: 360px;
height: 45px;
color: #FFF;
border: 1px solid darkcyan;
background: darkcyan;
font-size: 25px;
border-radius: 0%;
}
</style>
</head>
<body>
<a href="./pin?light1=1"><button class="button top1">温湿度显示</button></a>
<center style="left: 20px; position: relative;"> </br> <!-- 主頁 -->
<a href="./pin?light1=1"><button type="button" class="button" value="temp">溫度<span style="color: red; font-size: 25px;">
00°C</span></button></a>
<a href="./pin?light1=0"><button type="button" class="button" value="humi">溼度<span style="color: green;font-size: 25px;">
00%</span></button></a></br>
</center>
</body>
</html>
C語言部分：
#include <ESP8266WiFi.h>
#include <SimpleDHT.h>
int pinDHT11 = 4;
SimpleDHT11 dht11(pinDHT11);
const char* ssid = "8888";
const char* password = "88888888";
WiFiServer server(80);
void setup() {
Serial.begin(115200);
pinMode(2, OUTPUT);
digitalWrite(2, 0);
Serial.println(); // Connect to WiFi network
Serial.println();
Serial.print("Connecting to "); Serial.println(ssid);
WiFi.begin(ssid, password);
while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print(".");}
Serial.println("");
Serial.println("WiFi connected");
server.begin();
Serial.println(WiFi.localIP());
}
void loop() {
WiFiClient client = server.available();// Check if a client has connected
if (!client) { delay(100);return;}
Serial.println("=========================");
byte temperature = 0;
byte humidity = 0;
int err = SimpleDHTErrSuccess;
if ((err = dht11.read(&temperature, &humidity, NULL)) != SimpleDHTErrSuccess) {
Serial.print("Read TEM-HUM failed, err="); Serial.println(err);delay(2000);
return;}
Serial.print("DHT11 ~ TEM-HUM : ");
Serial.print((int)temperature); Serial.print("C, ");
Serial.print((int)humidity); Serial.println("%");
delay(2000);
client.flush();
String s = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\n ";
s+="<!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><meta http-equiv=\"Refresh\" content=\"5\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes\" /><meta http-equiv=\"X-UA-Compatible\" content=\"ie=edge\"><title>MeiShang Web Server Test System</title><style> h2,h1{line-height:1%;}body { margin: 0;padding: 0;width: 340px; background: LightCyan}.button { width: 100px; height: 100px; text-align: center; font-weight: 100; color: darkcyan; margin: 0 40px 40px 0; position: relative; border: 6px solid darkcyan; background: LightCyan; font-size: 20px; border-radius: 50%;}.top1 { width: 360px; height: 45px; color: #FFF; border: 1px solid darkcyan; background: darkcyan; font-size: 25px; border-radius: 0%;}</style></head><body><a href=\"./pin?light1=1\"><button class=\"button top1\">温湿度显示</button></a><center style=\"left: 20px; position: relative;\"></br><a href=\"./pin?light1=1\"><button type=\"button\" class=\"button\" value=\"temp\">溫度<span style=\"color: red;font-size: 25px;\">";
s += ((int)temperature);
s += "°C</span></button></a><a href=\"./pin?light1=0\"><button type=\"button\" class=\"button\" value=\"humi\">溼度<span style=\"color: green;font-size: 25px;\">";
s += ((int)humidity);
s += "%</span></button></a></br></center></body></html>";
client.print(s); delay(1);
}