Nano 33 IoT + EC/pH/ORP + WebAPK: 8 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:21

Autor: ufire Sledovat více od autora:

O aplikaci: Přidejte do svého projektu Arduino nebo Raspberry Pi možnost měřit pH, ORP, EC nebo salinitu. Více o ufire »

Zařízení pro měření EC, pH, ORP a teploty. Může být použit k monitorování bazénu nebo hydroponického nastavení. Bude komunikovat přes Bluetooth Low Energy a zobrazí informace na webové stránce pomocí Web Bluetooth. A pro zábavu to proměníme v progresivní webovou aplikaci, kterou si můžete nainstalovat z webu.

Krok 1: Jaké jsou všechny tyto podmínky?

EC/pH/ORP/teplota jsou jedny z nejběžnějších měření kvality vody. Elektrická vodivost (EC) se používá v hydroponii k měření živného roztoku, pH pro to, jak je voda kyselá/zásaditá, a ORP se používá k určení schopnosti vody se sama dezinfikovat

• Bluetooth Low Energy je bezdrátový protokol pro snadné odesílání a přijímání informací. Deska Arduino použitá v tomto projektu je Nano 33 IoT a je dodávána s rozhraními WiFi a BLE.
• Web Bluetooth je sada rozhraní API implementovaných v prohlížeči Google Chrome (a Opera), které umožňují webové stránce přímo komunikovat se zařízením BLE.
• Progresivní webové aplikace jsou v podstatě webové stránky, které fungují jako běžné aplikace. Zařízení Android a iPhone s nimi zacházejí odlišně a na počítačích se liší, takže si budete muset přečíst konkrétní informace.

Krok 2: Hardware

Než budeme moci sestavit hardware, je třeba vyřešit jednu věc. Senzorová zařízení uFire ISE mají stejnou I2C adresu a my používáme dvě, takže jedno bude nutné změnit. Pro tento projekt vybereme jednu z desek ISE a použijeme ji k měření ORP. Podle zde uvedených kroků změňte adresu na 0x3e.

Nyní, když je adresa změněna, je sestavení hardwaru snadné. Všechna senzorová zařízení používají systém Qwiic connect, takže vše spojte dohromady v řetězci. K připojení jednoho ze senzorů k Nano 33 budete potřebovat jeden vodič Qwiic - Male. Vodiče jsou konzistentní a barevně odlišeny. Připojte černý k GND Nano, červený ke kolíku +3,3 V nebo +5 V, modrý ke kolíku SDA, který je A4, a žlutý ke kolíku SCL na A5.

U tohoto projektu bude očekávat, že informace o teplotě bude pocházet ze senzoru EC, takže na desku EC nezapomeňte připojit teplotní senzor. Všechny desky však mají schopnost měřit teplotu. Nezapomeňte připojit sondy EC, pH a ORP k příslušným senzorům. Snadno se připevňují pomocí konektorů BNC.

Pokud máte uzavřený prostor, bylo by dobré dát to všechno dovnitř, zvláště když vezmete v úvahu, že jde o vodu.

Krok 3: Software

Softwarová část je rozdělena do dvou hlavních částí: firmware na Nano 33 a webová stránka.

Základní tok je tento:

• Webová stránka se připojuje k Nano prostřednictvím BLE
• Webová stránka odesílá textové příkazy k vyžádání informací nebo provedení akcí
• Nano naslouchá těmto příkazům, provádí je a vrací informace
• Webová stránka přijímá odpovědi a podle toho aktualizuje uživatelské rozhraní

Toto nastavení umožňuje webové stránce provádět všechny požadované funkce, které byste očekávali, například provést měření nebo kalibrovat senzory.

Krok 4: Služby a charakteristiky BLE

Jednou z prvních věcí, které se musíte naučit, jsou základy fungování BLE.

Existuje mnoho analogií, takže si vyberme knihu. Služba by byla kniha a charakteristikou by byly stránky. V této „knize BLE“mají stránky několik neknižních vlastností, jako je možnost změnit to, co stránka říká, a obdržet oznámení, když k tomu dojde.

Zařízení BLE může poskytovat tolik služeb, kolik chce. Některé jsou předdefinované a slouží jako způsob standardizace běžně používaných informací, jako je Tx Power nebo ztráta spojení, na konkrétnější věci, jako je inzulín nebo pulzní oxymetrie. Můžete si také jeden vyrobit a dělat si s ním, co chcete. Jsou definovány v softwaru a jsou identifikovány pomocí UUID. Zde můžete vytvořit UUID.

Ve firmwaru pro toto zařízení existuje jedna služba, definovaná jako:

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

a dvě vlastnosti:

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

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

Tx_Characteristic bude místo, kde zařízení odešle informace, jako jsou měření EC, pro zobrazení webové stránky. Rx_Characteristic je místo, kde bude přijímat příkazy z webové stránky ke spuštění.

Tento projekt používá knihovnu ArduinoBLE. Když se podíváte, uvidíte, že existuje několik jiných věcí, než deklarovat charakteristiku. Tento projekt používá BLEStringCharacteristic, protože se budeme zabývat typem String a je to jednodušší, ale můžete si také vybrat BLECharCharacteristic nebo BLEByteCharacteristic z několika dalších.

Kromě toho existuje několik vlastností, které můžete charakteristice dát. tx_Characteristic má jako možnost BLENotify. To znamená, že naše webová stránka obdrží oznámení, když se změní její hodnota. rx_Characteristic má BLEWrite, který umožní naší webové stránce jej upravit. Existují další.

Pak je tu trochu kódového lepidla, které spojí všechny tyto věci dohromady:

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 víceméně samozřejmé, ale dotkněme se několika bodů.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Je místo, kde využíváte upozornění na změnu hodnoty. Řádek říká třídě, aby při změně hodnoty provedla funkci rxCallback.

BLE.advertise ();

tím celá věc začíná. Zařízení BLE bude pravidelně odesílat malý balíček informací, který oznámí, že je venku a je k němu připojení. Bez toho to bude neviditelné.

Krok 5: Textové příkazy

Jak již bylo zmíněno dříve, toto zařízení bude mluvit s webovou stránkou pomocí jednoduchých textových příkazů. Celá věc se snadno implementuje, protože tvrdá práce již byla odvedena. Senzory uFire jsou dodávány s knihovnou založenou na JSON a MsgPack pro odesílání a přijímání příkazů. Více o příkazech EC a ISE si můžete přečíst na jejich stránkách dokumentace.

Na rozdíl od formátu MsgPack, který je binární, bude tento projekt používat JSON, protože je s ním o něco jednodušší pracovat a je čitelnější.

Zde je příklad toho, jak to všechno souvisí:

• Webová stránka žádá zařízení o měření EC odesláním ec (nebo konkrétněji zápisem ec do charakteristiky rx_Characteristic)
• Zařízení přijme příkaz a provede jej. Poté odešle zpět odpověď ve formátu JSON {"ec": 1,24} zápisem do charakteristiky tx_Characteristic.
• Webová stránka informace obdrží a zobrazí je

Krok 6: Webová stránka

Webová stránka tohoto projektu bude pro front-end používat Vue.js. Není potřeba žádný backend. Aby to bylo ještě jednodušší, nepoužívá se žádný systém sestavení. Je rozdělen do obvyklých složek, js pro javascript, css pro CSS, prostředky pro ikony. Jeho html část není nic zvláštního. Pro styling používá bulma.io a vytváří uživatelské rozhraní. V sekci si toho hodně všimnete. Je to přidání všech CSS a ikon, ale také přidání zejména jednoho řádku.

Tím se načítá náš soubor manifest.json, díky čemuž se dějí všechny věci PWA. Deklaruje některé informace, které našemu telefonu říkají, že z této webové stránky lze udělat aplikaci.

V javascriptu se odehrává většina zajímavých věcí. Je rozdělena do souborů, app.js obsahuje základy pro spuštění webové stránky Vue spolu se všemi proměnnými souvisejícími s uživatelským rozhraním a několika dalšími věcmi. ble.js má bluetooth věci.

Krok 7: Javascript a webové Bluetooth

Za prvé, toto funguje pouze v prohlížečích Chrome a Opera. Přál bych si, aby to ostatní prohlížeče podporovaly, ale z jakéhokoli důvodu ne. Podívejte se na app.js a uvidíte stejná UUID, která jsme použili v našem firmwaru. Jeden pro službu uFire a jeden pro charakteristiky tx a rx.

Když se podíváte do ble.js, uvidíte funkce connect () a disconnect ().

Funkce connect () obsahuje určitou logiku pro synchronizaci uživatelského rozhraní, ale většinou nastavuje věci pro odesílání a přijímání informací o charakteristikách.

Při práci s Web Bluetooth existuje několik výstředností. Připojení musí být zahájeno nějakou fyzickou interakcí uživatele, například klepnutím na tlačítko. Nemůžete se například programově připojit, když je webová stránka načtena.

Kód pro zahájení připojení vypadá takto:

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

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

Sekce filtry: a optionalServices je nutná k tomu, aby nebylo vidět každé jedno zařízení BLE. Mysleli byste si, že jen část filtru by byla v pořádku, ale potřebujete také část optionalServices.

Výše uvedený kód zobrazí dialogové okno připojení. Je součástí rozhraní Chrome a nelze jej změnit. Uživatel si vybere ze seznamu. I když existuje pouze jedno zařízení, ke kterému by se aplikace někdy mohla připojit, uživatel z bezpečnostních důvodů stále musí projít tímto dialogem výběru.

Zbytek kódu je nastavení služby a vlastností. Vezměte na vědomí, že jsme nastavili rutinu zpětného volání, podobnou zpětnému volání firmwaru s oznámením:

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

charakteristika = čekejte na service.getCharacteristic (this.txUuid); čekejte charakteristické.startNotifications (); charakteristika.addEventListener ("charakteristika vyhodnocena", this.value_update);

this.value_update bude nyní voláno pokaždé, když budou k dispozici nové informace o charakteristice tx.

Jednou z posledních věcí, které dělá, je nastavit časovač pro aktualizaci informací každých 5 sekund.

value_update () je jen dlouhá funkce, která čeká na nové informace JSON a aktualizuje s nimi uživatelské rozhraní.

ec.js, ph.js a orp.js obsahují mnoho malých funkcí, které odesílají příkazy k načítání informací a kalibraci zařízení.

Chcete -li to vyzkoušet, musíte mít na paměti, že k používání Web Bluetooth musí být poskytován přes HTTPS. Jednou z mnoha možností pro místní server HTTPS je serve-https. S nahraným firmwarem, vším připojeným a obsluhovanou webovou stránkou byste měli vidět, jak vše funguje.

Krok 8: Část PWA

Existuje několik kroků, jak z webové stránky udělat skutečnou aplikaci. Progresivní webové aplikace dokážou mnohem více, než pro co je tento projekt používá.

• Instalace webové stránky
• Po instalaci je možný offline přístup
• Spouští se a běží jako normální aplikace s ikonou pravidelně vypadající aplikace

Abychom mohli začít, budeme muset vygenerovat spoustu souborů. První je soubor manifest.json. Existuje několik stránek, které to udělají za vás, generátor manifestů aplikací, který je jedním z nich.

Několik věcí k pochopení:

• Rozsah aplikace je důležitý. Tuto webovou stránku jsem umístil na ufire.co/uFire-BLE/. To znamená, že rozsah mé aplikace je /uFire-BLE /.
• Počáteční adresa URL je také důležitá. Je to cesta k vaší konkrétní webové stránce s již předpokládanou základní doménou. Protože jsem to dal na ufire.co/uFire-BLE/, počáteční URL je/uFire-BLE/taky.
• Režim zobrazení určuje, jak aplikace vypadá, v Standalone bude vypadat jako běžná aplikace bez jakýchkoli tlačítek nebo rozhraní Chrome.

Skončíte se souborem json. Musí být umístěn v kořenovém adresáři webové stránky, společně s index.html.

Další věc, kterou budete potřebovat, je servisní pracovník. Opět mohou udělat hodně, ale tento projekt bude používat pouze ukládání do mezipaměti, aby byl k této aplikaci přístup offline. Implementace servisního pracovníka je většinou standardní. Tento projekt použil příklad Google a změnil seznam souborů, které se mají ukládat do mezipaměti. Soubory mimo vaši doménu nelze ukládat do mezipaměti.

Přejděte na FavIcon Generator a vytvořte několik ikon.

Poslední věcí je přidat nějaký kód do funkce Vue Připojeno ().

připojeno: funkce () {if ('serviceWorker' v navigátoru) {navigator.serviceWorker.register ('service-worker.js'); }}

Tím se pracovník zaregistruje v prohlížeči.

Můžete zkontrolovat, zda vše funguje, a pokud ne, možná zjistíte, proč pomocí Lighthouse provede analýzu webu a řekne vám všelijaké věci.

Pokud vše fungovalo, při přechodu na webovou stránku se Chrome zeptá, zda jej chcete nainstalovat pomocí vyskakovacího banneru. Pokud jste v mobilním prohlížeči Chrome, můžete jej vidět v akci na adrese ufire.co/uFire-BLE/. Pokud jste na ploše, najdete položku nabídky, kterou chcete nainstalovat.