خادم ويب ESP32 DHT11 للرطوبة ودرجة الحرارة

في هذا البرنامج التعليمي، سنقوم ببناء خادم ويب لقياس الرطوبة ودرجة الحرارة باستخدام مستشعر DHT11 ووحدة ESP32.

مستشعر DHT11 هو مستشعر أساسي وبأسعار معقولة لقياس درجة الحرارة والرطوبة، ويظل خيارًا شائعًا للمشاريع التي يكون فيها مستشعر بسيط وبأسعار معقولة كافيًا للمهمة المطلوبة.

المكونات المطلوبة:

- ESP32
- مستشعر الرطوبة ودرجة الحرارة DHT11

ميزات مستشعر DHT11:

مستشعر DHT11 هو مستشعر رقمي بسيط وبأسعار معقولة لقياس درجة الحرارة والرطوبة. فيما يلي أهم ميزات مستشعر DHT11:

1.قياس مشترك لدرجة الحرارة والرطوبة:

يوفر مستشعر DHT11 قراءات لدرجة الحرارة والرطوبة في جهاز واحد.

2.إخراج رقمي:

يُنتج المستشعر إخراجًا رقميًا، مما يسهل توصيله مع الميكروكنترولرز دون الحاجة إلى تحويل التناظر إلى رقمي.

3.تكلفة منخفضة:

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

4.واجهة بسيطة:

يتطلب المستشعر عددًا أدنى من المكونات الخارجية ولديه واجهة بسيطة، تشمل عادة ثلاثة أسلاك فقط (الطاقة، الأرض، والإشارة).

5.نطاق جهد التشغيل الواسع:

يعمل DHT11 في نطاق جهد واسع، عادة من 3.3V إلى 5V، مما يجعله متوافقًا مع منصات الميكروكنترولر الشائعة مثل Arduino.

6.دقة معتدلة:

على الرغم من عدم دقته مثل بعض المستشعرات عالية التكلفة، يوفر DHT11 قراءات درجة حرارة ورطوبة معقولة للعديد من التطبيقات. دقة درجة الحرارة تكون ضمن ±2°C، ودقة الرطوبة تكون ضمن ±5%.

7.عنصر رطوبة مقاوم:

يستخدم DHT11 عنصر رطوبة مقاوم لقياس مستويات الرطوبة. يتغير هذا العنصر مقاومته استنادًا إلى الرطوبة في الهواء.

8.ثيرمستور لقياس الحرارة:

يتم قياس درجة الحرارة في DHT11 باستخدام ثيرمستور، الذي يتغير مقاومته مع درجة الحرارة.

9.معدل عينات بطيء:

يحتوي DHT11 عادة على معدل عينات بطيء، حوالي 1 هرتز، مما يعني أنه يقدم مجموعة جديدة من البيانات تقريبًا كل ثانية.

10.تصميم مدمج:

يوضع المستشعر في صندوق بلاستيكي صغير أسود مع أربعة دبابيس لتسهيل الاتصال.

11.بروتوكول اتصال محدود:

يستخدم DHT11 بروتوكول اتصال بسيط ومملوك لنقل البيانات إلى الميكروكنترولرز.

12.ملائم للتطبيقات الأساسية:

يناسب DHT11 تطبيقات الأساسية مثل الأتمتة المنزلية ومراقبة الطقس والمشاريع التعليمية حيث يكون الدقة المعتدلة مقبولة.

13.دعم المجتمع:

نظرًا لشعبيته، يحظى DHT11 بدعم جيد في مجتمع المبتكرين، وتتوفر مكتبات لمختلف منصات الميكروكنترولر.

على الرغم من أن DHT11 قد لا يكون مناسبًا للتطبيقات التي تتطلب دقة عالية، فإن بساطته وتكلفته المنخفضة تجعله خيارًا شائعًا للمشاريع التمهيدية والتطبيقات حيث تكون قراءات درجة الحرارة والرطوبة الأساسية كافية.

مخططات:

برنامج:

#include <WiFi.h> // مكتبة الواي فاي

#include <ESPAsyncWebServer.h> // مكتبة الويب سيرفر اللامتزامن

#include <Adafruit_Sensor.h> // مكتبة أدافروت للحساسات (مكتبة DH11)

#include <DHT.h> // مكتبة DH11

const char* ssid = "اسم الشبكة"; // ضع اسم شبكتك الواي فاي

const char* password = "كلمة المرور"; // ضع كلمة مرور الواي فاي الخاصة بك

const int dhtPin = 4; // القُطب المتصل بمستشعر DH11

// كود HTML لصفحة الويب

const char* htmlPage = R"(

<!DOCTYPE html>

<html lang="ar">

<head>

    <meta charset="UTF-8">

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

    <title>بيانات مستشعر DH11</title>

    <style>

        body {

            font-family: Arial, sans-serif;

            text-align: center;

            background-color: #f0f0f0;

            margin: 0;

            padding: 20px;

        }

        #sensorData {

            background-color: #ffffff;

            padding: 20px;

            border-radius: 10px;

            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

        }

        .wifi-icon, .temperature-icon, .humidity-icon {

            font-size: 40px;

        }

        .comfort-level {

            font-size: 24px;

            margin-top: 10px;

        }

        .comfort-icon {

            font-size: 40px;

            margin-top: 10px;

        }

        .comfort-good {

            color: green;

        }

        .comfort-moderate {

            color: orange;

        }

        .comfort-poor {

            color: red;

        }

    </style>

</head>

<body>

    <div id="sensorData">

        <h1>بيانات مستشعر DH11</h1>

        <p>درجة الحرارة: <span id="temperature">جارٍ التحميل...</span> °C <span class="temperature-icon">????️</span></p>

        <p>الرطوبة: <span id="humidity">جارٍ التحميل...</span> % <span class="humidity-icon">????</span></p>

        <div class="comfort-level" id="comfortLevel">مستوى الراحة: جارٍ التحميل...</div>

        <div class="comfort-icon" id="comfortIcon"></div>

    </div>

    <script>

        function updateData(data) {

            document.getElementById('temperature').innerText = data.temperature;

            document.getElementById('humidity').innerText = data.humidity;

            // تحديث نص مستوى الراحة

            const comfortLevelElement = document.getElementById('comfortLevel');

            const comfortIconElement = document.getElementById('comfortIcon');

            if (data.temperature >= 20 && data.temperature <= 25 && data.humidity >= 30 && data.humidity <= 60) {

                comfortLevelElement.innerText = 'مستوى الراحة: جيد';

                comfortLevelElement.className = 'comfort-good';

                comfortIconElement.innerText = '????';

            } else if (data.temperature >= 18 && data.temperature <= 28 && data.humidity >= 20 && data.humidity <= 70) {

                comfortLevelElement.innerText = 'مستوى الراحة: معتدل';

                comfortLevelElement.className = 'comfort-moderate';

                comfortIconElement.innerText = '????';

            } else {

                comfortLevelElement.innerText = 'مستوى الراحة: ضعيف';

                comfortLevelElement.className = 'comfort-poor';

                comfortIconElement.innerText = '????';

            }

        }

        function fetchData() {

            fetch('/data')

                .then(response => response.json())

                .then(data => updateData(data))

                .catch(error => console.error('خطأ في جلب البيانات:', error));

        }

        setInterval(fetchData, 2000);

        fetchData(); // جلب أولي عند تحميل الصفحة

    </script>

</body>

</html>

)";

const int DHT_TYPE = DHT11;

DHT dht(dhtPin, DHT_TYPE); AsyncWebServer server(80); // المنفذ الافتراضي لاتصال

HTTP void setup() { Serial.begin(115200);

// الاتصال بالواي فاي

WiFi.begin(ssid, password);

while (WiFi.status() != WL_CONNECTED) { delay(1000); Serial.println("الاتصال بالواي فاي..."); }

Serial.println("تم الاتصال بالواي فاي");

Serial.print("عنوان IP: ");

Serial.println(WiFi.localIP());

// تهيئة مستشعر

DH11 dht.begin();

// تقديم صفحة

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

Serial.println("تقديم صفحة HTML");

request->send(200, "text/html", htmlPage); });

// تقديم بيانات المستشعر على شكل

JSON server.on("/data", HTTP_GET, [](AsyncWebServerRequest *request){ Serial.println("تقديم بيانات المستشعر");

String temperature = String(dht.readTemperature());

String humidity = String(dht.readHumidity());

String json = "{\"temperature\":\"" + temperature + "\", \"humidity\":\"" + humidity + "\"}"; request->send(200, "application/json", json); }); server.begin(); }

void loop() {

// لا يوجد شيء للقيام به هنا

}

النتيجة:

بعد الاتصال بشبكة wifi سنحصل على عنوان IP هذا

ضعه في عنوان URL لمتصفح الويب (googlechrome،mozilafirefox،opera....إلخ) ويمكنك الوصول إلى هذه الصفحة