Nano 33 IoT + EC / pH / ORP + WebAPK: 8 خطوات

2024 مؤلف: John Day | [email protected]. آخر تعديل: 2024-01-30 07:38

تابع المزيد من المؤلف:

حول: أضف القدرة على قياس الأس الهيدروجيني أو ORP أو EC أو الملوحة لمشروع Arduino أو Raspberry Pi. المزيد حول ufire »

جهاز لقياس EC ودرجة الحموضة و ORP ودرجة الحرارة. يمكن استخدامه لمراقبة حوض السباحة أو الإعداد للزراعة المائية. سيتواصل عبر Bluetooth Low Energy ويعرض المعلومات على صفحة ويب باستخدام Web Bluetooth. وللمتعة ، سنحول هذا إلى تطبيق ويب تقدمي يمكنك تثبيته من الويب.

الخطوة 1: ما هي كل هذه الشروط؟

تعتبر EC / pH / ORP / درجة الحرارة من أكثر قياسات جودة المياه شيوعًا. تُستخدم الموصلية الكهربائية (EC) في الزراعة المائية لقياس محلول المغذيات ، ودرجة الحموضة لمدى حمضية / قاعدية الماء ، ويستخدم ORP للمساعدة في تحديد قدرة الماء على تطهير نفسه

• Bluetooth Low Energy هو بروتوكول لاسلكي لإرسال المعلومات وتلقيها بسهولة. لوحة Arduino المستخدمة في هذا المشروع هي Nano 33 IoT وتأتي مع واجهات WiFi و BLE.
• Web Bluetooth عبارة عن مجموعة من واجهات برمجة التطبيقات المطبقة في متصفح Chrome من Google (وأوبرا) والتي تسمح لصفحة ويب بالاتصال المباشر بجهاز BLE.
• تطبيقات الويب التقدمية هي في الأساس صفحات ويب تعمل مثل التطبيقات العادية. يتعامل كل من Android و iPhone معهما بشكل مختلف ، وهما مختلفان على أجهزة سطح المكتب ، لذلك ستحتاج إلى القيام ببعض القراءة لمعرفة التفاصيل.

الخطوة 2: الأجهزة

قبل أن نتمكن من تجميع الأجهزة ، هناك شيء واحد يجب معالجته. تأتي أجهزة مستشعر uFire ISE بنفس عنوان I2C ونستخدم جهازيْن ، لذا يجب تغيير أحدهما. بالنسبة لهذا المشروع ، سنختار واحدة من لوحات ISE ونستخدمها لقياس ORP. باتباع الخطوات هنا ، قم بتغيير العنوان إلى 0x3e.

الآن بعد أن تم تغيير العنوان ، أصبح تجميع الأجهزة معًا أمرًا سهلاً. تستخدم جميع أجهزة الاستشعار نظام الاتصال Qwiic ، لذا قم فقط بتوصيل كل شيء معًا في سلسلة. ستحتاج إلى سلك Qwiic إلى Male لتوصيل أحد المستشعرات بـ Nano 33. الأسلاك متناسقة ومشفرة بالألوان. قم بتوصيل الأسود بـ Nano's GND ، والأحمر إلى + 3.3V أو + 5V pin ، والأزرق إلى SDA pin وهو A4 ، والأصفر إلى دبوس SCL على A5.

بالنسبة لهذا المشروع ، يتوقع أن تأتي معلومات درجة الحرارة من مستشعر EC ، لذا تأكد من توصيل مستشعر درجة الحرارة بلوحة EC. كل الألواح لديها القدرة على قياس درجة الحرارة بالرغم من ذلك. لا تنس إرفاق مجسات EC و pH و ORP بأجهزة الاستشعار المناسبة. يتم توصيلها بسهولة بموصلات BNC.

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

الخطوة 3: البرنامج

يتم تقسيم جزء البرنامج إلى قسمين رئيسيين: البرنامج الثابت على Nano 33 وصفحة الويب.

التدفق الأساسي هو هذا:

• تتصل صفحة الويب بـ Nano عبر BLE
• ترسل صفحة الويب أوامر تستند إلى النص لطلب معلومات أو اتخاذ إجراءات
• يستمع جهاز Nano إلى تلك الأوامر وينفذها ويعيد المعلومات
• تتلقى صفحة الويب الردود وتقوم بتحديث واجهة المستخدم وفقًا لذلك

يسمح هذا الإعداد لصفحة الويب بأداء جميع الوظائف المطلوبة التي تتوقعها ، مثل إجراء قياس أو معايرة أجهزة الاستشعار.

الخطوة 4: خدمات وخصائص BLE

من أول الأشياء التي يجب تعلمها أساسيات كيفية عمل BLE.

هناك الكثير من التشبيهات ، لذا دعنا نختار كتابًا. ستكون الخدمة عبارة عن كتاب ، وستكون السمة المميزة هي الصفحات. في هذا "الكتاب BLE" ، تحتوي الصفحات على بعض الخصائص غير الكتابية مثل القدرة على تغيير ما تقوله الصفحة وتلقي إشعار عند حدوث ذلك.

يمكن لجهاز BLE تقديم العديد من الخدمات التي يريدها. بعضها محدد مسبقًا ويعمل كطريقة لتوحيد المعلومات شائعة الاستخدام مثل Tx Power أو فقدان الاتصال بأشياء أكثر تحديدًا مثل الأنسولين أو مقياس التأكسج النبضي. يمكنك أيضًا إنشاء واحدة والقيام بكل ما تريد به. يتم تعريفها في البرنامج ويتم تحديدها باستخدام UUID. يمكنك إنشاء UUID هنا.

في البرنامج الثابت لهذا الجهاز ، توجد خدمة واحدة مُعرَّفة على النحو التالي:

BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408") ؛

وخاصيتان:

BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a" ، BLENotify ، 20) ؛

BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b" ، BLEWrite ، 20) ؛

ستكون خاصية tx_ هي المكان الذي ترسل فيه الأجهزة المعلومات ، مثل قياسات EC ، لعرضها على صفحة الويب. الخاصية rx_Characteristic هي المكان الذي ستتلقى فيه الأوامر من صفحة الويب لتنفيذها.

يستخدم هذا المشروع مكتبة ArduinoBLE. إذا نظرت ، سترى أن هناك زوجًا مختلفًا كان إعلانًا عن خاصية مميزة. يستخدم هذا المشروع BLEStringCharacteristic لأننا سنتعامل مع نوع String وهو أسهل ، ولكن يمكنك أيضًا اختيار BLECharCharacteristic أو BLEByteCharacteristic من بين عدد قليل من الآخرين.

بالإضافة إلى ذلك ، هناك بعض الخصائص التي يمكنك تحديدها. تحتوي tx_Characteristic على BLENotify كخيار. هذا يعني أن صفحة الويب الخاصة بنا ستتلقى إشعارًا عندما تتغير قيمتها. يحتوي rx_Characteristic على BLEWrite والذي سيسمح لصفحة الويب الخاصة بنا بتعديلها. وهناك آخرون.

ثم هناك القليل من غراء الكود لربط كل هذه الأشياء معًا:

BLE.setLocalName ("uFire BLE") ؛

BLE.setAdvertisedService (uFire_Service) ، uFire_Service.addCharacteristic (tx_Characteristic) ؛ uFire_Service.addCharacteristic (rx_Characteristic) ؛ BLE.addService (uFire_Service) ؛ rx_Characteristic.setEventHandler (BLEWritten، rxCallback) ، BLE.advertise () ،

إنها تشرح نفسها بشكل أو بآخر ، لكن دعنا نتطرق إلى بعض النقاط.

rx_Characteristic.setEventHandler (BLEWritten، rxCallback) ،

هو المكان الذي تستفيد فيه من إخطارك بالقيمة التي يتم تغييرها. يخبر السطر الفصل بتنفيذ الوظيفة rxCallback عند تغيير القيمة.

BLE.advertise () ،

هو ما يبدأ كل شيء يسير. سيرسل جهاز BLE بشكل دوري حزمة صغيرة من المعلومات تعلن أنها موجودة ومتاحة للاتصال بها. بدونها سيكون غير مرئي.

الخطوة 5: أوامر نصية

كما ذكرنا سابقًا ، سيتحدث هذا الجهاز إلى صفحة الويب من خلال أوامر نصية بسيطة. كل شيء سهل التنفيذ لأن العمل الجاد قد تم بالفعل. تأتي مستشعرات uFire مع مكتبة تستند إلى JSON و MsgPack لإرسال الأوامر واستلامها. يمكنك قراءة المزيد حول أوامر EC و ISE على صفحات التوثيق الخاصة بهم.

سيستخدم هذا المشروع JSON لأنه أسهل قليلاً في العمل به وقابل للقراءة ، على عكس تنسيق MsgPack ثنائي.

فيما يلي مثال على كيفية ارتباط كل ذلك ببعضه البعض:

• تطلب صفحة الويب من الجهاز قياس EC عن طريق إرسال ec (أو بشكل أكثر تحديدًا كتابة ec إلى خاصية rx_Characteristic)
• يستقبل الجهاز الأمر وينفذه. ثم يرسل مرة أخرى استجابة بتنسيق JSON لـ {"ec": 1.24} عن طريق الكتابة إلى الخاصية tx_Characteristic.
• تتلقى صفحة الويب المعلومات وتعرضها

الخطوة السادسة: صفحة الويب

ستستخدم صفحة الويب الخاصة بهذا المشروع Vue.js للواجهة الأمامية. ليست هناك حاجة للخلفية. بالإضافة إلى ذلك ، للحفاظ على الأشياء أبسط قليلاً ، لا يتم استخدام أي نظام بناء. يتم تقسيمها إلى المجلدات المعتادة ، js لجافا سكريبت ، css لـ CSS ، أصول للأيقونات. جزء HTML منه ليس شيئًا مميزًا. يستخدم bulma.io للتصميم وإنشاء واجهة المستخدم. ستلاحظ الكثير في القسم. إنها تضيف كل css والرموز ، ولكنها تضيف أيضًا سطرًا واحدًا على وجه الخصوص.

هذا هو تحميل ملف manifest.json الخاص بنا وهو ما يجعل كل عناصر PWA تحدث. يعلن عن بعض المعلومات التي تخبر هاتفنا بإمكانية تحويل صفحة الويب هذه إلى تطبيق.

جافا سكريبت هي المكان الذي تحدث فيه معظم الأشياء الممتعة. إنه مقسم إلى ملفات ، يحتوي app.js على أساسيات الحصول على صفحة ويب Vue تتماشى مع جميع المتغيرات المتعلقة بواجهة المستخدم وبعض الأشياء الأخرى. يحتوي ble.js على عناصر البلوتوث.

الخطوة السابعة: جافا سكريبت وبلوتوث الويب

أولاً ، هذا يعمل فقط على Chrome و Opera. أتمنى أن تدعم المتصفحات الأخرى هذا ، لكن لأي سبب من الأسباب ، لا يفعلون ذلك. ألق نظرة على app.js وسترى نفس UUIDs التي استخدمناها في البرامج الثابتة الخاصة بنا. واحد لخدمة uFire وواحد لكل من خصائص tx و rx.

الآن إذا بحثت في ble.js ، سترى وظيفتي connect () و disconnect ().

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

هناك بعض الخصوصيات عند التعامل مع Web Bluetooth. يجب أن يبدأ الاتصال من خلال نوع من التفاعل المادي للمستخدم ، مثل النقر على زر. لا يمكنك الاتصال برمجيًا عند تحميل صفحة الويب ، على سبيل المثال.

يبدو رمز بدء الاتصال كما يلي:

this.device = await navigator.bluetooth.requestDevice ({

المرشحات: [{namePrefix: "uFire"}]، OptionalServices: [this.serviceUuid]})؛

المرشحات: وقسم الخدمات الاختيارية ضروريان لتجنب رؤية كل جهاز BLE موجود هناك. كنت تعتقد أن قسم التصفية فقط سيكون جيدًا ، لكنك تحتاج أيضًا إلى جزء الخدمات الاختياري أيضًا.

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

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

service = انتظار server.getPrimaryService (this.serviceUuid) ؛

السمة المميزة = انتظار service.getCharacteristic (this.txUuid) ؛ انتظار الخاصية.startNotifications () ؛ characteristic.addEventListener ("characteristicvaluechanged"، this.value_update) ؛

سيتم الآن استدعاء this.value_update في كل مرة توجد فيها معلومات جديدة عن خاصية tx.

أحد آخر الأشياء التي يقوم بها هو تعيين مؤقت لتحديث المعلومات كل 5 ثوانٍ.

value_update () هي مجرد وظيفة طويلة تنتظر وصول معلومات JSON الجديدة وتقوم بتحديث واجهة المستخدم بها.

تحتوي ec.js و ph.js و orp.js على العديد من الوظائف الصغيرة التي ترسل الأوامر لاسترداد المعلومات ومعايرة الأجهزة.

لتجربة ذلك ، عليك أن تضع في اعتبارك أنه لاستخدام Web Bluetooth ، يجب تقديمه عبر HTTPS. أحد الخيارات العديدة لخادم HTTPS المحلي هو serve-https. مع تحميل البرنامج الثابت وكل شيء متصل وصفحة الويب التي يتم تقديمها ، يجب أن تكون قادرًا على رؤية كل شيء يعمل.

الخطوة 8: جزء PWA

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

• تثبيت صفحة الويب
• بمجرد التثبيت ، يمكن الوصول دون اتصال
• بدأ ويعمل كتطبيق عادي برمز تطبيق عادي المظهر

للبدء ، سنحتاج إلى إنشاء مجموعة من الملفات. الأول هو ملف manifest.json. هناك عدد قليل من المواقع التي ستقوم بذلك نيابة عنك ، App Manifest Generator ، كونها واحدة منها.

هناك أمران يجب فهمهما:

• نطاق التطبيق مهم. أضع صفحة الويب هذه على ufire.co/uFire-BLE/. هذا يعني أن نطاق التطبيق الخاص بي هو / uFire-BLE /.
• عنوان URL للبدء مهم أيضًا. إنه المسار إلى صفحة الويب الخاصة بك مع المجال الأساسي المفترض بالفعل. لذلك لأنني وضعت هذا في ufire.co/uFire-BLE/ ، عنوان URL للبدء هو / uFire-BLE / أيضًا.
• سيحدد وضع العرض كيف يبدو التطبيق ، ستجعله ميزة Standalone تبدو وكأنها تطبيق عادي بدون أي أزرار أو واجهة Chrome.

ستنتهي بملف json. يجب وضعها في جذر صفحة الويب ، جنبًا إلى جنب مع index.html.

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

توجه إلى FavIcon Generator وقم بعمل بعض الرموز.

آخر شيء هو إضافة بعض التعليمات البرمجية في وظيفة Vue mount ().

مُثبت: function () {if ('serviceWorker' in navigator) {navigator.serviceWorker.register ('service-worker.js')؛ }}

سيؤدي هذا إلى تسجيل العامل مع المتصفح.

يمكنك التحقق من أن كل شيء يعمل ، وإذا لم يكن الأمر كذلك ، فربما تعرف على السبب باستخدام Lighthouse ، فسيحلل الموقع ويخبرك بجميع أنواع الأشياء.

إذا نجح كل شيء ، فعند الانتقال إلى صفحة الويب ، سيسألك Chrome عما إذا كنت تريد تثبيته باستخدام لافتة منبثقة. يمكنك رؤيته أثناء العمل على ufire.co/uFire-BLE/ إذا كنت تستخدم متصفح Chrome على الهاتف المحمول. إذا كنت على سطح مكتب ، فيمكنك العثور على عنصر قائمة لتثبيته.