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

2024 Författare: John Day | [email protected]. Senast ändrad: 2024-01-30 12:44

Av ufireFollow Mer av författaren:

Om: Lägg till möjligheten att mäta pH, ORP, EC eller salthalt i ditt Arduino- eller Raspberry Pi -projekt. Mer om ufire »

En enhet för att mäta EC, pH, ORP och temperatur. Det kan användas för att övervaka en pool eller hydroponisk installation. Den kommer att kommunicera via Bluetooth Low Energy och visa informationen på en webbsida med webb Bluetooth. Och för skojs skull kommer vi att göra detta till en Progressiv webbapp som du kan installera från webben.

Steg 1: Vad är alla dessa villkor?

EC/pH/ORP/temperatur är några av de vanligaste mätningarna av vattenkvalitet. Elektrisk konduktivitet (EC) används i hydroponik för att mäta näringslösning, pH för hur surt/basiskt vattnet är, och ORP används för att bestämma vattnets förmåga att desinficera sig själv

• Bluetooth Low Energy är ett trådlöst protokoll för att enkelt skicka och ta emot information. Arduino -kortet som används i detta projekt är Nano 33 IoT och har WiFi och BLE -gränssnitt.
• Web Bluetooth är en uppsättning API: er implementerade i Googles Chrome -webbläsare (och Opera) som gör att en webbsida kan kommunicera direkt med en BLE -enhet.
• Progressiva webbappar är i grunden webbsidor som fungerar som vanliga appar. Android och iPhone hanterar dem annorlunda, och de är olika på stationära datorer, så du måste läsa lite för detaljer.

Steg 2: Hårdvaran

Innan vi kan montera hårdvaran är det en sak att ta itu med. UFire ISE -sensorenheterna har samma I2C -adress och vi använder två, så en måste ändras. För det här projektet kommer vi att välja en av ISE -korten och använda den för att mäta ORP. Följ stegen här, ändra adressen till 0x3e.

Nu när adressen ändras är det enkelt att sätta ihop hårdvaran. Alla sensorenheter använder Qwiic -anslutningssystemet så det är bara att koppla ihop allt i en kedja. Du behöver en Qwiic till Male -kabel för att ansluta en av sensorerna till Nano 33. Ledningarna är konsekventa och färgkodade. Anslut svart till Nanos GND, rött till antingen +3.3V eller +5V stift, blått till SDA -stiftet som är A4 och gult till SCL -stiftet på A5.

För detta projekt kommer det att förvänta sig att temperaturinformationen kommer från EC -sensorn, så var noga med att fästa en temperatursensor på EC -kortet. Alla brädor har dock möjlighet att mäta temperatur. Glöm inte att fästa EC-, pH- och ORP -sonderna till lämpliga sensorer. De fästs enkelt med BNC -kontakter.

Om du har ett hölje skulle det vara en bra idé att lägga allt detta inuti, särskilt med tanke på att vatten kommer att vara inblandat.

Steg 3: Programvaran

Programvarudelen av detta är uppdelad i två huvudavsnitt: firmware på Nano 33 och webbsidan.

Grundflödet är detta:

• Webbsidan ansluter till Nano via BLE
• Webbsidan skickar textbaserade kommandon för att be om information eller vidta åtgärder
• Nano lyssnar efter dessa kommandon, kör dem och returnerar information
• Webbsidan tar emot svaren och uppdaterar användargränssnittet i enlighet därmed

Denna inställning gör det möjligt för webbsidan att utföra alla nödvändiga funktioner som du kan förvänta dig, som att ta en mätning eller kalibrera sensorerna.

Steg 4: BLE -tjänster och egenskaper

En av de första sakerna att lära sig är grunderna i hur BLE fungerar.

Det finns många analogier, så låt oss välja en bok. En tjänst skulle vara en bok, och en egenskap skulle vara sidorna. I denna "BLE-bok" har sidorna några icke-bokegenskaper som att kunna ändra vad sidan säger och få ett meddelande när det händer.

En BLE -enhet kan göra så många tjänster som den vill. Vissa är fördefinierade och fungerar som ett sätt att standardisera vanligt förekommande information som Tx Power eller förlora en anslutning, till mer specifika saker som insulin eller pulsoximetri. Du kan också bara göra en och göra vad du vill med den. De definieras i programvara och identifieras med ett UUID. Du kan skapa UUID här.

I den fasta programvaran för den här enheten finns en tjänst, definierad som:

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

och två egenskaper:

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

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

Tx_Characteristic kommer att vara där enheterna skickar ut informationen, som EC -mätningar, för att webbsidan ska visas. Rx_Characteristic är där den kommer att ta emot kommandon från webbsidan för att köra.

Detta projekt använder ArduinoBLE -biblioteket. Om du tittar ser du att det finns ett par olika var att förklara en egenskap. Detta projekt använder BLEStringCharacteristic eftersom vi kommer att hantera strängtypen och det är bara lättare, men du kan också välja BLECharCharacteristic eller BLEByteCharacteristic bland en handfull andra.

Dessutom finns det några egenskaper du kan ge egenskapen. tx_Characteristic har BLENotify som ett alternativ. Det betyder att vår webbsida kommer att få ett meddelande när värdet på den ändras. rx_Characteristic har BLEWrite som gör att vår webbsida kan ändra den. Det finns andra.

Sedan finns det lite kodlim för att knyta ihop allt detta:

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 är mer eller mindre självförklarande, men låt oss beröra några punkter.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Är där du drar nytta av att bli meddelad om värdet som ändras. Raden berättar för klassen att köra funktionen rxCallback när värdet ändras.

BLE.advertise ();

är det som börjar det hela. En BLE -enhet kommer regelbundet att skicka ut ett litet paket med information som meddelar att den finns och finns att ansluta till. Utan det blir det osynligt.

Steg 5: Textkommandon

Som nämnts tidigare kommer den här enheten att prata med webbsidan genom enkla textkommandon. Det hela är enkelt att implementera eftersom det hårda arbetet redan har gjorts. UFire -sensorerna har ett JSON- och MsgPack -baserat bibliotek för att skicka och ta emot kommandon. Du kan läsa mer om kommandona EC och ISE på deras dokumentationssidor.

Detta projekt kommer att använda JSON eftersom det är lite lättare att arbeta med och läsbart, till skillnad från MsgPack -formatet som är binärt.

Här är ett exempel på hur allt hänger ihop:

• Webbsidan ber enheten om en EC -mätning genom att skicka ec (eller mer specifikt skriva ec till rx_Characteristic -egenskapen)
• Enheten tar emot kommandot och kör det. Den skickar sedan tillbaka ett JSON -formaterat svar på {"ec": 1.24} genom att skriva till tx_Characteristic -egenskapen.
• Webbsidan tar emot informationen och visar den

Steg 6: Webbsidan

Webbsidan för detta projekt använder Vue.js för front-end. Ingen backend behövs. För att hålla sakerna lite enklare används inget byggsystem. Det är uppdelat i vanliga mappar, js för javascript, css för CSS, tillgångar för ikoner. HTML -delen av det är inget speciellt. Den använder bulma.io för styling och skapar användargränssnittet. Du kommer att märka mycket i avsnittet. Det lägger till alla css och ikoner, men också att lägga till en rad i synnerhet.

Det laddar vår manifest.json -fil, vilket är det som får alla PWA -saker att hända. Det förklarar viss information som säger till vår telefon att denna webbsida kan förvandlas till en app.

I javascript händer det mesta av det intressanta. Det är uppdelat i filer, app.js innehåller grunderna för att få en Vue-webbsida att gå tillsammans med alla UI-relaterade variabler och några andra saker. ble.js har bluetooth -grejer.

Steg 7: Javascript och Web Bluetooth

Först fungerar det bara på Chrome och Opera. Jag önskar att andra webbläsare skulle stödja detta, men av någon anledning gör de det inte. Ta en titt på app.js så ser du samma UUID som vi använde i vår firmware. En för uFire -tjänsten och en vardera för tx- och rx -egenskaperna.

Om du nu tittar på ble.js ser du anslutningsfunktionerna () och frånkopplingen ().

Connect () -funktionen innehåller viss logik för att hålla gränssnittet synkroniserat, men det är mestadels att ställa in saker för att skicka och ta emot information om egenskaperna.

Det finns vissa särdrag när det gäller webb -Bluetooth. Anslutningen måste initieras av någon form av fysisk användarinteraktion, som att trycka på en knapp. Du kan inte programmatiskt ansluta när webbsidan laddas, till exempel.

Koden för att starta en anslutning ser ut så här:

this.device = invänta navigator.bluetooth.requestDevice ({

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

Filtret: och optionalServices -sektionen behövs för att undvika att se varenda BLE -enhet där ute. Du skulle tro att bara filterdelen skulle vara bra, men du behöver också den valfria Services -delen.

Koden ovan visar en anslutningsdialogruta. Det är en del av Chrome -gränssnittet och kan inte ändras. Användaren väljer från listan. Även om det bara finns en enhet som appen någonsin skulle ansluta till, måste användaren fortfarande gå igenom den här dialogrutan på grund av säkerhetsproblem.

Resten av koden är att konfigurera tjänsten och egenskaperna. Observera att vi har konfigurerat en återuppringningsrutin, som liknar fastvarans meddelandeåteruppringning:

service = invänta server.getPrimaryService (this.serviceUuid);

karakteristisk = vänta på service.getCharacteristic (this.txUuid); invänta character.startNotifications (); character.addEventListener ("charactervaluechanged", this.value_update);

this.value_update kommer nu att ringas upp varje gång det finns ny information om tx -karakteristiken.

En av de sista sakerna den gör är att ställa in en timer för att uppdatera informationen var 5: e sekund.

value_update () är bara en lång funktion som väntar på att ny JSON -information ska komma in och uppdaterar användargränssnittet med den.

ec.js, ph.js och orp.js innehåller många små funktioner som skickar ut kommandon för att hämta information och kalibrera enheterna.

För att prova detta måste du komma ihåg att för att kunna använda Web Bluetooth måste den serveras via HTTPS. Ett av många alternativ för en lokal HTTPS-server är serve-https. Med fast programvara uppladdad, allt anslutet och webbsidan som visas bör du kunna se allt fungera.

Steg 8: PWA -delen

Det finns några steg för att göra webbsidan till en verklig app. Progressiva webbappar kan göra mycket mer än detta projekt använder dem till.

• Installation av webbsida
• Efter installationen är offlineåtkomst möjlig
• Startade och körs som en vanlig app med en vanlig appikon

För att komma igång måste vi generera ett gäng filer. Den första är en manifest.json -fil. Det finns en handfull webbplatser som kommer att göra detta för dig, App Manifest Generator, som en av dem.

Ett par saker att förstå:

• Ansökningsomfång är viktigt. Jag lägger den här webbsidan på ufire.co/uFire-BLE/. Det betyder att min tillämpningsomfång är /uFire-BLE /.
• Startadressen är också viktig. Det är vägen till just din webbsida med basdomänen som redan antas. Så eftersom jag lade det här på ufire.co/uFire-BLE/ är startadressen/uFire-BLE/too.
• Display -läge avgör hur appen ser ut, fristående kommer att få den att se ut som en vanlig app utan några Chrome -knappar eller gränssnitt.

Du kommer att sluta med en json -fil. Den måste placeras vid roten av webbsidan, tillsammans med index.html.

Nästa sak du behöver är en servicearbetare. Återigen kan de göra mycket, men det här projektet kommer bara att använda cacheminnet för att låta den här appen nås offline. Servicearbetarimplementeringen är mestadels pannplatta. Detta projekt använde Google -exemplet och ändrade listan över filer som skulle cachelagras. Du kan inte cacha filer utanför din domän.

Gå till FavIcon Generator och gör några ikoner.

Det sista är att lägga till lite kod i funktionen Vue mounted ().

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

Detta kommer att registrera arbetaren i webbläsaren.

Du kan kontrollera att allt fungerar, och om inte, kanske ta reda på varför genom att använda Lighthouse, det kommer att analysera webbplatsen och berätta alla möjliga saker.

Om allt fungerade, när du går till webbsidan kommer Chrome att fråga om du vill installera det med en popup -banner. Du kan se den i aktion på ufire.co/uFire-BLE/ om du använder Chrome i mobilen. Om du är på ett skrivbord kan du hitta ett menyalternativ för att installera det.