مواجهة DHT11 و DHT22 مع ESP32 وعرض القيم علي خادم الويب اكتب تعليقُا

ـــــــــــ

هل تريد أن يكون هناك أجهزة استشعار مبعثرة في جميع أنحاء منزلك والحديقة التي تبلغ درجة حرارتها بانتظام إلى خادم مركزي ؟ بعد ذلك ، قد يكون مشروع إنترنت الأشياء نقطة انطلاق قوية بالنسبة لك ! يستخدم هذا المشروع ESP32 كجهاز تحكم يتصل بسهولة بشبكة WiFi الموجودة وينشئ خادم ويب .

عندما يصل أي جهاز متصل إلى خادم الويب هذا ، يقرأ ESP32 في درجة الحرارة والرطوبة النسبية من جهاز استشعار DHT11 و DHT22/ AM2302 ويرسله إلى متصفح الويب الخاص بذلك الجهاز بواجهة جميلة .  هيا بنا نبدأ!

قد يبدو الأمر مخيفًا ، ولكن هناك بعض المفاهيم التي يجب أن تكون على دراية بها ، قبل الدخول في هذا المشروع . إذا كانت أي من المفاهيم الواردة أدناه غريبة عليك ، ففكر في القراءة  من خلال هذا المشروع أولاً :

مشكلة في جهاز استشعار درجة الحرارة الداخلية ESP32 :

إذا لم تكن على دراية بذلك ، يأتي ESP32 مع مستشعر درجة حرارة داخلي يتراوح مداه بين -40 درجة مئوية و 125 درجة مئوية . يولد مستشعر درجة الحرارة جهدًا يتناسب مع درجة الحرارة التي يتم تحويلها إلى شكل رقمي عبر محول داخلي تمثيلي إلى رقمي .

وفقًا لورقة بيانات ESP32 ، تكمن المشكلة في مستشعر درجة الحرارة هذا في أن إزاحة المستشعر تختلف من شريحة إلى أخرى بسبب تباين العملية . تؤثر الحرارة الناتجة عن دائرة Wi-Fi أيضًا على قياسات درجة الحرارة . لذلك ، فإن مستشعر درجة الحرارة الداخلي مناسب فقط للتطبيقات التي تكتشف تغيرات درجة الحرارة بدلاً من درجات الحرارة المطلقة .
ومع ذلك ، يمكنك تحقيق نتائج دقيقة عن طريق معايرة مستشعر درجة الحرارة واستخدام ESP32 في تطبيق يعمل بأقل قدر ممكن لتقليل درجة حرارة وحدة المعالجة المركزية . لكن النتائج لن تكون دقيقة تمامًا كما هو الحال مع أجهزة استشعار درجة الحرارة غير المكلفة مثل DHT11 و DHT22/ AM2302 .

منتجات المشروع

Untitled2

الأسلاك - توصيل DHT11 DHT22 / AM2302 بـ ESP32 :

توصيل جهاز استشعار DHT11 / DHT22/ AM2302 بـ ESP32 بسيط إلى حد ما. ابدأ بوضع ESP32 على اللوح الخاص بك ، والتأكد من أن كل جانب من جوانب اللوحة على جانب منفصل من اللوح .

الآن ضع المستشعر على اللوحة إلى جانب ESP32. قم بتوصيل VCC دبوس على الاستشعار إلى دبوس 3.3V على ESP32 والأرضي إلى الأرضي . قم أيضًا بتوصيل دبوس بيانات المستشعر بدبوس D4 على ESP32. أخيرًا ، نحتاج إلى وضع مقاوم سحب يصل إلى 10KΩ بين VCC وخط البيانات لإبقائه مرتفعًا للاتصال الصحيح بين المستشعر و MCU . إذا صادفت لوحة مستشعر من المستشعر ، فلن تحتاج إلى إضافة أي سحب خارجي . لأنه يأتي مع المدمج في مقاوم السحب.

عندما تنتهي ، يجب أن يكون لديك شيء يشبه الرسم التوضيحي الموضح أدناه .

Untitled

Create ESP32 Web Server using WiFi Station (STA) mode

الآن دعنا ننتقل إلى الأشياء المثيرة للاهتمام !

كما يوحي العنوان ، سنقوم بتكوين ESP32 في وضع Station (STA) ، وإنشاء خادم ويب لخدمة صفحات الويب لأي عميل متصل ضمن الشبكة الحالية .

قبل أن تتوجه لتحميل المخطط ، تحتاج إلى إجراء تغيير واحد لجعله يعمل من أجلك . تحتاج إلى تعديل المتغيرين التاليين باستخدام بيانات اعتماد الشبكة الخاصة بك ، حتى يتمكن ESP32 من إنشاء اتصال بالشبكة الحالية .

Un3titled

بمجرد الانتهاء من ذلك ، تابع المحاولة ورفع الكود البرمجي أدناه .

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

// Uncomment one of the lines below for whatever DHT sensor type you're using!
//#define DHTTYPE DHT11   // DHT 11
//#define DHTTYPE DHT21   // DHT 21 (AM2301)
#define DHTTYPE DHT22   // DHT 22  (AM2302), AM2321

/*Put your SSID & Password*/
const char* ssid = "YourNetworkName";  // Enter SSID here
const char* password = "YourPassword";  //Enter Password here

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

الوصول إلى خادم الويب :

بعد تحميل المخطط ، افتح Serial Monitor بمعدل سرعة 115200 . واضغط على الزر RESET في ESP32 . إذا كان كل شيء على ما يرام ، فسيؤدي ذلك إلى إخراج عنوان IP الحيوي الذي تم الحصول عليه من جهاز التوجيه الخاص بك وإظهار رسالة بدء خادم HTTP .

ESP32-Web-Server-Station-Mode-Serial-Monitor-Output-Server-Started

بعد ذلك ، قم بتحميل المستعرض وقم بتوجيهه إلى عنوان IP الموضح على الشاشة التسلسلية . يجب أن يقدم ESP32 صفحة ويب تعرض درجة الحرارة والرطوبة النسبية .

Display-DHT11-DHT22-AM2302-Temperature-Humidity-on-ESP32-Web-Server-Without-CSS

تصميم صفحة الويب لتبدو أكثر احترافية

غالبًا ما يتم تخويف المبرمجين أمثالنا – لكن القليل من الجهد قد يجعل صفحة الويب الخاصة بك تبدو أكثر جاذبية واحترافية . أدناه سوف تعطيك لقطة شاشة فكرة أساسية عما سنقوم به .

Display-DHT11-DHT22-AM2302-Temperature-Humidity-on-ESP32-Web-Server-Professional-Look

مدهش جدا ، أليس كذلك ؟ دون مزيد من اللغط ، دعونا نطبق بعض الأنماط على صفحة HTML السابقة الخاصة بنا . في البدء ، انسخ و الصق الكود الموجود بالأسفل لاستبدال وظيفة SendHTML () من الكود أعلاه . جرب الكود الجديد .

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=\"https://www.w3.org/2000/svg\" xmlns:xlink=\"https://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=\"https://www.w3.org/2000/svg\" xmlns:xlink=\"https://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;
}

تحسين الكود البرمجي - تحديث الصفحة التلقائي :

أحد التحسينات التي يمكنك إجراؤها على الكود الخاص بنا هو تحديث الصفحة تلقائيًا لتحديث قيمة المستشعر .

مع إضافة علامة تعريف واحدة في مستند HTML الخاص بك ، يمكنك توجيه المستعرض لإعادة تحميل الصفحة تلقائيًا في فاصل زمني مقدم .

U22ntitled

ضع هذا الرمز في علامة <head> في وثيقتك ، وستُعلِّم علامة meta tag المستعرض بالتحديث كل ثانيتين . أنيق جدا !

 

أنتهت !!!

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني. الحقول الإلزامية مشار إليها بـ *