INHOUDSOPGAWE:
- Stap 1: Wat is al die bepalings?
- Stap 2: Die hardeware
- Stap 3: Die sagteware
- Stap 4: BLE -dienste en -kenmerke
- Stap 5: Teksopdragte
- Stap 6: Die webblad
- Stap 7: Javascript en Web Bluetooth
- Stap 8: Die PWA -deel
Video: Nano 33 IoT + EC/pH/ORP + WebAPK: 8 stappe
2024 Outeur: John Day | [email protected]. Laas verander: 2024-01-30 07:25
Volg meer deur die skrywer:
Oor: Voeg die vermoë om pH, ORP, EC of soutgehalte te meet by u Arduino- of Raspberry Pi -projek. Meer oor ufire »
'N Toestel om EC, pH, ORP en temperatuur te meet. Dit kan gebruik word om 'n swembad of hidroponiese opstelling te monitor. Dit kommunikeer deur middel van Bluetooth Low Energy en vertoon die inligting op 'n webblad met behulp van Web Bluetooth. En vir die plesier, verander ons dit in 'n Progressive Web App wat u vanaf die internet kan installeer.
Stap 1: Wat is al die bepalings?
EC/pH/ORP/temperatuur is 'n paar van die algemeenste metings van waterkwaliteit. Elektriese geleidingsvermoë (EC) word in hidroponika gebruik om voedingsoplossing, pH te meet vir hoe suur/basies die water is, en ORP word gebruik om die vermoë van water om self te ontsmet te bepaal
- Bluetooth Low Energy is 'n draadlose protokol om inligting maklik te stuur en te ontvang. Die Arduino -bord wat in hierdie projek gebruik word, is die Nano 33 IoT en het WiFi- en BLE -koppelvlakke.
- Web Bluetooth is 'n stel API's wat geïmplementeer is in Google se Chrome -blaaier (en Opera) waarmee 'n webblad direk met 'n BLE -toestel kan kommunikeer.
- Progressiewe webprogramme is basies webblaaie wat soos gewone programme optree. Android en iPhone's hanteer dit anders, en dit is anders op desktops, dus u moet 'n bietjie lees vir besonderhede.
Stap 2: Die hardeware
Voordat ons die hardeware kan monteer, is daar een ding om aan te spreek. Die uFire ISE -sensortoestelle het dieselfde I2C -adres en ons gebruik twee, so een moet verander word. Vir hierdie projek gaan ons een van die ISE -borde kies en dit gebruik om ORP te meet. Verander die adres na 0x3e volgens die stappe hier.
Noudat die adres verander is, is dit maklik om die hardeware saam te voeg. Al die sensortoestelle gebruik die Qwiic -verbindingstelsel, dus verbind alles in 'n ketting. U benodig een Qwiic tot Male -draad om een van die sensors aan die Nano 33 te koppel. Die drade is konsekwent en kleur gekodeer. Koppel swart aan die Nano se GND, rooi na die +3.3V of +5V pen, blou aan die SDA -pen wat A4 is, en geel na die SCL -pen op A5.
Vir hierdie projek verwag dit dat die temperatuurinligting van die EC -sensor afkomstig is, dus maak seker dat u 'n temperatuursensor aan die EC -bord heg. Al die borde het egter die vermoë om temperatuur te meet. Moenie vergeet om die EC-, pH- en ORP -sondes aan die toepaslike sensors te koppel nie. Hulle kan maklik met BNC -verbindings geheg word.
As u 'n omhulsel het, is dit 'n goeie idee om dit alles binne te sit, veral as water daarby betrokke is.
Stap 3: Die sagteware
Die sagtewaregedeelte hiervan is verdeel in twee hoofafdelings: die firmware op die Nano 33 en die webblad.
Die basiese vloei is soos volg:
- Die webblad skakel via die BLE na die Nano
- Die webblad stuur teksgebaseerde opdragte om inligting te vra of om aksies te neem
- Die Nano luister na die opdragte, voer dit uit en gee inligting terug
- Die webblad ontvang die antwoorde en werk die UI dienooreenkomstig op
Met hierdie opstelling kan die webwerf al die vereiste funksies uitvoer wat u sou verwag, soos om 'n meting te neem of die sensors te kalibreer.
Stap 4: BLE -dienste en -kenmerke
Een van die eerste dinge wat u moet leer, is die basiese beginsels van hoe BLE werk.
Daar is baie analogieë, dus laat ons 'n boek kies. 'N Diens sou 'n boek wees, en 'n kenmerk van die bladsye. In hierdie 'BLE-boek' het die bladsye 'n paar nie-boek-eienskappe, soos om te kan verander wat die bladsy sê en 'n kennisgewing te ontvang wanneer dit gebeur.
'N BLE -toestel kan soveel dienste lewer as wat dit wil. Sommige is vooraf gedefinieer en dien as 'n manier om algemeen gebruikte inligting soos Tx Power of 'n verbinding te standaardiseer, na meer spesifieke dinge soos insulien of polsoksimetrie. U kan ook net een maak en daarmee maak wat u wil. Hulle word gedefinieer in sagteware en word geïdentifiseer met 'n UUID. U kan UUID's hier maak.
In die firmware vir hierdie toestel is daar een diens, gedefinieer as:
BLEService uFire_Service ("4805d2d0-af9f-42c1-b950-eae78304c408");
en twee kenmerke:
BLEStringCharacteristic tx_Characteristic ("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);
BLEStringCharacteristic rx_Characteristic ("50fa7d80-440b-44d2-967b-ec7731ec736b", BLEWrite, 20);
Die tx_Characteristic is waar die toestelle die inligting stuur, soos EC -metings, sodat die webblad vertoon kan word. Die rx_Characteristic is waar dit opdragte van die webblad sal ontvang om uit te voer.
Hierdie projek gebruik die ArduinoBLE -biblioteek. As jy kyk, sal jy sien dat daar 'n paar verskillende was om 'n kenmerk te verklaar. Hierdie projek gebruik BLEStringCharacteristic omdat ons met die String -tipe te doen het, en dit is net makliker, maar u kan ook BLECharCharacteristic of BLEByteCharacteristic uit 'n handjievol ander kies.
Boonop is daar 'n paar eienskappe wat u die kenmerk kan gee. tx_Characteristic het BLENotify as 'n opsie. Dit beteken dat ons webblad 'n kennisgewing sal ontvang wanneer die waarde daarvan verander. rx_Characteristic het BLEWrite waarmee ons webblad dit kan verander. Daar is ander.
Dan is daar 'n bietjie kode-gom om al hierdie goed saam te bind:
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.advertensie ();
Dit is min of meer vanselfsprekend, maar kom ons raak 'n paar punte.
rx_Characteristic.setEventHandler (BLEWritten, rxCallback);
Dit is waar u voordeel trek uit die kennisgewing van die waarde wat verander word. Die reël vertel die klas om die funksie rxCallback uit te voer wanneer die waarde verander word.
BLE.advertensie ();
dit is wat die hele ding begin. 'N BLE -toestel stuur van tyd tot tyd 'n klein pakkie inligting met die aankondiging dat dit beskikbaar is en waarmee u kan skakel. Daarsonder sal dit onsigbaar wees.
Stap 5: Teksopdragte
Soos vroeër genoem, sal hierdie toestel met die webblad praat deur middel van eenvoudige teksopdragte. Die hele ding is maklik om te implementeer, want die harde werk is reeds gedoen. Die uFire -sensors het 'n JSON- en MsgPack -gebaseerde biblioteek om opdragte te stuur en te ontvang. U kan meer lees oor die EC- en ISE -opdragte op hul dokumentasiebladsye.
Hierdie projek sal JSON gebruik, want dit is 'n bietjie makliker om mee te werk en leesbaar, in teenstelling met die MsgPack -formaat wat binêre is.
Hier is 'n voorbeeld van hoe dit alles saamhang:
- Die webblad vra die toestel vir 'n EC -meting deur ec te stuur (of meer spesifiek om ec te skryf na die rx_Characteristic -eienskap)
- Die toestel ontvang die opdrag en voer dit uit. Dit stuur dan 'n JSON -geformatteerde antwoord van {"ec": 1.24} terug deur na die tx_Characteristic -eienskap te skryf.
- Die webblad ontvang die inligting en vertoon dit
Stap 6: Die webblad
Die webblad vir hierdie projek gebruik Vue.js vir die voorkant. Geen backend is nodig nie. Boonop word geen boustelsel gebruik om dinge 'n bietjie eenvoudiger te hou nie. Dit is verdeel in die gewone vouers, js vir javascript, css vir CSS, bates vir ikone. Die html -gedeelte daarvan is niks besonders nie. Dit gebruik bulma.io vir styl en skep die gebruikerskoppelvlak. U sal baie opmerk in die afdeling. Dit voeg al die css en ikone by, maar voeg ook veral een reël by.
Dit laai ons manif.json -lêer, wat al die PWA -dinge laat gebeur. Dit bevat 'n paar inligting wat ons telefoon vertel dat hierdie webwerf in 'n app verander kan word.
Die javascript is waar die meeste interessante dinge gebeur. Dit is in lêers opgedeel; app.js bevat die basiese beginsels om 'n Vue-webblad saam met al die UI-verwante veranderlikes en 'n paar ander dinge aan die gang te kry. ble.js het die bluetooth -goed.
Stap 7: Javascript en Web Bluetooth
Eerstens werk dit slegs op Chrome en Opera. Ek wens dat ander blaaiers dit ondersteun, maar om watter rede ook al, hulle doen dit nie. Kyk na app.js, en u sal dieselfde UUID's sien wat ons in ons firmware gebruik het. Een vir die uFire Service, en een elk vir die tx en rx eienskappe.
As u nou in ble.js kyk, sien u die verbindings () en ontkoppel () funksies.
Die connect () -funksie bevat 'n paar logika om die UI gesinchroniseer te hou, maar dit stel meestal dinge in om inligting oor die kenmerke te stuur en te ontvang.
Daar is 'n paar eienaardighede by die hantering van Web Bluetooth. Die verbinding moet begin word deur 'n soort fisiese gebruikersinteraksie, soos om op 'n knoppie te tik. U kan byvoorbeeld nie programmaties koppel wanneer die webblad gelaai is nie.
Die kode om 'n verbinding te begin lyk soos volg:
this.device = wag op navigator.bluetooth.requestDevice ({
filters: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});
Die afdeling filters: en opsionele dienste is nodig om te voorkom dat u elke BLE -toestel daar sien. U sou dink dat net die filterafdeling goed sou wees, maar u het ook die opsionele dienste -gedeelte nodig.
Bogenoemde kode sal 'n verbindingsdialoog vertoon. Dit is deel van die Chrome -koppelvlak en kan nie verander word nie. Die gebruiker sal uit die lys kies. Selfs as daar slegs een toestel is waarmee die app ooit sou kon skakel, moet die gebruiker steeds deur hierdie keusedialoog gaan, weens beveiligingsprobleme.
Die res van die kode is die opstel van die diens en eienskappe. Let daarop dat ons 'n terugbelroetine opgestel het, soortgelyk aan die terugbel van die firmware:
diens = wag op server.getPrimaryService (this.serviceUuid);
kenmerkend = wag op diens.getCharacteristic (this.txUuid); wag kenmerkend.startNotifikasies (); characterist.addEventListener ("karakteristieke waarde verander", hierdie.waarde_opdatering);
this.value_update sal nou gebel word elke keer as daar nuwe inligting oor die tx -kenmerk is.
Een van die laaste dinge wat dit doen, is om 'n timer in te stel om die inligting elke 5 sekondes by te werk.
value_update () is net 'n lang funksie wat wag totdat nuwe JSON -inligting inkom en die UI daarmee opdateer.
ec.js, ph.js en orp.js bevat baie klein funksies wat die opdragte stuur om inligting op te haal en die toestelle te kalibreer.
Om dit te probeer, moet u in gedagte hou dat dit via HTTPS bedien moet word om Web Bluetooth te gebruik. Een van die vele opsies vir 'n plaaslike HTTPS-bediener is serve-https. Met die oplaai van die firmware, alles wat verbind is en die webblad wat bedien word, moet u alles kan sien werk.
Stap 8: Die PWA -deel
Daar is 'n paar stappe om die webblad in 'n werklike app te omskep. Progressiewe webprogramme kan baie meer doen as wat hierdie projek dit gebruik.
- Webbladsy installasie
- Sodra dit geïnstalleer is, is vanlyn toegang moontlik
- Begin en werk as 'n normale app met 'n gewone app-ikoon
Om te begin, moet ons 'n klomp lêers genereer. Die eerste is 'n manifest.json -lêer. Daar is 'n handjievol webwerwe wat dit vir u sal doen, App Manifest Generator, een daarvan.
'N Paar dinge om te verstaan:
- Toepassingsomvang is belangrik. Ek plaas hierdie webblad op ufire.co/uFire-BLE/. Dit beteken dat my toepassingsomvang /uFire-BLE /.
- Begin -URL is ook belangrik. Dit is die pad na u spesifieke webwerf met die basisdomein wat reeds aanvaar word. Omdat ek dit by ufire.co/uFire-BLE/ geplaas het, is die begin-URL/uFire-BLE/ook.
- Die vertoningsmodus bepaal hoe die app lyk, en dit lyk asof dit 'n gewone app is sonder 'n Chrome -knoppie of koppelvlak.
U kry 'n json -lêer. Dit moet aan die wortel van die webblad geplaas word, tesame met index.html.
Die volgende ding wat u nodig het, is 'n dienswerker. Weereens kan hulle baie doen, maar hierdie projek gebruik slegs die caching om vanlyn toegang tot hierdie app te kry. Die implementering van die dienswerker is meestal ketelplaat. Hierdie projek het die voorbeeld van Google gebruik en die lys lêers wat in die kas gestoor moet word, verander. U kan nie lêers buite u domein kas nie.
Gaan na FavIcon Generator en maak 'n paar ikone.
Die laaste ding is om kode by te voeg in die Vue -gemonteerde () -funksie.
gemonteer: function () {if ('serviceWorker' in navigator) {navigator.serviceWorker.register ('service-worker.js'); }}
Dit sal die werker by die blaaier registreer.
U kan seker maak dat alles werk, en indien nie, kan u miskien uitvind hoekom dit die webwerf ontleed en u allerhande dinge vertel deur Lighthouse te gebruik.
As alles werk, as u na die webblad gaan, sal Chrome vra of u dit met 'n opspringbanner wil installeer. U kan dit in aksie sien op ufire.co/uFire-BLE/ as u Chrome op mobiele toestelle gebruik. As u op 'n tafelblad is, kan u 'n spyskaartitem vind om dit te installeer.