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

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Di ufireFollow Altro dell'autore:

Informazioni: aggiungi la possibilità di misurare pH, ORP, EC o salinità al tuo progetto Arduino o Raspberry Pi. Maggiori informazioni su ufire »

Un dispositivo per misurare EC, pH, ORP e temperatura. Potrebbe essere utilizzato per monitorare una piscina o un impianto idroponico. Comunicherà tramite Bluetooth Low Energy e visualizzerà le informazioni su una pagina Web utilizzando Web Bluetooth. E per divertimento, la trasformeremo in un'app Web progressiva che puoi installare dal web.

Passaggio 1: quali sono tutti questi termini?

EC/pH/ORP/temperatura sono alcune delle misurazioni più comuni della qualità dell'acqua. La conduttività elettrica (EC) viene utilizzata nell'idroponica per misurare la soluzione nutritiva, il pH per valutare quanto sia acida/basica l'acqua e l'ORP viene utilizzato per determinare la capacità dell'acqua di autodisinfettarsi

• Bluetooth Low Energy è un protocollo wireless per inviare e ricevere facilmente informazioni. La scheda Arduino utilizzata in questo progetto è la Nano 33 IoT ed è dotata di interfacce WiFi e BLE.
• Web Bluetooth è un insieme di API implementate nel browser Chrome di Google (e Opera) che consentono a una pagina Web di comunicare direttamente con un dispositivo BLE.
• Le Progressive Web App sono fondamentalmente pagine Web che si comportano come normali app. Android e iPhone li gestiscono in modo diverso e sono diversi sui desktop, quindi dovrai leggere un po' per i dettagli.

Passaggio 2: l'hardware

Prima di poter assemblare l'hardware, c'è una cosa da affrontare. I dispositivi del sensore uFire ISE hanno lo stesso indirizzo I2C e ne stiamo usando due, quindi uno dovrà essere cambiato. Per questo progetto, sceglieremo una delle schede ISE e la useremo per misurare l'ORP. Seguendo i passaggi qui, modificare l'indirizzo in 0x3e.

Ora che l'indirizzo è cambiato, mettere insieme l'hardware è facile. Tutti i sensori utilizzano il sistema di connessione Qwiic, quindi è sufficiente collegare tutto insieme in una catena. Avrai bisogno di un cavo da Qwiic a maschio per collegare uno dei sensori al Nano 33. I cavi sono coerenti e codificati a colori. Collega il nero al GND del Nano, il rosso al pin +3,3V o +5V, il blu al pin SDA che è A4 e il giallo al pin SCL su A5.

Per questo progetto, si aspetterà che le informazioni sulla temperatura provengano dal sensore EC, quindi assicurati di collegare un sensore di temperatura alla scheda EC. Tutte le schede hanno però la capacità di misurare la temperatura. Non dimenticare di collegare le sonde EC, pH e ORP ai sensori appropriati. Si collegano facilmente con connettori BNC.

Se hai un recinto, mettere tutto questo dentro sarebbe una buona idea, soprattutto considerando che l'acqua sarà coinvolta.

Passaggio 3: il software

La parte software di questo è divisa in due sezioni principali: il firmware sul Nano 33 e la pagina web.

Il flusso di base è questo:

• La pagina web si connette al Nano tramite BLE
• La pagina web invia comandi testuali per chiedere informazioni o intraprendere azioni
• Il Nano ascolta quei comandi, li esegue e restituisce le informazioni
• La pagina web riceve le risposte e aggiorna l'interfaccia utente di conseguenza

Questa configurazione consente alla pagina Web di eseguire tutte le funzioni richieste che ti aspetteresti, come eseguire una misurazione o calibrare i sensori.

Passaggio 4: servizi e caratteristiche BLE

Una delle prime cose da imparare sono le basi su come funziona BLE.

Ci sono molte analogie, quindi scegliamo un libro. Un servizio sarebbe un libro, e una caratteristica sarebbero le pagine. In questo "libro BLE", le pagine hanno alcune proprietà non relative ai libri come poter cambiare ciò che dice la pagina e ricevere una notifica quando accade.

Un dispositivo BLE può eseguire tutti i servizi che desidera. Alcuni sono predefiniti e agiscono come un modo per standardizzare le informazioni di uso comune come Tx Power o perdere una connessione, a cose più specifiche come l'insulina o la pulsossimetria. Puoi anche crearne uno e farci quello che vuoi. Sono definiti nel software e sono identificati con un UUID. Puoi creare UUID qui.

Nel firmware di questo dispositivo è presente un servizio, definito come:

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

e due caratteristiche:

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

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

Il tx_Characteristic sarà il punto in cui i dispositivi inviano le informazioni, come le misurazioni EC, per la visualizzazione della pagina web. Il rx_Characteristic è dove riceverà i comandi dalla pagina web da eseguire.

Questo progetto utilizza la libreria ArduinoBLE. Se guardi, vedrai che ci sono un paio di diversi modi per dichiarare una caratteristica. Questo progetto usa BLEStringCharacteristic perché avremo a che fare con il tipo String ed è semplicemente più semplice, ma potresti anche scegliere BLECharCharacteristic o BLEByteCharacteristic tra una manciata di altri.

Inoltre, ci sono alcune proprietà a cui puoi dare la caratteristica. tx_Characteristic ha BLENotify come opzione. Ciò significa che la nostra pagina web riceverà una notifica quando il suo valore cambia. rx_Characteristic ha BLEWrite che consentirà alla nostra pagina web di modificarlo. Ce ne sono altri.

Poi c'è un po' di colla per codice per legare insieme tutte queste cose:

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

È più o meno autoesplicativo, ma tocchiamo alcuni punti.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback);

È dove approfitti di essere avvisato del valore che viene modificato. La riga dice alla classe di eseguire la funzione rxCallback quando il valore viene modificato.

BLE.pubblicizza();

è ciò che fa partire l'intera cosa. Un dispositivo BLE invierà periodicamente un piccolo pacchetto di informazioni che annuncia che è disponibile e disponibile per la connessione. Senza di essa, sarà invisibile.

Passaggio 5: comandi di testo

Come accennato in precedenza, questo dispositivo parlerà con la pagina Web tramite semplici comandi di testo. Il tutto è facile da implementare perché il duro lavoro è già stato fatto. I sensori uFire sono dotati di una libreria basata su JSON e MsgPack per l'invio e la ricezione di comandi. Puoi leggere di più sui comandi EC e ISE nelle loro pagine di documentazione.

Questo progetto utilizzerà JSON perché è un po' più facile da usare e leggibile, a differenza del formato MsgPack che è binario.

Ecco un esempio di come tutto si collega:

• La pagina web richiede al dispositivo una misura EC inviando ec (o più precisamente scrivendo ec alla caratteristica rx_Characteristic)
• Il dispositivo riceve il comando e lo esegue. Quindi invia una risposta formattata JSON di {"ec":1.24} scrivendo alla caratteristica tx_Characteristic.
• La pagina web riceve le informazioni e le visualizza

Passaggio 6: la pagina Web

La pagina web di questo progetto utilizzerà Vue.js per il front-end. Non è necessario alcun backend. Inoltre, per semplificare le cose, non viene utilizzato alcun sistema di compilazione. È suddiviso nelle solite cartelle, js per javascript, css per CSS, asset per le icone. La parte html non è niente di speciale. Usa bulma.io per lo styling e crea l'interfaccia utente. Noterai molto nella sezione. Sta aggiungendo tutti i css e le icone, ma anche aggiungendo una riga in particolare.

Questo sta caricando il nostro file manifest.json che è ciò che fa accadere tutte le cose PWA. Dichiara alcune informazioni che dicono al nostro telefono che questa pagina Web può essere trasformata in un'app.

Il javascript è dove accadono la maggior parte delle cose interessanti. È suddiviso in file, app.js contiene le basi per ottenere una pagina Web Vue insieme a tutte le variabili relative all'interfaccia utente e poche altre cose. ble.js ha la roba bluetooth.

Passaggio 7: Javascript e Bluetooth Web

Innanzitutto, funziona solo su Chrome e Opera. Vorrei che altri browser lo supportassero, ma per qualsiasi motivo non lo fanno. Dai un'occhiata a app.js e vedrai gli stessi UUID che abbiamo usato nel nostro firmware. Uno per il servizio uFire e uno per le caratteristiche tx e rx.

Ora se guardi in ble.js, vedrai le funzioni connect() e disconnect().

La funzione connect() contiene una logica per mantenere sincronizzata l'interfaccia utente, ma principalmente imposta le cose per inviare e ricevere informazioni sulle caratteristiche.

Ci sono alcune idiosincrasie quando si tratta di Web Bluetooth. La connessione deve essere avviata da una sorta di interazione fisica dell'utente, come il tocco di un pulsante. Non puoi connetterti in modo programmatico quando la pagina web è caricata, per esempio.

Il codice per avviare una connessione è simile a questo:

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

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

La sezione filtri: e servizi opzionali è necessaria per evitare di vedere ogni singolo dispositivo BLE là fuori. Penseresti che solo la sezione del filtro andrebbe bene, ma hai anche bisogno della parte optionalServices.

Il codice sopra mostrerà una finestra di dialogo di connessione. Fa parte dell'interfaccia di Chrome e non può essere modificato. L'utente selezionerà dall'elenco. Anche se c'è un solo dispositivo a cui l'app si connetterà, l'utente deve comunque passare attraverso questa finestra di selezione, per motivi di sicurezza.

Il resto del codice sta configurando il servizio e le caratteristiche. Prendi nota che abbiamo impostato una routine di richiamata, simile alla richiamata di notifica del firmware:

servizio = attendi server.getPrimaryService(this.serviceUuid);

caratteristica = wait service.getCharacteristic(this.txUuid); attendono feature.startNotifications(); feature.addEventListener("characteristicvaluechanged", this.value_update);

this.value_update verrà ora chiamato ogni volta che ci sono nuove informazioni sulla caratteristica tx.

Una delle ultime cose che fa è impostare un timer per aggiornare le informazioni ogni 5 secondi.

value_update() è solo una funzione lunga che attende l'arrivo di nuove informazioni JSON e aggiorna l'interfaccia utente con essa.

ec.js, ph.js e orp.js contengono molte piccole funzioni che inviano i comandi per recuperare informazioni e calibrare i dispositivi.

Per provare questo, devi tenere presente che per utilizzare il Bluetooth Web, deve essere servito su HTTPS. Una delle tante opzioni per un server HTTPS locale è serve-https. Con il firmware caricato, tutto collegato e la pagina Web servita, dovresti essere in grado di vedere tutto funzionante.

Passaggio 8: la parte PWA

Ci sono alcuni passaggi per trasformare la pagina web in una vera app. Le Progressive Web App possono fare molto di più di quanto utilizzato da questo progetto.

• Installazione della pagina web
• Una volta installato, è possibile l'accesso offline
• Avviato e funziona come un'app normale con un'icona dell'app dall'aspetto normale

Per iniziare, avremo bisogno di generare una serie di file. Il primo è un file manifest.json. Ci sono una manciata di siti che lo faranno per te, App Manifest Generator, essendo uno di questi.

Un paio di cose da capire:

• L'ambito di applicazione è importante. Ho messo questa pagina web su ufire.co/uFire-BLE/. Ciò significa che il mio ambito di applicazione è /uFire-BLE/.
• Anche l'URL di inizio è importante. È il percorso della tua particolare pagina web con il dominio di base già assunto. Quindi, poiché l'ho inserito su ufire.co/uFire-BLE/, anche l'URL di inizio è /uFire-BLE/.
• La modalità di visualizzazione determinerà l'aspetto dell'app, Standalone la farà sembrare un'app normale senza pulsanti o interfaccia di Chrome.

Finirai con un file json. Deve essere posizionato alla radice della pagina Web, insieme a index.html.

La prossima cosa di cui avrai bisogno è un addetto ai servizi. Ancora una volta, possono fare molto, ma questo progetto utilizzerà la memorizzazione nella cache solo per consentire l'accesso offline a questa app. L'implementazione del lavoratore di servizio è per lo più standard. Questo progetto ha utilizzato l'esempio di Google e ha modificato l'elenco dei file da memorizzare nella cache. Non puoi memorizzare nella cache i file al di fuori del tuo dominio.

Vai su FavIcon Generator e crea alcune icone.

L'ultima cosa è aggiungere del codice nella funzione Vue mount().

montato: funzione () { if ('serviceWorker' in navigator) { navigator.serviceWorker.register('service-worker.js'); } }

Questo registrerà il lavoratore con il browser.

Puoi controllare che tutto funzioni e, in caso contrario, magari capire perché utilizzando Lighthouse, analizzerà il sito e ti dirà ogni sorta di cose.

Se tutto ha funzionato, quando vai alla pagina web, Chrome ti chiederà se vuoi installarlo con un banner popup. Puoi vederlo in azione su ufire.co/uFire-BLE/ se sei su Chrome mobile. Se sei su un desktop, puoi trovare una voce di menu per installarlo.