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

2024 Forfatter: John Day | [email protected]. Sidst ændret: 2024-01-30 08:27

Af ufireFollow More af forfatteren:

Om: Tilføj evnen til at måle pH, ORP, EC eller saltindhold til dit Arduino- eller Raspberry Pi -projekt. Mere om ufire »

En enhed til måling af EC, pH, ORP og temperatur. Det kan bruges til at overvåge en pool eller hydroponisk opsætning. Det vil kommunikere via Bluetooth Low Energy og vise oplysningerne på en webside ved hjælp af Web Bluetooth. Og for sjov vil vi gøre dette til en Progressive Web App, som du kan installere fra internettet.

Trin 1: Hvad er alle disse vilkår?

EC/pH/ORP/temperatur er nogle af de mest almindelige vandkvalitetsmålinger. Elektrisk ledningsevne (EC) bruges i hydroponik til at måle næringsopløsning, pH for hvor surt/basisk vandet er, og ORP bruges til at bestemme vandets evne til at desinficere sig selv

• Bluetooth Low Energy er en trådløs protokol til nemt at sende og modtage information. Arduino -kortet, der bruges i dette projekt, er Nano 33 IoT og leveres med WiFi og BLE -grænseflader.
• Web Bluetooth er et sæt API'er implementeret i Googles Chrome -browser (og Opera), der tillader en webside at kommunikere direkte med en BLE -enhed.
• Progressive webapps er dybest set websider, der fungerer som almindelige apps. Android og iPhone håndterer dem forskelligt, og de er forskellige på desktops, så du bliver nødt til at læse lidt for detaljer.

Trin 2: Hardware

Inden vi kan samle hardware, er der én ting at tage fat på. UFire ISE -sensorenhederne har den samme I2C -adresse, og vi bruger to, så den ene skal ændres. Til dette projekt skal vi vælge et af ISE -kortene og bruge det til at måle ORP. Følg trinene her, og skift adressen til 0x3e.

Nu hvor adressen er ændret, er det let at sammensætte hardwaren. Alle sensorenheder bruger Qwiic connect -systemet, så det er bare at forbinde alt sammen i en kæde. Du skal bruge en Qwiic til Male -ledning for at forbinde en af sensorerne til Nano 33. Ledningerne er konsekvente og farvekodede. Tilslut sort til Nano's GND, rød til enten +3.3V eller +5V pin, blå til SDA pin, som er A4, og gul til SCL pin på A5.

For dette projekt vil det forvente, at temperaturoplysningerne kommer fra EC -sensoren, så sørg for at vedhæfte en temperatursensor til EC -kortet. Alle brædderne har dog evnen til at måle temperaturen. Glem ikke at fastgøre EC-, pH- og ORP -proberne til de relevante sensorer. De kan let fastgøres med BNC -stik.

Hvis du har et kabinet, ville det være en god idé at lægge alt dette inde, især i betragtning af at vand vil være involveret.

Trin 3: Softwaren

Softwaredelen af dette er opdelt i to hovedafsnit: firmwaren på Nano 33 og websiden.

Grundforløbet er dette:

• Websiden opretter forbindelse til Nano via BLE
• Websiden sender tekstbaserede kommandoer for at bede om oplysninger eller foretage handlinger
• Nano lytter efter disse kommandoer, udfører dem og returnerer oplysninger
• Websiden modtager svarene og opdaterer brugergrænsefladen i overensstemmelse hermed

Denne opsætning gør det muligt for websiden at udføre alle de nødvendige funktioner, du ville forvente, som f.eks. At foretage en måling eller kalibrere sensorerne.

Trin 4: BLE Services og egenskaber

En af de første ting at lære er det grundlæggende i, hvordan BLE fungerer.

Der er mange analogier, så lad os vælge en bog. En tjeneste ville være en bog, og en karakteristik ville være siderne. I denne "BLE-bog" har siderne nogle få ikke-bog-egenskaber som at kunne ændre, hvad siden siger og modtage en meddelelse, når det sker.

En BLE -enhed kan lave så mange tjenester, den vil. Nogle er foruddefinerede og fungerer som en måde at standardisere almindeligt anvendte oplysninger som Tx Power eller mister en forbindelse, til mere specifikke ting som insulin eller pulsoximetri. Du kan også bare lave en og gøre hvad du vil med den. De er defineret i software og er identificeret med et UUID. Du kan lave UUID'er her.

I firmwaren til denne enhed er der en tjeneste, defineret som:

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

og to egenskaber:

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, hvor enhederne sender informationen ud, f.eks. EC -målinger, for at websiden kan vises. Rx_Characteristic er, hvor den vil modtage kommandoer fra websiden, der skal udføres.

Dette projekt bruger ArduinoBLE -biblioteket. Hvis du ser, vil du se, at der er et par forskellige var at erklære en egenskab. Dette projekt bruger BLEStringCharacteristic, fordi vi vil beskæftige os med String -typen, og det er bare lettere, men du kan også vælge BLECharCharacteristic eller BLEByteCharacteristic blandt en håndfuld andre.

Derudover er der nogle egenskaber, du kan give karakteristikken. tx_Characteristic har BLENotify som en mulighed. Det betyder, at vores webside vil modtage en meddelelse, når værdien af den ændres. rx_Characteristic har BLEWrite, som gør det muligt for vores webside at ændre den. Der er andre.

Så er der en smule kode-lim til at binde alle disse ting 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 mere eller mindre selvforklarende, men lad os berøre et par punkter.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Er det, hvor du drager fordel af at blive underrettet om værdien, der ændres. Linjen fortæller klassen at udføre funktionen rxCallback, når værdien ændres.

BLE.advertise ();

er det, der starter det hele. En BLE -enhed sender med jævne mellemrum en lille pakke information, der meddeler, at den er derude og tilgængelig at oprette forbindelse til. Uden det vil det være usynligt.

Trin 5: Tekstkommandoer

Som nævnt tidligere taler denne enhed til websiden gennem enkle tekstkommandoer. Det hele er let at implementere, fordi det hårde arbejde allerede er blevet udført. UFire -sensorerne leveres med et JSON- og MsgPack -baseret bibliotek til afsendelse og modtagelse af kommandoer. Du kan læse mere om EC- og ISE -kommandoerne på deres dokumentationssider.

Dette projekt vil bruge JSON, fordi det er lidt lettere at arbejde med og læsbart, i modsætning til MsgPack -formatet, der er binært.

Her er et eksempel på, hvordan det hele hænger sammen:

• Websiden beder enheden om en EC -måling ved at sende ec (eller mere specifikt skrive ec til rx_Characteristic -karakteristikken)
• Enheden modtager kommandoen og udfører den. Det sender derefter et JSON -formateret svar på {"ec": 1.24} tilbage ved at skrive til tx_Characteristic -karakteristikken.
• Websiden modtager oplysningerne og viser dem

Trin 6: Websiden

Websiden til dette projekt bruger Vue.js til front-end. Ingen backend er nødvendig. For at holde tingene lidt enklere bruges der ikke noget byggesystem. Det er delt op i de sædvanlige mapper, js til javascript, css til CSS, aktiver til ikoner. HTML -delen af det er ikke noget særligt. Det bruger bulma.io til styling og skaber brugergrænsefladen. Du vil bemærke meget i afsnittet. Det tilføjer alle css og ikoner, men tilføjer også især en linje.

Det indlæser vores manifest.json -fil, hvilket er det, der får alle PWA -ting til at ske. Det erklærer nogle oplysninger, der fortæller vores telefon, at denne webside kan omdannes til en app.

Javascript er det sted, hvor de fleste interessante ting sker. Det er opdelt i filer, app.js indeholder det grundlæggende for at få en Vue-webside til at køre sammen med alle de UI-relaterede variabler og et par andre ting. ble.js har bluetooth -tingene.

Trin 7: Javascript og Web Bluetooth

For det første fungerer dette kun på Chrome og Opera. Jeg ville ønske, at andre browsere understøtter dette, men det gør de af en eller anden grund ikke. Kig på app.js, og du vil se de samme UUID'er, som vi brugte i vores firmware. En til uFire -tjenesten og en hver til tx- og rx -egenskaberne.

Hvis du nu kigger i ble.js, ser du funktionerne tilslut () og afbrydelse ().

Connect () -funktionen indeholder en vis logik for at holde brugergrænsefladen synkroniseret, men det er for det meste at sætte tingene op til at sende og modtage oplysninger om egenskaberne.

Der er nogle særegenheder, når man beskæftiger sig med Web Bluetooth. Forbindelsen skal initieres ved en form for fysisk brugerinteraktion, som f.eks. Ved at trykke på en knap. Du kan f.eks. Ikke oprette programatisk forbindelse, når websiden er indlæst.

Koden til at starte en forbindelse ser sådan ud:

this.device = afventer navigator.bluetooth.requestDevice ({

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

Filtrene: og valgfri servicesektion er nødvendig for at undgå at se hver eneste BLE -enhed derude. Du ville tro, at bare filterafsnittet ville være fint, men du har også brug for den valgfri Service -del.

Ovenstående kode viser en forbindelsesdialog. Det er en del af Chrome -grænsefladen og kan ikke ændres. Brugeren vælger fra listen. Selvom der kun er en enhed, appen nogensinde ville oprette forbindelse til, skal brugeren stadig gå igennem denne valgdialog på grund af sikkerhedsmæssige bekymringer.

Resten af koden konfigurerer tjenesten og egenskaberne. Bemærk, at vi har oprettet en tilbagekaldsrutine, der ligner firmwarens meddelelse om tilbagekald:

service = afvente server.getPrimaryService (this.serviceUuid);

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

this.value_update vil nu blive kaldt hver gang der er ny information om tx -karakteristikken.

En af de sidste ting, den gør, er at indstille en timer til at opdatere oplysningerne hvert 5. sekund.

value_update () er bare en lang funktion, der venter på, at nye JSON -oplysninger kommer ind og opdaterer brugergrænsefladen med den.

ec.js, ph.js og orp.js indeholder mange små funktioner, der sender kommandoer ud for at hente oplysninger og kalibrere enhederne.

For at prøve dette skal du huske på, at for at bruge Web Bluetooth skal det serveres via HTTPS. En af mange muligheder for en lokal HTTPS-server er serve-https. Med firmwaren uploadet, alt tilsluttet og websiden bliver vist, skal du kunne se alt fungere.

Trin 8: PWA -delen

Der er et par trin for at gøre websiden til en egentlig app. Progressive Web Apps kan meget mere, end dette projekt bruger dem til.

• Installation af webside
• Når den er installeret, er offline adgang mulig
• Startede og kører som en normal app med et almindeligt appikon

For at komme i gang skal vi generere en masse filer. Den første er en manifest.json -fil. Der er en håndfuld websteder, der vil gøre dette for dig, App Manifest Generator, som en af dem.

Et par ting at forstå:

• Ansøgningsomfang er vigtigt. Jeg lagde denne webside på ufire.co/uFire-BLE/. Det betyder, at mit applikationsomfang er /uFire-BLE /.
• Start -URL er også vigtig. Det er stien til din særlige webside med basisdomænet allerede antaget. Så fordi jeg lagde dette på ufire.co/uFire-BLE/, er startadressen/uFire-BLE/too.
• Displaytilstand afgør, hvordan appen ser ud, Standalone vil få den til at se ud til at være en almindelig app uden nogen Chrome -knapper eller grænseflade.

Du ender med en json -fil. Det skal placeres ved roden af websiden, sammen med index.html.

Det næste du skal bruge er en servicearbejder. Igen kan de gøre meget, men dette projekt vil kun bruge cachen til at lade denne app få adgang offline. Servicemedarbejderimplementeringen er for det meste kedelplade. Dette projekt brugte Google -eksemplet og ændrede listen over filer, der skulle cachelagres. Du kan ikke cache filer uden for dit domæne.

Gå over til FavIcon Generator og lav nogle ikoner.

Den sidste ting er at tilføje kode i funktionen Vue mounted ().

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

Dette registrerer medarbejderen i browseren.

Du kan kontrollere, at alt fungerer, og hvis ikke, måske finde ud af hvorfor ved hjælp af Lighthouse, det vil analysere stedet og fortælle dig alle mulige ting.

Hvis alt fungerede, vil Chrome spørge, om du vil installere det med et popup -banner, når du går til websiden. Du kan se det i aktion på ufire.co/uFire-BLE/, hvis du er på mobil Chrome. Hvis du er på et skrivebord, kan du finde et menupunkt for at installere det.