جدول المحتويات:

ESP8266 و Visuino: DHT11 خادم الويب لدرجة الحرارة والرطوبة: 12 خطوة
ESP8266 و Visuino: DHT11 خادم الويب لدرجة الحرارة والرطوبة: 12 خطوة

فيديو: ESP8266 و Visuino: DHT11 خادم الويب لدرجة الحرارة والرطوبة: 12 خطوة

فيديو: ESP8266 و Visuino: DHT11 خادم الويب لدرجة الحرارة والرطوبة: 12 خطوة
فيديو: ESP8266 DHT11/DHT22 Temperature and Humidity Web Server with Arduino IDE - Demo 2024, يوليو
Anonim
Image
Image

تعد وحدات ESP8266 وحدات تحكم مستقلة رائعة ومنخفضة التكلفة مزودة بشبكة Wi-Fi مدمجة ، وقد صنعت بالفعل عددًا من Instructables عنها.

DTH11 / DTH21 / DTH22 و AM2301 هما مستشعران شائعان جدًا لدرجة الحرارة والرطوبة من Arduino ، وقد صنعت عددًا من Instructables معهم أيضًا ، بما في ذلك Instructable on Remote Thermometer ومستشعر الرطوبة مع 2 ESP8266 متصلان معًا على شبكة Wi-Fi الخاصة بهم.

سأوضح لك في هذا Instructable كيف يمكنك إنشاء خادم ويب لدرجة الحرارة والرطوبة باستخدام ESP8266 و DHT11 والاتصال به على شبكة Wi-Fi الحالية من أجهزة متعددة باستخدام مستعرض ويب.

الخطوة 1: المكونات

قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
  1. لوحة OneNodeMCU ESP8266 (لقد استخدمت إصدار NodeMCU 0.9 ، ولكن أي إصدار آخر ، أو حتى ESP-12 أو ESP-01 مستقل ، سيعمل)
  2. وحدة مستشعر DHT11 حصلت عليها من مجموعة حساسات 37 رخيصة
  3. 3 أسلاك توصيل أنثى - أنثى

الخطوة 2: قم بتوصيل DHT11 بوحدة NodeMCU ESP8266

قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
قم بتوصيل DHT11 بوحدة NodeMCU ESP8266
  1. قم بتوصيل الطاقة (السلك الأحمر) والأرضي (السلك الأسود) والبيانات (السلك الرمادي) بوحدة DHT11 (تُظهر الصورة 1 نوعين مختلفين من وحدات مستشعر DHT11. كما ترى قد تختلف المسامير ، لذا اتصل بعناية!)
  2. قم بتوصيل الطرف الآخر من السلك الأرضي (السلك الأسود) بالدبوس الأرضي لوحدة ESP8266 (الصورة 2)
  3. قم بتوصيل الطرف الآخر من سلك الطاقة (السلك الأحمر) بدبوس الطاقة 3.3 فولت الخاص بوحدة ESP8266 (الصورة 2)
  4. قم بتوصيل الطرف الآخر من سلك البيانات (السلك الرمادي) بالدبوس الرقمي 2 بوحدة ESP8266 (الصورة 3)
  5. تُظهر الصورة 4 مكان وجود دبابيس الأرض والطاقة 3.3 فولت ورقم 2 من NodeMCU 0.9

الخطوة 3: ابدأ Visuino ، وحدد نوع اللوحة ESP8266

ابدأ Visuino ، وحدد نوع اللوحة ESP8266
ابدأ Visuino ، وحدد نوع اللوحة ESP8266
ابدأ Visuino ، وحدد نوع اللوحة ESP8266
ابدأ Visuino ، وحدد نوع اللوحة ESP8266

لبدء برمجة Arduino ، ستحتاج إلى تثبيت Arduino IDE من هنا:

يرجى العلم أن هناك بعض الأخطاء الحرجة في Arduino IDE 1.6.6

تأكد من تثبيت 1.6.7 أو أعلى ، وإلا فلن يعمل هذا Instructable!

إذا لم تكن قد فعلت ذلك ، فاتبع الخطوات الواردة في Instructable لإعداد Arduino IDE لبرمجة ESP 8266

يحتاج Visuino: https://www.visuino.com أيضًا إلى التثبيت.

  1. ابدأ Visuinoas الموضحة في الصورة الأولى
  2. انقر فوق الزر "أدوات" في مكون Arduino (الصورة 1) في Visuino
  3. عندما يظهر مربع الحوار ، حدد "NodeMCU ESP-12" كما هو موضح في الصورة 2

الخطوة 4: في Visuino: قم بتعيين اسم مضيف ونقطة وصول

في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول
في Visuino: قم بتعيين اسم مضيف ونقطة وصول

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

  1. في Object Inspector ، قم بتوسيع خاصية "الوحدات النمطية" ، ثم خاصية "WiFi" الفرعية
  2. في Object Inspector ، اضبط قيمة خاصية "HostName" على "dht11server" (الصورة 1)
  3. في Object Inspector ، قم بتوسيع الخاصية الفرعية "AccessPoints" الخاصة بـ "WiFi" ، وانقر فوق الزر "…" بجوار قيمتها (الصورة 2)
  4. في محرر "AccessPoins" ، حدد "WiFi Access Point" في العرض الأيمن ، ثم انقر فوق الزر "+" الموجود على اليسار لإضافة نقطة الوصول (الصورة 2)
  5. في Object Inspector ، اضبط قيمة خاصية "SSID" على SSID لنقطة اتصال Wi-Fi (نقطة الوصول) (الصورة 4)
  6. إذا كانت نقطة اتصال Wi-Fi (نقطة الوصول) تتطلب كلمة مرور ، في Object Inspector ، قم بتعيين كلمة المرور في قيمة خاصية "Password" (الصورة 4)
  7. أغلق مربع حوار "AccessPoints"

الخطوة 5: في Visuino: أضف مقبس خادم TCP / IP للاتصال

في Visuino: أضف مقبس خادم TCP / IP للاتصال
في Visuino: أضف مقبس خادم TCP / IP للاتصال
في Visuino: أضف مقبس خادم TCP / IP للاتصالات
في Visuino: أضف مقبس خادم TCP / IP للاتصالات
في Visuino: أضف مقبس خادم TCP / IP للاتصال
في Visuino: أضف مقبس خادم TCP / IP للاتصال

بعد ذلك ، نحتاج إلى إضافة مقبس خادم TCP / IP للاتصال.

  1. في Object Inspector ، انقر فوق الزر "…" بجوار قيمة الخاصية الفرعية "Sockets" لشبكة WiFi (الصورة 1)
  2. في محرر Sockets حدد "TCP / IP Server" ، ثم انقر فوق الزر "+" (الصورة 2) لإضافة واحد (الصورة 3)
  3. أغلق مربع حوار "مآخذ التوصيل"

الخطوة 6: في Visuino: أضف DTH11 ومكون نص منسق باستخدام قناتين تناظريتين

في Visuino: أضف DTH11 ومكون نص منسق مع قناتين تناظريتين
في Visuino: أضف DTH11 ومكون نص منسق مع قناتين تناظريتين
في Visuino: أضف DTH11 ومكون نص منسق مع قناتين تناظريتين
في Visuino: أضف DTH11 ومكون نص منسق مع قناتين تناظريتين
في Visuino: أضف DTH11 ومكون نص منسق مع قناتين تناظريتين
في Visuino: أضف DTH11 ومكون نص منسق مع قناتين تناظريتين

للتحكم في درجة الحرارة والرطوبة وقراءتها من DHT11 ، نحتاج إلى إضافة مكون لها في Visuino.

نحتاج أيضًا إلى إنشاء صفحة الويب من البيانات. الصفحة هي مجرد مستند نصي بتنسيق HTML ، لذا يمكننا استخدام مكون نص منسق لإنشائه.

  1. اكتب "dht" في مربع التصفية في مربع أدوات المكونات ثم حدد المكون "الرطوبة ومقياس الحرارة DHT11 / 21/22 / AM2301" (الصورة 1) ، وقم بإفلاته في منطقة التصميم
  2. اكتب "نموذج" في مربع التصفية في مربع أدوات المكونات ، ثم حدد مكون "نص منسق" (صورة 2) ، وقم بإفلاته في منطقة التصميم
  3. انقر فوق الزر "أدوات" لمكون FormattedText1 (الصورة 3)
  4. في محرر العناصر ، حدد العنصر التناظري على اليمين ، وانقر مرتين على الزر "+" على اليسار (الصورة 4) ، لإضافة 2 منهم (الصورة 5)
  5. أغلق محرر "Elements"

الخطوة 7: في Visuino: تعيين نص منسق لاستجابة الخادم

في Visuino: قم بتعيين نص منسق لاستجابة الخادم
في Visuino: قم بتعيين نص منسق لاستجابة الخادم
في Visuino: قم بتعيين نص منسق لاستجابة الخادم
في Visuino: قم بتعيين نص منسق لاستجابة الخادم

نحتاج إلى تحديد نص HTML الذي سيتم إنشاؤه عندما يتصل عميل الويب بالخادم.

سنحدد الاتصال للإغلاق بعد البيانات التي أرسلتها ، وسنوجه أيضًا المتصفح لإعادة الاتصال (تحديث) بعد 5 ثوانٍ عن طريق إضافة "Refresh: 5" إلى المستند. بهذه الطريقة سيتم تحديث صفحة الويب كل 5 ثوانٍ.

  1. في منطقة التصميم ، حدد مكون FormattedText1 (الصورة 1)
  2. في Object Inspector ، حدد خاصية "Text" ، وانقر فوق الزر "…" بجوار قيمتها (الصورة 1)
  3. في نوع محرر "النص": "HTTP / 1.1 200 موافق" "نوع المحتوى: نص / html" "اتصال: إغلاق" "تحديث: 5" "" """"""" درجة الحرارة:٪ 0 "" الرطوبة:٪ 1 "" "" "(الصورة 2) سيتم استبدال٪ 0 بالقيمة من AnalogElement1 ، وسيتم استبدال٪ 1 بالقيمة من AnalogElement2
  4. انقر فوق الزر "موافق" لإغلاق مربع الحوار

الخطوة 8: في Visuino: قم بتوصيل مكون DHT11

في Visuino: قم بتوصيل مكون DHT11
في Visuino: قم بتوصيل مكون DHT11
في Visuino: قم بتوصيل مكون DHT11
في Visuino: قم بتوصيل مكون DHT11
في Visuino: قم بتوصيل مكون DHT11
في Visuino: قم بتوصيل مكون DHT11
  1. قم بتوصيل دبوس الإخراج "درجة الحرارة" لمكون HumidityThermometer1 بالدبوس "In" الخاص بـ AnalogElement1 لمكون FormattedText1 (الصورة 1)
  2. قم بتوصيل دبوس الإخراج "Humidity" الخاص بمكون HumidityThermometer1 بالدبوس "In" الخاص بـ AnalogElement2 لمكون FormattedText1 (الصورة 2)
  3. قم بتوصيل دبوس "المستشعر" لمكون مقياس الرطوبة 1 بدبوس الإدخال "الرقمي" للقناة "الرقمية [2]" لمكون Arduino (الصورة 3)

الخطوة 9: في Visuino: قم بإضافة مكون كشف الحافة وتوصيله

في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله
في Visuino: قم بإضافة مكون كشف الحافة وتوصيله

نحتاج إلى إرسال نص HTML في كل مرة يوجد فيها اتصال جديد. قبل أن نرسل ، نحتاج إلى الانتظار قليلاً حيث يتعين على متصفحات الويب إرسال طلب قبل أن يتوقعوا رؤية النتيجة. للقيام بذلك ، سوف نستخدم مكون Delay المتصل بالدبوس "Connected" الخاص بمقبس خادم TCP / IP.

  1. اكتب "تأخير" في مربع التصفية في مربع أدوات المكونات ثم حدد مكون "تأخير" (الصورة 1) ، وقم بإفلاته في منطقة التصميم
  2. في الخصائص ، قم بتعيين قيمة خاصية "الفاصل الزمني (uS)" إلى 200000 (الصورة 2)
  3. قم بتوصيل دبوس "متصل" من "Modules. WiFi. Sockets. TCPServer1" لمكون "NodeMCU ESP-12" ، بالدبوس "In" لمكون Delay1 (الصورة 3)
  4. قم بتوصيل دبوس "Out" لمكون Delay1 بطرف إدخال "Clock" لمكون FormattedText1 (الصورة 4)

الخطوة 10: في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله

في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
في Visuino: قم بتوصيل مكون النص المنسق ، وإضافة مكون تأخير وتوصيله
  1. قم بتوصيل دبوس "Out" لمكون FormattedText1 بالدبوس "In" الخاص بـ "Modules. WiFi. Sockets. TCPServer1" لمكون "NodeMCU ESP-12" (الصورة 1)
  2. اكتب "تأخير" في مربع التصفية في مربع أدوات المكونات ثم حدد مكون "تأخير" (الصورة 2) ، وقم بإفلاته في منطقة التصميم
  3. قم بتوصيل دبوس "Out" لمكون FormattedText1 بالدبوس "In" لمكون Delay2 (الصورة 3)
  4. قم بتوصيل دبوس "Out" لمكون Delay2 بدبوس إدخال "Disconnect" في "Modules. WiFi. Sockets. TCPServer1" لمكون "NodeMCU ESP-12" (الصورة 4)

سيقوم مكون التأخير بفصل المقبس بعد وقت قصير من إرسال النص.

الخطوة 11: إنشاء كود Arduino وترجمته وتحميله

إنشاء وترجمة وتحميل كود اردوينو
إنشاء وترجمة وتحميل كود اردوينو
إنشاء وترجمة وتحميل كود اردوينو
إنشاء وترجمة وتحميل كود اردوينو
  1. في Visuino ، اضغط على F9 أو انقر فوق الزر الظاهر في الصورة 1 لإنشاء كود Arduino ، وافتح Arduino IDE
  2. قم بتوصيل وحدة NodeMCU بالكمبيوتر باستخدام كابل USB
  3. حدد نوع اللوحة والمنفذ التسلسلي كما أوضحت لك في هذا Instructable
  4. في Arduino IDE ، انقر فوق الزر تحميل ، لتجميع وتحميل الكود (الصورة 2)

الخطوة 12: والعب …

Image
Image
واللعب…
واللعب…

تهانينا! لقد قمت بإنشاء خادم ويب لدرجة الحرارة والرطوبة لشبكة Wi-Fi.

في الصورة 1 وفي الفيديو ، يمكنك رؤية المشروع المتصل والمزود بالطاقة. لقد استخدمت بنك طاقة USB صغيرًا لتشغيل الوحدة.

تأكد في المشروع في الخطوة 4 من إدخال SSID وكلمة المرور الصحيحين لنقطة اتصال Wi-Fi الخاصة بك

إذا فتحت مستعرض ويب على جهاز الكمبيوتر أو الجهاز المحمول ، واكتب:

dht11server./

واضغط على Enter ، سترى درجة الحرارة والرطوبة التي تم قياسها بواسطة الوحدة ، وسيتم تحديث القراءة كل 5 ثوانٍ كما هو محدد في الخطوة 7.

تأكد من إضافة النقطة في نهاية الاسم ، وإلا فلن يتمكن Windows من حل اسم المجال

في الصورة 2 ، يمكنك رؤية مخطط Visuino الكامل.

مرفق أيضًا مشروع Visuino ، الذي قمت بإنشائه لهذا Instructable. يمكنك تنزيله وفتحه في Visuino:

موصى به: