नैनो 33 आईओटी + ईसी/पीएच/ओआरपी + वेबएपीके: 8 कदम

2024 लेखक: John Day | [email protected]. अंतिम बार संशोधित: 2024-01-30 09:21

लेखक द्वारा ufireFollow द्वारा:

के बारे में: अपने Arduino या रास्पबेरी पाई प्रोजेक्ट में pH, ORP, EC या लवणता को मापने की क्षमता जोड़ें। Ufire के बारे में अधिक »

ईसी, पीएच, ओआरपी और तापमान को मापने के लिए एक उपकरण। इसका उपयोग पूल या हाइड्रोपोनिक सेटअप की निगरानी के लिए किया जा सकता है। यह ब्लूटूथ लो एनर्जी के माध्यम से संचार करेगा और वेब ब्लूटूथ का उपयोग करके वेबपेज पर जानकारी प्रदर्शित करेगा। और मनोरंजन के लिए, हम इसे एक प्रगतिशील वेब ऐप में बदल देंगे जिसे आप वेब से इंस्टॉल कर सकते हैं।

चरण 1: वे सभी शर्तें क्या हैं?

ईसी/पीएच/ओआरपी/तापमान कुछ सबसे सामान्य जल गुणवत्ता माप हैं। विद्युत चालकता (ईसी) का उपयोग हाइड्रोपोनिक्स में पोषक तत्वों के घोल को मापने के लिए किया जाता है, पीएच के लिए पानी कितना अम्लीय / मूल है, और ओआरपी का उपयोग पानी की खुद को कीटाणुरहित करने की क्षमता को निर्धारित करने में मदद के लिए किया जाता है।

• ब्लूटूथ लो एनर्जी आसानी से सूचना भेजने और प्राप्त करने के लिए एक वायरलेस प्रोटोकॉल है। इस परियोजना में प्रयुक्त Arduino बोर्ड नैनो 33 IoT है और वाईफाई और BLE इंटरफेस के साथ आता है।
• वेब ब्लूटूथ Google के क्रोम ब्राउज़र (और ओपेरा) में लागू एपीआई का एक सेट है जो एक वेबपेज को सीधे बीएलई डिवाइस के साथ संचार करने की अनुमति देता है।
• प्रोग्रेसिव वेब ऐप्स मूल रूप से वेबपेज होते हैं जो नियमित ऐप्स की तरह काम करते हैं। एंड्रॉइड और आईफोन उन्हें अलग तरह से संभालते हैं, और वे डेस्कटॉप पर अलग हैं, इसलिए आपको विशिष्टताओं के लिए कुछ पढ़ने की आवश्यकता होगी।

चरण 2: हार्डवेयर

इससे पहले कि हम हार्डवेयर को असेंबल कर सकें, एक बात पर ध्यान देना होगा। uFire ISE सेंसर डिवाइस समान I2C पते के साथ आते हैं और हम दो का उपयोग कर रहे हैं, इसलिए एक को बदलना होगा। इस परियोजना के लिए, हम आईएसई बोर्डों में से एक को चुनने जा रहे हैं और ओआरपी को मापने के लिए इसका इस्तेमाल करेंगे। यहां दिए गए चरणों का पालन करते हुए, पते को 0x3e में बदलें।

अब जब पता बदल गया है, तो हार्डवेयर को एक साथ रखना आसान है। सभी सेंसर डिवाइस Qwiic कनेक्ट सिस्टम का उपयोग करते हैं इसलिए बस एक श्रृंखला में सब कुछ एक साथ कनेक्ट करें। नैनो 33 में से किसी एक सेंसर को जोड़ने के लिए आपको एक Qwiic से Male तार की आवश्यकता होगी। तार सुसंगत और रंग कोडित हैं। ब्लैक को नैनो के GND से, लाल को +3.3V या +5V पिन से, नीले को SDA पिन से जो कि A4 है, और पीले को A5 पर SCL पिन से कनेक्ट करें।

इस परियोजना के लिए, यह तापमान की जानकारी ईसी सेंसर से आने की उम्मीद करेगा, इसलिए ईसी बोर्ड में तापमान सेंसर संलग्न करना सुनिश्चित करें। हालांकि सभी बोर्डों में तापमान मापने की क्षमता होती है। ईसी, पीएच और ओआरपी जांच को उपयुक्त सेंसर से जोड़ना न भूलें। वे आसानी से BNC कनेक्टर्स से जुड़ जाते हैं।

यदि आपके पास एक बाड़ा है, तो यह सब अंदर रखना एक अच्छा विचार होगा, विशेष रूप से पानी को शामिल करने पर विचार करना।

चरण 3: सॉफ्टवेयर

इसका सॉफ्टवेयर भाग दो मुख्य खंडों में विभाजित है: नैनो 33 पर फर्मवेयर, और वेबपेज।

मूल प्रवाह यह है:

• वेबपेज BLE. के माध्यम से नैनो से जुड़ता है
• वेबपेज जानकारी मांगने या कार्रवाई करने के लिए टेक्स्ट-आधारित कमांड भेजता है
• नैनो उन आदेशों को सुनती है, उन्हें क्रियान्वित करती है, और जानकारी लौटाती है
• वेबपेज प्रतिक्रियाएं प्राप्त करता है और तदनुसार यूआई को अपडेट करता है

यह सेटअप वेबपेज को उन सभी आवश्यक कार्यों को करने की अनुमति देता है जिनकी आप अपेक्षा करते हैं, जैसे माप लेना या सेंसर को कैलिब्रेट करना।

चरण 4: बीएलई सेवाएं और विशेषताएं

सीखने वाली पहली चीजों में से एक यह है कि बीएलई कैसे काम करता है।

बहुत सारी उपमाएँ हैं, तो चलिए एक किताब चुनते हैं। एक सेवा एक किताब होगी, और एक विशेषता पृष्ठ होगी। इस "बीएलई पुस्तक" में, पृष्ठों में कुछ गैर-पुस्तक गुण होते हैं जैसे पृष्ठ जो कहता है उसे बदलने में सक्षम होना और ऐसा होने पर अधिसूचना प्राप्त करना।

एक BLE डिवाइस जितनी चाहे उतनी सेवाएं दे सकता है। कुछ पूर्वनिर्धारित हैं और आमतौर पर उपयोग की जाने वाली जानकारी जैसे टीएक्स पावर या कनेक्शन खोने, इंसुलिन या पल्स ऑक्सीमेट्री जैसी अधिक विशिष्ट चीजों को मानकीकृत करने के तरीके के रूप में कार्य करते हैं। आप बस एक बना सकते हैं और इसके साथ जो चाहें कर सकते हैं। वे सॉफ्टवेयर में परिभाषित हैं और यूयूआईडी के साथ पहचाने जाते हैं। आप यहां यूयूआईडी बना सकते हैं।

इस डिवाइस के फर्मवेयर में, एक सेवा है, जिसे इस प्रकार परिभाषित किया गया है:

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_Characteristic वह जगह होगी जहां डिवाइस वेबपेज को प्रदर्शित करने के लिए ईसी माप जैसी जानकारी भेजता है। rx_Characteristic वह जगह है जहां इसे वेबपेज से निष्पादित करने के लिए आदेश प्राप्त होंगे।

यह प्रोजेक्ट ArduinoBLE लाइब्रेरी का उपयोग करता है। यदि आप देखें, तो आप देखेंगे कि एक विशेषता घोषित करने के लिए कुछ अलग थे। यह प्रोजेक्ट BLEStringCharacteristic का उपयोग करता है क्योंकि हम स्ट्रिंग प्रकार से निपटेंगे और यह बहुत आसान है, लेकिन आप कुछ मुट्ठी भर में से BLECharCharacteristic या BLEByteCharacteristic भी चुन सकते हैं।

इसके अतिरिक्त, कुछ गुण हैं जिन्हें आप विशेषता दे सकते हैं। tx_Characteristic में एक विकल्प के रूप में BLENotify है। इसका मतलब है कि जब हमारे वेबपेज का मूल्य बदलता है तो उसे एक सूचना प्राप्त होगी। rx_Characteristic में BLEWrite है जो हमारे वेबपेज को इसे संशोधित करने की अनुमति देगा। अन्य हैं।

फिर इन सभी चीजों को एक साथ जोड़ने के लिए थोड़ा सा कोड-गोंद है:

BLE.setLocalName("uFire BLE");

BLE.setविज्ञापित सेवा (uFire_Service); uFire_Service.addCharacteristic (tx_Characteristic); uFire_Service.addCharacteristic (rx_Characteristic); BLE.addService (uFire_Service); rx_Characteristic.setEventHandler(BLEWritten, rxCallback); बीएलई.विज्ञापन ();

यह कमोबेश आत्म-व्याख्यात्मक है, लेकिन आइए कुछ बिंदुओं को स्पर्श करें।

rx_Characteristic.setEventHandler(BLEWritten, rxCallback);

वह जगह है जहां आप बदले जा रहे मूल्य के बारे में अधिसूचित होने का लाभ उठाते हैं। जब मान बदल जाता है तो लाइन कक्षा को फ़ंक्शन rxCallback निष्पादित करने के लिए कहती है।

बीएलई.विज्ञापन ();

वह है जो पूरी बात शुरू करता है। एक बीएलई डिवाइस समय-समय पर सूचना का एक छोटा पैकेट भेजेगा जो यह घोषणा करेगा कि यह वहां है और कनेक्ट करने के लिए उपलब्ध है। इसके बिना यह अदृश्य रहेगा।

चरण 5: टेक्स्ट कमांड

जैसा कि पहले बताया गया है, यह डिवाइस साधारण टेक्स्ट कमांड के जरिए वेबपेज से बात करेगी। पूरी बात लागू करना आसान है क्योंकि कड़ी मेहनत पहले ही की जा चुकी है। कमांड भेजने और प्राप्त करने के लिए uFire सेंसर JSON और MsgPack आधारित लाइब्रेरी के साथ आते हैं। आप ईसी और आईएसई आदेशों के बारे में उनके दस्तावेज़ीकरण पृष्ठों पर अधिक पढ़ सकते हैं।

यह प्रोजेक्ट JSON का उपयोग करेगा क्योंकि MsgPack प्रारूप के विपरीत, जो बाइनरी है, इसके साथ काम करना और पठनीय होना थोड़ा आसान है।

यहां एक उदाहरण दिया गया है कि यह सब एक साथ कैसे जुड़ता है:

• वेबपेज ईसी (या अधिक विशेष रूप से rx_Characteristic विशेषता के लिए ईसी लिखकर) भेजकर ईसी माप के लिए डिवाइस से पूछता है।
• डिवाइस कमांड प्राप्त करता है और इसे निष्पादित करता है। इसके बाद यह tx_Characteristic विशेषता को लिखकर {"ec":1.24} की JSON स्वरूपित प्रतिक्रिया वापस भेजता है।
• वेबपेज सूचना प्राप्त करता है और उसे प्रदर्शित करता है

चरण 6: वेबपेज

इस प्रोजेक्ट का वेबपेज फ्रंट-एंड के लिए Vue.js का उपयोग करेगा। कोई बैकएंड की जरूरत नहीं है। इसके अतिरिक्त, चीजों को थोड़ा सरल रखने के लिए, किसी बिल्ड सिस्टम का उपयोग नहीं किया जाता है। यह सामान्य फ़ोल्डरों में विभाजित है, जावास्क्रिप्ट के लिए जेएस, सीएसएस के लिए सीएसएस, आइकन के लिए संपत्तियां। इसका html भाग कुछ खास नहीं है। यह स्टाइल के लिए bulma.io का उपयोग करता है और यूजर इंटरफेस बनाता है। आप अनुभाग में बहुत कुछ देखेंगे। यह सभी सीएसएस और आइकन जोड़ रहा है, लेकिन विशेष रूप से एक पंक्ति भी जोड़ रहा है।

वह हमारी मेनिफेस्ट.जेसन फ़ाइल लोड कर रहा है जो सभी पीडब्लूए सामग्री को घटित करता है। यह कुछ सूचनाओं की घोषणा करता है जो हमारे फोन को बताती है कि इस वेबपेज को ऐप में बदला जा सकता है।

जावास्क्रिप्ट वह जगह है जहां ज्यादातर दिलचस्प चीजें होती हैं। यह फाइलों में विभाजित है, app.js में सभी UI-संबंधित चर और कुछ अन्य चीजों के साथ Vue वेबपेज प्राप्त करने की मूल बातें शामिल हैं। ble.js में ब्लूटूथ सामग्री है।

चरण 7: जावास्क्रिप्ट और वेब ब्लूटूथ

सबसे पहले, यह केवल क्रोम और ओपेरा पर काम करता है। मेरी इच्छा है कि अन्य ब्राउज़र इसका समर्थन करेंगे, लेकिन किसी भी कारण से, वे नहीं करते हैं। app.js पर एक नज़र डालें और आप वही यूयूआईडी देखेंगे जो हमने अपने फर्मवेयर में इस्तेमाल किए थे। एक uFire सेवा के लिए, और एक tx और rx विशेषताओं के लिए।

अब यदि आप ble.js में देखते हैं, तो आप कनेक्ट () और डिस्कनेक्ट () फ़ंक्शन देखेंगे।

कनेक्ट () फ़ंक्शन में UI को सिंक में रखने के लिए कुछ तर्क होते हैं, लेकिन यह ज्यादातर चीजों को विशेषताओं पर जानकारी भेजने और प्राप्त करने के लिए सेट कर रहा है।

वेब ब्लूटूथ के साथ व्यवहार करते समय कुछ विशिष्ट विशेषताएं होती हैं। कनेक्शन किसी प्रकार के भौतिक उपयोगकर्ता इंटरैक्शन द्वारा शुरू किया जाना चाहिए, जैसे एक बटन टैप करना। उदाहरण के लिए, वेबपेज लोड होने पर आप प्रोग्रामिक रूप से कनेक्ट नहीं हो सकते।

कनेक्शन शुरू करने के लिए कोड इस तरह दिखता है:

this.device = प्रतीक्षारत नेविगेटर.ब्लूटूथ.requestDevice({

फ़िल्टर: [{ namePrefix: "uFire" }], वैकल्पिक सेवाएँ: [this.serviceUuid] });

हर एक BLE डिवाइस को देखने से बचने के लिए फ़िल्टर: और वैकल्पिक सेवा अनुभाग की आवश्यकता होती है। आपको लगता है कि केवल फ़िल्टर अनुभाग ठीक रहेगा, लेकिन आपको वैकल्पिक सेवा भाग की भी आवश्यकता है।

उपरोक्त कोड एक कनेक्शन संवाद दिखाएगा। यह क्रोम इंटरफेस का हिस्सा है और इसे बदला नहीं जा सकता। उपयोगकर्ता सूची से चयन करेगा। यहां तक कि अगर केवल एक डिवाइस है जिससे ऐप कभी भी कनेक्ट होगा, सुरक्षा चिंताओं के कारण उपयोगकर्ता को अभी भी इस चयन संवाद से गुजरना होगा।

शेष कोड सेवा और विशेषताओं को स्थापित कर रहा है। ध्यान दें कि हम फर्मवेयर की अधिसूचना कॉलबैक के समान कॉलबैक रूटीन सेट करते हैं:

सेवा = प्रतीक्षा सर्वर। getPrimaryService (this.serviceUuid);

विशेषता = प्रतीक्षा सेवा। getCharacteristic (this.txUuid); प्रतीक्षा विशेषता। प्रारंभ अधिसूचनाएं (); विशेषता। AddEventListener ("विशेषता मूल्य परिवर्तित", this.value_update);

यह.value_update अब हर बार tx विशेषता पर नई जानकारी के लिए कॉल किया जाएगा।

आखिरी चीजों में से एक यह है कि हर 5 सेकंड में जानकारी को अपडेट करने के लिए टाइमर सेट किया जाता है।

value_update() केवल एक लंबा फ़ंक्शन है जो नई JSON जानकारी के आने की प्रतीक्षा करता है और इसके साथ UI को अपडेट करता है।

ec.js, ph.js, और orp.js में कई छोटे फ़ंक्शन होते हैं जो जानकारी प्राप्त करने और उपकरणों को कैलिब्रेट करने के लिए कमांड भेजते हैं।

इसे आज़माने के लिए, आपको यह ध्यान रखना होगा कि वेब ब्लूटूथ का उपयोग करने के लिए, इसे HTTPS पर परोसा जाना चाहिए। स्थानीय HTTPS सर्वर के लिए कई विकल्पों में से एक सेवा-https है। फर्मवेयर अपलोड होने के साथ, सब कुछ जुड़ा हुआ है, और वेबपेज परोसा जा रहा है, आपको सब कुछ काम करते हुए देखने में सक्षम होना चाहिए।

चरण 8: PWA भाग

वेबपेज को वास्तविक ऐप में बदलने के लिए कुछ चरण हैं। प्रोग्रेसिव वेब ऐप्स इस प्रोजेक्ट के लिए उनके द्वारा उपयोग किए जाने की तुलना में बहुत अधिक कर सकते हैं।

• वेबपेज स्थापना
• एक बार स्थापित होने के बाद, ऑफ़लाइन पहुंच संभव है
• नियमित दिखने वाले ऐप आइकन के साथ एक सामान्य ऐप के रूप में शुरू और चलता है

आरंभ करने के लिए, हमें फाइलों का एक गुच्छा तैयार करना होगा। पहली एक मेनिफेस्ट.जेसन फ़ाइल है। कुछ ऐसी साइटें हैं जो आपके लिए ऐसा कर सकती हैं, ऐप मैनिफेस्ट जेनरेटर, उनमें से एक होने के नाते।

समझने के लिए एक दो बातें:

• आवेदन का दायरा महत्वपूर्ण है। मैंने इस वेबपेज को ufire.co/uFire-BLE/ पर रखा है। इसका मतलब है कि मेरे आवेदन का दायरा /uFire-BLE/है।
• प्रारंभ URL भी महत्वपूर्ण है। यह आपके विशेष वेबपेज का मार्ग है जिसका आधार डोमेन पहले से ही माना जा चुका है। इसलिए क्योंकि मैंने इसे ufire.co/uFire-BLE/ पर रखा है, इसलिए प्रारंभ URL /uFire-BLE/ भी है।
• डिस्प्ले मोड यह निर्धारित करेगा कि ऐप कैसा दिखता है, स्टैंडअलोन इसे बिना किसी क्रोम बटन या इंटरफ़ेस के एक नियमित ऐप के रूप में प्रदर्शित करेगा।

आप एक json फ़ाइल के साथ समाप्त हो जाएंगे। इसे वेबपेज के मूल में, index.html के साथ ही रखा जाना चाहिए।

अगली चीज़ जो आपको चाहिए होगी वह है एक सेवा कर्मी। फिर से, वे बहुत कुछ कर सकते हैं, लेकिन यह प्रोजेक्ट केवल कैशिंग का उपयोग करेगा ताकि इस ऐप को ऑफ़लाइन एक्सेस किया जा सके। सेवा कार्यकर्ता कार्यान्वयन ज्यादातर बॉयलरप्लेट है। इस प्रोजेक्ट ने Google उदाहरण का उपयोग किया और कैश की जाने वाली फ़ाइलों की सूची को बदल दिया। आप अपने डोमेन के बाहर फ़ाइलों को कैश नहीं कर सकते।

FavIcon Generator पर जाएं और कुछ आइकन बनाएं।

आखिरी चीज Vue माउंटेड () फ़ंक्शन में कुछ कोड जोड़ना है।

माउंटेड: फंक्शन () { अगर (नेविगेटर में 'सर्विसवर्कर') {navigator.serviceWorker.register ('service-worker.js'); } }

यह कार्यकर्ता को ब्राउज़र के साथ पंजीकृत करेगा।

आप जांच सकते हैं कि सब कुछ काम कर रहा है, और यदि नहीं, तो शायद पता लगाएं कि लाइटहाउस का उपयोग करके, यह साइट का विश्लेषण करेगा और आपको सभी प्रकार की चीजें बताएगा।

यदि सब कुछ काम करता है, तो जब आप वेबपेज पर जाते हैं, तो क्रोम पूछेगा कि क्या आप इसे पॉपअप बैनर के साथ स्थापित करना चाहते हैं। यदि आप मोबाइल क्रोम पर हैं तो आप इसे ufire.co/uFire-BLE/ पर कार्य करते हुए देख सकते हैं। यदि आप डेस्कटॉप पर हैं, तो आप इसे स्थापित करने के लिए एक मेनू आइटम ढूंढ सकते हैं।