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

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:13

Segueix-ne més per l'autor:

Quant a: afegiu la possibilitat de mesurar pH, ORP, EC o salinitat al vostre projecte Arduino o Raspberry Pi. Més informació sobre ufire »

Un dispositiu per mesurar EC, pH, ORP i temperatura. Es podria utilitzar per controlar una configuració de piscina o hidropònica. Es comunicarà mitjançant Bluetooth Low Energy i mostrarà la informació en una pàgina web mitjançant Web Bluetooth. I per diversió, ho convertirem en una aplicació web progressiva que podeu instal·lar des del web.

Pas 1: Quins són tots aquests termes?

EC / pH / ORP / temperatura són algunes de les mesures de qualitat de l’aigua més habituals. La conductivitat elèctrica (EC) s’utilitza en hidroponia per mesurar la solució de nutrients, el pH de l’àcida / bàsica de l’aigua i la ORP per ajudar a determinar la capacitat de l’aigua per desinfectar-se

• Bluetooth Low Energy és un protocol sense fils per enviar i rebre informació fàcilment. La placa Arduino que s’utilitza en aquest projecte és la Nano 33 IoT i ve amb interfícies WiFi i BLE.
• Web Bluetooth és un conjunt d’APIs implementades al navegador Chrome de Google (i Opera) que permeten a una pàgina web comunicar-se directament amb un dispositiu BLE.
• Les aplicacions web progressives són bàsicament pàgines web que actuen com les aplicacions habituals. Android i iPhone els manegen de manera diferent i són diferents als ordinadors de sobretaula, de manera que haureu de llegir una mica per obtenir informació específica.

Pas 2: el maquinari

Abans de muntar el maquinari, hi ha una cosa a tractar. Els dispositius sensor uFire ISE vénen amb la mateixa adreça I2C i en fem servir dos, de manera que caldrà canviar-ne un. Per a aquest projecte, escollirem una de les taules ISE i la farem servir per mesurar la ORP. Seguint els passos indicats aquí, canvieu l'adreça a 0x3e.

Ara que s’ha canviat l’adreça, és fàcil muntar el maquinari. Tots els dispositius de sensor fan servir el sistema de connexió Qwiic, de manera que només cal connectar-ho tot en cadena. Necessitareu un cable Qwiic a Male per connectar un dels sensors al Nano 33. Els cables són consistents i estan codificats per colors. Connecteu negre al Nano's GND, vermell al pin + 3,3 V o + 5 V, blau al pin SDA que és A4 i groc al pin SCL d'A5.

Per a aquest projecte, s'espera que la informació de temperatura provingui del sensor EC, així que assegureu-vos de connectar un sensor de temperatura a la placa EC. Totes les plaques tenen la capacitat de mesurar la temperatura. No oblideu fixar les sondes EC, pH i ORP als sensors adequats. Es connecten fàcilment amb connectors BNC.

Si teniu un recinte, posar-hi tot això seria una bona idea, sobretot tenint en compte que hi haurà aigua.

Pas 3: el programari

La part del programari es divideix en dues seccions principals: el firmware del Nano 33 i la pàgina web.

El flux bàsic és el següent:

• La pàgina web es connecta a Nano mitjançant BLE
• La pàgina web envia ordres basades en text per demanar informació o fer accions
• El Nano escolta aquestes ordres, les executa i retorna informació
• La pàgina web rep les respostes i actualitza la interfície d’usuari en conseqüència

Aquesta configuració permet que la pàgina web realitzi totes les funcions necessàries que podríeu esperar, com ara mesurar o calibrar els sensors.

Pas 4: Serveis i característiques BLE

Una de les primeres coses a aprendre són els conceptes bàsics sobre el funcionament de BLE.

Hi ha moltes analogies, de manera que puguem escollir un llibre. Un servei seria un llibre i una característica serien les pàgines. En aquest "llibre BLE", les pàgines tenen algunes propietats diferents del llibre, com ara poder canviar el que diu la pàgina i rebre una notificació quan succeeixi.

Un dispositiu BLE pot proporcionar tants serveis com vulgui. Alguns estan predefinits i actuen com una forma d'estandarditzar la informació d'ús com Tx Power o perdre una connexió, a coses més específiques com la insulina o l'oximetria de polsos. També podeu fer-ne un i fer-ne el que vulgueu. Es defineixen en programari i s’identifiquen amb un UUID. Podeu fer UUID aquí.

Al firmware d’aquest dispositiu, hi ha un servei, definit com:

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

i dues característiques:

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

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

El tx_Characteristic serà on els dispositius envien la informació, com ara mesures EC, perquè es mostri la pàgina web. El rx_Characteristic és on rebrà ordres de la pàgina web per executar-les.

Aquest projecte utilitza la biblioteca ArduinoBLE. Si ho mireu, veureu que hi ha un parell diferent de declarar una característica. Aquest projecte utilitza BLEStringCharacteristic perquè tractarem el tipus String i és més fàcil, però també podeu triar BLECharCharacteristic o BLEByteCharacteristic entre un grapat d’altres.

A més, hi ha algunes propietats que podeu donar a la característica. tx_Characteristic té BLENotify com a opció. Això significa que la nostra pàgina web rebrà una notificació quan canviï el seu valor. rx_Characteristic té BLEWrite que permetrà a la nostra pàgina web modificar-la. N’hi ha d’altres.

A continuació, hi ha una mica de coda per lligar totes aquestes coses:

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

És més o menys autoexplicable, però toquem alguns punts.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

És on aprofiteu per rebre notificacions del canvi de valor. La línia indica a la classe que executi la funció rxCallback quan es canvia el valor.

BLE.advertise ();

és el que comença tot. Un dispositiu BLE enviarà periòdicament un petit paquet d’informació anunciant que hi ha i que està disponible per connectar-s’hi. Sense ella, serà invisible.

Pas 5: ordres de text

Com es va esmentar anteriorment, aquest dispositiu parlarà amb la pàgina web mitjançant ordres de text senzilles. Tot plegat és fàcil d’implementar perquè el treball ja s’ha fet. Els sensors uFire inclouen una biblioteca basada en JSON i MsgPack per enviar i rebre ordres. Podeu obtenir més informació sobre les ordres EC i ISE a les seves pàgines de documentació.

Aquest projecte utilitzarà JSON perquè és una mica més fàcil de treballar i de llegir, a diferència del format MsgPack que és binari.

Aquí teniu un exemple de com es relaciona tot:

• La pàgina web sol·licita al dispositiu una mesura EC enviant ec (o més específicament escrivint ec a la característica rx_Characteristic)
• El dispositiu rep l'ordre i l'executa. A continuació, envia una resposta amb format JSON de {"ec": 1.24} escrivint a la característica tx_Characteristic.
• La pàgina web rep la informació i la mostra

Pas 6: la pàgina web

La pàgina web d’aquest projecte utilitzarà Vue.js per a la portada. No cal cap backend. A més, per simplificar les coses, no s’utilitza cap sistema de compilació. Es divideix en les carpetes habituals, js per a javascript, css per a CSS, recursos per a icones. La seva porció html no té res d’especial. Utilitza bulma.io per dissenyar estil i crea la interfície d’usuari. Notaràs molt a la secció. S’afegeix tot el css i les icones, però també s’afegeix una línia en concret.

S'està carregant el fitxer manifest.json, que és el que fa que passin totes les coses de PWA. Declara alguna informació que indica al nostre telèfon que aquesta pàgina web es pot convertir en una aplicació.

Al javascript és on passen la majoria de les coses interessants. Es divideix en fitxers, app.js conté els conceptes bàsics per obtenir una pàgina web Vue junt amb totes les variables relacionades amb la interfície d’usuari i algunes coses més. ble.js té el bluetooth.

Pas 7: Javascript i Bluetooth web

En primer lloc, això només funciona a Chrome i Opera. M’agradaria que altres navegadors ho donessin, però per qualsevol motiu no ho fan. Feu una ullada a app.js i veureu els mateixos UUID que hem utilitzat al nostre firmware. Un per al servei uFire, i un per a les característiques tx i rx.

Ara, si mireu ble.js, veureu les funcions connect () i disconnect ().

La funció connect () conté certa lògica per mantenir la interfície d’usuari sincronitzada, però sobretot configura les coses per enviar i rebre informació sobre les característiques.

Hi ha algunes idiosincràcies quan es tracta de Bluetooth web. La connexió s'ha d'iniciar mitjançant un tipus d'interacció física de l'usuari, com tocar un botó. Per exemple, no podeu connectar-vos programàticament quan es carrega la pàgina web.

El codi per iniciar una connexió té aquest aspecte:

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

filtres: [{namePrefix: "uFire"}], serveis opcionals: [this.serviceUuid]});

Els filtres: i la secció de serveis opcionals són necessaris per evitar veure tots els dispositius BLE que hi ha. Pensareu que només estaria bé la secció de filtre, però també necessiteu la part de serveis opcionals.

El codi anterior mostrarà un diàleg de connexió. Forma part de la interfície de Chrome i no es pot canviar. L'usuari seleccionarà de la llista. Fins i tot si només hi ha un dispositiu al qual es connectaria l'aplicació, l'usuari encara ha de passar per aquest diàleg de selecció, per qüestions de seguretat.

La resta del codi està configurant el servei i les característiques. Tingueu en compte que hem configurat una rutina de devolució de trucada, similar a la de devolució de trucada de notificació del firmware:

servei = espera server.getPrimaryService (this.serviceUuid);

característica = espera service.getCharacteristic (this.txUuid); espera característica.startNotificacions (); característica.addEventListener ( característica_valuada”, actualització_este_valor);

this.value_update ara es cridarà cada vegada que hi hagi informació nova sobre la característica tx.

Una de les darreres coses que fa és configurar un temporitzador per actualitzar la informació cada 5 segons.

value_update () és només una funció llarga que espera que entri nova informació JSON i actualitzi la interfície d’usuari.

ec.js, ph.js i orp.js contenen moltes funcions petites que envien les ordres per recuperar informació i calibrar els dispositius.

Per provar-ho, haureu de tenir en compte que, per utilitzar Web Bluetooth, s’ha de publicar mitjançant HTTPS. Una de les moltes opcions d’un servidor HTTPS local és serve-https. Amb el microprogramari penjat, tot el connectat i la pàgina web publicada, hauríeu de poder veure tot el que funciona.

Pas 8: la part PWA

Hi ha uns quants passos per convertir la pàgina web en una aplicació real. Les aplicacions web progressives poden fer molt més del que fa servir aquest projecte.

• Instal·lació de pàgines web
• Un cop instal·lat, és possible l'accés fora de línia
• S'ha iniciat i s'executa com una aplicació normal amb una icona d'aplicació d'aspecte normal

Per començar, haurem de generar un munt de fitxers. El primer és un fitxer manifest.json. Hi ha un grapat de llocs que ho faran per vosaltres, generador de manifests d'aplicacions, sent un d'ells.

Un parell de coses per entendre:

• L’abast de l’aplicació és important. Vaig posar aquesta pàgina web a ufire.co/uFire-BLE/. Això vol dir que el meu àmbit d'aplicació és / uFire-BLE /.
• L’URL d’inici també és important. És el camí cap a la vostra pàgina web concreta amb el domini base ja assumit. Per tant, perquè he posat això a ufire.co/uFire-BLE/, l’URL inicial és / uFire-BLE / too.
• El mode de visualització determinarà l'aspecte de l'aplicació; independentment farà que sembli una aplicació normal sense cap botó ni interfície de Chrome.

Acabareu amb un fitxer json. S'ha de col·locar a l'arrel de la pàgina web, juntament amb index.html.

El següent que necessiteu és un treballador de serveis. Una vegada més, poden fer moltes coses, però aquest projecte només farà servir la memòria cau per permetre l'accés a aquesta aplicació fora de línia. La implementació del treballador del servei és principalment caldera. Aquest projecte va utilitzar l'exemple de Google i va canviar la llista de fitxers que es desaven a la memòria cau. No podeu emmagatzemar a la memòria cau fitxers fora del vostre domini.

Dirigeix-te a FavIcon Generator i fes algunes icones.

L'últim és afegir algun codi a la funció Vue muntada ().

muntat: funció () {if ('serviceWorker' al navegador) {navigator.serviceWorker.register ('service-worker.js'); }}

Això registrarà el treballador al navegador.

Podeu comprovar que tot funciona i, si no, potser esbrineu per què mitjançant Lighthouse analitzarà el lloc i us explicarà tot tipus de coses.

Si tot va funcionar, quan aneu a la pàgina web, Chrome us preguntarà si voleu instal·lar-lo amb un bàner emergent. Podeu veure-ho en acció a ufire.co/uFire-BLE/ si utilitzeu Chrome per a mòbils. Si esteu en un escriptori, podeu trobar un element de menú per instal·lar-lo.