首页 » 互联网 » ESP32 DHT11 / DHT22 Web做事器_传感器_读数

ESP32 DHT11 / DHT22 Web做事器_传感器_读数

神尊大人 2024-12-05 20:57:01 0

扫一扫用手机浏览

文章目录 [+]

在本项目中，您将学习如何利用DHT11或DHT22来构建异步ESP32 Web做事器，该做事器利用Arduino IDE显示温度和湿度。

我们将构建的网络做事器无需刷新网页即可自动更新读数。

ESP32 DHT11 / DHT22 Web做事器_传感器_读数 互联网

通过这个项目，您将学到：

· 如何从DHT传感器读取温度和湿度；

· 利用ESPAsyncWebServer库构建异步Web做事器;

· 自动更新传感器读数，而无需刷新网页。

异步Web做事器

为了构建Web做事器，我们将利用ESPAsyncWebServer库，该供应了一种构建异步Web做事器的简便方法。
如库GitHub页面中所述，构建异步Web做事用具有多个优点，例如：

· "同时处理多个连接"；

· "当您发送相应时，当做事器卖力在后台发送相应时，您将立即准备处理其他连接"；

· "用于处理模板的大略模板处理引擎"；

· 以及更多。

所需部件

要完本钱教程，您须要以下部分：

ESP32开拓板 DHT22 或 DHT11 温湿度传感器4.7k欧姆电阻面包板跳线

事理图

进入Web做事器之前，您须要按照以下示意图所示将DHT11或DHT22传感器连接到ESP32。

在这种情形下，我们将数据引脚连接到GPIO 27，但是您可以将其连接到任何其他数字引脚。
您可以将此示意图用于DHT11和DHT22传感器。

（此事理图利用带有36个GPIO的ESP32 DEVKIT V1模块版本–如果您利用的是其他型号，请检讨所用电路板的引脚排列。
）

把稳：如果您利用的模块带有DHT传感器，则常日只有三个引脚。
引脚上应标有标签，以便您知道如何进行接线。
此外，这些模块中的许多模块已经带有内部上拉电阻，因此您无需在电路中增加一个。

安装库

您须要为此项目安装几个库：

· DHT和Adafruit的统一传感器驱动器库读取DHT传感器数据。

· ESPAsyncWebServer和Async TCP库可构建异步Web做事器。

按照以下解释安装这些库：

安装DHT传感器库

要利用Arduino IDE读取DHT传感器，您须要安装DHT传感器库 。
请按照以下步骤安装库。

1. 下载DHT-sensor-library-master .zip文件

2. 解压缩.zip文件夹，您该当得到 DHT-sensor-library-master 文件夹

3. 重命名您的文件夹 到DHT_sensor

4. 将DHT_sensor 文件夹移至Arduino IDE安装库文件夹

5. 末了，重新打开您的Arduino IDE

安装Adafruit统一传感器驱动程序

您还须要安装Adafruit统一传感器驱动程序库才能利用DHT传感器。
请按照以下步骤安装库。

1. 下载 Adafruit_sensor-master.zip文件

2. 解压缩.zip文件夹，您该当得到 Adafruit_sensor-master 文件夹

3. 重命名您的文件夹 到 Adafruit_sensor

4. 将Adafruit_sensor文件夹移至Arduino IDE安装库文件夹

5. 末了，重新打开您的Arduino IDE

安装ESPAsyncWebServer库

请按照以下步骤安装 ESPAsyncWebServer库：

1. 下载ESPAsyncWebServer-master.zip文件

2. 解压缩.zip文件夹，您该当得到ESPAsyncWebServer-master文件夹

3. 重命名您的文件夹 到ESPAsyncWebServer

4. 将ESPAsyncWebServer 文件夹移至Arduino IDE安装库文件夹

为ESP32安装异步TCP库

该 ESPAsyncWebServer库须要 AsyncTCP库才能事情。
请按照以下步骤安装该库：

1. 下载AsyncTCP-master.zip文件

2. 解压缩.zip文件夹，您该当得到AsyncTCP-master文件夹

3. 重命名您的文件夹 到AsyncTCP

4. 将AsyncTCP文件夹移至Arduino IDE安装库文件夹

5. 末了，重新打开您的Arduino IDE

程序代码

我们将利用Arduino IDE对ESP32进行编程，因此在连续之前，请确保已安装ESP32附加组件：

打开您的Arduino IDE并复制以下代码。

/

Rui Santos

Complete project details at https://randomnerdtutorials.com

/

// Import required libraries

#include "WiFi.h"

#include "ESPAsyncWebServer.h"

#include <Adafruit_Sensor.h>

#include <DHT.h>

// Replace with your network credentials

const char ssid = "REPLACE_WITH_YOUR_SSID";

const char password = "REPLACE_WITH_YOUR_PASSWORD";

#define DHTPIN 27 // Digital pin connected to the DHT sensor

// Uncomment the type of sensor in use:

//#define DHTTYPE DHT11 // DHT 11

#define DHTTYPE DHT22 // DHT 22 (AM2302)

//#define DHTTYPE DHT21 // DHT 21 (AM2301)

DHT dht(DHTPIN, DHTTYPE);

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

String readDHTTemperature() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

// Read temperature as Celsius (the default)

float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

//float t = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(t);

return String(t);

}

}

String readDHTHumidity() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

float h = dht.readHumidity();

if (isnan(h)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(h);

return String(h);

}

}

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

</head>

<body>

<h2>ESP32 DHT Server</h2>

<p>

<i class="fas fa-thermometer-half" style="color:#059e8a;"></i>

<span class="dht-labels">Temperature</span>

<span id="temperature">%TEMPERATURE%</span>

<sup class="units">°C</sup>

</p>

<p>

<i class="fas fa-tint" style="color:#00add6;"></i>

<span class="dht-labels">Humidity</span>

<span id="humidity">%HUMIDITY%</span>

<sup class="units">%</sup>

</p>

</body>

<script>

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("humidity").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/humidity", true);

xhttp.send();

}, 10000 ) ;

</script>

</html>)rawliteral";

// Replaces placeholder with DHT values

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

return String();

}

void setup(){

// Serial port for debugging purposes

Serial.begin(115200);

dht.begin();

// Connect to Wi-Fi

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

// Print ESP32 Local IP Address

Serial.println(WiFi.localIP());

// Route for root / web page

server.on("/", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/html", index_html, processor);

});

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/plain", readDHTTemperature().c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

// Start server

server.begin();

}

void loop(){

}

将WIFI用户名和密码插入以下变量中，该代码将立即生效。

const char ssid = "REPLACE_WITH_YOUR_SSID";

const char password = "REPLACE_WITH_YOUR_PASSWORD";

代码如何事情

不才面的段落中，我们将阐明代码的事情办法。

导入库

首先，导入所需的库。
须要WiFi，ESPAsyncWebServer和ESPAsyncTCP来构建Web做事器。
Adafruit_Sensor和DHT是从DHT11或DHT22传感器来读取数据。

#include "WiFi.h"

#include "ESPAsyncWebServer.h"

#include <ESPAsyncTCP.h>

#include <Adafruit_Sensor.h>

#include <DHT.h>

设置您的WIFI网络

在以下变量中插入您的用户名和密码，以便ESP32可以连接到您确当地WIFI网络。

const char ssid = "REPLACE_WITH_YOUR_SSID";

const char password = "REPLACE_WITH_YOUR_PASSWORD";

变量定义

定义DHT数据引脚连接的GPIO。
在这种情形下，它已连接到GPIO 27。

#define DHTPIN 27 // Digital pin connected to the DHT sensor

然后，选择您正在利用的DHT传感器类型。
在我们的示例中，我们利用的是DHT22。
如果您利用的是其他类型，则只须要取消注释传感器并注释所有其他传感器即可。

#define DHTTYPE DHT22 // DHT 22 (AM2302)

利用我们之前定义的类型和引脚实例化DHT工具。

DHT dht(DHTPIN, DHTTYPE);

在端口80上创建一个AsyncWebServer工具。

AsyncWebServer server(80);

读取温度和湿度函数

我们创建了两个函数：一个读取温度（readDHTTemperature（）），另一个读取湿度（readDHTHumidity（））。

String readDHTTemperature() {

// Sensor readings may also be up to 2 seconds 'old' (its a very slow sensor)

// Read temperature as Celsius (the default)

float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

//float t = dht.readTemperature(true);

// Check if any reads failed and exit early (to try again).

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

else {

Serial.println(t);

return String(t);

}

}

获取传感器读数就像在dht工具上利用readTemperature（）和readHumidity（）方法一样大略。

float t = dht.readTemperature();

float h = dht.readHumidity();

如果传感器无法得到读数，我们还有一个条件返回两个破折号（–）。

if (isnan(t)) {

Serial.println("Failed to read from DHT sensor!");

return "--";

}

读数以字符串类型返回。
要将float转换为字符串，请利用String（）函数。

return String(t);

默认情形下，我们以摄氏度为单位读取温度。
要获取以华氏度为单位的温度，请以摄氏度为单位注释温度，并以华氏度为注释温度，以便您具有以下条件：

//float t = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

float t = dht.readTemperature(true);

建立网页

进入Web做事器页面。

如上图所示，该网页显示一个标题和两个段落。
有一段显示温度，另一段显示湿度。
还有两个图标可以美化我们的页面。

让我们看看如何创建此网页。

所有包含样式的HTML文本都存储在index_html变量中。
现在，我们将遍历HTML文本，并查看每个部分的浸染。

以下<meta>标记使您的网页在任何浏览器中都能相应。

<meta name="viewport" content="width=device-width, initial-scale=1">

所述<链路>须要标签来从网站fontawesome加载的图标。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

风格样式

在<style> </ style>标记之间，我们添加了一些CSS来设置网页样式。

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

.dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

</style>

基本上，我们将HTML页面设置为显示Arial字体的文本，该文本以不带边距的块显示，并居中对齐。

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

我们为读数的标题（h2），段落（p）和单位（.units）设置字体大小。

h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

读数的标签样式如下所示：

dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

先前的所有标记应位于<head>和</ head>标记之间。
这些标记用于包含用户不直接可见的内容，例如<meta>，<link>标记和样式。

HTML主体

在<body> </ body>标记内是我们添加网页内容的位置。

该<h2> </ h2>标签标题添加到网页。
在这种情形下，" ESP32 DHT做事器"文本，但是您可以添加任何其他文本。

<h2>ESP32 DHT Server</h2>

然后，有两个段落。
一个显示温度，另一个显示湿度。
段落由<p>和</ p>标记分隔。
温度的段落如下：

<p>

<i class="fas fa-thermometer-half" style="color:#059e8a;"</i>

<span class="dht-labels">Temperature</span>

<span id="temperature">%TEMPERATURE%</span>

<sup class="units">°C</sup>

</p>

湿度的段落在以下择要中：

<p>

<i class="fas fa-tint" style="color:#00add6;"></i>

<span class="dht-labels">Humidity</span>

<span id="humidity">%HUMIDITY%</span>

<sup class="units">%</sup>

</p>

所述的<i>标签显示fontawesome图标。

如何显示图标

要选择图标，请访问。

搜索您要查找的图标。
例如，"温度计"。

单击所需的图标。
然后，您只须要复制供应的HTML文本。

<i class="fas fa-thermometer-half">

要选择颜色，您只须要通过十六进制通报颜色的样式参数，如下所示：

<i class="fas fa-tint" style="color:#00add6;"></i>

连续HTML文本…

下一行在网页中写入"温度"一词。

<span class="dht-labels">Temperature</span>

％符号之间的TEMPERATURE文本是温度值的占位符。

<span id="temperature">%TEMPERATURE%</span>

这意味着此％TEMPERATURE％文本就像一个变量，将被DHT传感器的实际温度值代替。
HTML文本上的占位符应位于％符号之间。

末了，我们添加度数符号。

<sup class="units">°C</sup>

该<SUP> < / SUP>标签使文本标。

对付湿度段，我们利用相同的方法，但是利用不同的图标和％HUMIDITY％占位符。

<p>

<i class="fas fa-tint" style="color:#00add6;"></i>

<span class="dht-labels">Humidity</span>

<span id="humidity">%HUMIDITY%</span>

<sup class="units">%</sup>

</p>

自动更新

末了，我们的网页中有一些JavaScript代码，每10秒自动更新一次温度和湿度。

HTML文本中的脚本应位于<script> </ script>标记之间。

<script>

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

setInterval(function ( ) {

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById("humidity").innerHTML = this.responseText;

}

};

xhttp.open("GET", "/humidity", true);

xhttp.send();

}, 10000 ) ;

</script>

要更新背景温度，我们有一个setInterval（）函数，该函数每10秒运行一次。

基本上，它在/ temperature URL中发出要求以获取最新的温度读数。

xhttp.open("GET", "/temperature", true);

xhttp.send();

}, 10000 ) ;

收到该值时，它将更新id为temperature的HTML元素。

if (this.readyState == 4 && this.status == 200) {

document.getElementById("temperature").innerHTML = this.responseText;

}

总而言之，上一节卖力异步更新温度。
对湿度读数重复相同的过程。

主要提示：由于DHT传感器获取读数的速率非常慢，如果您操持同时将多个客户端连接到ESP32，建议您增加要求间隔或删除自动更新。

处理器

现在，我们须要创建processor（）函数，该函数将用实际的温度和湿度值更换HTML文本中的占位符。

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

return String();

}

当要求网页时，我们检讨HTML是否具有任何占位符。
如果找到％TEMPERATURE％占位符，则通过调用先前创建的readDHTTemperature（）函数来返回温度。

if(var == "TEMPERATURE"){

return readDHTTemperature();

}

如果占位符为％HUMIDITY％，则返回湿度值。

else if(var == "HUMIDITY"){

return readDHTHumidity();

}

设定（）

在setup（）中，初始化串口监视器以进行调试。

Serial.begin(115200);

初始化DHT传感器。

dht.begin();

连接到您的局域网并打印ESP32 IP地址。

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) {

delay(1000);

Serial.println("Connecting to WiFi..");

}

末了，添加以下代码行以处理Web做事器。

server.on("/", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/html", index_html, processor);

});

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/plain", readDHTTemperature().c_str());

});

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

当我们在根URL上发出要求时，我们将发送存储在index_html变量中的HTML文本。
我们还须要通报处理器函数，该函数将用精确的值更换所有占位符。

server.on("/", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/html", index_html, processor);

});

我们须要添加两个其他处理程序来更新温度和湿度读数。
当我们在/ temperature URL 上收到要求时，我们只须要发送更新的温度值。
它是纯文本，该当以char形式发送，因此我们利用c_str（）方法。

server.on("/temperature", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/plain", readDHTTemperature().c_str());

});

对湿度重复相同的过程。

server.on("/humidity", HTTP_GET, [](AsyncWebServerRequest request){

request->send_P(200, "text/plain", readDHTHumidity().c_str());

});

末了，我们可以启动做事器。

server.begin();

由于这是一个异步Web做事器，以是我们不须要在loop（）中编写任何内容。

void loop(){

}

以上便是代码的事情事理。

上载验证程序

现在，将代码上传到ESP32。
确保选择了精确的板和COM端口。

上传后，以115200的波特率打开串口监视器。
按ESP32复位按钮。
ESP32 IP地址应在串口监视器中打印。

Web做事器演示

打开浏览器，输入ESP32 IP地址。
您的Web做事器应显示最新的传感器读数。

请把稳，温度和湿度读数会自动更新，而无需刷新网页。

在本教程中，我们向您展示了如何利用ESP32构建异步Web做事器以显示来自DHT11或DHT22传感器的传感器读数以及如何自动更新读数。

标签：

相关文章

海珠IT,打造智慧城市新引擎

海珠IT,打造智慧城市新引擎

随着我国经济的快速发展，城市化进程不断加快，城市智能化建设成为时代发展的必然趋势。海珠IT作为我国智慧城市建设的重要引擎，凭借其独...

互联网 2024-12-28 阅读0 评论0
深圳IT业务,创新驱动下的产业发展新引擎

深圳IT业务,创新驱动下的产业发展新引擎

随着全球科技浪潮的席卷，我国深圳作为改革开放的前沿阵地，IT产业发展势头迅猛。从“世界工厂”到“创新之都”，深圳IT业务已成为我国...

互联网 2024-12-28 阅读0 评论0