Nano 33 IoT + EC/pH/ORP + WebAPK

Über dieses Projekt

Was werden wir machen?

Ein Gerät zum Messen von EC, pH, Redox und Temperatur. Es könnte verwendet werden, um einen Pool oder eine hydroponische Einrichtung zu überwachen. Es kommuniziert über Bluetooth Low Energy und zeigt die Informationen über Web-Bluetooth auf einer Webseite an. Und zum Spaß machen wir daraus eine Progressive Web App, die Sie aus dem Web installieren können.

All das bekommst du auf ufire.co.

Was sind das alles für Begriffe?

• EC/pH/ORP/Temperatur sind einige der häufigsten Wasserqualitätsmessungen. Die elektrische Leitfähigkeit (EC) wird in der Hydrokultur verwendet, um die Nährlösung zu messen, den pH-Wert für den Säure-/Basengehalt des Wassers und das ORP wird verwendet, um die Fähigkeit des Wassers zu bestimmen, sich selbst zu desinfizieren.
• Bluetooth Low Energy ist ein drahtloses Protokoll zum einfachen Senden und Empfangen von Informationen. Das in diesem Projekt verwendete Arduino-Board ist das Nano 33 IoT und wird mit WiFi- und BLE-Schnittstellen geliefert.
• Web Bluetooth ist eine Reihe von APIs, die in Googles Chrome-Browser (und Opera) implementiert sind und es einer Webseite ermöglichen, direkt mit einem BLE-Gerät zu kommunizieren.
• Progressive Web Apps sind im Grunde Webseiten, die sich wie normale Apps verhalten. Android und iPhones handhaben sie unterschiedlich, und sie unterscheiden sich auf Desktops, daher müssen Sie ein wenig lesen, um Einzelheiten zu erfahren.

Die Hardware

Bevor wir die Hardware zusammenbauen können, gibt es eine Sache zu klären. Die uFire ISE-Sensorgeräte werden mit derselben I2C-Adresse geliefert und wir verwenden zwei, sodass eine geändert werden muss. Für dieses Projekt werden wir eines der ISE-Boards auswählen und es verwenden, um ORP zu messen. Befolgen Sie die Schritte hier und ändern Sie die Adresse in 0x3e.

Nachdem die Adresse geändert wurde, ist der Zusammenbau der Hardware einfach. Alle Sensorgeräte verwenden das Qwiic-Connect-System, also verbinden Sie einfach alles in einer Kette. Sie benötigen ein Kabel von Qwiic zu Male, um einen der Sensoren mit dem Nano 33 zu verbinden. Die Drähte sind konsistent und farbcodiert. Verbinden Sie Schwarz mit dem GND des Nano, Rot entweder mit dem +3,3V- oder +5V-Pin, Blau mit dem SDA-Pin, der A4 ist, und Gelb mit dem SCL-Pin von A5.

Für dieses Projekt wird erwartet, dass die Temperaturinformationen vom EC-Sensor stammen. Bringen Sie also unbedingt einen Temperatursensor an der EC-Platine an. Alle Boards haben jedoch die Möglichkeit, die Temperatur zu messen. Vergessen Sie nicht, die EC-, pH- und Redox-Sonden an die entsprechenden Sensoren anzuschließen. Sie werden einfach mit BNC-Anschlüssen befestigt.

Wenn Sie ein Gehäuse haben, wäre es eine gute Idee, all dies ins Innere zu legen, insbesondere wenn man bedenkt, dass Wasser im Spiel ist.

Die Software

Der Softwareteil davon ist in zwei Hauptabschnitte unterteilt:die Firmware auf dem Nano 33 und die Webseite.

Der grundlegende Ablauf ist dieser:

• Die Webseite verbindet sich über BLE mit dem Nano
• Die Webseite sendet textbasierte Befehle, um nach Informationen zu fragen oder Maßnahmen zu ergreifen
• Der Nano hört auf diese Befehle, führt sie aus und gibt Informationen zurück
• Die Webseite empfängt die Antworten und aktualisiert die Benutzeroberfläche entsprechend

Dieses Setup ermöglicht es der Webseite, alle erforderlichen Funktionen auszuführen, die Sie erwarten würden, wie zum Beispiel eine Messung durchzuführen oder die Sensoren zu kalibrieren.

BLE-Dienste und -Eigenschaften

Eines der ersten Dinge, die Sie lernen müssen, sind die Grundlagen der Funktionsweise von BLE.

Es gibt viele Analogien, also lasst uns ein Buch auswählen. Ein Service wäre ein Buch und ein Merkmal wären die Seiten. In diesem "BLE-Buch" haben die Seiten einige nicht buchbezogene Eigenschaften, wie zum Beispiel die Möglichkeit, den Inhalt der Seite zu ändern und eine Benachrichtigung zu erhalten, wenn dies geschieht.

Ein BLE-Gerät kann so viele Dienste machen, wie es möchte. Einige sind vordefiniert und dienen dazu, häufig verwendete Informationen wie Tx Power oder das Verlieren einer Verbindung auf spezifischere Dinge wie Insulin oder Pulsoximetrie zu standardisieren. Sie können auch einfach einen machen und damit machen, was Sie wollen. Sie werden in Software definiert und mit einer UUID identifiziert. Sie können hier UUIDs erstellen, oder für eine Open-Source-Alternative versuchen Sie UUIDTools.com.

In der Firmware für dieses Gerät gibt es einen Dienst, der wie folgt definiert ist:

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

und zwei Eigenschaften:

BLEStringCharacteristic tx_Characteristic("50fa7d80-440a-44d2-967a-ec7731ec736a", BLENotify, 20);
BLEStringCharacteristic rx_Characteristic("50fa7d80-440b-44d2-967b-ec736b", BLec7riteEW, 207731ec7rite  

Die tx_Characteristic ist der Ort, an dem die Geräte die Informationen, wie z. B. EC-Messungen, zur Anzeige auf der Webseite aussenden. Das rx_Characteristic ist, wo es Befehle von der Webseite zur Ausführung empfängt.

Dieses Projekt verwendet die ArduinoBLE-Bibliothek. Wenn Sie hinschauen, werden Sie feststellen, dass es einige Unterschiede gibt, um ein Merkmal zu deklarieren. Dieses Projekt verwendet BLEStringCharacteristic weil wir uns mit dem String-Typ beschäftigen werden und es einfach einfacher ist, aber Sie könnten auch BLECharCharacteristic wählen oder BLEByteCharacteristic aus einer Handvoll anderer.

Darüber hinaus gibt es einige Eigenschaften, die Sie dem Merkmal zuweisen können. tx_Characteristic hat BLENotify als eine Option. Das bedeutet, dass unsere Webseite eine Benachrichtigung erhält, wenn sich der Wert ändert. rx_Characteristic hat BLEWrite die es unserer Webseite ermöglicht, sie zu ändern. Es gibt noch andere.

Dann gibt es noch ein bisschen Code-Kleber, um all diese Dinge zusammenzufügen:

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

Es ist mehr oder weniger selbsterklärend, aber lassen Sie uns auf ein paar Punkte eingehen.

rx_Characteristic.setEventHandler(BLEWritten, rxCallback); 

Hier nutzen Sie die Möglichkeit, über den geänderten Wert benachrichtigt zu werden. Die Zeile weist die Klasse an, die Funktion rxCallback . auszuführen wenn der Wert geändert wird.

BLE.advertise(); ist, was das Ganze in Gang setzt. Ein BLE-Gerät sendet in regelmäßigen Abständen ein kleines Informationspaket, das ankündigt, dass es da draußen ist und eine Verbindung herstellen kann. Ohne sie ist sie unsichtbar.

Textbefehle

Wie bereits erwähnt, kommuniziert dieses Gerät über einfache Textbefehle mit der Webseite. Das Ganze ist einfach umzusetzen, weil die harte Arbeit schon getan ist. Die uFire-Sensoren werden mit einer JSON- und MsgPack-basierten Bibliothek zum Senden und Empfangen von Befehlen geliefert. Sie können mehr über die EC- und ISE-Befehle auf ihren Dokumentationsseiten lesen.

Dieses Projekt verwendet JSON, da es im Gegensatz zum MsgPack-Format, das binär ist, etwas einfacher zu arbeiten und lesbar ist.

Hier ist ein Beispiel dafür, wie alles zusammenhängt:

• Die Webseite fordert das Gerät zu einer EC-Messung auf, indem sie ec . sendet (oder genauer gesagt ec . schreiben zum Merkmal rx_Characteristic)
• Das Gerät empfängt den Befehl und führt ihn aus. Es sendet dann eine JSON-formatierte Antwort von {"ec":1.24} . zurück indem Sie in das Merkmal tx_Characteristic schreiben.
• Die Webseite empfängt die Informationen und zeigt sie an

Die Webseite

Die Webseite für dieses Projekt verwendet Vue.js für das Frontend. Es wird kein Backend benötigt. Außerdem wird der Einfachheit halber kein Build-System verwendet. Es ist in die üblichen Ordner aufgeteilt, js für Javascript, CSS für CSS, Assets für Icons.

Der HTML-Teil davon ist nichts Besonderes. Es verwendet bulma.io für das Styling und erstellt die Benutzeroberfläche. Sie werden viel im bemerken Sektion. Es fügt alle CSS und Icons hinzu, aber auch eine Zeile im Besonderen.

Das ist das Laden unserer manifest.json-Datei, die all das PWA-Zeug passiert. Es deklariert einige Informationen, die unserem Telefon mitteilen, dass diese Webseite in eine App umgewandelt werden kann.

Das Javascript ist, wo die meisten der interessanten Dinge passieren. Es ist in Dateien aufgeteilt, app.js enthält die Grundlagen, um eine Vue-Webseite mit allen UI-bezogenen Variablen und einigen anderen Dingen in Gang zu bringen. ble.js hat das Bluetooth-Zeug.

Javascript und Web-Bluetooth

Erstens funktioniert dies nur auf Chrome und Opera. Ich wünschte, andere Browser würden dies unterstützen, aber aus irgendeinem Grund tun sie dies nicht.

Schauen Sie sich app.js an und Sie werden dieselben UUIDs sehen, die wir in unserer Firmware verwendet haben. Eine für den uFire-Dienst und jeweils eine für die tx- und rx-Eigenschaften.

Wenn Sie jetzt in ble.js suchen, sehen Sie connect() und disconnect() Funktionen.

Die connect() Die Funktion enthält eine gewisse Logik, um die Benutzeroberfläche synchron zu halten, aber sie richtet hauptsächlich Dinge ein, um Informationen zu den Eigenschaften zu senden und zu empfangen.

Es gibt einige Eigenheiten beim Umgang mit Web-Bluetooth. Die Verbindung muss durch eine physische Benutzerinteraktion initiiert werden, z. B. durch Tippen auf eine Schaltfläche. Sie können beispielsweise keine programmgesteuerte Verbindung herstellen, wenn die Webseite geladen wird.

Der Code zum Starten einer Verbindung sieht so aus:

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

Der Abschnitt filter:and optionalServices wird benötigt, um zu vermeiden, dass jedes einzelne BLE-Gerät da draußen angezeigt wird. Man könnte meinen, nur der Filterabschnitt wäre in Ordnung, aber du brauchst auch den optionalenServices-Teil.

Der obige Code zeigt einen Verbindungsdialog an. Es ist Teil der Chrome-Benutzeroberfläche und kann nicht geändert werden. Der Benutzer wählt aus der Liste aus. Selbst wenn es nur ein Gerät gibt, mit dem sich die App jemals verbinden würde, muss der Benutzer aus Sicherheitsgründen dennoch diesen Auswahldialog durchlaufen.

Der Rest des Codes ist das Einrichten des Dienstes und der Eigenschaften. Beachten Sie, dass wir eine Rückrufroutine eingerichtet haben, ähnlich dem Benachrichtigungsrückruf der Firmware:

service =warten server.getPrimaryService(this.serviceUuid);
characteristic =erwarten service.getCharacteristic(this.txUuid);
warte Eigenschaft.startNotifications();
characteristic .addEventListener(
 "characteristicvaluechanged",
 this.value_update
 ); 

this.value_update wird jetzt jedes Mal aufgerufen, wenn es neue Informationen zur Sendecharakteristik gibt.

Eines der letzten Dinge, die es tut, ist, einen Timer zu setzen, um die Informationen alle 5 Sekunden zu aktualisieren.

value_update() ist nur eine lange Funktion, die auf neue JSON-Informationen wartet und die Benutzeroberfläche damit aktualisiert.

ec.js, ph.js und orp.js enthalten viele kleine Funktionen, die Befehle aussenden, um Informationen abzurufen und die Geräte zu kalibrieren.

Um dies auszuprobieren, müssen Sie bedenken, dass Web-Bluetooth über HTTPS bereitgestellt werden muss. Eine von vielen Optionen für einen lokalen HTTPS-Server ist server-https. Wenn die Firmware hochgeladen ist, alles verbunden ist und die Webseite bereitgestellt wird, sollten Sie sehen können, dass alles funktioniert.

Der PWA-Teil

Es sind einige Schritte erforderlich, um die Webseite in eine tatsächliche App zu verwandeln. Progressive Web Apps können viel mehr, als dieses Projekt sie nutzt.

• Webseiteninstallation
• Nach der Installation ist der Offline-Zugriff möglich
• Gestartet und ausgeführt als normale App mit einem normal aussehenden App-Symbol

Um zu beginnen, müssen wir eine Reihe von Dateien generieren. Die erste ist eine manifest.json-Datei. Es gibt eine Handvoll Websites, die dies für Sie tun, der App Manifest Generator ist eine davon.

Ein paar Dinge zum Verständnis:

• Der Anwendungsbereich ist wichtig. Wenn Sie diese Webseite unter ufire.co/uFire-BLE/ stellen. Das heißt, mein Anwendungsbereich ist /uFire-BLE/.
• Die Start-URL ist ebenfalls wichtig. Es ist der Pfad zu Ihrer speziellen Webseite, wobei die Basisdomäne bereits angenommen wird.
• Der Anzeigemodus bestimmt, wie die App aussieht, Standalone lässt sie wie eine normale App ohne Chrome-Schaltflächen oder -Oberfläche erscheinen.

Sie erhalten eine json-Datei. Es muss im Stammverzeichnis der Webseite platziert werden, direkt zusammen mit index.html.

Das nächste, was Sie brauchen, ist ein Service Worker. Auch hier können sie viel tun, aber dieses Projekt wird das Caching nur verwenden, um den Offline-Zugriff auf diese App zu ermöglichen. Die Service-Worker-Implementierung ist meistens Standard. Dieses Projekt hat das Google-Beispiel verwendet und die Liste der zwischenzuspeichernden Dateien geändert. Sie können keine Dateien außerhalb Ihrer Domain zwischenspeichern.

Gehen Sie zum FavIcon Generator und erstellen Sie einige Symbole.

Als letztes fügen Sie etwas Code in das Vue mounted() ein Funktion.

eingehängt:Funktion () {
 if ('serviceWorker' im Navigator) {
 navigator.serviceWorker.register('service-worker.js');
 }
 }, 

Dadurch wird der Arbeiter beim Browser registriert.

Sie können überprüfen, ob alles funktioniert, und wenn nicht, finden Sie vielleicht heraus, warum, indem Sie Lighthouse verwenden, um die Site zu analysieren und Ihnen alle möglichen Dinge mitzuteilen.

Wenn alles funktioniert hat, fragt Chrome beim Aufrufen der Webseite, ob Sie sie mit einem Popup-Banner installieren möchten.

Code

Arduino Code erstellen

GitHub

Schaltpläne