STM32-MBED ARDUINO STM32-HAL ESP32-ESP8266 8051-AVR ĐIỆN TỬ CƠ BẢN

QC

ESP32 Đo Nhiệt độ DHT11 - DHT22 WIFI

Wednesday, July 21, 2021

 ESP32 Đo Nhiệt độ DHT11 - DHT22 WIFI

Phần 1:  Chuẩn bị phần cứng như sau:



Bảng so sánh DHT11-DHT22



Bước 1 : Cài đặt thư viện.

Vào : ketch > Include Library > Manage Libraries Như sau :



Sau đó hiện ra bảng sau : điền vào : " DHT sensor " kéo xuống chọn đúng như hình nhé ! Chọn đúng Adafruit.




Phần 2: Cấu hình WIFI.

- Để kết nối được Internet bạn cần cho phép truy cập WIFI.

const char* ssid = "TEN_WIFI";  // TÊN WIFI BẠN CẦN KẾT NỐI.
const char* password = "MAT_KHAU_WIFI";  //MẬT KHẨU WIFI.

TOÀN BỘ CODE CHƯƠNG TRÌNH NHƯ SAU:

#include <WiFi.h>
#include <WebServer.h>
#include "DHT.h"

// CẢM BIẾN MÀ BẠN SỬ DỤNG, Ở ĐÂY MÌNH SỬ DỤNG DHT22.
//#define DHTTYPE DHT11   // DHT 11 
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321 ĐANG ĐƯỢC SỬ DỤNG

/*Put your SSID & Password*/
const char* ssid = "TEN_WIFI";  // TÊN WIFI
const char* password = "MAT_KHAU_WIFI";  // MẬT KHẨU WIFI.

WebServer server(80);

// DHT Sensor
uint8_t DHTPin = 4; 
               
// Initialize DHT sensor.
DHT dht(DHTPin, DHTTYPE);                

float Temperature;
float Humidity;
 
void setup() {
  Serial.begin(115200);
  delay(100);
  
  pinMode(DHTPin, INPUT);

  dht.begin();              

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

  //connect to your local wi-fi network
  WiFi.begin(ssid, password);

  //check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

  server.on("/", handle_OnConnect);
  server.onNotFound(handle_NotFound);

  server.begin();
  Serial.println("HTTP server started");

}
void loop() {
  
  server.handleClient();
  
}

void handle_OnConnect() {

 Temperature = dht.readTemperature(); // Gets the values of the temperature
  Humidity = dht.readHumidity(); // Gets the values of the humidity 
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

String SendHTML(float Temperaturestat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<title>ESP32 Weather Report</title>\n";
  ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";
  ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
  ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  ptr +="<div id=\"webpage\">\n";
  ptr +="<h1>ESP32 Weather Report</h1>\n";
  
  ptr +="<p>Temperature: ";
  ptr +=(int)Temperaturestat;
  ptr +="°C</p>";
  ptr +="<p>Humidity: ";
  ptr +=(int)Humiditystat;
  ptr +="%</p>";
  
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}


Sau khi nạp code vào chương trình. bạn bấm:  Serial Monitor.  Để lấy địa chỉ IP.

TẠI SAO PHẢI LẤY ĐỊA CHỈ IP ?

KHI ESP TRUY CẬP VÀO MODUL MẠNG. MODULE Mạng cấp cho ESP32 1 Địa chỉ IP Con. Vd giống như Trong 1 khu nhà trọ , xây thêm phòng trọ mới sẽ có tên phòng để thuận tiện cho việc giao thư hay giao hàng đúng địa chỉ.



Lấy địa chỉ IP :   192.168.0.12 gõ lên trình duyệt là bạn sẽ thấy thành quả như sau:




GIẢI THÍCH CODE : 

1.0 CÁC THƯ VIỆN.

#include <WiFi.h> // WIFI
#include <WebServer.h>  //WEBSERVER
#include "DHT.h"    // CẢM BIẾN DHT

1.1. ĐỊNH NGHĨA THƯ VIỆN MUỐN SỬ DỤNG.

//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

Ở đây Mình dùng DHT22  Nên  #define DHTTYPE DHT22 // DHT 22 (AM2302), AM2321 

Bạn Muốn sử dụng loại cảm biến nào thì mở và sử dụng cảm biến đó.


1.3 CẤP QUYỀN TRUY CẬP WIFI. ( CÁCH GỌI KHÁC LÀ CHO PHÉP TRUY CẬP)...

const char* ssid = "TÊN WIFI";  // TÊN WIFI BẠN MUỐN KẾT NỐI.
const char* password = "MẬT_KHẨU";  //MẬT KHẨU WIFI.
WebServer server(80);  // CỔNG 80 MẶC ĐỊNH CHO HTTP.

1.4 KHAI BAO PIN ESP32 SỬ DỤNG ĐỌC NHIỆT ĐỘ VÀ ĐỘ ẨM.

uint8_t DHTPin = 4; // CHÂN SỐ 4 ĐƯỢC CHỌN.
 
// KHỞI TẠO DHT SENSER.
DHT dht(DHTPin, DHTTYPE);

KHAI BÁO BIẾN :

float Temperature;  // BIẾN NHIỆT ĐỘ.
float Humidity;     // BIẾN ĐỘ ẨM.

1.5 TRONG SETUP KHỞI TẠO PIN ĐỌC VÀ HÀM ĐỌC NHIỆT ĐỘ.

Serial.begin(115200);  // TRUYỀN DỮ LIỆU LÊN MÁY TÍNH
delay(100);
  
pinMode(DHTPin, INPUT); // KHỞI TẠO PIN SỐ 4 ĐỌC INPUT

dht.begin();  // CHO PHÉP ĐỌC  NHIỆT ĐỘ.

1.6 CHO PHÉP TRUY CẬP WIFI.

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

//connect to your local wi-fi network
WiFi.begin(ssid, password); //
//check wi-fi is connected to wi-fi network
  while (WiFi.status() != WL_CONNECTED) {
  delay(1000);
  Serial.print(".");
  }
 // sau khi kết nối được wifi.
  Serial.println("");
  Serial.println("WiFi connected..!");
  Serial.print("Got IP: ");  Serial.println(WiFi.localIP());

1.7 HÀM ĐỌC NHIỆT ĐỘ.

void handle_OnConnect() 
{
  Temperature = dht.readTemperature(); // Gets the values of the temperature
  Humidity = dht.readHumidity(); // Gets the values of the humidity 
  server.send(200, "text/html", SendHTML(Temperature,Humidity)); 
}

1.8  hàm để xử lý trang Lỗi 404..

void handle_NotFound(){
  server.send(404, "text/plain", "Not found");
}

1.9  Hiển thị Trang Web HTML

Hàm SendHTML () chịu trách nhiệm tạo một trang web bất cứ khi nào máy chủ web ESP32 nhận được yêu cầu từ máy khách web. Nó chỉ nối mã HTML thành một chuỗi lớn và trả về hàm server.send () mà chúng ta đã thảo luận trước đó. Hàm lấy các giá trị nhiệt độ và độ ẩm làm tham số để tạo động nội dung HTML.

Văn bản đầu tiên bạn luôn phải gửi là khai báo <! DOCTYPE> cho biết rằng chúng tôi đang gửi mã HTML.

String SendHTML(float Temperaturestat,float Humiditystat){
String ptr = "<!DOCTYPE html> <html>\n";

TIÊU ĐỀ TRANG!

ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
ptr +="<title>ESP32 Weather Report</title>\n";


Styling Trang.

ptr +="<style>html { font-family: Helvetica; display: inline-block; margin: 0px auto; text-align: center;}\n";

Sau đó, mã sau đặt màu, phông chữ và lề xung quanh nội dung, thẻ H1 và p.

ptr +="body{margin-top: 50px;} h1 {color: #444444;margin: 50px auto 30px;}\n";
ptr +="p {font-size: 24px;color: #444444;margin-bottom: 10px;}\n";
ptr +="</style>\n";
ptr +="</head>\n";
ptr +="<body>\n";

Đặt tiêu đề trang web

ptr +="<div id=\"webpage\">\n";
ptr +="<h1>ESP32 Weather Report</h1>\n";

Hiển thị nhiệt độ và độ ẩm trên trang web

  ptr +="<p>Temperature: ";
  ptr +=(int)Temperaturestat;
  ptr +="°C</p>";
  ptr +="<p>Humidity: ";
  ptr +=(int)Humiditystat;
  ptr +="%</p>";
  
  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}

Nhìn trang web chuyên nghiệp hơn các bạn thay đổi mã như sau:

String SendHTML(float TempCstat,float TempFstat,float Humiditystat){
  String ptr = "<!DOCTYPE html> <html>\n";
  ptr +="<head><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, user-scalable=no\">\n";
  ptr +="<link href=\"https://fonts.googleapis.com/css?family=Open+Sans:300,400,600\" rel=\"stylesheet\">\n";
  ptr +="<title>ESP32 Weather Report</title>\n";
  ptr +="<style>html { font-family: 'Open Sans', sans-serif; display: block; margin: 0px auto; text-align: center;color: #333333;}\n";
  ptr +="body{margin-top: 50px;}\n";
  ptr +="h1 {margin: 50px auto 30px;}\n";
  ptr +=".side-by-side{display: inline-block;vertical-align: middle;position: relative;}\n";
  ptr +=".humidity-icon{background-color: #3498db;width: 30px;height: 30px;border-radius: 50%;line-height: 36px;}\n";
  ptr +=".humidity-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".humidity{font-weight: 300;font-size: 60px;color: #3498db;}\n";
  ptr +=".temperature-icon{background-color: #f39c12;width: 30px;height: 30px;border-radius: 50%;line-height: 40px;}\n";
  ptr +=".temperature-text{font-weight: 600;padding-left: 15px;font-size: 19px;width: 160px;text-align: left;}\n";
  ptr +=".temperature{font-weight: 300;font-size: 60px;color: #f39c12;}\n";
  ptr +=".superscript{font-size: 17px;font-weight: 600;position: absolute;right: -20px;top: 15px;}\n";
  ptr +=".data{padding: 10px;}\n";
  ptr +="</style>\n";
  ptr +="</head>\n";
  ptr +="<body>\n";
  
   ptr +="<div id=\"webpage\">\n";
   
   ptr +="<h1>ESP32 Weather Report</h1>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side temperature-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_1\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n";
   ptr +="width=\"9.915px\" height=\"22px\" viewBox=\"0 0 9.915 22\" enable-background=\"new 0 0 9.915 22\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M3.498,0.53c0.377-0.331,0.877-0.501,1.374-0.527C5.697-0.04,6.522,0.421,6.924,1.142\n";
   ptr +="c0.237,0.399,0.315,0.871,0.311,1.33C7.229,5.856,7.245,9.24,7.227,12.625c1.019,0.539,1.855,1.424,2.301,2.491\n";
   ptr +="c0.491,1.163,0.518,2.514,0.062,3.693c-0.414,1.102-1.24,2.038-2.276,2.594c-1.056,0.583-2.331,0.743-3.501,0.463\n";
   ptr +="c-1.417-0.323-2.659-1.314-3.3-2.617C0.014,18.26-0.115,17.104,0.1,16.022c0.296-1.443,1.274-2.717,2.58-3.394\n";
   ptr +="c0.013-3.44,0-6.881,0.007-10.322C2.674,1.634,2.974,0.955,3.498,0.53z\"/>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side temperature-text\">Temperature</div>\n";
   ptr +="<div class=\"side-by-side temperature\">";
   ptr +=(int)TempCstat;
   ptr +="<span class=\"superscript\">°C</span></div>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"data\">\n";
   ptr +="<div class=\"side-by-side humidity-icon\">\n";
   ptr +="<svg version=\"1.1\" id=\"Layer_2\" xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" x=\"0px\" y=\"0px\"\n\"; width=\"12px\" height=\"17.955px\" viewBox=\"0 0 13 17.955\" enable-background=\"new 0 0 13 17.955\" xml:space=\"preserve\">\n";
   ptr +="<path fill=\"#FFFFFF\" d=\"M1.819,6.217C3.139,4.064,6.5,0,6.5,0s3.363,4.064,4.681,6.217c1.793,2.926,2.133,5.05,1.571,7.057\n";
   ptr +="c-0.438,1.574-2.264,4.681-6.252,4.681c-3.988,0-5.813-3.107-6.252-4.681C-0.313,11.267,0.026,9.143,1.819,6.217\"></path>\n";
   ptr +="</svg>\n";
   ptr +="</div>\n";
   ptr +="<div class=\"side-by-side humidity-text\">Humidity</div>\n";
   ptr +="<div class=\"side-by-side humidity\">";
   ptr +=(int)Humiditystat;
   ptr +="<span class=\"superscript\">%</span></div>\n";
   ptr +="</div>\n";

  ptr +="</div>\n";
  ptr +="</body>\n";
  ptr +="</html>\n";
  return ptr;
}



Xem thêm

Nap Code vào PY32F003 dùng Stlink

 Nap Code vào PY32F003 dùng Stlink Bước 1: Cài đặt  KeilC v5.39 theo link sau ( chú ý 5.39 keil c mới nạp ok). https://edge07.111.ir.cdn.ir/...