Nano 33 IoT + EC / pH / ORP + WebAPK: 8 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:44

Urmărește mai multe de la autor:

Despre: Adăugați capacitatea de a măsura pH-ul, ORP, EC sau salinitatea la proiectul dvs. Arduino sau Raspberry Pi. Mai multe despre ufire »

Un dispozitiv pentru măsurarea EC, pH, ORP și temperatură. Poate fi folosit pentru a monitoriza o piscină sau o configurare hidroponică. Acesta va comunica prin Bluetooth Low Energy și va afișa informațiile pe o pagină web utilizând Web Bluetooth. Și pentru distracție, vom transforma aceasta într-o aplicație web progresivă pe care o puteți instala de pe web.

Pasul 1: Care sunt toți acei termeni?

EC / pH / ORP / temperatura sunt unele dintre cele mai frecvente măsurători ale calității apei. Conductivitatea electrică (EC) este utilizată în hidroponie pentru a măsura soluția de nutrienți, pH-ul pentru cât de acidă / bazică este apa și ORP este utilizat pentru a determina capacitatea apei de a se dezinfecta singură

• Bluetooth Low Energy este un protocol wireless pentru a trimite și primi cu ușurință informații. Placa Arduino utilizată în acest proiect este Nano 33 IoT și vine cu interfețe WiFi și BLE.
• Web Bluetooth este un set de API-uri implementate în browserul Chrome Google (și Opera) care permit unei pagini web să comunice direct cu un dispozitiv BLE.
• Aplicațiile web progresive sunt practic pagini web care acționează ca aplicații obișnuite. Android și iPhone le gestionează diferit, iar acestea sunt diferite pe desktop-uri, așa că va trebui să citiți puțin pentru detalii.

Pasul 2: Hardware-ul

Înainte de a putea asambla hardware-ul, există un lucru de abordat. Dispozitivele cu senzor uFire ISE vin cu aceeași adresă I2C și folosim două, deci una va trebui schimbată. Pentru acest proiect, vom alege una dintre plăcile ISE și o vom folosi pentru a măsura ORP. Urmând pașii de aici, schimbați adresa la 0x3e.

Acum că adresa este schimbată, este ușor să puneți hardware-ul împreună. Toate dispozitivele senzorilor folosesc sistemul de conectare Qwiic, deci conectați totul împreună într-un lanț. Veți avea nevoie de un fir Qwiic-Male pentru a conecta unul dintre senzori la Nano 33. Firele sunt consistente și codificate în culori. Conectați negru la GND-ul Nano, roșu la pinul + 3,3V sau + 5V, albastru la pinul SDA care este A4 și galben la pinul SCL de pe A5.

Pentru acest proiect, se va aștepta ca informațiile de temperatură să provină de la senzorul EC, deci asigurați-vă că atașați un senzor de temperatură la placa EC. Cu toate acestea, toate plăcile au capacitatea de a măsura temperatura. Nu uitați să atașați sondele EC, pH și ORP la senzorii corespunzători. Acestea sunt ușor atașate cu conectori BNC.

Dacă aveți o incintă, a pune toate acestea în interior ar fi o idee bună, mai ales având în vedere că va fi implicată apa.

Pasul 3: Software-ul

Partea software a acesteia este împărțită în două secțiuni principale: firmware-ul de pe Nano 33 și pagina web.

Fluxul de bază este acesta:

• Pagina web se conectează la Nano prin BLE
• Pagina web trimite comenzi bazate pe text pentru a cere informații sau a lua măsuri
• Nano ascultă acele comenzi, le execută și returnează informații
• Pagina web primește răspunsurile și actualizează UI în consecință

Această configurare permite paginii web să îndeplinească toate funcțiile necesare la care v-ați aștepta, cum ar fi măsurarea sau calibrarea senzorilor.

Pasul 4: Servicii și caracteristici BLE

Unul dintre primele lucruri de învățat sunt elementele de bază ale modului în care funcționează BLE.

Există o mulțime de analogii, deci să alegem o carte. Un serviciu ar fi o carte, iar o caracteristică ar fi paginile. În această „carte BLE”, paginile au câteva proprietăți non-carte, cum ar fi posibilitatea de a schimba ceea ce spune pagina și primirea unei notificări atunci când se întâmplă.

Un dispozitiv BLE poate realiza oricâte servicii dorește. Unele sunt predefinite și acționează ca o modalitate de standardizare a informațiilor utilizate frecvent, cum ar fi Tx Power sau pierderea unei conexiuni, la lucruri mai specifice, cum ar fi insulina sau oximetria pulsului. De asemenea, puteți să faceți una și să faceți orice doriți cu ea. Acestea sunt definite în software și sunt identificate cu un UUID. Puteți crea UUID-uri aici.

În firmware-ul acestui dispozitiv, există un singur serviciu, definit ca:

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

și două caracteristici:

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

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

Caracteristica tx_ va fi locul în care dispozitivele trimit informații, cum ar fi măsurători EC, pentru ca pagina web să fie afișată. Rx_Characteristic este locul unde va primi comenzi de pe pagina web pentru a fi executate.

Acest proiect utilizează biblioteca ArduinoBLE. Dacă te uiți, vei vedea că există un cuplu diferit de a declara o caracteristică. Acest proiect folosește BLEStringCharacteristic, deoarece vom avea de-a face cu tipul String și este pur și simplu mai ușor, dar puteți alege, de asemenea, BLECharCharacteristic sau BLEByteCharacteristic dintr-o mână de alții.

În plus, există câteva proprietăți pe care le puteți da caracteristicii. tx_Characteristic are opțiunea BLENotify. Aceasta înseamnă că pagina noastră web va primi o notificare atunci când valoarea acesteia se va modifica. rx_Characteristic are BLEWrite, care va permite paginii noastre web să o modifice. Mai sunt și alții.

Apoi, există un pic de cod-lipici pentru a lega toate aceste lucruri împreună:

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

Se explică mai mult sau mai puțin de la sine, dar să atingem câteva puncte.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Este locul în care profitați de a fi notificat cu privire la valoarea modificată. Linia spune clasei să execute funcția rxCallback atunci când valoarea este modificată.

BLE.advertise ();

este ceea ce începe să meargă totul. Un dispozitiv BLE va trimite periodic un mic pachet de informații care anunță că este disponibil și la care se poate conecta. Fără ea, va fi invizibil.

Pasul 5: Comenzi text

Așa cum am menționat anterior, acest dispozitiv va vorbi cu pagina web prin comenzi text simple. Întregul lucru este ușor de implementat, deoarece munca grea a fost deja realizată. Senzorii uFire vin cu o bibliotecă bazată pe JSON și MsgPack pentru trimiterea și primirea comenzilor. Puteți citi mai multe despre comenzile EC și ISE pe paginile lor de documentare.

Acest proiect va folosi JSON deoarece este puțin mai ușor de lucrat și poate fi citit, spre deosebire de formatul MsgPack care este binar.

Iată un exemplu despre cum se leagă toate:

• Pagina web solicită dispozitivului o măsurare EC prin trimiterea ec (sau mai exact scrierea ec la rx_Caracteristic caracteristică)
• Dispozitivul primește comanda și o execută. Apoi trimite înapoi un răspuns JSON formatat de {"ec": 1.24} scriind la caracteristica tx_Characteristic.
• Pagina web primește informațiile și le afișează

Pasul 6: pagina web

Pagina web a acestui proiect va utiliza Vue.js pentru front-end. Nu este nevoie de backend. În plus, pentru a menține lucrurile puțin mai simple, nu este utilizat niciun sistem de construcție. Este împărțit în folderele obișnuite, js pentru javascript, css pentru CSS, active pentru pictograme. Porțiunea html nu este nimic special. Folosește bulma.io pentru stil și creează interfața cu utilizatorul. Veți observa multe în secțiune. Se adaugă toate css-urile și pictogramele, dar se adaugă și o linie în special.

Se încarcă fișierul nostru manifest.json, ceea ce face ca toate lucrurile PWA să se întâmple. Declară unele informații care indică telefonului nostru că această pagină web poate fi transformată într-o aplicație.

În javascript se întâmplă cele mai multe lucruri interesante. Este împărțit în fișiere, app.js conține elementele de bază pentru obținerea unei pagini web Vue împreună cu toate variabilele legate de interfața de utilizare și câteva alte lucruri. ble.js are chestii cu bluetooth.

Pasul 7: Javascript și Web Bluetooth

În primul rând, acest lucru funcționează numai pe Chrome și Opera. Aș dori ca alte browsere să accepte acest lucru, dar, din orice motiv, nu. Aruncați o privire la app.js și veți vedea aceleași UUID-uri pe care le-am folosit în firmware-ul nostru. Una pentru serviciul uFire și una pentru caracteristicile tx și rx.

Acum, dacă vă uitați în ble.js, veți vedea funcțiile connect () și disconnect ().

Funcția connect () conține unele logici pentru a menține interfața de utilizare sincronizată, dar configurează în principal lucrurile pentru a trimite și primi informații despre caracteristici.

Există unele idiosincrazii atunci când aveți de-a face cu Bluetooth Web. Conexiunea trebuie inițiată printr-un fel de interacțiune fizică a utilizatorului, cum ar fi atingerea unui buton. De exemplu, nu vă puteți conecta programat atunci când pagina web este încărcată.

Codul pentru a începe o conexiune arată astfel:

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

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

Filtrele: și secțiunea opțională Servicii este necesară pentru a evita vizualizarea fiecărui dispozitiv BLE. Ai crede că doar secțiunea de filtrare ar fi bine, dar ai nevoie și de partea opțională Servicii.

Codul de mai sus va afișa un dialog de conexiune. Face parte din interfața Chrome și nu poate fi modificată. Utilizatorul va selecta din listă. Chiar dacă există un singur dispozitiv la care aplicația s-ar conecta vreodată, utilizatorul trebuie totuși să treacă prin acest dialog de selecție, din motive de securitate.

Restul codului configurează serviciul și caracteristicile. Rețineți că am configurat o rutină de apelare, similară cu notificarea de apelare a firmware-ului:

service = așteaptă server.getPrimaryService (this.serviceUuid);

caracteristică = await service.getCharacteristic (this.txUuid); așteaptă caracteristică.startNotificări (); caracteristică.addEventListener („caracteristicăvaloare modificată”, această.actualizare_valoră);

this.value_update va fi acum apelat de fiecare dată când există informații noi despre caracteristica tx.

Unul dintre ultimele lucruri pe care le face este setarea unui temporizator pentru actualizarea informațiilor la fiecare 5 secunde.

value_update () este doar o funcție lungă care așteaptă să apară informații JSON noi și actualizează interfața cu aceasta.

ec.js, ph.js și orp.js conțin multe funcții mici care trimit comenzile pentru a prelua informații și a calibra dispozitivele.

Pentru a încerca acest lucru, va trebui să rețineți că pentru a utiliza Web Bluetooth, acesta trebuie să fie difuzat prin HTTPS. Una dintre multele opțiuni pentru un server HTTPS local este serve-https. Cu firmware-ul încărcat, totul conectat și pagina web fiind difuzată, ar trebui să puteți vedea totul funcționând.

Pasul 8: partea PWA

Există câțiva pași pentru a transforma pagina web într-o aplicație reală. Aplicațiile web progresive pot face mult mai mult decât le folosește acest proiect.

• Instalarea paginii web
• Odată instalat, este posibil accesul offline
• A început și rulează ca o aplicație normală, cu o pictogramă a aplicației cu aspect normal

Pentru a începe, va trebui să generăm o grămadă de fișiere. Primul este un fișier manifest.json. Există o mână de site-uri care vor face acest lucru pentru dvs., App Manifest Generator, fiind unul dintre ele.

Câteva lucruri de înțeles:

• Domeniul de aplicare este important. Am pus această pagină web la ufire.co/uFire-BLE/. Asta înseamnă că domeniul de aplicare al aplicației este / uFire-BLE /.
• Adresa URL de pornire este importantă și ea. Este calea către pagina dvs. web cu domeniul de bază deja asumat. Deci, pentru că am pus acest lucru la ufire.co/uFire-BLE/, adresa URL de pornire este / uFire-BLE / too.
• Modul de afișare va determina aspectul aplicației, Standalone va face să pară a fi o aplicație obișnuită fără butoane sau interfață Chrome.

Veți ajunge cu un fișier json. Acesta trebuie plasat la rădăcina paginii web, chiar împreună cu index.html.

Următorul lucru de care aveți nevoie este un lucrător de service. Din nou, pot face multe, dar acest proiect va folosi numai cache-ul pentru a permite accesarea offline a acestei aplicații. Implementarea lucrătorilor de service este în cea mai mare parte boilerplate. Acest proiect a folosit exemplul Google și a schimbat lista fișierelor care urmează să fie memorate în cache. Nu puteți cache fișiere în afara domeniului dvs.

Mergeți la FavIcon Generator și creați câteva pictograme.

Ultimul lucru este să adăugați un cod în funcția Vue montat ().

montat: funcție () {if ('serviceWorker' în navigator) {navigator.serviceWorker.register ('service-worker.js'); }}

Aceasta va înregistra lucrătorul cu browserul.

Puteți verifica dacă totul funcționează și, dacă nu, vă puteți da seama de ce folosind Lighthouse, acesta va analiza site-ul și vă va spune tot felul de lucruri.

Dacă totul a funcționat, când accesați pagina web, Chrome vă va întreba dacă doriți să îl instalați cu un banner pop-up. Îl puteți vedea în acțiune la ufire.co/uFire-BLE/ dacă sunteți pe Chrome mobil. Dacă sunteți pe un desktop, puteți găsi un element de meniu pentru al instala.