Nano 33 IoT + EC/pH/ORP + WebAPK: 8 korakov

2024 Avtor: John Day | [email protected]. Nazadnje spremenjeno: 2024-01-30 12:04

Avtor ufireSledite Več avtorja:

O: V svoj projekt Arduino ali Raspberry Pi dodajte možnost merjenja pH, ORP, EC ali slanosti. Več o ufire »

Naprava za merjenje EC, pH, ORP in temperature. Lahko se uporablja za spremljanje bazena ali hidroponske postavitve. Komuniciral bo prek nizkoenergijske povezave Bluetooth in prikazal podatke na spletni strani prek spletnega Bluetootha. Za zabavo bomo to spremenili v progresivno spletno aplikacijo, ki jo lahko namestite iz spleta.

1. korak: Kaj so vsi ti pogoji?

EC/pH/ORP/temperatura so nekatere najpogostejše meritve kakovosti vode. Električna prevodnost (EC) se uporablja v hidroponiki za merjenje hranilne raztopine, pH za kislo/bazično vodo in ORP za določanje sposobnosti vode, da se razkuži

• Bluetooth Low Energy je brezžični protokol za enostavno pošiljanje in sprejemanje informacij. Plošča Arduino, uporabljena v tem projektu, je Nano 33 IoT in ima vmesnike WiFi in BLE.
• Spletni Bluetooth je niz API -jev, implementiranih v Googlov brskalnik Chrome (in Opera), ki spletni strani omogočajo neposredno komunikacijo z napravo BLE.
• Progresivne spletne aplikacije so v bistvu spletne strani, ki delujejo kot običajne aplikacije. Android in iPhone z njimi ravnata drugače, pri namiznih računalnikih pa sta različna, zato boste morali podrobnosti prebrati.

2. korak: Strojna oprema

Preden lahko sestavimo strojno opremo, je treba obravnavati eno stvar. Senzorske naprave uFire ISE imajo isti naslov I2C, uporabljamo pa dva, zato bo treba eno spremeniti. Za ta projekt bomo izbrali eno od plošč ISE in jo uporabili za merjenje ORP. Po naslednjih korakih spremenite naslov v 0x3e.

Zdaj, ko je naslov spremenjen, je enostavno sestaviti strojno opremo. Vse senzorske naprave uporabljajo sistem Qwiic connect, zato preprosto povežite vse skupaj v verigo. Za priključitev enega od senzorjev na Nano 33 potrebujete eno žico Qwiic do Male. Žice so skladne in barvno označene. Črno priključite na Nano's GND, rdečo na +3.3V ali +5V pin, modro na SDA pin A4 in rumeno na SCL pin na A5.

Pri tem projektu bodo pričakovali, da bodo podatki o temperaturi prišli od senzorja EC, zato temperaturni senzor pritrdite na ploščo ES. Vse plošče imajo možnost merjenja temperature. Ne pozabite pritrditi sond EC, pH in ORP na ustrezne senzorje. Enostavno jih pritrdite s priključki BNC.

Če imate ograjen prostor, bi bilo dobro, če bi vse to postavili notri, zlasti če upoštevate vodo.

3. korak: programska oprema

Del programske opreme je razdeljen na dva glavna dela: vdelano programsko opremo na Nano 33 in spletno stran.

Osnovni tok je naslednji:

• Spletna stran se poveže z Nano prek BLE
• Spletna stran pošilja ukaze, ki temeljijo na besedilu, da zahtevajo informacije ali izvedejo dejanja
• Nano posluša te ukaze, jih izvede in vrne informacije
• Spletna stran prejme odgovore in ustrezno posodobi uporabniški vmesnik

Ta nastavitev omogoča, da spletna stran opravlja vse zahtevane funkcije, kot bi merila ali kalibrirala senzorje.

4. korak: Storitve BLE in značilnosti

Ena prvih stvari, ki se jih morate naučiti, so osnove delovanja BLE.

Obstaja veliko analogij, zato izberite knjigo. Storitev bi bila knjiga, značilnost pa bi bile strani. V tej "knjigi BLE" imajo strani nekaj neknjižnih lastnosti, na primer možnost spreminjanja besedila strani in prejema obvestila, ko se to zgodi.

Naprava BLE lahko opravlja toliko storitev, kot si želi. Nekateri so vnaprej določeni in delujejo kot način za standardizacijo pogosto uporabljenih informacij, kot je Tx Power ali izguba povezave, do bolj specifičnih stvari, kot sta insulin ali pulzna oksimetrija. Lahko ga tudi naredite in z njim počnete, kar želite. Opredeljeni so v programski opremi in označeni z UUID. Tu lahko naredite UUID.

V vdelani programski opremi te naprave je ena storitev, opredeljena kot:

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

in dve lastnosti:

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

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

Tx_Characteristic bo mesto, kjer naprave pošiljajo informacije, na primer meritve ES, za prikaz spletne strani. Rx_Characteristic je mesto, kjer bo prejelo ukaze s spletne strani za izvedbo.

Ta projekt uporablja knjižnico ArduinoBLE. Če pogledate, boste videli, da obstaja nekaj različnih načinov razglasitve značilnosti. Ta projekt uporablja BLEStringCharacteristic, ker bomo obravnavali vrsto String in je preprosto lažje, lahko pa med peščico drugih izberete tudi BLECharCharacteristic ali BLEByteCharacteristic.

Poleg tega obstaja nekaj lastnosti, ki jim lahko podate značilnost. tx_Characteristic ima možnost BLENotify. To pomeni, da bo naša spletna stran prejela obvestilo, ko se vrednost spremeni. rx_Characteristic ima BLEWrite, ki bo naši spletni strani omogočil spreminjanje. Obstajajo še drugi.

Potem je nekaj kode lepila za povezovanje vseh teh stvari skupaj:

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 ();

To je bolj ali manj samoumevno, vendar se dotaknimo nekaj točk.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Tam izkoristite, da ste obveščeni o spremembi vrednosti. Vrstica pove razredu, naj izvede funkcijo rxCallback, ko se vrednost spremeni.

BLE.advertise ();

to je tisto, kar začne vse. Naprava BLE bo občasno pošiljala majhen paket informacij, ki naznanja, da je tam in je na voljo za povezavo. Brez tega bo neviden.

5. korak: Besedilni ukazi

Kot smo že omenili, se bo ta naprava pogovarjala s spletno stranjo prek preprostih besedilnih ukazov. Vse skupaj je enostavno izvesti, saj je bilo trdo delo že opravljeno. Senzorji uFire so opremljeni s knjižnico, ki temelji na JSON in MsgPack za pošiljanje in sprejemanje ukazov. Več o ukazih EC in ISE lahko preberete na njihovih straneh z dokumentacijo.

Ta projekt bo uporabljal JSON, ker je z njim nekoliko lažje delati in ga je mogoče brati, za razliko od binarnega formata MsgPack.

Tu je primer, kako je vse skupaj povezano:

• Spletna stran od naprave zahteva merjenje EC tako, da pošlje ec (ali natančneje zapisuje ec v rx_Charakteristic karakteristiko)
• Naprava sprejme ukaz in ga izvede. Nato pošlje nazaj oblikovan odziv {"ec": 1.24} v obliki zapisa JSON s pisanjem na značilnost tx_Characteristic.
• Spletna stran prejme informacije in jih prikaže

6. korak: Spletna stran

Spletna stran tega projekta bo za vmesni del uporabljala Vue.js. Zaledje ni potrebno. Poleg tega, da bi bilo stvari nekoliko poenostavljeno, se ne uporablja sistem gradnje. Razdeljen je na običajne mape, js za javascript, css za CSS, sredstva za ikone. Njegov html del ni nič posebnega. Za oblikovanje uporablja bulma.io in ustvarja uporabniški vmesnik. V razdelku boste veliko opazili. Dodaja vse css in ikone, dodaja pa tudi eno vrstico.

To nalaga našo datoteko manifest.json, zaradi katere se dogajajo vse stvari PWA. Navaja nekaj podatkov, ki na našem telefonu povejo, da je to spletno stran mogoče spremeniti v aplikacijo.

V javascriptu se dogaja večina zanimivih stvari. Razdeljen je na datoteke, app.js vsebuje osnove pridobivanja spletne strani Vue skupaj z vsemi spremenljivkami, povezanimi z uporabniškim vmesnikom, in nekaj drugimi stvarmi. ble.js ima bluetooth.

7. korak: Javascript in spletni Bluetooth

Prvič, to deluje samo v Chromu in Operi. Želim si, da bi drugi brskalniki to podpirali, vendar iz kakršnega koli razloga tega ne podpirajo. Oglejte si app.js in videli boste iste UUID -e, ki smo jih uporabili v naši vdelani programski opremi. Enega za storitev uFire in enega za značilnosti tx in rx.

Če pogledate v ble.js, boste videli funkcije connect () in disconnect ().

Funkcija connect () vsebuje nekaj logike za sinhronizacijo uporabniškega vmesnika, vendar večinoma nastavlja stvari za pošiljanje in prejemanje informacij o značilnostih.

Pri obravnavi spletnega Bluetootha obstaja nekaj posebnosti. Povezavo je treba vzpostaviti z nekakšno fizično interakcijo uporabnika, na primer z dotikom gumba. Na primer, ko je naložena spletna stran, se ne morete programsko povezati.

Koda za vzpostavitev povezave izgleda tako:

this.device = počakajte navigator.bluetooth.requestDevice ({

filtri: [{namePrefix: "uFire"}], neobveznoServices: [this.serviceUuid]});

Odsek Filtri: in neobvezne storitve je potreben, da se izognete vsakršni napravi BLE. Mislili bi, da bi bil v redu le del filtra, vendar potrebujete tudi izbirni del Storitve.

Zgornja koda bo prikazala pogovorno okno za povezavo. Je del vmesnika Chrome in ga ni mogoče spremeniti. Uporabnik bo izbral s seznama. Tudi če obstaja samo ena naprava, s katero bi se aplikacija lahko povezala, mora uporabnik zaradi varnostnih pomislekov še vedno iti skozi to pogovorno okno za izbiro.

Preostali del kode je nastavitev storitve in značilnosti. Upoštevajte, da smo vzpostavili rutino povratnega klica, podobno kot pri povratnem obvestilu vdelane programske opreme:

service = čakajo server.getPrimaryService (this.serviceUuid);

karakteristika = čakajo na storitev.getCharacteristic (this.txUuid); čakajo karakteristično.startNotifications (); karakteristika.addEventListener ("karakteristična vrednost spremenjena", ta.vrednost_posodobitev);

this.value_update bo zdaj poklican vsakič, ko bodo na voljo nove informacije o značilnosti tx.

Ena zadnjih stvari, ki jih naredi, je nastavitev časovnika za posodabljanje informacij vsakih 5 sekund.

value_update () je le dolga funkcija, ki čaka, da pridejo nove informacije JSON, in z njo posodobi uporabniški vmesnik.

ec.js, ph.js in orp.js vsebujejo številne majhne funkcije, ki pošiljajo ukaze za pridobivanje informacij in umerjanje naprav.

Če želite to poskusiti, ne pozabite, da mora biti za uporabo spletnega Bluetootha strežen prek protokola HTTPS. Ena od številnih možnosti lokalnega strežnika HTTPS je serve-https. Ko je naložena vdelana programska oprema, vse povezano in prikazana spletna stran, bi morali videti, da vse deluje.

8. korak: Del PWA

Nekaj korakov lahko spremenite spletno stran v pravo aplikacijo. Progresivne spletne aplikacije lahko naredijo veliko več, kot jih uporablja ta projekt.

• Namestitev spletne strani
• Ko je nameščen, je možen dostop brez povezave
• Začel in deloval kot običajna aplikacija z običajno ikono aplikacije

Za začetek bomo morali ustvariti kup datotek. Prva je datoteka manifest.json. Obstaja nekaj spletnih mest, ki bodo to storila namesto vas, saj je App Manifest Generator eno izmed njih.

Nekaj stvari, ki jih morate razumeti:

• Obseg uporabe je pomemben. To spletno stran sem dal na ufire.co/uFire-BLE/. To pomeni, da je obseg moje uporabe /uFire-BLE /.
• Začetni URL je prav tako pomemben. To je pot do vaše določene spletne strani z osnovno domeno, ki je že predvidena. Ker sem to dal na ufire.co/uFire-BLE/, je tudi začetni URL/uFire-BLE/.
• Način prikaza bo določil, kako izgleda aplikacija, samostojna pa bo videti kot običajna aplikacija brez gumbov ali vmesnika za Chrome.

Na koncu boste dobili datoteko json. Postaviti ga je treba na koren spletne strani, skupaj z index.html.

Naslednja stvar, ki jo potrebujete, je uslužbenec. Spet lahko naredijo veliko, vendar bo ta projekt uporabljal le predpomnjenje, da bo omogočil dostop do te aplikacije brez povezave. Izvedba storitvenih delavcev je večinoma zasnovana. Ta projekt je uporabil Googlov primer in spremenil seznam datotek, ki jih je treba predpomniti. Datotek zunaj svoje domene ne morete predpomniti.

Pojdite na FavIcon Generator in naredite nekaj ikon.

Zadnja stvar je, da v funkcijo Vue mount () dodate nekaj kode.

montirano: function () {if ('serviceWorker' v navigatorju) {navigator.serviceWorker.register ('service-worker.js'); }}

To bo delavca registriralo v brskalniku.

Lahko preverite, ali vse deluje, in če ne, morda ugotovite, zakaj bo z uporabo svetilnika analiziral spletno mesto in vam povedal vse mogoče stvari.

Če je vse delovalo, vas bo Chrome ob obisku spletne strani vprašal, ali ga želite namestiti s pojavno pasico. Če uporabljate Chrome za mobilne naprave, ga lahko vidite v akciji na naslovu ufire.co/uFire-BLE/. Če ste na namizju, lahko najdete element menija, da ga namestite.