Bluetooth-Kommunikation zwischen LCD und HTML-App

Bluetooth-Kommunikation zwischen LCD und HTML-App: 7 Schritte

Dieses Tutorial ist veraltet und wird nicht mehr weiterentwickelt, da das Framework häufig geändert wurde und auf Node-Webkit umgestellt wurde.

Das erste Tutorial über mein eigenes Projekt - Involt - ist schon eine Weile her. Dieser Rahmen ist Etwas, das HTML- und CSS-Codierung mit Geräten wie Arduino mit der physischen Welt verbindet. Es ähnelt dem Codieren mit responsiven Design-Frameworks wie Bootstrap oder Foundation. Involt ist einfach zu bedienen und eignet sich hervorragend für Prototyping-Zwecke, insbesondere für Designer. Beispiel: Anstatt zu programmieren, können Sie CSS-Klassen schreiben, um zu definieren, was jedes UI-Element mit arduino macht. Auf der Einstiegsseite erhalten Sie einen schnellen Überblick.

Nachdem Sie Feedback gesammelt und viele Probleme behoben haben (Wenn Sie mein vorheriges Tutorial gelesen haben, kann ich sicherstellen, dass Portverbindungsprobleme behoben sind), habe ich viele Verbesserungen hinzugefügt - eine davon ist klassische Bluetooth-Unterstützung in diesem Tutorial beschrieben.

Zubehör:

Schritt 1: Anforderungen:

Hardware-Teile:

  1. Arduino UNO oder eine andere Version.
  2. LCD-Anzeige (WC1602A0, kompatibel mit LiquidCrystal-Bibliothek).
  3. 10k Potentiometer zum Einstellen des Bildschirmkontrasts.
  4. HC-05 Bluetooth-Modul (oder HC-06, wird wahrscheinlich gut funktionieren).
  5. Steckbrett und Kabel
  6. 220-Ohm-Widerstand zum Anschließen der LCD-Hintergrundbeleuchtung, dies ist jedoch nicht erforderlich

Software - Involt.

Der Involt muss installiert sein als Chrome Packaged App in Google Chrome.

Wie installiert man?

  1. Involt herunterladen (github link)
  2. Öffnen Sie in Chrome die Einstellungen und wechseln Sie zu den Erweiterungen.
  3. Entwicklermodus einschalten
  4. Drücken Sie auf die Schaltfläche "Entpackte Erweiterung laden" und wählen Sie den Ordner "www" aus.

Jetzt können Sie die App in der Erweiterungsliste oder mit dem Chrome App Launcher öffnen. Sie können auch eine Verknüpfung auf dem Desktop erstellen. Die App öffnet den Loader-Bildschirm beim Start. In diesem Moment können Sie nichts mit .it tun

Laut Chrome API, die derzeit die Basis von Involt ist, funktioniert es nicht unter Linux (Sie können dieses Tutorial auch mit serieller Kommunikation ohne den Bluetooth-Teil durchführen).

Das Öffnen der index.html im Browser funktioniert nicht.

Schritt 2: HC-05 Bluetooth-Konfiguration

Ich empfehle die HC-05 mit AT-MODE zu konfigurieren bevor Sie die Schaltung verdrahten. Es gibt viele Artikel zum Konfigurieren von Bluetooth, sodass ich mich nur auf wichtige Befehle konzentrieren werde.

Die einfachste Möglichkeit, AT auszuführen, besteht darin, HC-05 und Arduino RX-> RX und TX-> TX und 3,3 V an KEY-Pins anzuschließen. Laden Sie dann eine leere Skizze hoch, um mit dem HC-05 direkt über den seriellen Monitor zu kommunizieren. Der HC-05 arbeitet nach meiner Kenntnis mit 3,3-V-Logik. Der Adapter ist 5-V-tolerant und verfügt über Widerstände an den RX / TX-Pins.

Ändern Sie die Baudrate der Verbindung auf 38400 und schalten Sie den seriellen Monitor auf "Beide NL & CR". Wenn nach der Eingabe von "AT" alles in Ordnung ist, sollten Sie vom Gerät "OK" erhalten. (Wenn ERROR: (0), geben Sie AT erneut ein). Wenn alles in Ordnung ist, wird alles, was Sie an das Gerät senden, mit "OK" bestätigt.

Schreibe jetzt:

Um die Geschwindigkeit zu ändern (in der gesamten Schaltung verwende ich keine serielle Software, daher sollte diese Geschwindigkeit gut funktionieren):

AT + UART = 57600,0,0

Auf Slave-Modus einstellen:

AT + ROLE = 0

So ändern Sie den Namen des Geräts (nicht erforderlich, aber leichter zu finden, wenn mehrere BT-Geräte erkannt werden):

AT + NAME = INVOLT

Um die Geräteadresse zu überprüfen, können Sie Folgendes schreiben (nicht erforderlich, da dies in der Involt-App möglich ist):

AT + ADDR

Danach trennen Sie das Gerät vom AT-Modus. Wenn alles erledigt ist, sollten Sie in der Lage sein, das Gerät mit Ihrem System zu koppeln (das Standardkennwort für HC-05 lautet: 1234).

Schritt 3: Rufen Sie die Bluetooth-Konfiguration auf

Es ist Zeit, Involt softwareseitig für die Bluetooth-Kommunikation zu konfigurieren.

Für die serielle Kommunikation müssen Sie nichts konfigurieren. Damit das Framework im Bluetooth-Modus funktioniert, müssen einige einfache Änderungen vorgenommen werden. Öffne zuerst die settings.js und ändere:

var isSerial = false; var isBluetooth = true;

Das ist schön zu wissen Dieselbe App und Skizze funktioniert mit der standardmäßigen seriellen Kommunikation.

Koppeln Sie nun das Gerät. Ich verwende Windows 10 und kann nur Screenshots für dieses System anhängen.Das HC-05-Standardkennwort lautet 1234. Geben Sie dies ein und warten Sie auf das Pairing. Das Gerät ist jedoch gekoppelt, aber die Verbindung innerhalb der App funktioniert derzeit nicht. Die App benötigt die UUID und die Adresse des Geräts.

Öffnen Sie die Chrome-Konsole, um die Adresse (falls Sie nicht den AT-Modus verwendet haben) und die UUID abzurufen. Starten Sie dazu die App, klicken Sie mit der rechten Maustaste auf das Fenster und klicken Sie, um das Element zu untersuchen. Nun sollten Sie (wie im angehängten Bild) die Geräteliste sehen. Die Konsole gibt Ihnen alle notwendigen Informationen zu Geräten.

Öffnen Sie nun erneut die Datei core / involt.js und fügen Sie sie ein in:

// Dies sind meine HC-05-Einstellungen. Fügen Sie die Werte ein, die Sie von der Konsole erhalten haben. var defaultBtAddress = "98: D3: 31: 90: 4C: 66"; var uuid = "00001101-0000-1000-8000-00805f9b34fb";

Öffnen Sie dann die Datei manifest.json und fügen Sie die UUID in "uuids" ein.

uuids: [00001101-0000-1000-8000-00805f9b34fb]

Für Änderungen an Manifestdateien muss die App im Chrome-Erweiterungsmenü neu geladen werden.

Schritt 4: Schaltung

Jetzt haben wir HC-05 für Involt konfiguriert. Es ist Zeit, die Schaltung zu verdrahten. Schließen Sie alles analog zu diesem Schema an. Ich verwende die SoftwareSerial-Bibliothek aufgrund von Fehlern, die bei der Datenübertragung auftreten können, nicht. HC-05 ist direkt mit Arduino Serial verbunden (nach dem Hochladen der Skizze müssen Sie nicht über Kabel kommunizieren). Denken Sie daran, die RX / TX-Stifte zu trennen, bevor Sie die Skizze hochladen.

Denk daran, dass Es gibt verschiedene Pin-Konfigurationen für verschiedene hc-05-Geräte. Ich benutze CZ-HC-05 Gamcu und es hat unterschiedliche Pinbelegung.

Wenn Sie die Hintergrundbeleuchtung einschalten möchten, können Sie die ersten beiden Stifte von rechts der LCD-Bildschirme mit 220-Ohm-Widerstand (zweiter von rechts) und GND (erster von rechts) an 5 V anschließen. Dies ist jedoch nicht erforderlich.

Schritt 5: Arduino-Code

Involt aus Hardware-Sicht kommuniziert mit der App, indem die Variablen in einer vorbereiteten Skizze (im Involt / Arduino-Ordner) übertragen werden. Es ist einfach, weil es normalerweise eine Zeile Arduino-Code pro Zeile HTML-Code erfordert. Die numerischen Werte werden im involtDigital-Array und die Zeichenfolgen im receiveString-Array gespeichert. Der Array-Index ist die "Pin" -Nummer, die tatsächlich verwendet wird, um eine gemeinsame Nummer in Software und Hardware zu haben, sodass Sie problemlos auf dieselben Werte zugreifen können. Sie werden sehen, wie es im Schritt "HTML-Eingabe" funktioniert.

Da wir einen String von der App an das LCD senden möchten, werden die empfangenen Daten im Arrays receiveString gespeichert. Für dieses Tutorial ist dies das einzige, was Sie über Involt Arduino Sketch wissen müssen. Informationen zur liquidCrystal-Bibliothek finden Sie in der Dokumentation. Weitere Details zu Involt Arduino Skizze sind auf dieser Website enthalten.

Die endgültige Skizze sieht aus wie die angehängte Datei. Erinnere dich an Trennen von RX / TX vor dem Hochladen der Skizze.

Schritt 6: HTML-Eingabe

Syntax

Involt ist im HTML-Prototyping sehr schnell und erfordert keine Programmierkenntnisse. Es gibt eine CSS-Syntax, die das UI-Element für die Kommunikation mit Arduino übersetzt - jede UI-Elementklasse sieht folgendermaßen aus:

Sie können sich über Syntax informieren oder überprüfen, welche UI-Elemente im Framework enthalten sind.

Eingabe für LCD-Text

Um eine HTML-Eingabe zu erstellen, schreiben Sie einfach diese einzelne Codezeile in index.html:

Die Daten werden beim Entklicken oder Drücken der Eingabetaste gesendet. Der [Pin] S0 definiert, wo die Zeichenfolge in der Arduino-Skizze abgelegt wird. Der S0-Wert ist identisch mit receiveString0] in der Arduino-Skizze. Dasselbe gilt zum Beispiel, wenn der P6-Wert in involtDigital gespeichert wird [6].

Um die Schaltfläche "Senden" zu erstellen, die der Schaltfläche "HTML-Formular" ähnelt, schreiben Sie diesen Code. Lassen Sie uns zwei Eingaben erstellen, um den Benutzernamen und den Nachnamen anzuzeigen:

Stell dich bitte vor:

Wenn Sie Zeit haben, können Sie in core / framework.css mit CSS-Stilen spielen. Sie können die Projektdateien im nächsten Schritt herunterladen.

Schritt 7: Ergebnisse

Ich habe ein Foto des Arbeitsprojekts gemacht, um zu beweisen, dass Involt gut funktioniert. Jetzt wissen Sie, wie Sie eine einfache HTML Chrome-App mit Bluetooth-Verbindung erstellen. Für nicht absolute Anfänger sollte dieses Tutorial nicht länger als 30-40 Minuten dauern. Ich habe auch die Projektdateien hochgeladen. Denken Sie daran, das Projekt zu installieren. Denken Sie daran, dass es ständig aktualisiert wird, so dass einige Änderungen auftreten können.

Fragen Sie einfach nach dem Projekt @: [email protected]

Wenn Sie Vorschläge für das nächste Tutorial zu Instructables haben, senden Sie mir eine Nachricht.

Projektwebsite: involt.github.io

Github-Seite: http://github.com/Involt/Involt

AKTUALISIEREN

Dank der Phonegap-Unterstützung können Sie denselben Code, dieselbe Arduino-Skizze und diese mit Android-Geräte-Check verwenden Mobile Support-Seite. (Sie müssen die neueste Version des Frameworks verwenden),