الصفحة الرئيسية>موارد بناء الموقع>بيانات الموقع
تنزيل

ESP32 ترموستات غير متزامن على شبكة الإنترنت

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

هناك العديد من التقنيات لتحقيق ذلك ، بما في ذلك استخدام WebSockets ، والتي أفضل الكثير للطرق التقليدية التي تعتمد على Ajax. ومع ذلك ، أراد إيف أن يفهم كيفية تنفيذ هذه التقنية مع Ajax. هذا هو الغرض من هذا المشروع. سيتبع واحد آخر لتوضيح كيفية المتابعة مع WebSockets ...

نظرة عامة على المشروع

للإجابة على طلب YVES الأولي للحصول على ترموستات متصلة ، اخترت إعداد دائرة بسيطة إلى حد ما مع ESP32 ومستشعر درجة حرارة DHT11 (ولكن يمكن لأي مستشعر القيام بالمهمة). لقد أضفت أيضًا LED إلى الإشارة إلى الفلاش لحظات عندما يستجوب المستكشف ESP32 للحصول على درجة الحرارة الحالية. وواجهة المستخدم للتحكم في ESP32 متوافقة مع أي متصفح حديث. خاصة على الهواتف الذكية:

نظرة عامة على الدائرةواجهة مستخدم الويب

تتيح واجهة الويب للمستخدم ضبط نطاق درجة حرارة الترموستات. بمجرد تغيير أحد العتبات ، يتم إرسال طلب HTTP غير متزامن إلى ESP32 لتخزين نطاق درجة الحرارة الجديد في ذاكرته EEPROM. وبهذه الطريقة ، إذا كانت ESP32 ستعيد التشغيل لأي سبب من الأسباب (بعد انقطاع التيار الكهربائي على سبيل المثال) ، سيتم تهيئة ترموستات مع آخر درجة حرارة مسجلة. يتيح زر Reboot هذه الميزة من خلال إعادة تشغيل ESP32 على الأمر.

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

نظرة عامة على تطبيق الهاتف الذكي

قراءات أولية

لفهم ما نقوم به هنا تمامًا ، أقترح عليك إلقاء نظرة على البرنامج التعليمي التالي على دروس الطالب الذي يذاكر كثيرا عشوائيًا:

ESP32/ESP8266 Thermostat Web Server - إخراج التحكم استنادًا إلى درجة الحرارة

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

خادم الويب ESP32 باستخدام spiffs (نظام ملفات فلاش SPI)

أجزاء مطلوبة

  • 1 ESP32
  • مستشعر درجة حرارة 1 DHT11
  • 1 LED
  • 2 مقاومات (220 Ω و 4.7 kΩ)

مخطط الأسلاك و pinouts

مخطط الأسلاك

  • يتم توصيل GPIO23 بأنود LED
  • يتم توصيل كاثود LED بالأرض من خلال مقاوم 220 Ω
  • يتم توصيل GPIO32 بمثابة دبوس البيانات لمستشعر درجة حرارة DHT11
  • DHT11 يتم سحبه على دبوس البيانات الخاص به بمقاوم 4.7 KΩ

الرمز

لقد طورت الكود الخاص بي مع Paltformio IDE ومحرر رمز Visual Studio. لذلك ، يسمى البرنامج الرئيسي main.cpp ويقع في دليل src . إذا كنت تستخدم Arduino IDE ، فسيتعين عليك نقل هذا البرنامج إلى جذر المشروع وإعادة تسميته على هذا النحو: 

 mv src/main.cpp esp32-asynchronous-web-controlled-thermostat.ino

بنية الكود

ينقسم الرمز إلى ثلاث أدلة:

  • يحتوي src على رمز C ++ لتجميع وتحميل إلى ESP32
  • تحتوي data على رمز مصدر واجهة مستخدم الويب لتحميله على spiffs ESP32
  • يحتوي scss على الكود المصدري لأوراق نمط CSS بتنسيق SCSS

سيتم تخزين واجهة مستخدم الويب على نظام ملفات ذاكرة Flash ESP32 كـ 5 ملفات منفصلة:

  • index.html (بنية الواجهة)
  • index.css (التصميم الرسومي للواجهة)
  • index.js (برنامج إدارة الواجهة الديناميكية)
  • D7MR.woff2 (الخط المستخدم في شاشات العرض الرقمية)
  • favicon.ico (أيقونة صغيرة للمتصفح)

يتم تنسيق واجهة الويب بيانيا بواسطة ورقة أنماط CSS. تتم كتابة الرمز المصدر بتنسيق SCSS (Sassy CSS) وتجميعها باستخدام برنامج sass للحصول على ملف CSS. انظر موقع SASS الرسمي لمعرفة المزيد.

بشكل عام ، فإن بناء جملة SCSS قريبًا جدًا من CSS. إذا كنت ترغب في تعديل الملف المصدر ، فستحتاج إلى تثبيت أداة sass وإعادة ترجمة ملف CSS على النحو التالي: 

 sass -t compressed --sourcemap=none --update scss:data

ولكن يمكنك أيضًا تعديل ملف CSS مباشرة إذا كنت لا ترغب في تثبيت أداة إضافية.

تنفيذ AJAX

أقترح هنا تقنيتان لتنفيذ تبادل غير متزامن بين متصفح العميل وخادم الويب الذي يعمل على ESP32:

  • طريقة كلاسيكية تستخدم كائن XMLHttpRequest من JavaScript
  • طريقة أكثر حداثة تستخدم بروتوكول Async/Await لـ JavaScript

لذلك لديك خيار لاستخدام واحد أو آخر.

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

الاعتمادات

  • أود بشكل خاص أن أشكرني لا Dev ، مؤلف مكتبة ESP32AsyncWebserver الرائعة التي تجعل حياتنا أسهل بكثير عندما نريد التفاعل مع ESP32 من خلال تطبيق ويب.

  • أود أيضًا أن أشكر Keshikan على خطه المصغر Mini Mini Minist الذي استخدمته في العروض الرقمية للواجهة.

يوسع
معلومات إضافية
تطبيقات ذات صلة
نوصي لك
أخبار ذات صلة الكل