Geekly articles weekly

Wir steuern LEDs mithilfe der Web-Bluetooth-API und von Arduino



- Wasserkocher, Waagen, Spielzeug, Glühbirnen, Kaffeemaschinen ... In diese und andere Geräte sind Bluetooth-Module eingebaut.
- Warum?
- Damit der Benutzer seine Geräte über die App verwalten kann. Steuern Sie beispielsweise die Beleuchtung im Raum.
- Oh, ist es möglich, ein einfaches Gerät selbst zusammenzustellen und es direkt über den Browser zu verwalten?
- Ja! Und genau darum geht es in diesem Artikel.


Ein bisschen Theorie


Hier werde ich einige grundlegende Begriffe nennen, die wir brauchen, um die Aufgabe (wir werden etwas später darüber sprechen) im Leben umzusetzen.


Bluetooth


Ein Funkstandard, der verschiedene Gerätetypen über kurze Entfernungen miteinander verbindet. Um die Drüsen über die Web-Bluetooth-API zu steuern, benötigen wir Bluetooth v4.0.


Gatt


Die generischen Attribute sind ein ständig übertragener Funktionsbaum eines Bluetooth-Geräts.


Dienstleistungen


Es gibt Dienste im Bluetooth-Gerät. Ein Dienst selbst ist eine Sammlung von Funktionen und Beziehungen zu anderen Diensten. Jeder Dienst hat eine eigene UID und einen eigenen Namen. Oft werden "Unbekannte Dienste" gefunden. Dies liegt an der Tatsache, dass die Anzahl der Geräte und ihre Anwendungsfälle groß ist.


Eigenschaften


In jedem Dienst gibt es Merkmale, in die Sie schreiben, lesen und auch abonnieren können. Die Funktion hat auch eine eigene UID.


Herausforderung


Als Aufgabe habe ich eine Site-Implementierung ausgewählt, die:


  • Leuchten Sie die LEDs in verschiedenen Farben auf und schalten Sie sie aus.
  • Lassen Sie die LEDs in verschiedenen Farben schimmern.

Und wie Sie aus der Problemstellung ersehen können, müssen Sie lernen, wie Sie eine Verbindung zu einem Bluetooth-Gerät herstellen und trennen.


Komponenten


Um die Aufgabe abzuschließen, habe ich die folgende Liste der erforderlichen ausgewählt:


  • Arduino
  • Bluetooth-Modul v4.0 (in meinem Fall HM-10).
  • Zwei dreifarbige LEDs.
  • Steckbrett.
  • Kabel anschließen.
  • Widerstände

Diese Liste ist für die Implementierung nicht streng. Ich bin sicher, dass Sie Arduino durch etwas anderes ersetzen und ein anderes Bluetooth-Modul auswählen können. Der Artikel wird jedoch die Interaktion mit diesen Komponenten berücksichtigen.


Wie es funktionieren soll


Kurz gesagt, das Wesentliche ist Folgendes: Wir stellen eine Verbindung zum Bluetooth-Modul her und übertragen einen bestimmten Code (von 1 bis einschließlich 4). Wenn der Code gültig ist, leuchtet eine der drei Farben auf oder die LEDs blinken einige Zeit mit allen möglichen Farben (rot, grün, blau).


Kochen


Zuerst müssen Sie ein Arbeitsdiagramm sammeln und eine Arduino-Skizze laden. Unten gebe ich die Schaltung (Abb. 1) und den Skizzencode, den ich bekommen habe.



Abb. 1 (Montageplan)


#include <SoftwareSerial.h> int green_pin = 2; int red_pin = 3; int blue_pin = 4; int BLINK_STEPS = 3; int BLINK_DELAY = 100; SoftwareSerial mySerial(7, 8); // RX, TX void setup() { Serial.begin(9600); mySerial.begin(9600); pinMode(green_pin, OUTPUT); pinMode(red_pin, OUTPUT); pinMode(blue_pin, OUTPUT); } int code; void loop() { if (mySerial.available()) { code = mySerial.read(); shutDownAll(); if (code > 0 && code < 5) { analogWrite(code, 200); } if (code == 1) { blinked(); } } } void shutDownAll() { analogWrite(green_pin, 0); analogWrite(red_pin, 0); analogWrite(blue_pin, 0); } void blinked() { int steps = 0; while(steps <= BLINK_STEPS) { analogWrite(green_pin, 200); delay(BLINK_DELAY); analogWrite(green_pin, 0); delay(BLINK_DELAY); analogWrite(red_pin, 200); delay(BLINK_DELAY); analogWrite(red_pin, 0); delay(BLINK_DELAY); analogWrite(blue_pin, 200); delay(BLINK_DELAY); analogWrite(blue_pin, 0); delay(BLINK_DELAY); steps += 1; } }

Letztes Kochen


Also haben wir die Skizze heruntergeladen und die Schaltung an die Stromversorgung angeschlossen. Was weiter? Um mit der Web-Bluetooth-API arbeiten zu können, müssen wir den Namen unseres Geräts und den Dienst kennen, auf den wir zugreifen möchten. Hierfür können Sie die Anwendung „nRF Connect“ verwenden.


Wir schalten die Anwendung ein und sehen eine Liste der Bluetooth-Geräte in unserer Nähe (Abb. 2).



Abb. 2 (Liste der Geräte, die die Anwendung gefunden hat)

Das Gerät mit dem Namen „CC41-A“ hat mich interessiert und nicht umsonst.


Nach dem Herstellen einer Verbindung zum Gerät steht uns eine Liste seiner Dienste zur Verfügung (Abb. 3). Es ist unwahrscheinlich, dass wir in den „Geräteinformationen“ etwas Interessantes finden. Klicken Sie daher mutig auf den „Unbekannten Dienst“.



Abb. 3 (Liste der Gerätedienste)

Im folgenden Screenshot (Abb. 4) sehen Sie das Wichtigste für uns: Schreiben auf das Merkmal und Lesen.


Als ich das oben beschriebene Problem gelöst habe, habe ich versucht, den Wert „2“ an das Merkmal zu senden. Infolgedessen fingen meine LEDs an, grün zu werden. Fast ein Erfolg. Jetzt müssen wir dasselbe tun, aber nicht über eine mobile Anwendung, sondern über einen Browser.



Abb. 4 (Unbekanntes Merkmal)

Hier ist die Liste der Daten, die wir von der Anwendung erhalten haben, um die Aufgabe fortzusetzen:


  1. Der Name des Geräts.
  2. UID des Dienstes.
  3. UID-Eigenschaften.

Web-Implementierung


Bevor Sie mit dem Schreiben von JavaScript-Code beginnen, sollten Sie einige Punkte beachten:


  1. Die API ist experimentell.
  2. Funktioniert in Chrome und Samsung Internet.
  3. Eine Verbindung über HTTPS ist erforderlich.
  4. Ich werde keine Beispiele für HTML- und CSS-Code geben, da im Rahmen dieses Artikels nichts Interessantes darin enthalten ist, aber ich werde am Ende des Artikels einen Link zum Repository und zur Website hinterlassen.

Javascript


Die Arbeit mit der Web-Bluetooth-API basiert auf Promise. Im Folgenden werde ich schrittweise Codebeispiele geben. Der vollständige Quellcode befindet sich im Repository, zu dem der Link verbleibt.


Zuerst müssen wir uns mit dem Gerät verbinden. Wir fordern Geräte an und übertragen im Filter den Gerätenamen und die Dienst-UID, mit denen wir arbeiten werden. Wenn Sie den Dienst nicht im Voraus angeben, ist es in Zukunft nicht möglich, mit ihm zu interagieren.


 navigator.bluetooth.requestDevice({ filters: [ { name: MY_BLUETOOTH_NAME }, { services: [SEND_SERVICE] }, ] })

Nachdem wir auf die Schaltfläche „Verbinden“ geklickt haben, öffnet sich ein Fenster (Abb. 5), in dem Sie ein Gerät auswählen und auf die Schaltfläche Verbinden klicken müssen.



Abb. 5 (Fenster mit Gerät für den Anschluss zugänglich)

Wenn eine Verbindung hergestellt ist, wird ein Versprechen mit "Gerät" zurückgegeben, mit dem Sie eine Verbindung herstellen können. Ok, schreiben wir es in eine Variable und stellen eine Verbindung her.


 .then(device => { myDevice = device; return device.gatt.connect(); })

Danach wird ein Versprechen mit "Server" an uns zurückgesandt. Dann fordern wir "Service" vom "Server" an und übergeben dort die Service-UID (die wir über die Anwendung ausspioniert haben). Dann erhalten wir ein Versprechen mit "Service", von dem wir "Merkmal" anfordern und ihm die UID übergeben (die wir auch durch die Anwendung gesehen haben).


 .then(server => server.getPrimaryService(SEND_SERVICE)) .then(service => service.getCharacteristic(SEND_SERVICE_CHARACTERISTIC))

Und erst jetzt können wir schon anfangen, etwas zu tun. Zum Beispiel speichere ich ein Merkmal in einer Variablen und lege Klick-Handler für Schaltflächen auf. In ihren Datenattributen enthalten sie einen Code, der beim Klicken in das Merkmal geschrieben wird.


Die Button-Click-Handler enthalten den folgenden Code:


 const code = Number(event.target.dataset.code); if (code === 1) { toggleLigthCharacteristic.writeValue(Uint8Array.of(code)); return; } toggleLigthCharacteristic.readValue() .then(currentCode => { const convertedCode = currentCode.getUint8(0); toggleLigthCharacteristic.writeValue( Uint8Array.of(convertedCode === code ? 0 : code) ); });

Es ist erforderlich, ein uint8-Array an das Merkmal zu übergeben. Um den Code zu konvertieren, der an das Merkmal übergeben wird, müssen Sie Uint8Array verwenden.


Wie geplant blinkt die LED mit Code 1 in drei Farben und erlischt dann. Aber wie schalte ich die LED aus, wenn Code 3 an sie übertragen wurde und die LED noch leuchtet? Oder eine andere Farbe einschalten?


Ich lese den Wert, der in dem Merkmal liegt, konvertiere ihn mit getUint8 und sende, wenn der Code übereinstimmt, einen ungültigen Wert (zum Beispiel 0). Wenn der Wert gültig ist, werde ich ihn in das Array unit8 konvertieren und in das Merkmal schreiben.


Für die endgültige Lösung der Aufgabe müssen Sie nur lernen, wie Sie die Verbindung zum Gerät trennen. Wir haben bereits einen eventListener auf der Schaltfläche "Trennen", in dem das Gerät die Verbindung zum Bluetooth-Gerät trennt, eventListener entfernt werden, die Steuertasten ausgeblendet werden und undefiniert in die Variablen geschrieben wird.


 myDevice.gatt.disconnect(); toggleItemsEventListeners('removeEventListener'); toggleButtonsVisible(); toggleLigthCharacteristic = undefined; myDevice = undefined;

Zusammenfassung


Wir haben eine einfache Webseite erstellt, mit der Sie eine Verbindung zu einem Bluetooth-Gerät herstellen und dieses steuern können. Wie Sie sehen können, ist dies ziemlich einfach. Und Geräte, die Sie auf diese Weise zusammenbauen und verwalten können, sind nur durch Ihre Vorstellungskraft begrenzt!


Nützliche Links


Source: https://habr.com/ru/post/de416579/

More articles:


All Articles