概述

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服务器，程序里没有设置密码，直接连接就行。

串口实时输出的温度值。两者比较，显示结果无误，实验完成~~啦啦啦

物联网-wemos D1 Mini （esp8266）实验十 ---服务器版温度计相关推荐

阿里云IOT入门教程（三）阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 ）板载灯亮灭
阿里云IOT入门教程(一)阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 )板载灯亮灭概述所需材料 Mqtt预备知识 hacklab端开发 * 硬件端上报 ...
物联网-wemos D1 Mini （esp8266）实验五 -- 与Blynk合作的土壤湿度检测与远程浇花系统
1.材料: 2N2222 * 1 静音水泵*1 1K电阻*1 土壤湿度传感器 (带LM393模块)* 1 D1 Mini *1 面包板 *1 接线夹一个杜邦线若干 2.Blynk针对树莓派 ardu ...
wemos D1 Mini （esp8266）实验九 --- blynk APP远程控制格力空调开机并显示温湿度DHT22
物联网-wemos D1 Mini (esp8266)实验九 --- blynk APP远程控制格力空调开机并显示温湿度概述实验材料硬件硬件连接图引脚连接对照表 Arduino端软件编写测 ...
ESP8266/ESP32/nodeMcu/wemos D1 MINI开发板用TFT_eSPI库驱动ST7789（240*240）TFT显示屏
ESP8266/ESP32/nodeMcu/wemos D1 MINI开发板用TFT_eSPI库驱动ST7789(240*240)TFT显示屏材料硬件连接引脚连接表引脚连接图安装TFT_eS ...
基于物联网的多点温度监控系统（WeMOS D1 WIFI ESP8266 开发板）
基于物联网的多点温度监控系统一.设计任务与要求 1．任务设计制作基于物联网的多点温度监控系统. 2．要求 1.实时获取3个被测对象温度,温度测量范围:-55℃ -+125℃:测量精度:0.1℃ ...
WeMOS D1 MIni（Esp8266）、NodeMCU与ST7789 TFT液晶显示屏绘制图形
WeMOS D1 MIni(Esp8266).NodeMCU与ST7789 TFT液晶显示屏绘制图形材料硬件连接图 Arduino IDE支持Wemos D1 Mini. 库安装 Arduino_ ...
Esp8266 / nodeMCU / wemos D1 MINI GUIslice的配置（官翻）
Esp8266 / nodeMCU / wemos D1 MINI GUIslice的配置(官翻) 确定显示屏型号扩展版类(shield) 转接板类(breakout Board) 目前支持的显示屏 ...
GUIBuilder Walkthrough Esp8266 /nodeMCU / Wemos D1 mini 版教程（官翻详解演示版）
GUIBuilder Walkthrough Esp8266 /nodeMCU / Wemos D1 mini版教程(官翻演示版) GUIBuilder端基本操作添加标题(title) 添加一个计数 ...
从arduino板开始做到阿里云app控制--WeMos D1或ESP8266连接阿里云文章合集及源代码
近期不断有麻油问我要源代码,就不遮掩了,粘贴到此处,复制粘贴即可.前提是arduino环境搭建好. /** 这是使用wemos d1模块连接阿里云的代码,亲测成功* 注意阿里云设备三元素一定要用自己的 ...

物联网-wemos D1 Mini （esp8266）实验十 ---服务器版温度计