Nano 33 IoT + EC/pH/ORP + WebAPK - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:18

Von ufireFolgen Sie mehr vom Autor:

Info: Fügen Sie Ihrem Arduino- oder Raspberry Pi-Projekt die Möglichkeit hinzu, pH-, Redox-, EC- oder Salzgehalt zu messen. Mehr über ufire »

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.

Schritt 1: Was sind all diese 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-/Basen-Wert 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, so dass Sie ein wenig lesen müssen, um Einzelheiten zu erfahren.

Schritt 2: 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 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. Schließen 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 angeschlossen.

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.

Schritt 3: 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 mit dem Nano über BLE
• Die Webseite sendet textbasierte Befehle, um nach Informationen zu fragen oder Maßnahmen zu ergreifen
• Der Nano lauscht 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 z. B. eine Messung durchzuführen oder die Sensoren zu kalibrieren.

Schritt 4: 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-Buch-Eigenschaften, z. B. 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. Hier können Sie UUIDs erstellen.

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-ec7731ec736b", BLEWrite, 20);

Die tx_Characteristic ist der Ort, an dem die Geräte die Informationen, wie z. B. EC-Messungen, aussenden, damit die Webseite angezeigt wird. Die rx_Characteristic ist der Ort, an dem 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 befassen und es einfach einfacher ist, aber Sie können auch BLECharCharacteristic oder BLEByteCharacteristic aus einer Handvoll anderer auswählen.

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

Dann gibt es noch ein bisschen Codekleber, 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. Werbung();

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 die Änderung des Werts benachrichtigt zu werden. Die Zeile weist die Klasse an, die Funktion rxCallback auszuführen, wenn der Wert geändert wird.

BLE. Werbung();

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 wird es unsichtbar sein.

Schritt 5: 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. Weitere Informationen zu den EC- und ISE-Befehlen finden Sie auf deren Dokumentationsseiten.

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 an die rx_Characteristic-Eigenschaft schreibt).
• 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 es in das Merkmal tx_Characteristic schreibt.
• Die Webseite empfängt die Informationen und zeigt sie an

Schritt 6: 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 in der Rubrik bemerken. Es fügt alle CSS und Icons hinzu, aber auch eine Zeile insbesondere.

Das lädt unsere manifest.json-Datei, wodurch all die PWA-Sachen passieren. 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 unterteilt, 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.

Schritt 7: 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 nun in ble.js nachsehen, sehen Sie die Funktionen connect() und Disconnect().

Die Funktion connect() 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. Sie würden denken, dass nur der Filterabschnitt in Ordnung wäre, aber Sie benötigen 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 Callback-Routine eingerichtet haben, ähnlich dem Benachrichtigungs-Callback der Firmware:

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

Eigenschaft = warten service.getCharacteristic(this.txUuid); warten Eigenschaft.startNotifications(); character.addEventListener("characteristicvaluechanged", this.value_update);

this.value_update wird nun jedes Mal aufgerufen, wenn neue Informationen zur TX-Charakteristik vorliegen.

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 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, alles verbunden ist und die Webseite bedient wird, sollten Sie sehen können, dass alles funktioniert.

Schritt 8: Der PWA-Teil

Es gibt ein paar Schritte, 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 ein Offline-Zugriff möglich
• Gestartet und läuft 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:

• Anwendungsbereich ist wichtig. Ich habe diese Webseite unter ufire.co/uFire-BLE/ gestellt. Das heißt, mein Anwendungsbereich ist /uFire-BLE/.
• Die Start-URL ist ebenfalls wichtig. Es ist der Pfad zu Ihrer speziellen Webseite mit der bereits angenommenen Basisdomäne. Da ich dies also unter ufire.co/uFire-BLE/ abgelegt habe, lautet die Start-URL auch /uFire-BLE/.
• 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 direkt neben index.html im Stammverzeichnis der Webseite platziert werden.

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 Offlinezugriff auf diese App zu ermöglichen. Die Service-Worker-Implementierung ist meistens Standard. In diesem Projekt wurde 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 müssen Sie der Vue-Funktion mount() etwas Code hinzufügen.

Eingehängt: function () { 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 es mit einem Popup-Banner installieren möchten. Sie können es unter ufire.co/uFire-BLE/ in Aktion sehen, wenn Sie mobiles Chrome verwenden. Wenn Sie sich auf einem Desktop befinden, können Sie ein Menüelement zum Installieren finden.