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

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 nguyên đượ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

Để 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.

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.

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.

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

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.

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

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

// Replaces placeholder with DHT values

String processor(const String& var){

//Serial.println(var);

if(var == "TEMPERATURE"){

return String(t);

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

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

float newH = dht.readHumidity();

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

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.

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

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 đó.

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.

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 Ngoà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.

<link rel="stylesheet"

href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"

integrity="sha384-crossorigin="anonymous">

Phong cách

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

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

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ẻ <h2></h2> 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.

<h2>ESP8266 DHT Server</h2>

Sau đó, có hai đoạn Một để hiển thị nhiệt độ và một để hiển thị độ ẩm Các đoạn văn

được phân định bằng các thẻ <p> và </p> Đoạn văn cho nhiệt độ như sau:

Các thẻ <i> hiển thị các biểu tượng fontawesome.

Cách hiển thị biểu tượng

Để chọn các biểu tượng, hãy truy cập trang web Font Awesome Icons.

Tìm kiếm biểu tượng bạn đang tìm kiếm Ví dụ: "nhiệt kế".

Nhấp vào biểu tượng mong muốn Sau đó, bạn chỉ cần sao chép văn bản HTML được

cung cấp.

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

Để chọn màu, bạn chỉ cần truyền tham số kiểu với màu trong hệ thập lục phân, như sau:

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

Tiếp tục với văn bản HTML

Dòng tiếp theo viết từ "Nhiệt độ" vào trang web.

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

Văn bản TEMPERATURE giữa các dấu % là trình giữ chỗ cho giá trị nhiệt độ

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

Điều này có nghĩa là văn bản % TEMPERATURE% này giống như một biến sẽ được

thay thế bằng giá trị nhiệt độ thực tế từ cảm biến DHT Các chỗ dành sẵn trên văn bản

HTML phải nằm giữa các dấu %.

Cuối cùng, chúng tôi thêm biểu tượng độ.

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

Các thẻ  làm cho văn bản trở thành chỉ số trên.

Chúng tôi sử dụng cùng một cách tiếp cận cho đoạn độ ẩm, nhưng nó sử dụng một biểu

tượng khác và trình giữ chỗ %HUMIDITY%.

Cuối cùng, có một số mã JavaScript trong trang web của chúng tôi tự động cập nhật

nhiệt độ và độ ẩm, cứ sau 10 giây.

Các tập lệnh trong văn bản HTML phải nằm giữa các thẻ <script></script>.

Để cập nhật nhiệt độ trên nền, chúng ta có một hàm setInterval() chạy cứ sau 10 giây.

Về cơ bản, nó thực hiện một yêu cầu trong URL / temperature để có được kết quả đọc

nhiệt độ mới nhất.

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

xhttp.send();

}, 10000 ) ;

Khi nó nhận được giá trị đó, nó sẽ cập nhật phần tử HTML có id là nhiệt độ.

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

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

}

Tóm lại, phần trước này chịu trách nhiệm cập nhật nhiệt độ không đồng bộ Quá trình

tương tự được lặp lại cho các bài đọc độ ẩm.

Quan trọng: vì cảm biến DHT khá chậm để đọc kết quả, nếu bạn định kết nối nhiều máy

khách với ESP8266 cùng một lúc, chúng tôi khuyên bạn nên tăng khoảng thời gian yêu

cầu hoặc xóa cập nhật tự động.

Xử lý

Bây giờ, chúng ta cần tạo hàm processor(), hàm này sẽ thay thế các trình giữ chỗ trong văn bản HTML của chúng ta bằng các giá trị nhiệt độ và độ ẩm thực tế.

String processor(const String& var){

Khi trang web được yêu cầu, chúng tôi sẽ kiểm tra xem HTML có bất kỳ trình giữ chỗ nào

không Nếu nó tìm thấy trình giữ chỗ %TEMPERATURE%, chúng tôi trả về nhiệt độ được

lưu trữ trên biến t.

if(var == "TEMPERATURE"){

return String(t);

}

Nếu chỗ dành sẵn là %HUMIDITY%, chúng tôi trả về giá trị độ ẩm.

else if(var == "HUMIDITY"){

Cuối cùng, thêm các dòng mã tiếp theo để xử lý máy chủ 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", String(t).c_str());

});

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

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

});

Khi chúng tôi thực hiện một yêu cầu trên URL gốc, chúng tôi gửi văn bản HTML được lưu trữ trên biến index_html Chúng ta cũng cần vượt qua chức năng bộ xử lý, chức năng

này sẽ thay thế tất cả các trình giữ chỗ bằng các giá trị phù hợp.

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

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

});

Chúng tôi cần thêm hai trình xử lý bổ sung để cập nhật chỉ số nhiệt độ và độ ẩm Khi

chúng tôi nhận được yêu cầu trên URL /temperature, chúng tôi chỉ cần gửi giá trị nhiệt độ

được cập nhật Nó là văn bản thuần túy và nó nên được gửi dưới dạng ký tự, vì vậy,

chúng ta sử dụng phương thức c_str().

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

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

});

Quá trình tương tự được lặp lại cho độ ẩm.

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

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

Về cơ bản, chúng tôi kiểm tra xem đã đến lúc đọc cảm biến mới chưa:

if (currentMillis - previousMillis >= interval) {

Nếu có, chúng tôi lưu trữ một số đọc nhiệt độ mới trên biến newT

float newT = dht.readTemperature();

Nếu biến newT là số đọc nhiệt độ hợp lệ, chúng tôi cập nhật biến t.

// Read Humidity

float newH = dht.readHumidity();

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

Sau khi sửa đổi bản phác thảo với các thay đổi cần thiết, nếu cần, hãy tải mã lên

ESP8266 của bạn (nếu bạn không thể tải mã lên ESP8266 của mình, hãy đọc hướng

dẫn khắc phục sự cố này).

Hãy chắc chắn rằng bạn có đúng bo mạch và cổng COM lựa chọn Đi tới Bảng > Công

cụ và chọn mô hình ESP8266 bạn đang sử dụng Trong trường hợp của chúng tôi,

chúng tôi đang sử dụng ESP8266 12-E NodeMCU Kit.

Đi tới Tools > Port và chọn cổng COM mà ESP8266 được kết nối.

Nhấn nút tải lên Arduino IDE.

Lưu ý: nếu bạn đang sử dụng ESP-01, bạn cần bộ điều hợp nối tiếp hoặc lập trình viên

FTDI để tải mã lên.

Địa chỉ IP ESP8266

Sau khi tải mã lên, hãy mở Màn hình nối tiếp với tốc độ truyền là 115200 Nhấn nút đặt lại ESP8266 Địa chỉ IP ESP8266 sẽ được in trong màn hình nối tiếp như trong hình sau.

Trong phần này, chúng tôi sẽ chỉ cho bạn cách xây dựng một máy chủ web HTTP đơn

giản hiển thị nhiệt độ và độ ẩm trong trang HTML thô Máy chủ web này gửi phản hồi

HTTP khi trình duyệt của bạn thực hiện yêu cầu trên địa chỉ IP ESP8266.

Video trình diễn

Đầu tiên, bạn có thể xem video trình diễn dự án máy chủ web ESP8266 bên dưới.

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