Mündəricat:
- Addım 1: Bütün bu şərtlər nədir?
- Addım 2: Hardware
- Addım 3: Proqram təminatı
- Addım 4: BLE Xidmətləri və Xüsusiyyətləri
- Addım 5: Mətn əmrləri
- Addım 6: İnternet səhifəsi
- Addım 7: Javascript və Web Bluetooth
- Addım 8: PWA hissəsi
Video: Nano 33 IoT + EC/pH/ORP + WebAPK: 8 addım
2024 Müəllif: John Day | [email protected]. Son dəyişdirildi: 2024-01-30 07:46
Müəllif tərəfindən ufireFollow tərəfindən daha çox:
Haqqında: Arduino və ya Raspberry Pi layihənizə pH, ORP, EC və ya duzluluğu ölçmə qabiliyyətini əlavə edin. Ufire haqqında daha çox »
EC, pH, ORP və temperaturu ölçmək üçün bir cihaz. Bir hovuz və ya hidroponik quruluşu izləmək üçün istifadə edilə bilər. Bluetooth Low Energy vasitəsi ilə ünsiyyət quracaq və Web Bluetooth istifadə edərək məlumatı bir səhifədə göstərəcək. Və əylənmək üçün bunu vebdən yükləyə biləcəyiniz Proqressiv Veb Tətbiqinə çevirəcəyik.
Addım 1: Bütün bu şərtlər nədir?
EC/pH/ORP/temperatur, suyun keyfiyyətinin ən çox görülən ölçülərindən biridir. Elektrik keçiriciliyi (EC) hidroponikada qida məhlulu, suyun nə qədər asidik/əsaslı olduğunu ölçmək üçün istifadə olunur və suyun özünü dezinfeksiya etmək qabiliyyətini təyin etmək üçün ORP istifadə olunur
- Bluetooth Low Energy, məlumatı asanlıqla göndərmək və almaq üçün simsiz bir protokoldur. Bu layihədə istifadə olunan Arduino lövhəsi Nano 33 IoT və WiFi və BLE interfeysləri ilə birlikdə gəlir.
- Veb Bluetooth, Google Chrome brauzerində (və Opera) tətbiq olunan bir veb səhifənin BLE cihazı ilə birbaşa əlaqə qurmasına imkan verən bir sıra API -lərdir.
- Proqressiv Veb Tətbiqləri, əsasən adi tətbiqlər kimi işləyən veb səhifələrdir. Android və iPhone onları fərqli şəkildə idarə edir və masa üstü kompüterlərdə fərqlidir, buna görə də detallar üçün bir az oxumaq lazımdır.
Addım 2: Hardware
Donanımı yığmadan əvvəl, həll etmək üçün bir şey var. UFire ISE sensor cihazları eyni I2C ünvanı ilə gəlir və ikisini istifadə edirik, buna görə birini dəyişdirmək lazım gələcək. Bu layihə üçün İMKB lövhələrindən birini seçib ORP ölçmək üçün istifadə edəcəyik. Buradakı addımları izləyərək ünvanı 0x3e olaraq dəyişdirin.
İndi ünvan dəyişdirildikdə, aparatı bir araya gətirmək çox asandır. Bütün sensor cihazları Qwiic əlaqə sistemindən istifadə edir, buna görə hər şeyi bir zəncirdə birləşdirin. Sensorlardan birini Nano 33 -ə bağlamaq üçün bir Qwiic to Male telinə ehtiyacınız olacaq. Tellər ardıcıl və rəng kodludur. Qara Nano GND -yə, qırmızı ya 3.3V və ya +5V pininə, mavi A4 olan SDA pininə və sarı A5 -dəki SCL pininə qoşulun.
Bu layihə üçün temperatur məlumatının EC sensorundan gəlməsini gözləyəcək, buna görə də EC lövhəsinə bir temperatur sensoru bağladığınızdan əmin olun. Bütün lövhələr istiliyi ölçmək qabiliyyətinə malikdir. EC, pH və ORP problarını müvafiq sensorlara bağlamağı unutmayın. BNC bağlayıcıları ilə asanlıqla bağlanırlar.
Bir qapağınız varsa, bütün bunları içəriyə qoymaq, xüsusən suyun iştirak edəcəyini nəzərə alaraq yaxşı bir fikir olardı.
Addım 3: Proqram təminatı
Bunun proqram hissəsi iki əsas hissəyə bölünür: Nano 33 -dəki firmware və veb səhifəsi.
Əsas axın budur:
- Veb səhifə NLE -yə BLE vasitəsilə qoşulur
- Veb səhifə məlumat istəmək və ya hərəkət etmək üçün mətn əsaslı əmrlər göndərir
- Nano bu əmrləri dinləyir, yerinə yetirir və məlumatları qaytarır
- Veb səhifə cavabları alır və UI -ni buna uyğun olaraq yeniləyir
Bu quraşdırma, veb səhifənin ölçü götürmək və ya sensorları kalibr etmək kimi gözlədiyiniz bütün lazımi funksiyaları yerinə yetirməsinə imkan verir.
Addım 4: BLE Xidmətləri və Xüsusiyyətləri
Öyrəniləcək ilk şeylərdən biri BLE -nin necə işlədiyinin əsaslarıdır.
Çox bənzətmələr var, buna görə də bir kitab seçək. Bir xidmət bir kitab olardı, bir xüsusiyyət isə səhifələr olardı. Bu "BLE kitabında", səhifələrin səhifənin dediklərini dəyişdirə bilməsi və baş verdikdə bildiriş alması kimi bir neçə kitab olmayan xüsusiyyətə malikdir.
BLE cihazı istədiyi qədər xidmət edə bilər. Bəziləri əvvəlcədən təyin olunur və Tx Power kimi tez -tez istifadə olunan məlumatları standartlaşdırmaq və ya əlaqəni kəsmək, insulin və ya nəbz oksimetriyası kimi daha konkret şeylərə çıxış etmək kimi çıxış edir. Həm də onlardan birini düzəldə və istədiyinizi edə bilərsiniz. Proqram təminatında təyin olunur və UUID ilə eyniləşdirilir. UUID -ləri burada edə bilərsiniz.
Bu cihazın firmware proqramında aşağıdakı kimi təyin olunan bir xidmət var:
BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");
və iki xüsusiyyət:
BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);
BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);
Tx_Characteristic, cihazların veb səhifəsinin göstərilməsi üçün EC ölçüləri kimi məlumat göndərdiyi yer olacaq. Rx_Characteristic, veb səhifədən icra etmək üçün əmr alacağı yerdir.
Bu layihə ArduinoBLE kitabxanasından istifadə edir. Baxsanız, bir xüsusiyyət elan etmək üçün fərqli bir cüt olduğunu görəcəksiniz. Bu layihə BLEStringCharacteristic -dən istifadə edir, çünki String növü ilə məşğul olacağıq və bu daha asandır, ancaq BLECharCharacteristic və ya BLEByteCharacteristic -i bir neçə başqası arasından da seçə bilərsiniz.
Əlavə olaraq, xüsusiyyət verə biləcəyiniz bəzi xüsusiyyətlər var. tx_Characteristic bir seçim olaraq BLENotify -ə malikdir. Bu, veb səhifəmizin dəyəri dəyişdikdə bir bildiriş alacağı deməkdir. rx_Characteristic, veb saytımızın onu dəyişdirməsinə imkan verəcək BLEWrite -ə malikdir. Başqaları da var.
Sonra bütün bunları birləşdirmək üçün bir az kod yapışdırıcısı var:
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 ();
Az-çox özünü izah edir, amma bir neçə məqama toxunaq.
rx_Characteristic.setEventHandler (BLEWritten, rxCallback);
Dəyişdirilən dəyər haqqında xəbərdarlıqdan istifadə etdiyiniz yer. Xətt, sinif dəyişdirildikdə rxCallback funksiyasını yerinə yetirməsini bildirir.
BLE.advertis ();
hər şeyin davam etməsinə başlayan şeydir. Bir BLE cihazı vaxtaşırı orada olduğunu və əlaqə qura biləcəyini bildirən kiçik bir məlumat paketi göndərəcək. Onsuz, görünməz olacaq.
Addım 5: Mətn əmrləri
Daha əvvəl qeyd edildiyi kimi, bu cihaz veb səhifəsi ilə sadə mətn əmrləri vasitəsilə danışacaq. Hər şeyi həyata keçirmək asandır, çünki artıq çox iş görülmüşdür. UFire sensorlar əmrləri göndərmək və qəbul etmək üçün JSON və MsgPack əsaslı kitabxana ilə gəlir. Sənəd səhifələrində EC və İMKB əmrləri haqqında daha çox oxuya bilərsiniz.
Bu layihə JSON istifadə edəcək, çünki ikili olan MsgPack formatından fərqli olaraq işləmək və oxumaq bir az daha asandır.
Hamısının bir -birinə necə bağlandığına bir nümunə:
- Veb səhifə, ec (və ya daha doğrusu rx_Characteristic xarakteristikasına ec yazaraq) göndərərək cihazdan EC ölçməsini tələb edir.
- Cihaz əmri alır və yerinə yetirir. Daha sonra tx_Characteristic xarakteristikasına yazaraq JSON formatlı {"ec": 1.24} cavabını geri göndərir.
- Veb səhifə məlumatları alır və göstərir
Addım 6: İnternet səhifəsi
Bu layihənin veb səhifəsi ön uç üçün Vue.js istifadə edəcək. Arxa plana ehtiyac yoxdur. Əlavə olaraq, hər şeyi bir az daha sadə etmək üçün heç bir quruluş sistemi istifadə edilmir. Adi qovluqlara bölünür, javascript üçün js, CSS üçün CSS, nişanlar üçün aktivlər. Bunun html hissəsi xüsusi bir şey deyil. Styling üçün bulma.io istifadə edir və istifadəçi interfeysi yaradır. Bölmədə çox şey görəcəksiniz. Bütün css və ikonları əlavə edir, eyni zamanda bir xətt əlavə edir.
Bütün PWA işlərinin baş verməsinə səbəb olan manifest.json faylımızı yükləyirik. Telefonumuza bu veb səhifənin bir tətbiqə çevrilə biləcəyini bildirən bəzi məlumatları bəyan edir.
JavaScript ən maraqlı şeylərin baş verdiyi yerdir. Fayllara bölünmüşdür, app.js, UI ilə əlaqəli bütün dəyişənlər və bir neçə başqa şeylə birlikdə gedən bir Vue veb səhifəsi əldə etmənin əsaslarını ehtiva edir. ble.js -də bluetooth məhsulları var.
Addım 7: Javascript və Web Bluetooth
Birincisi, bu yalnız Chrome və Opera -da işləyir. Kaş ki, digər brauzerlər də bunu dəstəkləsinlər, amma nədənsə, dəstəkləmirlər. App.js -ə baxın və firmware -də istifadə etdiyimiz eyni UUID -ləri görəcəksiniz. Biri uFire Xidməti üçün, biri də tx və rx xüsusiyyətləri üçün.
İndi ble.js -ə baxsanız, connect () və disconnect () funksiyalarını görəcəksiniz.
Connect () funksiyası, UI -ni sinxronlaşdırmaq üçün bəzi məntiqlər ehtiva edir, lakin əsasən xüsusiyyətlər haqqında məlumat göndərmək və almaq üçün hər şeyi qurur.
Veb Bluetooth ilə işləyərkən bəzi özünəməxsusluqlar var. Bağlantı, bir düyməyə basmaq kimi bir növ fiziki istifadəçi ilə başlamalıdır. Məsələn, veb səhifəsi yükləndikdə proqramla əlaqə qura bilməzsiniz.
Bağlantıya başlamaq üçün kod belə görünür:
this.device = naviqatoru gözləyirik. bluetooth.requestDevice ({
filtrlər: [{namePrefix: "uFire"}], isteğe bağlı Xidmətlər: [this.serviceUuid]});
Orada hər bir BLE cihazını görməmək üçün filtrlər: və isteğe bağlı Xidmətlər bölməsinə ehtiyac var. Yalnız filtr bölməsinin yaxşı olacağını düşünürsünüz, ancaq isteğe bağlı Xidmətlər hissəsinə də ehtiyacınız var.
Yuxarıdakı kod bir əlaqə dialoqunu göstərəcəkdir. Chrome interfeysinin bir hissəsidir və dəyişdirilə bilməz. İstifadəçi siyahıdan seçim edəcək. Tətbiqin bağlayacağı yalnız bir cihaz olsa belə, istifadəçinin təhlükəsizlik problemlərinə görə bu seçim dialoqundan keçməsinə ehtiyac var.
Kodun qalan hissəsi xidmət və xüsusiyyətləri qurmaqdır. Firmware bildiriş geri çağırışına bənzər bir geri çağırma qaydası qurduğumuza diqqət yetirin:
xidmət = server.getPrimaryService (this.serviceUuid) gözləyin;
xarakterik = xidmət gözləyin.getCharacteristic (this.txUuid); xarakteristikanı gözləyin.startNotifications (); xarakterik.addEventListener ("xarakterikvalu dəyişdirildi", bu.dəyər_güncəlləmə);
this.value_update indi tx xarakteristikası ilə bağlı hər dəfə yeni məlumatlar olanda çağırılacaq.
Etdiyi son işlərdən biri, hər 5 saniyədə bir məlumatı yeniləmək üçün bir taymer qurmaqdır.
value_update (), yeni JSON məlumatlarının daxil olmasını gözləyən və istifadəçi interfeysini yeniləyən uzun bir funksiyadır.
ec.js, ph.js və orp.js, məlumatları əldə etmək və cihazları kalibr etmək üçün əmrləri göndərən bir çox kiçik funksiyaya malikdir.
Bunu sınamaq üçün Veb Bluetooth istifadə etmək üçün HTTPS üzərindən xidmət edilməli olduğunu nəzərə almalısınız. Yerli bir HTTPS serveri üçün bir çox variantdan biri xidmət-httpsdır. Yüklənmiş firmware, hər şey bağlı və veb səhifəsi ilə hər şeyin işlədiyini görə bilməlisiniz.
Addım 8: PWA hissəsi
Veb səhifəni həqiqi bir tətbiqə çevirmək üçün bir neçə addım var. Proqressiv Veb Tətbiqləri, bu layihənin istifadə etdiklərindən daha çox şey edə bilər.
- Veb səhifənin quraşdırılması
- Quraşdırıldıqdan sonra, oflayn giriş mümkündür
- Daimi görünüşlü bir tətbiq nişanı olan normal bir tətbiq olaraq başladı və işləyir
Başlamaq üçün bir dəstə fayl yaratmalıyıq. Birincisi, manifest.json faylıdır. Bunlardan biri olan App Manifest Generator üçün bunu edəcək bir neçə sayt var.
Anlamaq üçün bir neçə şey:
- Tətbiq dairəsi vacibdir. Bu veb səhifəni ufire.co/uFire-BLE/ saytına qoydum. Bu o deməkdir ki, tətbiq sahəm /uFire-BLE /-dir.
- Başlanğıc URL də vacibdir. Artıq qəbul edilmiş əsas sahə ilə xüsusi veb səhifənizə gedən yoldur. Bunu ufire.co/uFire-BLE/ saytına qoyduğum üçün başlanğıc URL/uFire-BLE/də.
- Ekran rejimi tətbiqin necə görünəcəyini təyin edəcək, Bağımsız olaraq heç bir Chrome düyməsi və ya interfeysi olmayan adi bir tətbiq kimi görünəcək.
Bir json faylı ilə sona çatacaqsınız. Veb səhifənin kökündə, index.html ilə birlikdə yerləşdirilməlidir.
Ehtiyac duyduğunuz növbəti şey bir xidmət işçisidir. Yenə çox şey edə bilərlər, amma bu layihə yalnız bu tətbiqin oflayn olaraq əldə edilməsinə icazə vermək üçün önbelleği istifadə edəcək. Xidmət işçisinin tətbiqi əsasən qazandır. Bu layihə Google nümunəsini istifadə etdi və önbelleğe alınacaq faylların siyahısını dəyişdirdi. Domeniniz xaricində faylları önbelleğe ala bilməzsiniz.
FavIcon Generator -a gedin və bəzi nişanlar yaradın.
Son şey Vue mounted () funksiyasına bir az kod əlavə etməkdir.
quraşdırılmış: funksiya () {if (naviqatorda 'serviceWorker') {navigator.serviceWorker.register ('service-worker.js'); }}
Bu, işçini brauzerdə qeyd edəcək.
Hər şeyin işlədiyini yoxlaya bilərsiniz və əgər deyilsə, bəlkə də Lighthouse istifadə edərək nəyə görə saytı analiz edəcəyini və sizə hər şeyi izah edəcəyini anlaya bilərsiniz.
Hər şey işləmiş olsaydı, veb səhifəsinə keçdiyiniz zaman, Chrome onu pop -up banner ilə quraşdırmaq istəyib -istəməyinizi soruşacaq. Mobil Chrome-da olsanız, bunu ufire.co/uFire-BLE/ ünvanında görə bilərsiniz. Masaüstündəsinizsə, onu quraşdırmaq üçün bir menyu tapa bilərsiniz.