基于arduino 用ESP8266获取DHT11温湿度数据显示在网页上

基于arduino 用ESP8266获取DHT11温湿度数据显示在网页上

原理: ESP8266获取DHT11温湿度数据发送到路由器局域网内,局域网内的手机电脑,访问esp的ip地址,获取实时的温湿度数据,每个5秒刷新一次。

网页显示内容:
基于arduino 用ESP8266获取DHT11温湿度数据显示在网页上_第1张图片
代码见最后,将代码拷贝到arduino中,打开串口监视器,编译上传。
串口监视器机会如图二显示局域网的ip 地址。 局域网内的手机电脑访问ip地址,如图一所示:
基于arduino 用ESP8266获取DHT11温湿度数据显示在网页上_第2张图片

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">&#x6E29;湿度显示
<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 
#include 
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\r\n\r\n ";
  s+="MeiShang Web Server Test System


"
; client.print(s); delay(1); }

你可能感兴趣的:(Arduino,Esp8266,Dht11,Arduino,Esp8266,Dht11)