Arduino Nano 33 IoT : Capteur d'eau multi-paramètres (CE, pH, ORP) avec BLE et PWA

Composants et fournitures

Composant	Quantité
Arduino Nano 33 IoT	1
Interface sonde EC isolée Microfire LLC	1
Interface sonde ISE isolée Microfire LLC	2

À propos de ce projet

Que allons-nous réaliser ?

Un dispositif pour mesurer la conductivité électrique (CE), le pH, le potentiel d'oxydoréduction (ORP) et la température. Il peut servir à surveiller une piscine ou une installation hydroponique. La communication se fait via Bluetooth Low Energy (BLE) et les données s'affichent sur une page web grâce à Web Bluetooth. Pour aller plus loin, nous transformerons cette page en Progressive Web App (PWA) installable depuis le navigateur.

Tout le matériel est disponible sur ufire.co.

Explication des termes techniques

• CE / pH / ORP / température : mesures courantes de la qualité de l'eau. La conductivité électrique (CE) évalue la concentration en nutriments en hydroponie, le pH indique l'acidité/basicité, et l'ORP mesure la capacité de désinfection de l'eau.
• Bluetooth Low Energy (BLE) : protocole sans fil pour échanger des données simplement. L'Arduino Nano 33 IoT intègre nativement WiFi et BLE.
• Web Bluetooth : API implémentée dans Chrome et Opera permettant à une page web de communiquer directement avec un périphérique BLE.
• Progressive Web Apps (PWA) : pages web se comportant comme des applications natives. Leur gestion diffère selon Android, iOS et desktop.

Le matériel

Avant l'assemblage, une modification s'impose : les interfaces ISE uFire partagent la même adresse I2C. Comme nous en utilisons deux, il faut en changer une. Suivez cette procédure pour définir l'adresse 0x3e sur l'une des cartes ISE (celle dédiée à l'ORP).

Le raccordement est ensuite simplifié grâce au système Qwiic : chainer simplement tous les capteurs. Un câble Qwiic vers broches mâles relie le premier capteur au Nano 33 IoT :

• Noir → GND
• Rouge → 3,3V ou 5V
• Bleu → SDA (broche A4)
• Jaune → SCL (broche A5)

La sonde de température doit être connectée à la carte EC (bien que toutes les cartes puissent en mesurer). Branchez les sondes CE, pH et ORP sur leurs interfaces respectives via connecteurs BNC. Un boîtier étanche est fortement recommandé vu la présence d'eau.

Le logiciel

Deux parties : le firmware sur le Nano 33 et la page web.

Flux de fonctionnement

1. La page web se connecte au Nano via BLE
2. Elle envoie des commandes textuelles pour demander des mesures ou actions
3. Le Nano exécute les commandes et renvoie les résultats
4. La page met à jour l'interface utilisateur

Cette architecture permet d'effectuer toutes les opérations attendues : mesures, calibrations, etc.

Services et caractéristiques BLE

Un service BLE = un "livre", une caractéristique = une "page" modifiable avec notifications.

Dans le firmware, un service unique :

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

Et deux caractéristiques :

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

• tx_Characteristic (BLENotify) : envoi des mesures vers la page web
• rx_Characteristic (BLEWrite) : réception des commandes depuis la page web

Code d'initialisation :

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); déclenche rxCallback à chaque écriture. BLE.advertise(); rend le périphérique visible.

Commandes textuelles

Communication par commandes textuelles simples via JSON (plus lisible que MsgPack). Exemple :

• Page web envoie ec sur rx_Characteristic
• Nano répond {"ec":1.24} sur tx_Characteristic
• Page web affiche la valeur

La bibliothèque uFire gère déjà l'encodage/décodage JSON pour les capteurs CE et ISE.

La page web

Front-end en Vue.js, sans backend ni système de build. Structure classique : js/, css/, assets/. Style avec Bulma.io.

Dans le <head> : <link rel="manifest" href="manifest.json"> pour la PWA.

Le JavaScript est découpé : app.js (UI, variables Vue), ble.js (Bluetooth).

JavaScript et Web Bluetooth

Compatible uniquement Chrome et Opera.

Les UUIDs du firmware sont repris dans app.js. Dans ble.js, les fonctions connect() et disconnect().

La connexion nécessite une interaction utilisateur (clic bouton) :

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

Un dialogue natif Chrome s'affiche pour sélectionner le périphérique (sécurité).

Configuration du service et caractéristiques :

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

value_update traite le JSON entrant et met à jour l'UI. Un timer rafraîchit les données toutes les 5 secondes. Les fichiers ec.js, ph.js, orp.js contiennent les fonctions de commande et calibration.

Important : Web Bluetooth requiert HTTPS. Pour tester localement, utilisez serve-https ou équivalent.

La partie PWA

Étapes pour transformer la page en application installable :

• Installation depuis le navigateur
• Accès hors-ligne après installation
• Lancement comme une app native avec icône

Manifest.json

Généré via App Manifest Generator. Points clés :

• Scope : ex. /uFire-BLE/ si hébergé sur ufire.co/uFire-BLE/
• Start URL : chemin vers la page (domaine exclu)
• Display Mode : standalone pour apparence app native

Placer manifest.json à la racine, à côté de index.html.

Service Worker

Pour le cache hors-ligne. Implémentation standard (exemple Google) avec liste des fichiers à cacher (même domaine uniquement).

Icônes

Générées via FavIcon Generator.

Enregistrement du Service Worker

Dans mounted() de Vue :

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

Validation

Utilisez Lighthouse (onglet Chrome DevTools) pour auditer la PWA. Si tout est bon, Chrome propose l'installation via une bannière.

Code

Arduino Create

GitHub

https://github.com/u-fire/uFire-BLE

Schématiques

Tous les raccordements se font par câbles Qwiic.