Nano 33 IoT + EC/pH/ORP + WebAPK ՝ 8 քայլ

2024 Հեղինակ: John Day | [email protected]. Վերջին փոփոխված: 2024-01-30 09:48

Հետևեք հեղինակի ավելին ՝

Օգտվողի մասին. Ավելացրեք pH, ORP, EC կամ աղիությունը չափելու ձեր Arduino կամ Raspberry Pi նախագծին: Ավելին ufire- ի մասին »

EC, pH, ORP և ջերմաստիճանը չափելու սարք: Այն կարող է օգտագործվել լողավազանի կամ հիդրոպոնիկ տեղադրման վերահսկման համար: Այն հաղորդակցվելու է Bluetooth Low Energy- ի միջոցով և տեղեկատվությունը ցուցադրելու է վեբ էջի միջոցով ՝ օգտագործելով Web Bluetooth- ը: Եվ զվարճանքի համար մենք դա կդարձնենք Առաջադիմական վեբ հավելված, որը կարող եք տեղադրել համացանցից:

Քայլ 1: Որո՞նք են այդ բոլոր պայմանները:

EC/pH/ORP/ջերմաստիճանը ջրի որակի ամենատարածված չափումներից են: Էլեկտրական հաղորդունակությունը (EC) օգտագործվում է հիդրոպոնիկայում `սննդարար լուծույթը չափելու համար, pH- ն` որքանով է ջուրը թթու/հիմնային, և ORP- ն օգտագործվում է ջրի ինքն ախտահանման ունակությունը որոշելու համար:

• Bluetooth Low Energy- ը անլար արձանագրություն է ՝ տեղեկատվությունը հեշտությամբ ուղարկելու և ստանալու համար: Այս նախագծում օգտագործվող Arduino տախտակը Nano 33 IoT- ն է և գալիս է WiFi և BLE ինտերֆեյսերով:
• Վեբ Bluetooth- ը Google- ի Chrome դիտարկիչում (և Opera- ում) ներդրված API- ների մի շարք է, որոնք թույլ են տալիս վեբ էջին ուղղակիորեն շփվել BLE սարքի հետ:
• Առաջադիմական վեբ ծրագրերը հիմնականում վեբ էջեր են, որոնք գործում են սովորական ծրագրերի նման: Android- ը և iPhone- ը այլ կերպ են վարվում դրանց հետ, և նրանք տարբերվում են աշխատասեղանների վրա, այնպես որ դուք պետք է մի փոքր կարդաք մանրամասների համար:

Քայլ 2: Սարքավորումը

Նախքան սարքավորումները հավաքելը, պետք է անդրադառնալ մի բանի. UFire ISE սենսորային սարքերը գալիս են նույն I2C հասցեով, և մենք օգտագործում ենք երկուսը, ուստի մեկը պետք է փոխվի: Այս նախագծի համար մենք պատրաստվում ենք ընտրել ISE տախտակներից մեկը և այն օգտագործել ORP- ի չափման համար: Հետևելով այստեղ կատարված քայլերին ՝ հասցեն փոխեք 0x3e- ի:

Այժմ, երբ հասցեն փոխվել է, սարքավորումները համատեղելը հեշտ է: Բոլոր սենսորային սարքերը օգտագործում են Qwiic միացման համակարգը, այնպես որ պարզապես միացրեք ամեն ինչ շղթայի մեջ: Սենսորներից մեկը Nano 33 -ին միացնելու համար ձեզ հարկավոր կլինի մեկ Qwiic to Male մետաղալար: Հաղորդալարերը հետևողական են և գունավորված: Սևը միացրեք Nano- ի GND- ին, կարմիրը ՝ +3.3V կամ +5V կապին, կապույտը ՝ SDA կապին, որը A4 է, և դեղին ՝ SCL կապին ՝ A5- ում:

Այս նախագծի համար ակնկալում է, որ ջերմաստիճանի մասին տեղեկատվությունը կգա EC սենսորից, ուստի համոզվեք, որ ջերմաստիճանի տվիչ կցեք EC տախտակին: Այնուամենայնիվ, բոլոր տախտակները ունեն ջերմաստիճանը չափելու ունակություն: Մի մոռացեք համապատասխան սենսորներին կցել EC, pH և ORP զոնդերը: Նրանք հեշտությամբ կցվում են BNC միակցիչներով:

Եթե դուք ունեք պարիսպ, ապա այս ամենը ներսում դնելը լավ գաղափար կլինի, հատկապես հաշվի առնելով, որ ջուրը ներգրավվելու է:

Քայլ 3: Softwareրագրակազմ

Սրա ծրագրային մասը բաժանված է երկու հիմնական բաժնի ՝ Nano 33 -ի որոնվածը և վեբ էջը:

Հիմնական հոսքը հետևյալն է.

• Վեբ էջը միանում է Նանոյին BLE- ի միջոցով
• Կայքը ուղարկում է տեքստի վրա հիմնված հրամաններ ՝ տեղեկատվություն խնդրելու կամ գործողություններ կատարելու համար
• Նանոն լսում է այդ հրամանները, կատարում դրանք և վերադարձնում տեղեկատվությունը
• Կայքը ստանում է պատասխանները և համապատասխանաբար թարմացնում UI- ն

Այս կարգավորումը թույլ է տալիս վեբ էջին կատարել բոլոր անհրաժեշտ գործառույթները, որոնցից դուք կսպասեիք, օրինակ ՝ չափումներ կատարել կամ չափել սենսորները:

Քայլ 4: BLE ծառայություններ և բնութագրեր

Սովորելու առաջին բաներից մեկը BLE- ի աշխատանքի սկզբունքներն են:

Կան շատ նմանություններ, ուստի եկեք գիրք ընտրենք: Serviceառայությունը գիրք կլինի, իսկ բնութագիրը ՝ էջերը: Այս «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_Characteristic- ը կլինի այն, որտեղ սարքերը տեղեկատվություն են ուղարկում, ինչպես EC չափումները, որպեսզի կայքը ցուցադրվի: Rx_Characteristic- ն այն է, որտեղ այն կստանա հրամաններ ՝ վեբ էջից կատարելու համար:

Այս նախագիծը օգտագործում է ArduinoBLE գրադարանը: Եթե նայեք, կտեսնեք, որ զույգը տարբերվում է հռչակել բնութագիր: Այս նախագիծը օգտագործում է BLEStringCharacteristic- ը, քանի որ մենք գործ կունենանք լարային տիպի հետ, և դա պարզապես ավելի հեշտ է, բայց դուք կարող եք նաև ընտրել 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 բնութագրին:
• Կայքը ստանում է տեղեկատվությունը և ցուցադրում այն

Քայլ 6: Վեբ էջ

Այս նախագծի վեբ էջում Vue.js- ն օգտագործվելու է առջևի մասի համար: Ոչ մի հետնապահ կարիք չկա: Բացի այդ, ամեն ինչ մի փոքր պարզ դարձնելու համար կառուցման համակարգ չի օգտագործվում: Այն բաժանված է սովորական թղթապանակների, js javascript- ի համար, css CSS- ի համար, ակտիվներ `պատկերակների համար: Դրա html հատվածն առանձնահատուկ ոչինչ չէ: Այն օգտագործում է bulma.io ոճավորելու համար և ստեղծում է օգտվողի միջերես: Բաժնում շատ բան կնկատեք: Այն ավելացնում է բոլոր css- ը և պատկերակները, բայց նաև ավելացնում է մեկ տող:

Դա բեռնում է մեր manifest.json ֆայլը, ինչն էլ ստիպում է իրականացնել PWA- ի բոլոր իրերը: Այն հայտարարում է որոշ տեղեկություններ, որոնք մեր հեռախոսին ասում են, որ այս վեբ էջը կարող է վերածվել հավելվածի:

Javascript- ն այնտեղ է, որտեղ տեղի են ունենում շատ հետաքրքիր բաներ: Այն բաժանված է ֆայլերի, ble.js- ն ունի bluetooth նյութեր:

Քայլ 7: Javascript և վեբ Bluetooth

Նախ, սա աշխատում է միայն Chrome- ում և Opera- ում: Կցանկանայի, որ այլ դիտարկիչներ աջակցեին դրան, բայց ինչ -ինչ պատճառներով ՝ նրանք չեն աջակցում: Նայեք app.js- ին և կտեսնեք նույն UUID- ները, որոնք մենք օգտագործել ենք մեր որոնվածում: Մեկը uFire ծառայության համար, և մեկը ՝ tx և rx բնութագրերի համար:

Այժմ, եթե նայեք ble.js- ում, կտեսնեք միացման () և անջատման () գործառույթները:

Միացման () գործառույթը պարունակում է որոշ տրամաբանություն ՝ UI- ն համաժամեցնելու համար, բայց հիմնականում այն կարգավորում է բնութագրերի վերաբերյալ տեղեկատվություն ուղարկելու և ստանալու համար:

Վեբ Bluetooth- ի հետ աշխատելիս կան որոշ յուրահատկություններ: Կապը պետք է սկսվի ինչ -որ ֆիզիկական օգտագործողի փոխազդեցությամբ, օրինակ ՝ կոճակին կտտացնելով: Դուք չեք կարող ծրագրորեն միանալ, երբ վեբ էջը բեռնված է, օրինակ.

Կապ սկսելու համար ծածկագիրն այսպիսին է.

this.device = սպասեք navigator.bluetooth.requestDevice ({

զտիչներ ՝ [{namePrefix: "uFire"}], ըստ ցանկության erառայություններ ՝ [this.serviceUuid]});

Ֆիլտրեր. Դուք կարծում եք, որ պարզապես ֆիլտրի բաժինը լավ կլինի, բայց ձեզ նույնպես պետք է լրացուցիչ ծառայությունների մասը:

Վերոնշյալ կոդը կցուցադրի կապի երկխոսություն: Այն Chrome- ի ինտերֆեյսի մի մասն է և չի կարող փոխվել: Օգտվողը կընտրի ցուցակից: Նույնիսկ եթե կա միայն մեկ սարք, որին ծրագիրը երբևէ պետք է միանար, օգտագործողը դեռ պետք է անցնի ընտրության այս երկխոսությունը ՝ անվտանգության նկատառումներից ելնելով:

Մնացած ծածկագիրը ծառայության և բնութագրերի կարգավորումն է: Ուշադրություն դարձրեք, որ մենք ստեղծել ենք հետադարձ կապի ռեժիմ, որը նման է որոնվածի ծանուցման հետադարձ զանգին.

ծառայություն = սպասել server.getPrimaryService (this.serviceUuid);

բնորոշ = սպասել service.getCharacteristic (this.txUuid); սպասել karakterist.startNotifications (); karakteristik.addEventListener («charactervaluechanged», this.value_update);

this.value_update- ը այժմ կկոչվի ամեն անգամ, երբ tx բնութագրի վերաբերյալ նոր տեղեկություններ հայտնվեն:

Վերջին գործողություններից մեկն այն է, որ յուրաքանչյուր 5 վայրկյանը մեկ տեղեկատվությունը թարմացնելու համար ժամանակաչափ սահմանվի:

value_update () պարզապես երկար գործառույթ է, որը սպասում է JSON- ի նոր տեղեկատվության մուտքին և դրանով թարմացնում է UI- ն:

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/է:
• Displayուցադրման ռեժիմը կորոշի, թե ինչ տեսք ունի ծրագիրը, ինքնուրույն այն կդարձնի սովորական ծրագիր ՝ առանց Chrome- ի կոճակների կամ ինտերֆեյսի:

Դուք կավարտեք json ֆայլով: Այն պետք է տեղադրվի վեբ էջի արմատում ՝ index.html- ի հետ միասին:

Հաջորդ բանը, որ ձեզ հարկավոր կլինի, ծառայության աշխատակից է: Կրկին, նրանք կարող են շատ բան անել, բայց այս նախագիծը կօգտագործի միայն քեշը ՝ այս հավելվածին անցանց մուտք գործելու համար: Serviceառայության աշխատողի իրականացումը հիմնականում կաթսայատուն է: Այս նախագիծը օգտագործեց Google- ի օրինակը և փոխեց պահվող ֆայլերի ցանկը: Դուք չեք կարող քեշավորել ձեր տիրույթից դուրս ֆայլերը:

Գնացեք դեպի FavIcon Generator և պատրաստեք պատկերակներ:

Վերջին բանը Vue mounted () ֆունկցիայի մեջ որոշակի ծածկագիր ավելացնելն է:

տեղադրված: }}

Սա գրանցելու է աշխատողին բրաուզերում:

Կարող եք ստուգել, որ ամեն ինչ աշխատում է, և եթե ոչ, գուցե պարզեք, թե ինչու, օգտագործելով Lighthouse- ը, այն կվերլուծի կայքը և ձեզ կասի ամեն տեսակ բաներ:

Եթե ամեն ինչ աշխատեց, վեբ էջ մտնելիս, Chrome- ը կհարցնի ՝ արդյոք ցանկանում եք տեղադրել այն թռուցիկ դրոշակով: Եթե այն շարժական Chrome- ով եք, կարող եք տեսնել այն գործողության մեջ ufire.co/uFire-BLE/ կայքում: Եթե աշխատասեղանի վրա եք, կարող եք գտնել ընտրացանկի տարր `այն տեղադրելու համար: