物联网-wemos D1 Mini （esp8266）实验十 ---服务器版温度计
物联网-wemos D1 Mini （esp8266）实验十 ---服务器版温度计
- 概述
- 实验材料
- 硬件连接图
- 引脚对照表
- DHT库的引入
- 网页代码
- Arduino端代码
- 效果展示
概述
Wemos D1 Mini作为服务器，实时测量并显示温度。涉及到服务器端html的编写和页面数据更新显示。
实验材料
- Wemos D1 Mini开发板 * 1 9.9元
- Wemos D 1Mini DHT22扩展板（19元）
/DHT22模块（14元）/DHT11（5.5元）模块 3选1
合计：15.4-28.9元
硬件连接图
引脚对照表
| DHT11 | Wemos D1 Mini |
|---|---|
1 |
3.3V |
| 2 | D4 |
| 3 | 悬空 |
| 4 | Gnd |
- DHT22引脚连接图
| DHT22 | Wemos D1 Mini |
|---|---|
+ |
3.3V |
| OUT | D4 |
| - | Gnd |
DHT库的引入
之前空调的教程里面已经详细的介绍了关于DHT库的使用，这里就不多做描述了，对这个部分不清楚可以直接跳转到下面这个帖子。
wemos D1 Mini （esp8266）实验九 — blynk APP远程控制格力空调开机并显示温湿度DHT22
网页代码
这段代码是根据台湾旗标的一个MAX30100血氧检测的代码改写的。
//----------------------主页面 (/)--------------------
static const char mainPage[] PROGMEM = u8R"(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>温度检测</title>
<style type="text/css">
body {
/*height: 100vh;*/
background: rgb(55, 215, 218);
font-family: Microsoft JhengHei;
}
.button {
background-color: #919191;
/* Green */
border: none;
font-family: Microsoft JhengHei;
width: 160px;
height:160px;
color: white;
padding: 50px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
display: inline-block;
font-size: 50px;
margin-bottom: 100px;
cursor: pointer;
border-radius: 100px;
}
.preventcopy {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
p {
font-size: 40px;
font-family: Microsoft JhengHei;
color: white;
}
.num{
font-family: Microsoft JhengHei;
color: rgb(231, 251, 44);
font-size: 150px;
}
.ruler1{
font-family: Microsoft JhengHei;
color: red;
font-size: 40px;
}
.ruler2{
font-family: Microsoft JhengHei;
color: white;
font-size: 40px;
}
div {
text-align: center;
}
</style>
<script type="text/javascript">
var value = 50;
var isrun = 0;
function getvalue() {
if (isrun) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
value = parseInt(this.responseText);
}
};
xhttp.open("GET", "/measure", true);
xhttp.send();
document.getElementById("snum").innerHTML = value;
if(value==0){
document.getElementById("r1").innerHTML = "▁ ";
document.getElementById("r2").innerHTML = "▂ ▃ ▅ ▆ ▇";
}
else if(value>0 && value<=10){
document.getElementById("r1").innerHTML = "▁ ▂ ";
document.getElementById("r2").innerHTML = "▃ ▅ ▆ ▇";
}
else if(value>10 && value<=20){
document.getElementById("r1").innerHTML = "▁ ▂ ▃ ";
document.getElementById("r2").innerHTML = "▅ ▆ ▇";
}
else if(value>20 && value<=30){
document.getElementById("r1").innerHTML = "▁ ▂ ▃ ▅ ";
document.getElementById("r2").innerHTML = "▆ ▇";
}
else if(value>40 && value<=50){
document.getElementById("r1").innerHTML = "▁ ▂ ▃ ▅ ▆ ";
document.getElementById("r2").innerHTML = "▇";
}
else if(value>60 && value<=70){
document.getElementById("r1").innerHTML = "▁ ▂ ▃ ▅ ▆ ▇";
document.getElementById("r2").innerHTML = "";
}
}
}
function start(){
if(isrun==0){
isrun=1;
document.getElementById("switch").innerHTML = "⬜";
}
else if(isrun==1){
isrun=0;
document.getElementById("switch").innerHTML = "▷";
}
}
window.setInterval(function() {
getvalue();
}, 100);
</script>
</head>
<body class=preventcopy ondragstart="return false" oncontextmenu="return false" onselectstart="return false">
<div>
<p><span id=snum class=num>0</span>摄氏度</p>
<p><span id=r1 class=ruler1>▁ </span><span id=r2 class=ruler2>▂ ▃ ▅ ▆ ▇</span><p/>
<button type="button" class="button" onclick='start()'><span id=switch>▷</span></button>
</div>
</body>
</html>
)";
//----------------------错误路径页面--------------------
static const char errorPage[] PROGMEM= u8R"(
<!DOCTYPE html>
<html>
<style type='text/css'>
body{
/*height: 100vh;*/
background: tomato;
font-family: Microsoft JhengHei;
}
div.all{
border: 5px solid white;
text-align: center;
padding: 30px;
margin-top: 35%;
}
h1{
color: rgb(240,240,240);
}
button {
border: none;
padding: 13px 15px;
margin: 4px 2px;
font-size: 15px;
text-align: center;
text-decoration: none;
display: inline-block;
cursor: pointer;
background-color: #F6EC00;
border-radius: 4px;
color: tomato;
font-weight: 900;
font-size: 15px;
}
button:hover {
background-color: #555555;
color: white;
}
</style>
<head>
<meta charset='UTF-8'>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<script>
function backToHome() {
location.href = '/';
}
</script>
<title>温湿度检测报警--路径错误</title>
</head>
<body>
<div class='all'>
<h1>地址错误，请检查</h1>
<button onClick='backToHome()'>回主頁</button>
</div>
</body>
</html>
)";
//---------------------设定页面 (/setting)
static const char settingPage[] PROGMEM= u8R"(
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>设定页面</title>
<style type="text/css">
body {
/*height: 100vh;*/
background: rgb(55, 215, 218);
font-family: Microsoft JhengHei;
}
.button {
background-color: #919191;
/* Green */
border: none;
font-family: Microsoft JhengHei;
width: 160px;
height:160px;
color: white;
padding: 0px;
padding-top: 40px;
padding-bottom: 40px;
text-align: center;
display: inline-block;
font-size: 30px;
margin: 50px;
cursor: pointer;
border-radius: 100px;
}
p {
font-size: 40px;
font-family: Microsoft JhengHei;
color: white;
}
div {
text-align: center;
}
</style>
<script type="text/javascript">
</script>
</head>
<body>
<div>
<p>此程序不需要设定</p>
<button type="button" class="button" onclick="self.location.href='http://192.168.4.1'">回主頁</button>
</div>
</body>
</html>
)";
//-------下面这段定义是将上述网页内容都放入程序存储区，节省空间--------------
#define WEBPAGE_IN_PROGMEM
Arduino端代码
#include <ESP8266WiFi.h>
#include <ESP8266WebServer.h>
#include "data/webpages_DHT22.h"
#include "DHT.h"
#define DHTPIN D4 // what pin we're connected to 我们连接到传感器信号引脚的接口
#define DHTTYPE DHT22 // DHT 22 (AM2302)
unsigned long passedTime;//开机到现在经过的时间
int Temperature;
ESP8266WebServer _esp8266WebServer(80);
DHT _dht(DHTPIN, DHTTYPE);//创建一个DHT的实例
void handleRoot() {
#ifndef WEBPAGE_IN_PROGMEM
_esp8266WebServer.send(200, "text/html", mainPage);
#else
_esp8266WebServer.send_P(200, PSTR("text/html"), mainPage);
#endif
}
void handleNotFound() {
#ifndef WEBPAGE_IN_PROGMEM
_esp8266WebServer.send(404, "text/html", errorPage);
#else
_esp8266WebServer.send_P(404, PSTR("text/html"), errorPage);
#endif
}
void handleSetting() {
#ifndef WEBPAGE_IN_PROGMEM
_esp8266WebServer.send(200, "text/html", settingPage);
#else
_esp8266WebServer.send_P(200, PSTR("text/html"), settingPage);
#endif
}
void sendDate() {//将温度值发送到界面
_esp8266WebServer.send(200, u8"text/plain", String(Temperature));
}
// setup() 會先被執行且只會執行一次
void setup() {
Serial.begin(115200);//开启串口
_dht.begin();
passedTime = millis();
while (!WiFi.softAP(u8"Temperature", u8"", 1,false));
_esp8266WebServer.on("/measure", sendDate);
_esp8266WebServer.on("/", handleRoot);
_esp8266WebServer.onNotFound(handleNotFound);
_esp8266WebServer.on("/setting", handleSetting);
_esp8266WebServer.begin();
}
int getTemperat() {//这段代码是不是很眼熟。。。这就是之前实验九里的。。。
float h = _dht.readHumidity();//读取湿度值放入h变量
float t = _dht.readTemperature();//读取温度值放入t变量
float f = _dht.readTemperature(true);
if (isnan(h) || isnan(t) || isnan(f)) {
Serial.println("Failed to read from DHT sensor!");
return 0 ;
}
// Compute heat index in Fahrenheit (the default)
float hif = _dht.computeHeatIndex(f, h);
// Compute heat index in Celsius (isFahreheit = false)
float hic = _dht.computeHeatIndex(t, h, false);
Serial.print("Humidity: ");
Serial.print(h);
Serial.print(" %\t");
Serial.print("Temperature: ");
Serial.print(t);
Serial.print(" *C ");
Serial.print(f);
Serial.print(" *F\t");
Serial.print("Heat index: ");
Serial.print(hic);
Serial.print(" *C ");
Serial.print(hif);
Serial.println(" *F");
return int(t);
}
// loop() 裡面的程式會不斷重複執行
void loop() {
_esp8266WebServer.handleClient();
if (millis() - passedTime > 100) {
Temperature = getTemperat();//获取温度
passedTime = millis();
}
}
效果展示
- 连接Wemos D1 Mini服务器，程序里没有设置密码，直接连接就行。
串口实时输出的温度值。两者比较，显示结果无误，实验完成~~啦啦啦