Mundarija:
- 1 -qadam: Bu shartlarning barchasi nima?
- 2 -qadam: Uskuna
- 3 -qadam: dasturiy ta'minot
- 4 -qadam: BLE xizmatlari va xususiyatlari
- 5 -qadam: Matn buyruqlari
- 6 -qadam: veb -sahifa
- 7 -qadam: Javascript va veb -Bluetooth
- 8 -qadam: PWA qismi
Video: Nano 33 IoT + EC/pH/ORP + WebAPK: 8 qadam
2024 Muallif: John Day | [email protected]. Oxirgi o'zgartirilgan: 2024-01-30 13:25
UfireFollow tomonidan Muallifning boshqa maqolalari:
Haqida: Arduino yoki Raspberry Pi loyihangizga pH, ORP, EC yoki sho'rlikni o'lchash qobiliyatini qo'shing. Ufire haqida ko'proq ma'lumot »
EC, pH, ORP va haroratni o'lchaydigan qurilma. Bu hovuz yoki gidroponik sozlamalarni kuzatish uchun ishlatilishi mumkin. U Bluetooth Low Energy orqali muloqot qiladi va Web Bluetooth yordamida veb -sahifadagi ma'lumotlarni ko'rsatadi. Va o'yin -kulgi uchun biz buni Internetdan o'rnatishingiz mumkin bo'lgan progressiv veb -ilovaga aylantiramiz.
1 -qadam: Bu shartlarning barchasi nima?
EC/pH/ORP/harorat - suv sifatining eng keng tarqalgan o'lchovlari. Elektr o'tkazuvchanligi (EC) gidroponikada ozuqa eritmasini, suvning kislotali/asosli pH darajasini o'lchash uchun ishlatiladi va ORP suvning o'zini zararsizlantirish qobiliyatini aniqlashda ishlatiladi
- Bluetooth Low Energy - bu ma'lumotlarni uzatish va qabul qilish uchun simsiz protokol. Ushbu loyihada ishlatiladigan Arduino taxtasi Nano 33 IoT va WiFi va BLE interfeyslari bilan ta'minlangan.
- Veb -Bluetooth - bu Google Chrome brauzerida (va Opera) amalga oshirilgan, veb -sahifaga BLE qurilmasi bilan to'g'ridan -to'g'ri bog'lanish imkonini beradigan API -lar to'plami.
- Progressiv veb -ilovalar - bu oddiy ilovalar kabi ishlaydigan veb -sahifalar. Android va iPhone ularni boshqacha boshqaradi va ular ish stolida farq qiladi, shuning uchun siz batafsil ma'lumot uchun biroz o'qishingiz kerak bo'ladi.
2 -qadam: Uskuna
Uskunani yig'ishdan oldin, biz bir narsani hal qilishimiz kerak. UFire ISE sensorli qurilmalari bir xil I2C manzili bilan keladi va biz ikkitasini ishlatamiz, shuning uchun bittasini o'zgartirish kerak bo'ladi. Ushbu loyiha uchun biz ISE platalaridan birini tanlaymiz va undan ORPni o'lchash uchun foydalanamiz. Bu erdagi amallarni bajarib, manzilni 0x3e ga o'zgartiring.
Endi manzil o'zgarganda, uskunani birlashtirish oson. Barcha sensorli qurilmalar Qwiic ulanish tizimidan foydalanadi, shuning uchun hamma narsani zanjirda bir -biriga ulang. Datchiklardan birini Nano 33 ga ulash uchun sizga bitta Qwiic to Erkak sim kerak bo'ladi. Simlar izchil va rangli kodlangan. Qora rangni Nano GND -ga, qizilni +3.3V yoki +5V -ga, ko'kni A4 -ga SDA -ga, sariqni A5 -dagi SCL -piniga ulang.
Ushbu loyiha uchun harorat sensori EC sensoridan kelishini kutadi, shuning uchun EC kartasiga harorat sensori biriktirilganligiga ishonch hosil qiling. Biroq, barcha taxtalar haroratni o'lchash qobiliyatiga ega. EC, pH va ORP problarini tegishli sensorlarga ulashni unutmang. Ular BNC ulagichlari bilan osongina biriktiriladi.
Agar sizda korpus bo'lsa, bularning barchasini ichkariga qo'yish yaxshi bo'lardi, ayniqsa suv aralashishini hisobga olsak.
3 -qadam: dasturiy ta'minot
Buning dasturiy qismi ikkita asosiy bo'limga bo'lingan: Nano 33 dasturiy ta'minoti va veb -sahifa.
Asosiy oqim bu:
- Veb -sahifa BLE orqali Nano -ga ulanadi
- Veb-sahifa ma'lumot so'rash yoki harakat qilish uchun matnli buyruqlar yuboradi
- Nano bu buyruqlarni tinglaydi, ularni bajaradi va ma'lumotlarni qaytaradi
- Veb -sayt javoblarni oladi va foydalanuvchi interfeysini mos ravishda yangilaydi
Ushbu sozlash veb -sahifani o'lchash yoki sensorlarni kalibrlash kabi barcha kerakli funktsiyalarni bajarishga imkon beradi.
4 -qadam: BLE xizmatlari va xususiyatlari
O'rganish kerak bo'lgan birinchi narsalardan biri bu BLE qanday ishlashining asoslari.
Ko'p o'xshashliklar bor, shuning uchun kitobni tanlaylik. Xizmat - bu kitob, xarakteristikasi esa sahifalar bo'ladi. Bu "BLE kitobi" da sahifalar kitobga tegishli bo'lmagan bir qancha xususiyatlarga ega, masalan, sahifaning so'zlarini o'zgartirish va bu sodir bo'lganda bildirishnoma olish.
BLE qurilmasi xohlagancha xizmat ko'rsatishi mumkin. Ba'zilar oldindan aniqlangan va Tx Power yoki aloqani uzish kabi tez -tez ishlatib turadigan ma'lumotlarni insulin yoki impuls oksimetriyasi kabi aniqroq narsalarga standartlashtirish usuli sifatida harakat qilishadi. Siz shunchaki bittasini yasashingiz va u bilan xohlagan narsani qilishingiz mumkin. Ular dasturiy ta'minotda aniqlanadi va UUID bilan aniqlanadi. UUID -ni bu erda qilishingiz mumkin.
Ushbu qurilmaning dasturiy ta'minotida bitta xizmat mavjud, ular quyidagicha ta'riflanadi.
BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");
va ikkita xususiyat:
BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);
BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);
Tx_Characteristic - bu qurilmalar veb -sahifani ko'rsatish uchun EC o'lchovlari kabi ma'lumotlarni yuboradigan joy. Rx_Characteristic - bu veb -sahifadan buyruqlarni bajarish uchun.
Ushbu loyiha ArduinoBLE kutubxonasidan foydalanadi. Agar qarasangiz, siz xarakteristikani e'lon qilishdan farq qiladigan juftliklar borligini ko'rasiz. Ushbu loyiha BLEStringCharacteristic -dan foydalanadi, chunki biz String turi bilan shug'ullanamiz va bu osonroq bo'ladi, lekin siz BLECharCharacteristic yoki BLEByteCharacteristic -ni bir nechta boshqalar orasidan tanlashingiz mumkin.
Bunga qo'shimcha ravishda, siz ba'zi xususiyatlarni berishingiz mumkin. tx_Characteristic variant sifatida BLENotify -ga ega. Bu shuni anglatadiki, bizning veb -sahifamiz qiymati o'zgarganda xabarnoma oladi. rx_Characteristic -da BLEWrite mavjud, bu bizning veb -sahifamizni o'zgartirishga imkon beradi. Boshqalar ham bor.
Keyin bu narsalarni bir-biriga bog'lash uchun bir oz kod yopishtiruvchi bor:
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.advertis ();
Bu ozmi-ko'pmi o'z-o'zidan tushunarli, lekin bir nechta fikrlarga to'xtalib o'tamiz.
rx_Characteristic.setEventHandler (BLEWritten, rxCallback);
Bu erda siz qiymat o'zgarganligi to'g'risida xabardor bo'lasiz. Chiziq sinfga qiymat o'zgartirilganda rxCallback funktsiyasini bajarishini aytadi.
BLE.advertis ();
hamma narsa boshidan boshlanadi. BLE qurilmasi vaqti -vaqti bilan u erda va ulanish uchun mavjud bo'lgan kichik ma'lumot paketini yuboradi. Bu holda, u ko'rinmas bo'ladi.
5 -qadam: Matn buyruqlari
Yuqorida aytib o'tganimizdek, ushbu qurilma oddiy matnli buyruqlar orqali veb -sahifa bilan gaplashadi. Hammasini amalga oshirish oson, chunki mashaqqatli ishlar allaqachon bajarilgan. UFire datchiklari buyruqlarni yuborish va qabul qilish uchun JSON va MsgPack kutubxonasiga ega. EC va ISE buyruqlari haqida ko'proq ma'lumotni ularning hujjatlar sahifalarida o'qishingiz mumkin.
Bu loyiha JSONdan foydalanadi, chunki ikkilik bo'lgan MsgPack formatidan farqli o'laroq ishlash va o'qish biroz osonroq.
Bularning barchasi bir -biriga qanday bog'langaniga misol:
- Veb -sahifa ec (yoki aniqrog'i rx_Characteristic xarakteristikasiga ec yozish) yuborish orqali qurilmani EC o'lchashini so'raydi.
- Qurilma buyruqni oladi va uni bajaradi. Keyin tx_Characteristic xarakteristikasiga yozish orqali JSON formatidagi "" ec ": 1.24} javobini yuboradi.
- Veb -sayt ma'lumotni oladi va ko'rsatadi
6 -qadam: veb -sahifa
Ushbu loyihaning veb-sahifasida oldingi qism uchun Vue.js ishlatiladi. Hech qanday orqa qism kerak emas. Bundan tashqari, narsalarni biroz soddalashtirish uchun hech qanday qurilish tizimi ishlatilmaydi. U odatdagi papkalarga bo'linadi, javascript uchun js, CSS uchun CSS, ikonkalar uchun aktivlar. Uning HTML qismi alohida narsa emas. U uslub uchun bulma.io -dan foydalanadi va foydalanuvchi interfeysini yaratadi. Siz bo'limda juda ko'p narsani ko'rasiz. Bu barcha CSS va ikonkalarni qo'shadi, lekin ayni paytda bitta qatorni qo'shadi.
Bu bizning manifest.json faylimizni yuklamoqda, bu esa barcha PWA ishlarini amalga oshiradi. Bu bizning veb -sahifamizni ilovaga aylantirish mumkinligi haqida telefonimizga ma'lum bo'lgan ba'zi ma'lumotlarni e'lon qiladi.
JavaScript bu erda eng qiziqarli narsalar sodir bo'ladi. U fayllarga bo'linadi, app.js Vue veb-sahifasini UI bilan bog'liq bo'lgan barcha o'zgaruvchilar va boshqa narsalar bilan birga olish asoslarini o'z ichiga oladi. ble.js bluetooth -ga ega.
7 -qadam: Javascript va veb -Bluetooth
Birinchidan, bu faqat Chrome va Opera -da ishlaydi. Boshqa brauzerlar ham buni qo'llab -quvvatlashini xohlardim, lekin nima sababdan ular qo'llab -quvvatlamaydilar. App.js ga qarang va siz bizning dasturiy ta'minotimizda ishlatilgan UUID -larni ko'rasiz. UFire xizmati uchun bittasi va tx va rx xususiyatlari uchun bittasi.
Endi ble.js ga qarasangiz, connect () va disconnect () funktsiyalarini ko'rasiz.
Connect () funktsiyasi foydalanuvchi interfeysini sinxronlashtirish uchun ba'zi mantiqlarni o'z ichiga oladi, lekin u asosan xususiyatlar haqida ma'lumot yuborish va qabul qilishni sozlaydi.
Web Bluetooth bilan ishlashda o'ziga xosliklar mavjud. Ulanish tugmachani bosish kabi foydalanuvchi bilan qandaydir jismoniy shovqin bilan boshlanishi kerak. Masalan, veb -sahifa yuklanganda, siz dasturiy ravishda ulana olmaysiz.
Ulanishni boshlash kodi quyidagicha ko'rinadi:
this.device = navigator.bluetooth.requestDevice kuting ({
filtrlar: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});
Filtrlar: va ixtiyoriy Xizmatlar bo'limi u erda har bir BLE qurilmasini ko'rmaslik uchun kerak. Siz faqat filtr bo'limi yaxshi bo'ladi deb o'ylar edingiz, lekin sizga ixtiyoriy Xizmatlar qismi ham kerak bo'ladi.
Yuqoridagi kod ulanish dialogini ko'rsatadi. Bu Chrome interfeysining bir qismi, uni o'zgartirish mumkin emas. Foydalanuvchi ro'yxatdan tanlaydi. Agar ilova ulanadigan bitta qurilma bo'lsa ham, foydalanuvchi xavfsizlik nuqtai nazaridan ushbu tanlov dialogidan o'tishi kerak.
Kodning qolgan qismi xizmat va xususiyatlarni sozlashdir. E'tibor bering, biz dasturiy ta'minotni qayta qo'ng'iroq qilish kabi, qayta qo'ng'iroq qilish tartibini o'rnatdik:
xizmat = server.getPrimaryService kuting (this.serviceUuid);
xarakterli = xizmatni kutish.getCharacteristic (this.txUuid); kutish xarakteristikasi.startNotifications (); xarakterli.addEventListener ("xarakteristikasi o'zgargan", bu.value_update);
this.value_update endi har safar tx xarakteristikasi haqida yangi ma'lumotlar paydo bo'lganda chaqiriladi.
Oxirgi ishlardan biri - har 5 soniyada ma'lumotni yangilash uchun taymerni o'rnatish.
value_update () - bu yangi JSON ma'lumoti kelishini kutadigan va foydalanuvchi interfeysini yangilaydigan uzoq funksiya.
ec.js, ph.js va orp.js ko'plab kichik funktsiyalarni o'z ichiga oladi, ular ma'lumotlarni olish va qurilmalarni kalibrlash buyruqlarini yuboradi.
Buni sinab ko'rish uchun, veb -Bluetooth -dan foydalanish uchun HTTPS orqali xizmat ko'rsatish kerakligini yodda tutish kerak. Mahalliy HTTPS serverining ko'plab variantlaridan biri bu xizmat ko'rsatish https. O'rnatilgan dasturiy ta'minot, hamma narsa ulangan va veb -sahifa bilan siz hamma narsani ishlayotganini ko'rishingiz kerak.
8 -qadam: PWA qismi
Veb -sahifani haqiqiy ilovaga aylantirish uchun bir necha qadamlar mavjud. Progressiv veb -ilovalar ushbu loyiha ishlatganidan ko'ra ko'proq narsani qila oladi.
- Veb -sahifani o'rnatish
- O'rnatilgandan so'ng, oflayn kirish mumkin
- Oddiy ilova sifatida odatiy ko'rinadigan ilova belgisi bilan boshlangan va ishlaydi
Boshlash uchun biz bir nechta fayllarni yaratishimiz kerak bo'ladi. Birinchisi, manifest.json fayli. Siz uchun shunday qiladigan bir nechta saytlar borki, App Manifest Generator, ulardan biri.
Bir nechta narsalarni tushunish kerak:
- Qo'llash doirasi muhim. Men bu veb-sahifani ufire.co/uFire-BLE/ saytiga joylashtirdim. Bu shuni anglatadiki, mening dastur doirasi /uFire-BLE /.
- Boshlanish URL manzili ham muhim. Bu sizning asosiy veb -sahifangizga yo'l, bu allaqachon qabul qilingan asosiy domen. Men buni ufire.co/uFire-BLE/ ga qo'yganim uchun, boshlang'ich URL manzili/uFire-BLE/ham.
- Displey rejimi ilova qanday ko'rinishini aniqlaydi, yakka o'zi uni hech qanday Chrome tugmachalari va interfeysisiz oddiy dastur bo'lib ko'radi.
Siz json fayliga ega bo'lasiz. U index.html bilan birga veb -sahifaning ildiziga joylashtirilishi kerak.
Sizga kerak bo'lgan keyingi narsa - bu xizmat ko'rsatuvchi. Shunga qaramay, ular juda ko'p ish qilishlari mumkin, lekin bu loyiha faqat ushbu ilovaga oflayn rejimda kirish uchun keshlashdan foydalanadi. Xizmat ko'rsatuvchi xodimlarni amalga oshirish asosan qozondan iborat. Ushbu loyiha Google misolidan foydalangan va keshlanadigan fayllar ro'yxatini o'zgartirgan. Siz domen tashqarisida fayllarni keshlay olmaysiz.
FavIcon Generator -ga o'ting va piktogramma qiling.
Oxirgi narsa - Vue mounted () funktsiyasiga ba'zi kodlarni qo'shish.
o'rnatilgan: function () {if (navigatorda 'serviceWorker') {navigator.serviceWorker.register ('service-worker.js'); }}
Bu ishchini brauzerda ro'yxatdan o'tkazadi.
Siz hamma narsa ishlayotganini tekshirishingiz mumkin, agar bo'lmasa, balki Lighthouse -dan foydalanib nima uchun bu saytni tahlil qiladi va sizga har xil narsalarni aytib beradi.
Agar hamma narsa ishlagan bo'lsa, veb -sahifaga kirganingizda, Chrome uni pop -banner bilan o'rnatishni xohlaysizmi, deb so'raydi. Agar siz mobil Chrome-da bo'lsangiz, buni ufire.co/uFire-BLE/ saytida ko'rishingiz mumkin. Agar siz ish stolida bo'lsangiz, uni o'rnatish uchun menyu bandini topishingiz mumkin.