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

2024 Forfatter: John Day | [email protected]. Sist endret: 2024-01-30 11:23

Av ufireFollow More av forfatteren:

Om: Legg til muligheten til å måle pH, ORP, EC eller saltholdighet til ditt Arduino- eller Raspberry Pi -prosjekt. Mer om ufire »

En enhet for å måle EC, pH, ORP og temperatur. Den kan brukes til å overvåke et basseng eller hydroponisk oppsett. Den vil kommunisere gjennom Bluetooth Low Energy og vise informasjonen på en webside ved hjelp av Web Bluetooth. Og for moro skyld vil vi gjøre dette til en Progressive Web App som du kan installere fra nettet.

Trinn 1: Hva er alle disse vilkårene?

EC/pH/ORP/temperatur er noen av de vanligste målingene av vannkvalitet. Elektrisk ledningsevne (EC) brukes i hydroponics for å måle næringsoppløsning, pH for hvor surt/basisk vannet er, og ORP brukes til å bestemme vannets evne til å desinfisere seg selv

• Bluetooth Low Energy er en trådløs protokoll for enkelt å sende og motta informasjon. Arduino -kortet som ble brukt i dette prosjektet er Nano 33 IoT og kommer med WiFi og BLE -grensesnitt.
• Web Bluetooth er et sett med API -er implementert i Googles Chrome -nettleser (og Opera) som lar en webside kommunisere direkte med en BLE -enhet.
• Progressive Web Apps er i utgangspunktet websider som fungerer som vanlige apper. Android og iPhone håndterer dem annerledes, og de er forskjellige på stasjonære datamaskiner, så du må lese litt for detaljer.

Trinn 2: Maskinvaren

Før vi kan montere maskinvaren, er det en ting å ta opp. UFire ISE -sensorene har samme I2C -adresse, og vi bruker to, så den ene må endres. For dette prosjektet skal vi velge et av ISE -kortene og bruke det til å måle ORP. Følg trinnene her, og endre adressen til 0x3e.

Nå som adressen er endret, er det enkelt å sette sammen maskinvaren. Alle sensorenhetene bruker Qwiic -tilkoblingssystemet, så bare koble alt sammen i en kjede. Du trenger en Qwiic til Male -ledning for å koble en av sensorene til Nano 33. Ledningene er konsistente og fargekodet. Koble svart til Nano's GND, rød til enten +3.3V eller +5V pin, blå til SDA -pinnen som er A4, og gul til SCL -pinnen på A5.

For dette prosjektet vil det forvente at temperaturinformasjonen kommer fra EC -sensoren, så sørg for å feste en temperatursensor til EC -kortet. Alle brettene har evnen til å måle temperaturen. Ikke glem å feste EC-, pH- og ORP -prober til passende sensorer. De festes enkelt med BNC -kontakter.

Hvis du har et kabinett, er det en god idé å sette alt dette inne, spesielt med tanke på at vann kommer til å være involvert.

Trinn 3: Programvaren

Programvaredelen av dette er delt inn i to hoveddeler: fastvaren på Nano 33 og nettsiden.

Den grunnleggende flyt er denne:

• Nettsiden kobles til Nano gjennom BLE
• Nettsiden sender tekstbaserte kommandoer for å be om informasjon eller iverksette handlinger
• Nano lytter etter disse kommandoene, utfører dem og returnerer informasjon
• Websiden mottar svarene og oppdaterer brukergrensesnittet tilsvarende

Dette oppsettet tillater websiden å utføre alle nødvendige funksjoner du kan forvente, for eksempel å ta en måling eller kalibrere sensorene.

Trinn 4: BLE -tjenester og -egenskaper

En av de første tingene å lære er det grunnleggende om hvordan BLE fungerer.

Det er mange analogier, så vi kan velge en bok. En tjeneste ville være en bok, og en egenskap ville være sidene. I denne "BLE-boken" har sidene noen få ikke-bokegenskaper, for eksempel å kunne endre hva siden sier og motta et varsel når det skjer.

En BLE -enhet kan lage så mange tjenester som den vil. Noen er forhåndsdefinerte og fungerer som en måte å standardisere vanlig brukt informasjon som Tx Power eller å miste en forbindelse, til mer spesifikke ting som insulin eller pulsoksimetri. Du kan også bare lage en og gjøre hva du vil med den. De er definert i programvare og er identifisert med en UUID. Du kan lage UUID -er her.

I fastvaren for denne enheten er det én tjeneste, definert som:

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

og to egenskaper:

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

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

Tx_Characteristic vil være der enhetene sender ut informasjonen, som EC -målinger, slik at nettsiden kan vises. Rx_Characteristic er der den vil motta kommandoer fra nettsiden som skal utføres.

Dette prosjektet bruker ArduinoBLE -biblioteket. Hvis du ser, vil du se at det er et par forskjellige var å erklære en egenskap. Dette prosjektet bruker BLEStringCharacteristic fordi vi skal håndtere String -typen, og det er bare enklere, men du kan også velge BLECharCharacteristic eller BLEByteCharacteristic blant en håndfull andre.

I tillegg er det noen egenskaper du kan gi karakteristikken. tx_Characteristic har BLENotify som et alternativ. Det betyr at nettsiden vår vil motta et varsel når verdien av den endres. rx_Characteristic har BLEWrite som gjør at nettsiden vår kan endre den. Det er andre.

Så er det litt kode-lim for å knytte alt dette sammen:

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

Det er mer eller mindre selvforklarende, men la oss berøre noen få punkter.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Er der du drar fordel av å bli varslet om verdien som endres. Linjen forteller klassen å utføre funksjonen rxCallback når verdien endres.

BLE.advertise ();

er det som starter det hele. En BLE -enhet vil med jevne mellomrom sende ut en liten pakke med informasjon som kunngjør at den er der ute og tilgjengelig for å koble til. Uten den vil den være usynlig.

Trinn 5: Tekstkommandoer

Som nevnt tidligere, vil denne enheten snakke med websiden gjennom enkle tekstkommandoer. Det hele er enkelt å implementere fordi det harde arbeidet allerede er gjort. UFire -sensorene kommer med et JSON- og MsgPack -basert bibliotek for sending og mottak av kommandoer. Du kan lese mer om EC- og ISE -kommandoene på deres dokumentasjonssider.

Dette prosjektet vil bruke JSON fordi det er litt lettere å jobbe med og lesbart, i motsetning til MsgPack -formatet som er binært.

Her er et eksempel på hvordan det hele henger sammen:

• Nettsiden ber enheten om en EC -måling ved å sende ec (eller mer spesifikt skrive ec til rx_Characteristic -egenskapen)
• Enheten mottar kommandoen og kjører den. Den sender deretter tilbake et JSON -formatert svar på {"ec": 1.24} ved å skrive til tx_Characteristic -egenskapen.
• Nettsiden mottar informasjonen og viser den

Trinn 6: Nettsiden

Nettsiden for dette prosjektet vil bruke Vue.js for front-end. Ingen backend er nødvendig. I tillegg, for å holde ting litt enklere, brukes det ikke noe byggesystem. Det er delt opp i de vanlige mappene, js for javascript, css for CSS, eiendeler for ikoner. HTML -delen av det er ikke noe spesielt. Den bruker bulma.io for styling og lager brukergrensesnittet. Du vil legge merke til mye i delen. Det legger til all css og ikoner, men legger også til en linje spesielt.

Det laster inn vår manifest.json -fil, som er det som får alle PWA -ting til å skje. Den erklærer noe informasjon som forteller telefonen vår at denne nettsiden kan gjøres om til en app.

Det er javascriptet der det meste av det interessante skjer. Det er delt inn i filer, app.js inneholder det grunnleggende for å få en Vue-webside til å gå sammen med alle de UI-relaterte variablene og noen få andre ting. ble.js har bluetooth -ting.

Trinn 7: Javascript og Web Bluetooth

For det første fungerer dette bare på Chrome og Opera. Jeg skulle ønske at andre nettlesere ville støtte dette, men det gjør de uansett grunn ikke. Ta en titt på app.js, så ser du de samme UUID -ene som vi brukte i fastvaren. En for uFire -tjenesten, og en hver for tx- og rx -egenskapene.

Hvis du ser på ble.js, ser du tilkoblings- () og frakobling () -funksjonene.

Connect () -funksjonen inneholder noen logikk for å holde brukergrensesnittet synkronisert, men det er for det meste å sette opp ting for å sende og motta informasjon om egenskapene.

Det er noen særegenheter når det gjelder nett Bluetooth. Tilkoblingen må startes av en slags fysisk brukerinteraksjon, for eksempel å trykke på en knapp. Du kan ikke programatisk koble til når nettsiden er lastet, for eksempel.

Koden for å starte en tilkobling ser slik ut:

this.device = venter på navigator.bluetooth.requestDevice ({

filtre: [{namePrefix: "uFire"}], optionalServices: [this.serviceUuid]});

Filtrene: og valgfri serviceseksjon er nødvendig for å unngå å se hver eneste BLE -enhet der ute. Du skulle tro at bare filterseksjonen ville være bra, men du trenger også den valgfrie Services -delen.

Koden ovenfor viser en tilkoblingsdialog. Det er en del av Chrome -grensesnittet og kan ikke endres. Brukeren vil velge fra listen. Selv om det bare er én enhet appen noen gang vil koble seg til, må brukeren fortsatt gå gjennom denne valgdialogen på grunn av sikkerhetshensyn.

Resten av koden er å konfigurere tjenesten og egenskapene. Vær oppmerksom på at vi har satt opp en tilbakeringingsrutine, som ligner på fastvarenes tilbakeringing av varsel:

service = venter på server.getPrimaryService (this.serviceUuid);

karakteristisk = avvente service.getCharacteristic (this.txUuid); avvente karakteristisk. startNotifications (); characterist.addEventListener ("charactervaluechanged", this.value_update);

this.value_update vil nå bli ringt opp hver gang det kommer ny informasjon om tx -karakteristikken.

En av de siste tingene den gjør er å sette en tidtaker for å oppdatere informasjonen hvert 5. sekund.

value_update () er bare en lang funksjon som venter på at ny JSON -informasjon skal komme inn og oppdaterer brukergrensesnittet med den.

ec.js, ph.js og orp.js inneholder mange små funksjoner som sender ut kommandoer for å hente informasjon og kalibrere enhetene.

For å prøve dette må du huske på at for å bruke Web Bluetooth, må det serveres via HTTPS. Et av mange alternativer for en lokal HTTPS-server er serve-https. Når fastvaren er lastet opp, alt som er tilkoblet og nettsiden som vises, bør du kunne se alt som fungerer.

Trinn 8: PWA -delen

Det er noen få trinn for å gjøre nettsiden til en faktisk app. Progressive Web Apps kan mye mer enn dette prosjektet bruker dem til.

• Installasjon av nettside
• Når den er installert, er frakoblet tilgang mulig
• Startet og kjørte som en vanlig app med et vanlig appikon

For å komme i gang må vi generere en haug med filer. Den første er en manifest.json -fil. Det er en håndfull nettsteder som vil gjøre dette for deg, App Manifest Generator, som en av dem.

Et par ting å forstå:

• Søknadsomfang er viktig. Jeg la denne nettsiden på ufire.co/uFire-BLE/. Det betyr at applikasjonsomfanget mitt er /uFire-BLE /.
• Start -URL er også viktig. Det er veien til din nettside med basedomenet som allerede er antatt. Så fordi jeg la dette på ufire.co/uFire-BLE/, er startadressen/uFire-BLE/too.
• Displaymodus vil avgjøre hvordan appen ser ut, frittstående vil få den til å se ut som en vanlig app uten Chrome -knapper eller grensesnitt.

Du vil ende opp med en json -fil. Den må plasseres ved roten til nettsiden, sammen med index.html.

Det neste du trenger er en servicearbeider. Igjen kan de gjøre mye, men dette prosjektet vil bare bruke hurtigbufringen for å la denne appen få tilgang offline. Servicearbeiderimplementeringen er for det meste kokeplate. Dette prosjektet brukte Google -eksemplet og endret listen over filer som skal bufres. Du kan ikke lagre filer utenfor domenet ditt.

Gå til FavIcon Generator og lag noen ikoner.

Det siste er å legge til litt kode i funksjonen Vue mounted ().

montert: function () {if ('serviceWorker' i navigator) {navigator.serviceWorker.register ('service-worker.js'); }}

Dette vil registrere arbeideren i nettleseren.

Du kan sjekke at alt fungerer, og hvis ikke, kanskje finne ut hvorfor ved å bruke Lighthouse, vil det analysere nettstedet og fortelle deg alle slags ting.

Hvis alt fungerte, når du går til nettsiden, spør Chrome om du vil installere det med et popup -banner. Du kan se den i bruk på ufire.co/uFire-BLE/ hvis du bruker Chrome på mobilen. Hvis du er på et skrivebord, kan du finne et menyelement for å installere det.