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

最新推荐文章于 2023-11-21 14:17:33 发布

happyjoey217

最新推荐文章于 2023-11-21 14:17:33 发布

阅读量5.8k

点赞数 8

分类专栏： wemos d1mini

本文链接：https://blog.csdn.net/happyjoey217/article/details/91488907

版权

wemos d1mini 专栏收录该内容

22 篇文章 25 订阅

订阅专栏

物联网-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();
  }

}