Arduino Nano 33 IoT: Multi-parameter Watersensor (EC, pH, ORP) met BLE & PWA

Onderdelen en benodigdheden

Over dit project

Wat gaan we maken?

Een apparaat dat EC, pH, ORP en temperatuur meet. Het kan worden gebruikt om een zwembad of hydroponische opstelling te monitoren. De communicatie verloopt via Bluetooth Low Energy (BLE) en de gegevens worden weergegeven op een webpagina met behulp van Web Bluetooth. Als extra functie zetten we dit om in een Progressive Web App (PWA) die je vanaf het web kunt installeren.

Alle benodigde componenten zijn verkrijgbaar via ufire.co.

Wat betekenen al die termen?

• EC/pH/ORP/temperatuur zijn veelvoorkomende waterkwaliteitsmetingen. Elektrische geleidbaarheid (EC) meet in hydroponica de voedingsoplossing, pH geeft de zuurgraad aan, en ORP helpt de desinfecterende capaciteit van het water te bepalen.
• Bluetooth Low Energy (BLE) is een draadloos protocol voor eenvoudige data-uitwisseling. De Arduino Nano 33 IoT beschikt over zowel WiFi als BLE.
• Web Bluetooth is een set API's in Chrome (en Opera) die een webpagina direct met een BLE-apparaat laten communiceren.
• Progressive Web Apps (PWA's) zijn webpagina's die gedragen als native apps. Android, iOS en desktops hanteren ze verschillend; raadpleeg de documentatie voor details.

De hardware

Voordat we de hardware samenstellen, moet één kwestie worden opgelost. De uFire ISE-sensorboards hebben standaard hetzelfde I2C-adres. Omdat we er twee gebruiken, moet één adres worden gewijzigd. Kies één ISE-board voor ORP-metingen en wijzig het adres naar 0x3e volgens deze handleiding.

Na de adreswijziging is de montage simpel: alle sensoren gebruiken het Qwiic-connectiesysteem. Sluit ze in een ketting aan. Je hebt één Qwiic-naar-male draad nodig om de eerste sensor met de Nano 33 te verbinden. De kleurcodering is: zwart → GND, rood → 3,3V of 5V, blauw → SDA (A4), geel → SCL (A5).

De temperatuurdata komt van de EC-sensor; sluit daarom een temperatuursensor aan op het EC-board. Alle boards kunnen temperatuur meten, maar de firmware verwacht het signaal van de EC-board. Vergeet niet de EC-, pH- en ORP-probes aan te sluiten via de BNC-connectoren. Een behuizing is aanbevolen gezien de vochtige omgeving.

De software

De software bestaat uit twee delen: de firmware op de Nano 33 en de webpagina.

Basismodus

• De webpagina maakt verbinding met de Nano via BLE.
• De pagina stuurt tekstcommando's om metingen op te vragen of acties uit te voeren.
• De Nano luistert, voert de commando's uit en stuurt resultaten terug.
• De webpagina ontvangt de data en werkt de interface bij.

Deze opzet stelt de webpagina in staat alle functies uit te voeren, zoals metingen nemen of sensoren kalibreren.

BLE-services en -kenmerken

BLE werkt met services (vergelijkbaar met een boek) en kenmerken (de pagina's). Een kenmerk kan eigenschappen hebben zoals BLENotify (melding bij waardewijziging) of BLEWrite (toestaan schrijven).

In deze firmware wordt één service gedefinieerd:

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

tx_Characteristic stuurt meetdata naar de webpagina; rx_Characteristic ontvangt commando's. De ArduinoBLE-bibliotheek wordt gebruikt. De initialisatie:

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

rx_Characteristic.setEventHandler(BLEWritten, rxCallback); roept rxCallback aan bij een schrijfactie. BLE.advertise(); maakt het apparaat zichtbaar voor verbinding.

Tekstcommando's

De communicatie verloopt via eenvoudige tekstcommando's. De uFire-sensoren leveren een JSON- en MsgPack-bibliotheek. Dit project gebruikt JSON voor leesbaarheid.

Voorbeeld:

• Webpagina stuurt ec naar rx_Characteristic.
• Apparaat voert meting uit en stuurt {"ec":1.24} terug via tx_Characteristic.
• Webpagina toont de waarde.

De webpagina

De frontend gebruikt Vue.js zonder backend en zonder build-systeem. De structuur: js/, css/, assets/. Styling via Bulma.

In de <head> staat een cruciale regel:

<link rel="manifest" href="manifest.json">

Deze laadt het manifest voor de PWA-functionaliteit.

De JavaScript is verdeeld: app.js (Vue-opzet, UI-variabelen), ble.js (Bluetooth-logica), ec.js, ph.js, orp.js (commando-functies).

JavaScript en Web Bluetooth

Let op: Werkt alleen in Chrome en Opera.

In app.js staan dezelfde UUID's als in de firmware. In ble.js vind je connect() en disconnect().

Een BLE-verbinding moet geïnitieerd worden door een gebruikersactie (bijv. knopdruk). De verbindingscode:

this.device = await navigator.bluetooth.requestDevice({
  filters: [{ namePrefix: "uFire" }],
  optionalServices: [this.serviceUuid]
});

De gebruiker selecteert het apparaat in een Chrome-dialoog (beveiliging). Vervolgens worden service en kenmerken opgehaald en een callback geregistreerd:

service = await server.getPrimaryService(this.serviceUuid);
characteristic = await service.getCharacteristic(this.txUuid);
await characteristic.startNotifications();
characteristic.addEventListener("characteristicvaluechanged", this.value_update);

Elke 5 seconden wordt de UI bijgewerkt via een timer.

Om lokaal te testen heb je een HTTPS-server nodig (bijv. serve-https). Met de geflashte firmware, aangesloten hardware en de draaiende webpagina zou alles moeten werken.

Het PWA-deel

Stappen om de webpagina een installeerbare app te maken:

• Webpagina-installatie op het apparaat.
• Offline toegang na installatie.
• Start als normale app met eigen icoon.

1. manifest.json genereren (bijv. via App Manifest Generator). Let op: Application scope (bijv. /uFire-BLE/), Start URL (pad naar index.html), Display Mode (Standalone voor app-ervaring). Plaats het bestand in de root naast index.html.
2. Service Worker voor offline caching. Gebruik boilerplate (bijv. Google-voorbeeld) en pas de lijst met te cachen bestanden aan. Alleen bestanden binnen je eigen domein mogen gecacht worden.
3. Iconen genereren via FavIcon Generator.
4. In Vue's mounted() de service worker registreren:

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

5. Test met Lighthouse. Als alles klopt, toont Chrome een installatie-banner.

Code

• GitHub repository
• Arduino Create Code beschikbaar via de repo.

Schema's

Alle verbindingen worden gemaakt met Qwiic-draden.