ESP8266 DHT11 DHT22 Nhiệt độ và Độ ẩm Máy chủ Web với Arduino IDE

Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (1.21 MB, 31 trang )

ESP8266 DHT11 / DHT22 Nhiệt độ và Độ ẩm Máy chủ
Web với Arduino IDE
Trong dự án này, bạn sẽ tạo một máy chủ web độc lập với ESP8266 hiển thị nhiệt độ và
độ ẩm bằng cảm biến DHT11 hoặc DHT22 bằng Arduino IDE. Máy chủ web bạn sẽ xây
dựng có thể được truy cập bằng bất kỳ thiết bị nào có trình duyệt trên mạng cục bộ của
bạn.

Trong suốt hướng dẫn này, chúng tôi sẽ chỉ ra cách xây dựng hai máy chủ web khác
nhau:
Máy chủ web #1: Máy chủ web không đồng bộ tự động cập nhật nhiệt độ và độ ẩm
mà không cần làm mới trang web và với CSS tùy chỉnh để tạo kiểu cho trang web.
Máy chủ web #2: Máy chủ web HTTP đơn giản hiển thị các bài đọc cảm biến mới
nhất khi trang được cập nhật trong trang HTML thơ.
Tài ngun được đề xuất:
Tìm hiểu thêm về ESP8266 với khóa học của chúng tơi: Tự động hóa gia đình bằng
ESP8266.

Các bộ phận cần thiết

1/31

Để xây dựng dự án này, bạn cần các phần sau:
Bảng phát triển ESP8266 (đọc so sánh bảng phát triển ESP8266 )
Cảm biến nhiệt độ và độ ẩm DHT22 hoặc DHT11
Điện trở 4.7k Ohm
Breadboard
Dây nhảy

Sơ đồ ESP8266 và DHT11 / DHT22
Trước khi tiếp tục hướng dẫn, hãy nối dây cảm biến nhiệt độ và độ ẩm DHT11 hoặc

DHT22 với ESP8266 như thể hiện trong sơ đồ sau.

2/31

Trong ví dụ này, chúng tơi đang nối chân dữ liệu DHT với GPIO5 (D1), nhưng bạn có thể
sử dụng bất kỳ GPIO phù hợp nào khác. Đọc Hướng dẫn tham khảo GPIO ESP8266 của
chúng tơi để tìm hiểu thêm về các GPIO ESP8266.
Nếu bạn đang sử dụng ESP-01, GPIO 2 là chân phù hợp nhất để kết nối với chân dữ liệu
DHT, như thể hiện trong sơ đồ tiếp theo.

3/31

Cài đặt thư viện DHT cho ESP8266
Để đọc từ cảm biến DHT, chúng ta sẽ sử dụng thư viện DHT từ Adafruit. Để sử dụng thư
viện này, bạn cũng cần cài đặt thư viện Adafruit Unified Sensor. Làm theo các bước tiếp
theo để cài đặt các thư viện đó.
1. Mở Arduino IDE của bạn và đi tới Sketch > Include Library > Manage Libraries.
Trình quản lý thư viện sẽ mở.
2. Tìm kiếm "DHT" trên hộp Tìm kiếm và cài đặt thư viện DHT từ Adafruit.

4/31

3. Sau khi cài đặt thư viện DHT từ Adafruit, gõ "Adafruit Unified Sensor" vào hộp tìm
kiếm. Cuộn xuống để tìm thư viện và cài đặt nó.

Sau khi cài đặt các thư viện, hãy khởi động lại Arduino IDE của bạn.

1. Máy chủ Web không đồng bộ ESP8266
Để xây dựng máy chủ web, chúng tôi sẽ sử dụng thư viện ESPAsyncWebServer cung
cấp một cách dễ dàng để xây dựng một máy chủ web không đồng bộ. Xây dựng một máy
chủ web khơng đồng bộ có một số lợi thế. Chúng tôi khuyên bạn nên xem nhanh tài liệu
thư viện trên trang GitHub của nó.
5/31

Cài đặt thư viện ESPAsyncWebServer
Thư viện ESPAsyncWebServer khơng có sẵn để cài đặt trong Trình quản lý thư viện
Arduino IDE. Vì vậy, bạn cần cài đặt nó bằng tay.
Làm theo các bước tiếp theo để cài đặt thư viện ESPAsyncWebServer:
1. Bấm vào đây để tải xuống thư viện ESPAsyncWebServer. Bạn sẽ có một thư mục
.zip trong thư mục Tải xuống của mình
2. Giải nén thư mục .zip và bạn sẽ nhận được thư mục ESPAsyncWebServer-master
3. Đổi tên thư mục của bạn từ ESPAsyncWebServer-master thành
ESPAsyncWebServer
4. Di chuyển thư mục ESPAsyncWebServer vào thư mục thư viện cài đặt Arduino IDE
của bạn
Cài đặt Thư viện TCP ESPAsync
Thư viện ESPAsyncWebServer yêu cầu thư viện ESPAsyncTCP hoạt động. Làm theo
các bước tiếp theo để cài đặt thư viện đó:
1. Bấm vào đây để tải xuống thư viện ESPAsyncTCP. Bạn sẽ có một thư mục .zip
trong thư mục Tải xuống của mình
2. Giải nén thư mục .zip và bạn sẽ nhận được thư mục ESPAsyncTCP-master
3. Đổi tên thư mục của bạn từ ESPAsyncTCP-master thành ESPAsyncTCP
4. Di chuyển thư mục ESPAsyncTCP vào thư mục thư viện cài đặt Arduino IDE của
bạn
5. Cuối cùng, mở lại Arduino IDE của bạn

Mã

Chúng tơi sẽ lập trình ESP8266 bằng Arduino IDE, vì vậy bạn phải cài đặt tiện ích bổ
sung ESP8266 trong Arduino IDE của mình. Nếu bạn chưa có, hãy làm theo hướng dẫn
tiếp theo trước:
Cài đặt bảng ESP8266 trong Arduino IDE
Mở Arduino IDE của bạn và sao chép mã sau.

6/31

/*********

Rui Santos

Complete project details at />
*********/

// Import required libraries

#include <Arduino.h>

#include <ESP8266WiFi.h>

#include <Hash.h>

#include <ESPAsyncTCP.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 5

// 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);

// current temperature & humidity, updated in loop()

float t = 0.0;

float h = 0.0;

// Create AsyncWebServer object on port 80

AsyncWebServer server(80);

// Generally, you should use "unsigned long" for variables that hold time

// The value will quickly become too large for an int to store

unsigned long previousMillis = 0;
// will store last time DHT was updated

// Updates DHT readings every 10 seconds

const long interval = 10000;

const char index_html[] PROGMEM = R"rawliteral(

<!DOCTYPE HTML><html>

<head>

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

href=" integrity="sha384fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">

<style>

html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

7/31

}

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>

ESP8266 DHT Server

<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>

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

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

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

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

</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 String(t);

8/31

}

else if(var == "HUMIDITY"){

return String(h);

}

return String();

}

void setup(){

// Serial port for debugging purposes

Serial.begin(115200);

dht.begin();

// Connect to Wi-Fi

WiFi.begin(ssid, password);

Serial.println("Connecting to WiFi");

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

delay(1000);

Serial.println(".");

}

// Print ESP8266 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", String(t).c_str());

});

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

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

});

// Start server

server.begin();

}

void loop(){

unsigned long currentMillis = millis();

if (currentMillis - previousMillis >= interval) {

// save the last time you updated the DHT values

previousMillis = currentMillis;

// Read temperature as Celsius (the default)

float newT = dht.readTemperature();

// Read temperature as Fahrenheit (isFahrenheit = true)

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

// if temperature read failed, don't change t value

if (isnan(newT)) {

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

}

else {

t = newT;

Serial.println(t);

}

// Read Humidity

9/31

float newH = dht.readHumidity();

// if humidity read failed, don't change h value

if (isnan(newH)) {

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

}

else {

h = newH;

Serial.println(h);

}

}

}

Xem mã thô
Chèn thông tin đăng nhập mạng của bạn vào các biến sau và mã sẽ hoạt động ngay lập
tức.
const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Mã hoạt động như thế nào
Trong các đoạn sau, chúng tơi sẽ giải thích cách mã hoạt động. Hãy tiếp tục đọc nếu bạn
muốn tìm hiểu thêm hoặc chuyển đến phần Trình diễn để xem kết quả cuối cùng.
Nhập thư viện

Đầu tiên, nhập các thư viện cần thiết.
#include
#include
#include
#include
#include
#include
#include

<Arduino.h>

<ESP8266WiFi.h>

<Hash.h>

<ESPAsyncTCP.h>

<ESPAsyncWebServer.h>

<Adafruit_Sensor.h>

<DHT.h>

Đặt thông tin đăng nhập mạng của bạn
Chèn thông tin đăng nhập mạng của bạn vào các biến sau, để ESP8266 có thể kết nối
với mạng cục bộ của bạn.
const char* ssid = "REPLACE_WITH_YOUR_SSID";

const char* password = "REPLACE_WITH_YOUR_PASSWORD";

Định nghĩa biến
Xác định GPIO mà chân dữ liệu DHT được kết nối. Trong trường hợp này, nó được kết
nối với GPIO5 (D1).
#define DHTPIN 5

// Digital pin connected to the DHT sensor

10/31

Sau đó, chọn loại cảm biến DHT bạn đang sử dụng. Trong ví dụ của chúng tơi, chúng tơi
đang sử dụng DHT22. Nếu bạn đang sử dụng loại khác, bạn chỉ cần bỏ nhận xét cảm
biến của mình và nhận xét tất cả các loại khác.
#define DHTTYPE DHT22

// DHT 22 (AM2302)

Khởi tạo một đối tượng DHTvới kiểu và mã pin được xác định trước đó.
DHT dht(DHTPIN, DHTTYPE);

Tạo một đối tượng AsyncWebServertrên cổng 80.
AsyncWebServer server(80);

Tạo các biến phao để giữ các giá trị nhiệt độ và độ ẩm hiện tại. Nhiệt độ và độ ẩm được
cập nhật trong vòng lặp().
float t = 0.0;

float h = 0.0;

Tạo các biến hẹn giờ cần thiết để cập nhật số đọc nhiệt độ cứ sau 10 giây.

unsigned long previousMillis = 0;

// will store last time DHT was updated

// Updates DHT readings every 10 seconds

const long interval = 10000;

Xây dựng trang Web
Tiếp tục đến trang máy chủ web.

11/31

Như bạn có thể thấy trong hình trên, trang web hiển thị một tiêu đề và hai đoạn văn. Có
một đoạn để hiển thị nhiệt độ và một đoạn khác để hiển thị độ ẩm. Ngồi ra cịn có hai
biểu tượng để tạo kiểu cho trang.
Hãy xem trang web này được tạo ra như thế nào.
Tất cả văn bản HTML với các kiểu được bao gồm được lưu trữ trong biến index_html.
Bây giờ chúng ta sẽ đi qua văn bản HTML và xem mỗi phần làm gì.
Thẻ <meta> sau đây làm cho trang web của bạn đáp ứng trong bất kỳ trình duyệt nào.
<meta name="viewport" content="width=device-width, initial-scale=1">

Thẻ <link> là cần thiết để tải các biểu tượng từ trang web fontawesome.
href=" integrity="sha384fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
crossorigin="anonymous">

Phong cách

12/31

Giữa các thẻ <style></style>, chúng tôi thêm một số CSS để tạo kiểu cho trang web.
<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>

Về cơ bản, chúng tôi đang thiết lập trang HTML để hiển thị văn bản với phơng chữ Arial
trong khối khơng có lề và được căn chỉnh ở giữa.
html {

font-family: Arial;

display: inline-block;

margin: 0px auto;

text-align: center;

}

Chúng tơi đặt kích thước phơng chữ cho tiêu đề (h2), đoạn (p) và đơn vị (.units) của bài
đọc.
h2 { font-size: 3.0rem; }

p { font-size: 3.0rem; }

.units { font-size: 1.2rem; }

Các nhãn cho các bài đọc được tạo kiểu như hình dưới đây:
dht-labels{

font-size: 1.5rem;

vertical-align:middle;

padding-bottom: 15px;

}

Tất cả các thẻ trước đó phải nằm giữa thẻ <head> và </head>. Các thẻ này được sử
dụng để bao gồm nội dung không hiển thị trực tiếp cho người dùng, như <meta> , thẻ
<link> và kiểu.
Nội dung HTML
Bên trong thẻ <body></body> là nơi chúng tôi thêm nội dung trang web.

Thẻ

thêm tiêu đề vào trang web. Trong trường hợp này, văn bản "Máy chủ
ESP8266 DHT", nhưng bạn có thể thêm bất kỳ văn bản nào khác.
13/31