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

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:58

Od ufire Nasledovať viac od autora:

O: Pridajte do svojho projektu Arduino alebo Raspberry Pi možnosť merať pH, ORP, EC alebo slanosť. Viac o programe ufire »

Zariadenie na meranie EC, pH, ORP a teploty. Môže byť použitý na monitorovanie bazénu alebo hydroponického nastavenia. Bude komunikovať prostredníctvom technológie Bluetooth Low Energy a zobrazovať informácie na webovej stránke pomocou technológie Web Bluetooth. A pre zábavu, zmeníme to na progresívnu webovú aplikáciu, ktorú si môžete nainštalovať z webu.

Krok 1: Aké sú všetky tieto podmienky?

EC/pH/ORP/teplota sú niektoré z najbežnejších meraní kvality vody. Elektrická vodivosť (EC) sa používa v hydropónii na meranie živného roztoku, pH na to, ako kyslá/zásaditá je voda, a ORP sa používa na stanovenie schopnosti vody sa sama dezinfikovať

• Bluetooth Low Energy je bezdrôtový protokol na jednoduché odosielanie a prijímanie informácií. Doska Arduino použitá v tomto projekte je Nano 33 IoT a je dodávaná s rozhraniami WiFi a BLE.
• Web Bluetooth je sada rozhraní API implementovaných v prehliadači Google Chrome (a Opera), ktoré umožňujú webovej stránke priamo komunikovať so zariadením BLE.
• Progresívne webové aplikácie sú v zásade webové stránky, ktoré fungujú ako bežné aplikácie. Android a iPhone s nimi zaobchádzajú odlišne a v počítačoch sa líšia, takže si budete musieť trocha prečítať špecifiká.

Krok 2: Hardvér

Pred zostavením hardvéru je potrebné vyriešiť jednu vec. Senzorové zariadenia uFire ISE majú rovnakú adresu I2C a používame dve, takže jedno bude potrebné zmeniť. Pre tento projekt vyberieme jednu z dosiek ISE a použijeme ju na meranie ORP. Podľa týchto krokov zmeňte adresu na 0x3e.

Teraz, keď je adresa zmenená, je zostavenie hardvéru jednoduché. Všetky senzorové zariadenia používajú systém Qwiic connect, takže stačí prepojiť všetko dohromady v reťazci. Na pripojenie jedného zo senzorov k Nano 33 budete potrebovať jeden vodič Qwiic - male. Vodiče sú konzistentné a farebne označené. Pripojte čierny k GND Nano, červený ku kolíku +3,3 V alebo +5 V, modrý ku kolíku SDA, ktorý je A4, a žltý k kolíku SCL na A5.

Pri tomto projekte bude očakávať, že informácie o teplote budú pochádzať zo senzora EC, takže na dosku EC pripevnite teplotný senzor. Všetky dosky však majú schopnosť merať teplotu. Nezabudnite pripojiť sondy EC, pH a ORP k príslušným senzorom. Ľahko sa pripevňujú pomocou konektorov BNC.

Ak máte kryt, vloženie tohto všetkého dovnútra by bolo dobré, najmä vzhľadom na to, že ide o vodu.

Krok 3: Softvér

Softvérová časť je rozdelená do dvoch hlavných sekcií: firmvér na Nano 33 a webová stránka.

Základný tok je tento:

• Webová stránka sa k Nano pripája prostredníctvom BLE
• Webová stránka odosiela textové príkazy na vyžiadanie informácií alebo vykonanie akcie
• Nano počúva tieto príkazy, vykonáva ich a vracia informácie
• Webová stránka dostáva odpovede a podľa toho aktualizuje používateľské rozhranie

Toto nastavenie umožňuje, aby webová stránka vykonávala všetky požadované funkcie, ktoré by ste očakávali, napríklad meranie alebo kalibráciu senzorov.

Krok 4: Služby a charakteristiky BLE

Jednou z prvých vecí, ktoré sa musíte naučiť, sú základy fungovania BLE.

Existuje veľa analógií, takže si vyberieme knihu. Služba by bola kniha a charakteristikou by boli stránky. V tejto „knihe BLE“majú stránky niekoľko neknižných vlastností, ako je možnosť zmeniť to, čo stránka hovorí, a dostať upozornenie, keď k tomu dôjde.

Zariadenie BLE môže poskytovať toľko služieb, koľko chce. Niektoré sú preddefinované a slúžia ako spôsob štandardizácie bežne používaných informácií, ako je Tx Power alebo strata spojenia, na konkrétnejšie veci, ako je inzulín alebo pulzná oxymetria. Môžete si tiež vytvoriť jeden a robiť si s ním, čo chcete. Sú definované v softvéri a sú označené identifikátorom UUID. Tu môžete vytvoriť UUID.

Vo firmvéri pre toto zariadenie existuje jedna služba definovaná ako:

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

a dve vlastnosti:

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

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

Tx_Characteristic bude miesto, kde zariadenia odosielajú informácie, ako napríklad merania ES, na zobrazenie webovej stránky. Rx_Characteristic je miesto, kde bude prijímať príkazy z webovej stránky na vykonanie.

Tento projekt používa knižnicu ArduinoBLE. Ak sa pozriete, uvidíte, že existuje niekoľko odlišných vlastností, ako deklarovať charakteristiku. Tento projekt používa BLEStringCharacteristic, pretože sa budeme zaoberať typom String a je to jednoduchšie, ale spomedzi niekoľkých ďalších si môžete vybrať aj BLECharCharacteristic alebo BLEByteCharacteristic.

Okrem toho existuje niekoľko vlastností, ktoré môžete charakterizovať. tx_Characteristic má ako možnosť BLENotify. To znamená, že naša webová stránka dostane upozornenie, keď sa zmení jej hodnota. rx_Characteristic má BLEWrite, ktorý našej webovej stránke umožní upraviť ho. Sú aj iní.

Potom je tu kúsok kódového lepidla, ktoré všetky tieto veci spojí:

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

Je to viac-menej samozrejmé, ale dotkneme sa niekoľkých bodov.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Je to miesto, kde využívate upozornenie na zmenu hodnoty. Riadok hovorí triede, aby pri zmene hodnoty vykonala funkciu rxCallback.

BLE.advertise ();

tým sa celá vec začína. Zariadenie BLE bude pravidelne odosielať malý paket informácií, ktorý oznámi, že je tam a je k dispozícii na pripojenie. Bez toho to bude neviditeľné.

Krok 5: Textové príkazy

Ako už bolo spomenuté, toto zariadenie bude hovoriť s webovou stránkou pomocou jednoduchých textových príkazov. Celá vec sa ľahko implementuje, pretože tvrdá práca už bola vykonaná. Senzory uFire sa dodávajú s knižnicou založenou na JSON a MsgPack na odosielanie a prijímanie príkazov. Viac o príkazoch EC a ISE si môžete prečítať na ich stránkach dokumentácie.

Tento projekt bude používať JSON, pretože je s ním o niečo jednoduchšie pracovať a je čitateľnejší, na rozdiel od binárneho formátu MsgPack.

Tu je príklad, ako to všetko súvisí:

• Webová stránka žiada zariadenie o meranie EC odoslaním ec (alebo konkrétnejšie napísaním ec do charakteristiky rx_Characteristic)
• Zariadenie dostane príkaz a vykoná ho. Potom odošle odpoveď vo formáte JSON {"ec": 1,24} zapísaním do charakteristiky tx_Characteristic.
• Webová stránka prijme informácie a zobrazí ich

Krok 6: Webová stránka

Webová stránka tohto projektu bude v klientskom rozhraní používať súbor Vue.js. Nie je potrebný žiadny backend. Aby to bolo ešte jednoduchšie, nepoužíva sa žiadny systém zostavovania. Je rozdelená do bežných priečinkov, js pre javascript, css pre CSS, prostriedky pre ikony. Jeho html časť nie je ničím výnimočným. Na úpravu štýlu používa bulma.io a vytvára užívateľské rozhranie. V sekcii si toho veľa všimnete. Je to pridanie všetkých CSS a ikon, ale tiež pridanie konkrétneho riadku.

Načítava sa náš súbor manifest.json, vďaka ktorému sa dejú všetky veci PWA. Deklaruje niektoré informácie, ktoré hovoria nášmu telefónu, že z tejto webovej stránky možno urobiť aplikáciu.

V javascripte sa deje väčšina zaujímavých vecí. Je rozdelený do súborov, app.js obsahuje základy pre spustenie webovej stránky Vue spolu so všetkými premennými súvisiacimi s používateľským rozhraním a niekoľkými ďalšími vecami. ble.js obsahuje veci bluetooth.

Krok 7: Javascript a webové Bluetooth

Po prvé, funguje to iba v prehliadačoch Chrome a Opera. Prial by som si, aby to podporovali ostatné prehliadače, ale z akéhokoľvek dôvodu nie. Pozrite sa na súbor app.js a uvidíte rovnaké UUID, aké sme použili v našom firmvéri. Jeden pre službu uFire a jeden pre charakteristiky tx a rx.

Keď sa teraz pozriete do súboru ble.js, uvidíte funkcie connect () a disconnect ().

Funkcia connect () obsahuje určitú logiku na synchronizáciu používateľského rozhrania, ale väčšinou nastavuje veci na odosielanie a prijímanie informácií o charakteristikách.

Pri práci s Web Bluetooth existuje niekoľko výstredností. Pripojenie musí byť iniciované nejakou fyzickou interakciou používateľa, napríklad klepnutím na tlačidlo. Nemôžete sa napríklad programovo pripojiť, keď je načítaná webová stránka.

Kód na spustenie pripojenia vyzerá takto:

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

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

Sekcia filtrov: a voliteľných služieb je potrebná, aby ste sa vyhli videniu každého jedného zariadenia BLE. Mysleli by ste si, že by bola v poriadku iba sekcia filtra, ale tiež potrebujete časť Voliteľné služby.

Vyššie uvedený kód zobrazí dialógové okno pripojenia. Je súčasťou rozhrania Chrome a nedá sa zmeniť. Užívateľ si vyberie zo zoznamu. Aj keď je iba jedno zariadenie, ku ktorému by sa aplikácia niekedy mohla pripojiť, používateľ si kvôli bezpečnostným problémom stále musí prejsť týmto výberovým dialógom.

Zvyšok kódu je nastavenie služby a charakteristík. Všimnite si toho, že sme nastavili rutinu spätného volania, podobnú ako pri spätnom volaní firmvéru:

služba = čakajte server.getPrimaryService (this.serviceUuid);

charakteristika = čakajte na service.getCharacteristic (this.txUuid); čakajte na charakteristiku.startNotifications (); charakteristika.addEventListener ("charakteristikahodnota zmenená", this.value_update);

this.value_update sa teraz bude volať vždy, keď budú k dispozícii nové informácie o charakteristike tx.

Jednou z posledných vecí, ktoré robí, je nastaviť časovač na aktualizáciu informácií každých 5 sekúnd.

value_update () je len dlhá funkcia, ktorá čaká na príchod nových informácií JSON a aktualizuje s nimi používateľské rozhranie.

ec.js, ph.js a orp.js obsahujú mnoho malých funkcií, ktoré odosielajú príkazy na získanie informácií a kalibráciu zariadení.

Aby ste to mohli vyskúšať, musíte mať na pamäti, že ak chcete používať Web Bluetooth, musí byť poskytovaný cez HTTPS. Jednou z mnohých možností pre miestny server HTTPS je serve-https. Keď je nahraný firmvér, všetko je pripojené a webová stránka sa zobrazuje, mali by ste vidieť, ako všetko funguje.

Krok 8: Časť PWA

Existuje niekoľko krokov, ako zmeniť webovú stránku na skutočnú aplikáciu. Progresívne webové aplikácie dokážu oveľa viac, než na čo ich tento projekt používa.

• Inštalácia webovej stránky
• Po inštalácii je možný offline prístup
• Spustil sa a beží ako normálna aplikácia s ikonou pravidelného vzhľadu

Na začiatok budeme musieť vygenerovať veľa súborov. Prvý je súbor manifest.json. Existuje niekoľko stránok, ktoré to urobia za vás, App Manifest Generator, ktorý je jedným z nich.

Pár vecí na pochopenie:

• Rozsah aplikácie je dôležitý. Túto webovú stránku som umiestnil na ufire.co/uFire-BLE/. To znamená, že môj rozsah aplikácie je /uFire-BLE /.
• Počiatočná adresa URL je tiež dôležitá. Je to cesta k vašej konkrétnej webovej stránke s už predpokladanou základnou doménou. Pretože to uvádzam na adrese ufire.co/uFire-BLE/, počiatočná adresa URL je/uFire-BLE/tiež.
• Režim zobrazenia určuje, ako aplikácia vyzerá, v samostatnom zobrazení sa bude zdať, že je to bežná aplikácia bez tlačidiel alebo rozhrania Chrome.

Skončíte so súborom json. Musí byť umiestnený v koreňovom adresári webovej stránky, spolu s index.html.

Ďalšia vec, ktorú budete potrebovať, je servisný pracovník. Opäť môžu urobiť veľa, ale tento projekt bude používať iba ukladanie do vyrovnávacej pamäte, aby bol k tejto aplikácii prístup offline. Implementácia servisného pracovníka je väčšinou štandardná. Tento projekt použil príklad Google a zmenil zoznam súborov, ktoré sa majú uložiť do pamäte cache. Súbory mimo svojej domény nemôžete ukladať do vyrovnávacej pamäte.

Prejdite na FavIcon Generator a vytvorte niekoľko ikon.

Posledná vec je pridať nejaký kód do funkcie Vue mount ().

pripojený: funkcia () {if ('serviceWorker' v navigátore) {navigator.serviceWorker.register ('service-worker.js'); }}

Pracovníka to zaregistruje v prehliadači.

Môžete skontrolovať, či všetko funguje, a ak nie, možno prídete na to, prečo pomocou Lighthouse analyzuje web a povie vám všetky druhy vecí.

Ak všetko fungovalo, pri prechode na webovú stránku sa prehliadač Chrome spýta, či ho chcete nainštalovať pomocou vyskakovacieho bannera. Ak ste v mobilnom Chrome, môžete to vidieť v prevádzke na ufire.co/uFire-BLE/. Ak ste na stolnom počítači, nájdete položku ponuky, ktorú chcete nainštalovať.