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

2024 Auteur: John Day | [email protected]. Laatst gewijzigd: 2024-01-30 11:16

Door ufireVolg meer door de auteur:

Over: Voeg de mogelijkheid toe om pH, ORP, EC of zoutgehalte te meten aan uw Arduino- of Raspberry Pi-project. Meer over ufire »

Een apparaat om EC, pH, ORP en temperatuur te meten. Het kan worden gebruikt om een zwembad- of hydrocultuuropstelling te bewaken. Het communiceert via Bluetooth Low Energy en geeft de informatie weer op een webpagina met behulp van Web Bluetooth. En voor de lol zullen we dit veranderen in een Progressive Web App die u vanaf het web kunt installeren.

Stap 1: Wat zijn al die voorwaarden?

EC/pH/ORP/temperatuur zijn enkele van de meest voorkomende metingen van de waterkwaliteit. Elektrische geleidbaarheid (EC) wordt in hydrocultuur gebruikt om de voedingsoplossing te meten, de pH voor hoe zuur/basisch het water is, en ORP wordt gebruikt om het vermogen van het water om zichzelf te desinfecteren te bepalen

• Bluetooth Low Energy is een draadloos protocol om eenvoudig informatie te verzenden en te ontvangen. Het Arduino-bord dat in dit project wordt gebruikt, is de Nano 33 IoT en wordt geleverd met WiFi- en BLE-interfaces.
• Web Bluetooth is een reeks API's die zijn geïmplementeerd in de Chrome-browser van Google (en Opera) waarmee een webpagina rechtstreeks kan communiceren met een BLE-apparaat.
• Progressive Web Apps zijn in feite webpagina's die zich gedragen als gewone apps. Android en iPhone gaan er anders mee om, en ze zijn anders op desktops, dus je zult wat moeten lezen voor details.

Stap 2: De hardware

Voordat we de hardware kunnen monteren, moet er één ding worden aangepakt. De uFire ISE-sensorapparaten hebben hetzelfde I2C-adres en we gebruiken er twee, dus één moet worden gewijzigd. Voor dit project gaan we een van de ISE-borden kiezen en deze gebruiken om ORP te meten. Volg de stappen hier en verander het adres in 0x3e.

Nu het adres is gewijzigd, is het eenvoudig om de hardware in elkaar te zetten. Alle sensorapparaten gebruiken het Qwiic connect-systeem, dus sluit alles gewoon in een ketting aan. U hebt één Qwiic-naar-mannelijke draad nodig om een van de sensoren op de Nano 33 aan te sluiten. De draden zijn consistent en hebben een kleurcode. Sluit zwart aan op de GND van de Nano, rood op de +3,3V- of +5V-pin, blauw op de SDA-pin die A4 is, en geel op de SCL-pin op A5.

Voor dit project verwacht het dat de temperatuurinformatie van de EC-sensor komt, dus zorg ervoor dat je een temperatuursensor op het EC-bord bevestigt. Alle borden hebben echter de mogelijkheid om de temperatuur te meten. Vergeet niet de EC-, pH- en ORP-sondes op de juiste sensoren te bevestigen. Ze zijn eenvoudig te bevestigen met BNC-connectoren.

Als je een omheining hebt, zou het een goed idee zijn om dit allemaal binnen te plaatsen, vooral gezien het feit dat er water bij komt kijken.

Stap 3: De software

Het softwaregedeelte hiervan is opgesplitst in twee hoofdsecties: de firmware op de Nano 33 en de webpagina.

De basisstroom is deze:

• De webpagina maakt via BLE. verbinding met de Nano
• De webpagina verzendt op tekst gebaseerde opdrachten om informatie te vragen of acties te ondernemen
• De Nano luistert naar die opdrachten, voert ze uit en geeft informatie terug
• De webpagina ontvangt de reacties en werkt de gebruikersinterface dienovereenkomstig bij

Met deze opstelling kan de webpagina alle vereiste functies uitvoeren die u zou verwachten, zoals een meting uitvoeren of de sensoren kalibreren.

Stap 4: BLE-services en kenmerken

Een van de eerste dingen die u moet leren, zijn de basisprincipes van hoe BLE werkt.

Er zijn veel analogieën, dus laten we een boek kiezen. Een dienst zou een boek zijn, en een kenmerk zouden de pagina's zijn. In dit "BLE-boek" hebben de pagina's een aantal niet-boekeigenschappen, zoals de mogelijkheid om te wijzigen wat de pagina zegt en het ontvangen van een melding wanneer dit gebeurt.

Een BLE-apparaat kan zoveel services maken als het wil. Sommige zijn vooraf gedefinieerd en fungeren als een manier om veelgebruikte informatie, zoals Tx Power of het verliezen van een verbinding, te standaardiseren met meer specifieke dingen zoals insuline of pulsoximetrie. Je kunt er ook gewoon een maken en ermee doen wat je wilt. Ze zijn gedefinieerd in software en worden geïdentificeerd met een UUID. U kunt hier UUID's maken.

In de firmware voor dit apparaat is er één service, gedefinieerd als:

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

en twee kenmerken:

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

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

De tx_Characteristic is waar de apparaten de informatie, zoals EC-metingen, naar de webpagina sturen om weer te geven. De rx_Characteristic is waar het opdrachten van de webpagina zal ontvangen om uit te voeren.

Dit project maakt gebruik van de ArduinoBLE-bibliotheek. Als je kijkt, zie je dat er een paar verschillende manieren zijn om een kenmerk te declareren. Dit project gebruikt BLEStringCharacteristic omdat we te maken hebben met het String-type en het is gewoon makkelijker, maar je kunt ook BLECharacteristic of BLEByteCharacteristic kiezen uit een handvol andere.

Daarnaast zijn er enkele eigenschappen die u het kenmerk kunt geven. tx_Characteristic heeft BLENotify als optie. Dat betekent dat onze webpagina een melding krijgt wanneer de waarde ervan verandert. rx_Characteristic heeft BLEWrite waarmee onze webpagina deze kan wijzigen. Er zijn anderen.

Dan is er een beetje code-lijm om al deze dingen samen te binden:

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

Het spreekt min of meer voor zich, maar laten we een paar punten aanstippen.

rx_Characteristic.setEventHandler (BLEWritten, rxCallback);

Hier profiteert u van een melding dat de waarde wordt gewijzigd. De regel vertelt de klasse om de functie rxCallback uit te voeren wanneer de waarde wordt gewijzigd.

BLE.adverteren();

is waar het allemaal om draait. Een BLE-apparaat stuurt periodiek een klein pakketje informatie om aan te geven dat het beschikbaar is en beschikbaar is om verbinding mee te maken. Zonder dat is het onzichtbaar.

Stap 5: Tekstopdrachten

Zoals eerder vermeld, zal dit apparaat met de webpagina praten via eenvoudige tekstopdrachten. Het geheel is eenvoudig te implementeren omdat het harde werk al is gedaan. De uFire-sensoren worden geleverd met een JSON- en MsgPack-gebaseerde bibliotheek voor het verzenden en ontvangen van opdrachten. U kunt meer lezen over de EC- en ISE-commando's op hun documentatiepagina's.

Dit project zal JSON gebruiken omdat het een beetje gemakkelijker is om mee te werken en leesbaar is, in tegenstelling tot het MsgPack-formaat dat binair is.

Hier is een voorbeeld van hoe het allemaal met elkaar verbonden is:

• De webpagina vraagt het apparaat om een EC-meting door ec te verzenden (of meer specifiek ec te schrijven naar de rx_Characteristic-karakteristiek)
• Het apparaat ontvangt de opdracht en voert deze uit. Vervolgens stuurt het een JSON-geformatteerd antwoord van {"ec":1.24} terug door te schrijven naar het kenmerk tx_Characteristic.
• De webpagina ontvangt de informatie en geeft deze weer

Stap 6: De webpagina

De webpagina voor dit project gebruikt Vue.js voor de front-end. Er is geen back-end nodig. Om het wat eenvoudiger te houden, wordt er bovendien geen bouwsysteem gebruikt. Het is opgesplitst in de gebruikelijke mappen, js voor javascript, css voor CSS, middelen voor pictogrammen. Het html-gedeelte ervan is niets bijzonders. Het gebruikt bulma.io voor styling en creëert de gebruikersinterface. Je zult veel merken in de sectie. Het voegt alle css en pictogrammen toe, maar ook één regel in het bijzonder.

Dat is het laden van ons manifest.json-bestand, waardoor alle PWA-dingen gebeuren. Het verklaart enige informatie die onze telefoon vertelt dat deze webpagina in een app kan worden omgezet.

Het javascript is waar de meeste interessante dingen gebeuren. Het is opgedeeld in bestanden, app.js bevat de basisprincipes om een Vue-webpagina te laten werken met alle UI-gerelateerde variabelen en een paar andere dingen. ble.js heeft de bluetooth-dingen.

Stap 7: Javascript en Web Bluetooth

Ten eerste werkt dit alleen in Chrome en Opera. Ik zou willen dat andere browsers dit zouden ondersteunen, maar om welke reden dan ook doen ze dat niet. Kijk eens naar app.js en je ziet dezelfde UUID's die we in onze firmware hebben gebruikt. Een voor de uFire Service en een voor de tx- en rx-kenmerken.

Als je nu in ble.js kijkt, zie je de functies connect() en disconnect().

De functie connect() bevat enige logica om de gebruikersinterface gesynchroniseerd te houden, maar het is vooral het instellen van dingen om informatie over de kenmerken te verzenden en ontvangen.

Er zijn enkele eigenaardigheden bij het omgaan met Web Bluetooth. De verbinding moet worden gestart door een soort fysieke gebruikersinteractie, zoals het tikken op een knop. U kunt bijvoorbeeld geen programmatische verbinding maken wanneer de webpagina is geladen.

De code om een verbinding te starten ziet er als volgt uit:

this.device = wacht op navigator.bluetooth.requestDevice({

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

De sectie filters: en optionalServices is nodig om te voorkomen dat u elk afzonderlijk BLE-apparaat ziet. Je zou denken dat alleen het filtergedeelte goed zou zijn, maar je hebt ook het optionele gedeelte Services nodig.

De bovenstaande code toont een verbindingsdialoogvenster. Het maakt deel uit van de Chrome-interface en kan niet worden gewijzigd. De gebruiker kiest uit de lijst. Zelfs als er maar één apparaat is waarmee de app ooit verbinding zou maken, moet de gebruiker vanwege veiligheidsredenen nog steeds dit selectievenster doorlopen.

De rest van de code is het instellen van de service en kenmerken. Houd er rekening mee dat we een terugbelroutine hebben ingesteld, vergelijkbaar met de terugbelmelding van de firmware:

service = wacht op server.getPrimaryService(this.serviceUuid);

karakteristieke = wacht op service.getCharacteristic(this.txUuid); wacht op karakteristieke.startNotifications(); karakteristieke.addEventListener("karakteristiekewaardeveranderd", this.value_update);

this.value_update wordt nu aangeroepen elke keer dat er nieuwe informatie is over het tx-kenmerk.

Een van de laatste dingen die het doet, is een timer instellen om de informatie elke 5 seconden bij te werken.

value_update() is slechts een lange functie die wacht tot nieuwe JSON-informatie binnenkomt en de gebruikersinterface ermee bijwerkt.

ec.js, ph.js en orp.js bevatten veel kleine functies die de opdrachten verzenden om informatie op te halen en de apparaten te kalibreren.

Om dit te proberen, moet u er rekening mee houden dat om Web Bluetooth te gebruiken, dit via HTTPS moet worden aangeboden. Een van de vele opties voor een lokale HTTPS-server is serve-https. Met de geüploade firmware, alles aangesloten en de webpagina die wordt weergegeven, zou je moeten kunnen zien dat alles werkt.

Stap 8: Het PWA-deel

Er zijn een paar stappen om van de webpagina een echte app te maken. Progressive Web Apps kunnen veel meer dan waarvoor dit project ze gebruikt.

• Webpagina-installatie
• Na installatie is offline toegang mogelijk
• Gestart en uitgevoerd als een normale app met een normaal uitziend app-pictogram

Om te beginnen, moeten we een aantal bestanden genereren. De eerste is een manifest.json-bestand. Er zijn een handvol sites die dit voor u zullen doen, waarvan App Manifest Generator er een is.

Een paar dingen om te begrijpen:

• Toepassingsbereik is belangrijk. Ik plaats deze webpagina op ufire.co/uFire-BLE/. Dat betekent dat mijn toepassingsgebied /uFire-BLE/ is.
• Start-URL is ook belangrijk. Het is het pad naar uw specifieke webpagina met het basisdomein al aangenomen. Dus omdat ik dit op ufire.co/uFire-BLE/ plaats, is de start-URL ook /uFire-BLE/.
• De weergavemodus bepaalt hoe de app eruitziet, standalone laat het lijken alsof het een gewone app is zonder Chrome-knoppen of interface.

Je krijgt een json-bestand. Het moet in de hoofdmap van de webpagina worden geplaatst, samen met index.html.

Het volgende dat je nodig hebt, is een servicemedewerker. Nogmaals, ze kunnen veel doen, maar dit project gebruikt de caching alleen om deze app offline toegankelijk te maken. De implementatie van de servicemedewerker is meestal boilerplate. Dit project gebruikte het Google-voorbeeld en wijzigde de lijst met bestanden die in de cache moesten worden opgeslagen. U kunt geen bestanden buiten uw domein cachen.

Ga naar FavIcon Generator en maak enkele pictogrammen.

Het laatste is om wat code toe te voegen in de Vue-mounted()-functie.

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

Hiermee wordt de werknemer bij de browser geregistreerd.

Je kunt controleren of alles werkt, en als dat niet het geval is, kun je erachter komen waarom door Lighthouse te gebruiken, het de site zal analyseren en je van alles zal vertellen.

Als alles werkte, zal Chrome bij het bezoeken van de webpagina vragen of je het wilt installeren met een pop-upbanner. Je kunt het in actie zien op ufire.co/uFire-BLE/ als je mobiel Chrome gebruikt. Als je op een desktop werkt, kun je een menu-item vinden om het te installeren.