Nano 33 IoT + EC/pH/ORP + WebAPK : 8 étapes

2024 Auteur: John Day | [email protected]. Dernière modifié: 2024-01-30 09:07

Par ufireFollow More par l'auteur:

À propos: Ajoutez la possibilité de mesurer le pH, l'ORP, l'EC ou la salinité à votre projet Arduino ou Raspberry Pi. En savoir plus sur ufire »

Un appareil pour mesurer l'EC, le pH, l'ORP et la température. Il peut être utilisé pour surveiller une piscine ou une installation hydroponique. Il communiquera via Bluetooth Low Energy et affichera les informations sur une page Web à l'aide de Web Bluetooth. Et pour le plaisir, nous allons transformer cela en une application Web progressive que vous pouvez installer à partir du Web.

Étape 1: Quels sont tous ces termes ?

EC/pH/ORP/température sont quelques-unes des mesures de la qualité de l'eau les plus courantes. La conductivité électrique (CE) est utilisée en culture hydroponique pour mesurer la solution nutritive, le pH de l'acidité/de la base de l'eau, et l'ORP est utilisé pour aider à déterminer la capacité de l'eau à se désinfecter

• Bluetooth Low Energy est un protocole sans fil permettant d'envoyer et de recevoir facilement des informations. La carte Arduino utilisée dans ce projet est la Nano 33 IoT et est livrée avec des interfaces WiFi et BLE.
• Web Bluetooth est un ensemble d'API implémentées dans le navigateur Chrome de Google (et Opera) qui permettent à une page Web de communiquer directement avec un appareil BLE.
• Les applications Web progressives sont essentiellement des pages Web qui agissent comme des applications normales. Android et iPhone les gèrent différemment, et ils sont différents sur les ordinateurs de bureau, vous devrez donc lire un peu pour plus de détails.

Étape 2: le matériel

Avant de pouvoir assembler le matériel, il y a une chose à régler. Les capteurs uFire ISE sont livrés avec la même adresse I2C et nous en utilisons deux, il faudra donc en changer un. Pour ce projet, nous allons choisir l'une des cartes ISE et l'utiliser pour mesurer l'ORP. En suivant les étapes ici, changez l'adresse en 0x3e.

Maintenant que l'adresse est modifiée, l'assemblage du matériel est facile. Tous les dispositifs de détection utilisent le système de connexion Qwiic, il suffit donc de tout connecter ensemble dans une chaîne. Vous aurez besoin d'un fil Qwiic vers mâle pour connecter l'un des capteurs au Nano 33. Les fils sont cohérents et codés par couleur. Connectez le noir au GND du Nano, le rouge à la broche +3,3V ou +5V, le bleu à la broche SDA qui est A4 et le jaune à la broche SCL sur A5.

Pour ce projet, il s'attendra à ce que les informations de température proviennent du capteur EC, alors assurez-vous de fixer un capteur de température à la carte EC. Cependant, toutes les planches ont la capacité de mesurer la température. N'oubliez pas d'attacher les sondes EC, pH et ORP aux capteurs appropriés. Ils se fixent facilement avec des connecteurs BNC.

Si vous avez un enclos, mettre tout cela à l'intérieur serait une bonne idée, d'autant plus que l'eau va être impliquée.

Étape 3: Le logiciel

La partie logicielle est divisée en deux sections principales: le micrologiciel du Nano 33 et la page Web.

Le flux de base est le suivant:

• La page Web se connecte au Nano via BLE
• La page Web envoie des commandes textuelles pour demander des informations ou prendre des mesures
• Le Nano écoute ces commandes, les exécute et renvoie des informations
• La page Web reçoit les réponses et met à jour l'interface utilisateur en conséquence

Cette configuration permet à la page Web d'exécuter toutes les fonctions requises que vous attendez, comme prendre une mesure ou étalonner les capteurs.

Étape 4: Services et caractéristiques BLE

L'une des premières choses à apprendre sont les bases du fonctionnement de BLE.

Il y a beaucoup d'analogies, alors choisissons un livre. Un service serait un livre, et une caractéristique serait les pages. Dans ce "livre BLE", les pages ont quelques propriétés non-livres comme pouvoir changer ce que dit la page et recevoir une notification quand cela se produit.

Un appareil BLE peut rendre autant de services qu'il le souhaite. Certains sont prédéfinis et agissent comme un moyen de standardiser les informations couramment utilisées comme Tx Power ou la perte de connexion, à des choses plus spécifiques comme l'insuline ou l'oxymétrie de pouls. Vous pouvez également en faire un et en faire ce que vous voulez. Ils sont définis dans le logiciel et sont identifiés par un UUID. Vous pouvez créer des UUID ici.

Dans le firmware de cet appareil, il y a un service, défini comme:

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

Le tx_Characteristic sera l'endroit où les appareils envoient les informations, comme les mesures EC, pour que la page Web s'affiche. Le rx_Characteristic est l'endroit où il recevra les commandes de la page Web à exécuter.

Ce projet utilise la bibliothèque ArduinoBLE. Si vous regardez, vous verrez qu'il y a plusieurs façons de déclarer une caractéristique. Ce projet utilise BLEStringCharacteristic car nous traiterons du type String et c'est juste plus facile, mais vous pouvez également choisir BLECharCharacteristic ou BLEByteCharacteristic parmi une poignée d'autres.

De plus, il existe certaines propriétés que vous pouvez attribuer à la caractéristique. tx_Characteristic a BLENotify en option. Cela signifie que notre page Web recevra une notification lorsque sa valeur changera. rx_Characteristic a BLEWrite qui permettra à notre page Web de le modifier. Il y en a d'autres.

Ensuite, il y a un peu de code-colle pour lier tous ces trucs ensemble:

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

C'est plus ou moins explicite, mais abordons quelques points.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback);

C'est là que vous profitez d'être averti de la valeur en cours de modification. La ligne indique à la classe d'exécuter la fonction rxCallback lorsque la valeur est modifiée.

BLE.publicité();

c'est ce qui démarre le tout. Un appareil BLE enverra périodiquement un petit paquet d'informations annonçant qu'il est disponible et disponible pour se connecter. Sans cela, il sera invisible.

Étape 5: Commandes de texte

Comme mentionné précédemment, cet appareil parlera à la page Web via de simples commandes de texte. Le tout est facile à mettre en œuvre car le gros du travail a déjà été fait. Les capteurs uFire sont livrés avec une bibliothèque basée sur JSON et MsgPack pour envoyer et recevoir des commandes. Vous pouvez en savoir plus sur les commandes EC et ISE sur leurs pages de documentation.

Ce projet utilisera JSON car il est un peu plus facile à utiliser et lisible, contrairement au format MsgPack qui est binaire.

Voici un exemple de la façon dont tout cela est lié:

• La page Web demande à l'appareil une mesure EC en envoyant ec (ou plus précisément en écrivant ec dans la caractéristique rx_Characteristic)
• L'appareil reçoit la commande et l'exécute. Il renvoie ensuite une réponse au format JSON de {"ec:1.24} en écrivant dans la caractéristique tx_Characteristic.
• La page Web reçoit les informations et les affiche

Étape 6: La page Web

La page Web de ce projet utilisera Vue.js pour le front-end. Aucun backend n'est nécessaire. De plus, pour simplifier un peu les choses, aucun système de construction n'est utilisé. Il est divisé en dossiers habituels, js pour javascript, css pour CSS, assets pour les icônes. La partie html n'a rien de spécial. Il utilise bulma.io pour le style et crée l'interface utilisateur. Vous remarquerez beaucoup dans la section. C'est ajouter tous les css et icônes, mais aussi ajouter une ligne en particulier.

C'est le chargement de notre fichier manifest.json qui permet à tous les trucs PWA de se produire. Il déclare certaines informations qui indiquent à notre téléphone que cette page Web peut être transformée en une application.

Le javascript est l'endroit où la plupart des choses intéressantes se produisent. Il est divisé en fichiers, app.js contient les bases pour obtenir une page Web Vue avec toutes les variables liées à l'interface utilisateur et quelques autres choses. ble.js a le truc bluetooth.

Étape 7: Javascript et Web Bluetooth

Premièrement, cela ne fonctionne que sur Chrome et Opera. Je souhaite que d'autres navigateurs prennent en charge cela, mais pour une raison quelconque, ils ne le font pas. Jetez un œil à app.js et vous verrez les mêmes UUID que nous avons utilisés dans notre firmware. Un pour le service uFire et un pour les caractéristiques tx et rx.

Maintenant, si vous regardez dans ble.js, vous verrez les fonctions connect() et disconnect().

La fonction connect() contient une certaine logique pour garder l'interface utilisateur synchronisée, mais elle configure principalement les choses pour envoyer et recevoir des informations sur les caractéristiques.

Il existe certaines particularités lorsqu'il s'agit de Web Bluetooth. La connexion doit être initiée par une sorte d'interaction physique de l'utilisateur, comme appuyer sur un bouton. Vous ne pouvez pas vous connecter par programmation lorsque la page Web est chargée, par exemple.

Le code pour démarrer une connexion ressemble à ceci:

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

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

Les filtres: et la section services optionnels sont nécessaires pour éviter de voir tous les appareils BLE disponibles. Vous penseriez que seule la section de filtre conviendrait, mais vous avez également besoin de la partie OptionalServices.

Le code ci-dessus affichera une boîte de dialogue de connexion. Il fait partie de l'interface Chrome et ne peut pas être modifié. L'utilisateur choisira dans la liste. Même s'il n'y a qu'un seul appareil auquel l'application se connecte, l'utilisateur doit toujours passer par cette boîte de dialogue de sélection, en raison de problèmes de sécurité.

Le reste du code configure le service et les caractéristiques. Notez que nous avons mis en place une routine de rappel, similaire au rappel de notification du firmware:

service = wait server.getPrimaryService(this.serviceUuid);

caractéristique = wait service.getCharacteristic(this.txUuid); attendre la caractéristique.startNotifications(); caractéristique.addEventListener("characteristicvaluechanged", this.value_update);

this.value_update sera désormais appelée à chaque fois qu'il y aura de nouvelles informations sur la caractéristique tx.

L'une des dernières choses qu'il fait est de régler une minuterie pour mettre à jour les informations toutes les 5 secondes.

value_update() n'est qu'une longue fonction qui attend l'arrivée de nouvelles informations JSON et met à jour l'interface utilisateur avec.

ec.js, ph.js et orp.js contiennent de nombreuses petites fonctions qui envoient les commandes pour récupérer des informations et calibrer les appareils.

Pour essayer cela, vous devez garder à l'esprit que pour utiliser le Web Bluetooth, il doit être servi via HTTPS. L'une des nombreuses options pour un serveur HTTPS local est serve-https. Avec le micrologiciel téléchargé, tout est connecté et la page Web desservie, vous devriez pouvoir voir que tout fonctionne.

Étape 8: La partie PWA

Il y a quelques étapes pour transformer la page Web en une application réelle. Les applications Web progressives peuvent faire beaucoup plus que ce pour quoi ce projet les utilise.

• Installation de pages Web
• Une fois installé, l'accès hors ligne est possible
• Démarré et s'exécute comme une application normale avec une icône d'application d'apparence normale

Pour commencer, nous aurons besoin de générer un tas de fichiers. Le premier est un fichier manifest.json. Il existe une poignée de sites qui le feront pour vous, App Manifest Generator, étant l'un d'entre eux.

Quelques choses à comprendre:

• Le champ d'application est important. J'ai mis cette page Web sur ufire.co/uFire-BLE/. Cela signifie que mon champ d'application est /uFire-BLE/.
• L'URL de démarrage est également importante. C'est le chemin d'accès à votre page Web particulière avec le domaine de base déjà assumé. Donc, parce que je l'ai mis sur ufire.co/uFire-BLE/, l'URL de démarrage est également /uFire-BLE/.
• Le mode d'affichage déterminera à quoi ressemble l'application, Standalone la fera apparaître comme une application normale sans aucun bouton ou interface Chrome.

Vous vous retrouverez avec un fichier json. Il doit être placé à la racine de la page Web, juste avec index.html.

La prochaine chose dont vous aurez besoin est un Service Worker. Encore une fois, ils peuvent faire beaucoup, mais ce projet n'utilisera la mise en cache que pour permettre à cette application d'être accessible hors ligne. La mise en œuvre du service worker est principalement passe-partout. Ce projet a utilisé l'exemple de Google et a modifié la liste des fichiers à mettre en cache. Vous ne pouvez pas mettre en cache des fichiers en dehors de votre domaine.

Rendez-vous sur FavIcon Generator et créez des icônes.

La dernière chose est d'ajouter du code dans la fonction Vue mount().

monté: function () { if ('serviceWorker' dans le navigateur) { navigator.serviceWorker.register('service-worker.js'); } }

Cela enregistrera le travailleur avec le navigateur.

Vous pouvez vérifier que tout fonctionne, et sinon, peut-être comprendre pourquoi en utilisant Lighthouse, il analysera le site et vous dira toutes sortes de choses.

Si tout a fonctionné, lorsque vous accédez à la page Web, Chrome vous demandera si vous souhaitez l'installer avec une bannière contextuelle. Vous pouvez le voir en action sur ufire.co/uFire-BLE/ si vous utilisez Chrome mobile. Si vous êtes sur un ordinateur de bureau, vous pouvez trouver un élément de menu pour l'installer.