ESP8266基於WebServer實時獲取溫溼度
阿新 • • 發佈：2020-08-29
功能描述：通過在瀏覽器中訪問ESP8266提供的服務來獲取其實時的溫溼度資訊；
操作步驟：
第一步、將下面的程式碼燒錄到Esp中；
第二步、開啟串列埠除錯工具檢視該ESP8266的IP地址
第三步、訪問 IP地址/index.html 這個網址來獲取實時的溫溼度
#include <ESP8266WiFi.h> const char* ssid = "Wi-Fi名稱"; const char* password = "Wi-Fi密碼"; int temp = 0;//溫度 int humi = 0;//溼度 unsigned int loopCnt; int chr[40] = {0}; unsignedlong timer; #define pin D4 WiFiServer server(80); /** * 獲取溫溼度 */ void get_humiture() { bgn: delay(2000); //設定2號介面模式為：輸出 //輸出低電平20ms（>18ms） //輸出高電平40μs pinMode(pin,OUTPUT); digitalWrite(pin,LOW); delay(20); digitalWrite(pin,HIGH); delayMicroseconds(40); digitalWrite(pin,LOW); //設定2號介面模式：輸入pinMode(pin,INPUT); //高電平響應訊號 loopCnt=10000; while(digitalRead(pin) != HIGH) { if(loopCnt-- == 0) { //如果長時間不返回高電平，輸出個提示，重頭開始。 // Serial.println("HIGH"); goto bgn; } } //低電平響應訊號 loopCnt=30000; while(digitalRead(pin) != LOW) { if(loopCnt-- == 0) { //如果長時間不返回低電平，輸出個提示，重頭開始。// Serial.println("LOW"); goto bgn; } } //開始讀取bit1-40的數值 for(int i=0;i<40;i++) { while(digitalRead(pin) == LOW) {} //當出現高電平時，記下時間“timer” timer = micros(); while(digitalRead(pin) == HIGH) {} //當出現低電平，記下時間，再減去剛才儲存的timer //得出的值若大於50μs，則為‘1’，否則為‘0’ //並儲存到數組裡去 if (micros() - timer >50) { chr[i]=1; }else{ chr[i]=0; } } //溼度，8位的bit，轉換為數值 humi=chr[0]*128+chr[1]*64+chr[2]*32+chr[3]*16+chr[4]*8+chr[5]*4+chr[6]*2+chr[7]; //溫度，8位的bit，轉換為數值 temp=chr[16]*128+chr[17]*64+chr[18]*32+chr[19]*16+chr[20]*8+chr[21]*4+chr[22]*2+chr[23]; } void setup() { pinMode(D4, OUTPUT); Serial.begin(115200); delay(10); WiFi.begin(ssid, password); while (WiFi.status() != WL_CONNECTED) { delay(500); Serial.print("."); } Serial.println(""); Serial.println("WiFi connected"); // Start the server server.begin(); Serial.println("Server started"); // Print the IP address Serial.println(WiFi.localIP()); } void loop() { // Check if a client has connected WiFiClient client = server.available(); if (!client) { return; } // Wait until the client sends some data Serial.println("new client connected"); while(!client.available()){ delay(1); } // Read the first line of the request String req = client.readStringUntil('\r'); Serial.println(req); client.flush(); get_humiture(); // Prepare the response String page = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\n<head>"; page += "<meta charset='utf-8'>"; // page += "\r\n<link href='https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css' rel='stylesheet'>"; page += "\r\n<script src='https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js'></script>"; page += "\r\n</head>\r\n<body style='padding:10px'>"; page += "\r\n<h1>實時溫溼度:</h1><br>"; // 日期 page += "\r\n<div id='date'></div><br>"; String humistring = "溫度： "; humistring += temp; humistring += " 溼度："; humistring += humi; // 溫溼度 page += "\r\n<div id='content'>"; page += humistring; page += "</div><br>"; page += "\r\n<script>\r\n"; page += "var date = new Date(); $('#date').text(date);"; page += "\r\n"; page += "setInterval(function(){$.post('/gethumi', {}, function(res) {var date = new Date(); $('#date').text(date); $('#content').html(res);})}, 3000);"; page += "\r\n"; page += "console.log('" + humistring + "')"; page += "\r\n</script>"; page += "\r\n</body>\r\n</html>\n"; // Match the request if (req.indexOf("/index.html") != -1) { client.print(page); return; } else if (req.indexOf("/gethumi") != -1) { String humires = "HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\n<!DOCTYPE HTML>\r\n<html>\r\n<head>"; humires += "<meta charset='utf-8'></head><body>"; humires += humistring; humires += "</body></html>"; client.print(humires); } else { Serial.println("invalid request"); client.stop(); return; } delay(1); }