Android App Entwicklung: ESP Controller ansprechen #2

Im letzten Tutorial habe ich erläutert wie man eine Verbindung zu einem ESP Controller aufbaut und Daten sendet & empfängt.

Ausführen der App - Absenden eines Request an den WittyCloud
Ausführen der App – Absenden eines Request an den WittyCloud

Nun möchte ich gerne erläutern wie man den Fotowiderstand ausliest und an die AndroidApp sendet.

Auslesen eines Fotowiderstandes und anzeigen des Wertes in einer AndroidApp

 

Als Microcontroller habe ich den WittyCloud verwendet, dieser bietet sich an da der Controller neben einem ESP12 Chip auch über einen Fotowiderstand und einem NeoPixel verfügt.

Als Grundlage möchte ich die AndroidApp aus dem letzten Tutorial Android App Entwicklung: ESP Controller ansprechen #1 verwenden.

Wie auch im letzten Tutorial möchte ich den Aufbau Schritt für Schritt erläutern und zum Schluss haben wir eine lauffähige Android App.

Solltest du im nachfolgenden Tutorial Fehler finden, oder Fragen haben, so kannst du dich gerne per E-Mail oder über das Kontaktformular an mich wenden.

Schaltung

Für dieses Tutorial benötigst du einen ESPx mit einem Fotowiderstand, wie bereits erwähnt verwende ich den WittyCloud dieser hat bereits einen Fotowiderstand verbaut.

Witty Cloud
Witty Cloud

Wenn du diesen nicht besitzt ist das nicht schlimm, es kann jeder beliebige ESPx Controller verwendet werden welcher über min. einen analogen Pin verfügt.

Aufbau der Schaltung für einen NodeMCU

In diesem Abschnitt möchte ich nun beschreiben wie du eine Schaltung mit einem NodeMCU und einem Fotowiderstand aufbaust.

Du benötigst für diese Schaltung folgende Bauteile:

  • 1x NodeMCU,
  • 1x Fotowiderstand,
  • 1x 10kOhm Widerstand,
  • 4x Breadboardkabel,
  • 1x Breadboard mit 400 Pins

Anschluß & Schaltung

Der Fotowiderstand verfügt über 2 Beinchen, eines von diesen wird mit dem 10kOhm Widerstand und das andere mit 3,3V verbunden. Des Weiteren wird zwischen dem Fotowiderstand und dem Widerstand ein Breadboardkabel mit dem analogen Pin A0 verbunden.

Schaltung - NodeMCU mit Fotowiderstand
Schaltung – NodeMCU mit Fotowiderstand

 

NodeMCU mit Fotowiderstand
NodeMCU mit Fotowiderstand

Quellcode

Hier nun ein einfacher Sketch um die Funktionalität der Schaltung zu testen.

Schritt 1 – Auslesen der Werte des Fotowiderstandes

Als erstes wollen wir nun die Werte des Fotowiderstandes auslesen. Dazu erzeugen wir uns eine neue Funktion in unserem bestehenden Sketch aus dem ersten Tutorial.

Zusätzlich müssen wir diese Methode dem Server bekannt geben,
damit wir aus der Android App die Adresse „http://<<IP-Adresse>>/fotoresistor“ aufrufen können.

Dazu erweitern wir die Setup Funktion um folgenden Eintrag:

Schritt 2 – Auswerten der JSON Daten

Nachdem wir nun die Werte senden können, müssen wir diese noch auswerten. Die Daten empfangen wir im JSON Format, um aus diesem Datenformat die Schlüssel/Wertepaare auszulesen verwende ich die Bibliothek Google Gson.

Ein einfacher JUnitTest

Wie diese Bibliothek funktioniert möchte ich in einem kurzen und knackigen JUnit Testcase erläutern.

Es wird ein JSON String mit {„msg“:“Hello from ESP8266!“} der Gson Bibliothek übergeben und in die Klasse „SimpleData“ transformiert.

Einbinden der Bibliothek in das Android Projekt

Bevor wir diese Bibliothek verwenden können müssen wir diese in unser BuildScript einbauen. Dazu öffnen wir die Datei „build.gradle (Module: app)“. Im unteren Abschnitt der Datei finden wir die „dependencies“ dieses sind die Abhängigkeiten für unser Projekt.

Dort fügen wir die nachfolgende Zeile hinzu und klicken danach auf den Link „Sync Now“ (gelber Balken, oben links).

Es wird nun die Bibliothek aus dem Internet geladen und das Projekt gebaut.

Wenn diese Schritt erfolgreich ausgeführt wurde kann mit der Implementation begonnen werden.

Umwandeln des JSON Formates

Wir erhalten vom ESP ein JSON mit eine Schlüssel / Wertepaar, der Schlüssel lautet in unserem Beispiel „msg“. D.h. wir erzeugen uns zunächst eine Klasse welche später unser JSON repräsentieren soll.

Da wir bereits eine Funktion haben um unsere Daten an den ESP zu senden wollen wir diese nutzen und auch auf das empfangen reagieren. Wir ja nun zwei Anwendungsfälle, einmal das eine Willkommensnachricht abgesendet wird und einmal nun unseren Fotowiderstand (und später wollen wir noch unseren NeoPixel steuern).

Hier bietet es sich an ein ENUM zu erzeugen welcher Werte für unsere „Actions“ enthält. Wir bauen hier nun noch mit ein das die Adresse enthalten ist und ob die Aktionen Parameter übergeben kann.

Und dieses ENUM übergeben wir unserem Konstruktor der Klasse „RequestAsyncTask“. Da wir vom ESP Controller einen Wert erwarten und keinen senden wollen schreiben wir uns einen neuen Konstruktor welcher keinen zusätzlichen Text erwartet. (Wir könnten auch ein „null“ anstelle des Textes setzen.)

Zusätzlich müssen wir unsere bestehende Funktion für den Aufruf der Willkommensnachricht anpassen. In diesem Zuge benennen wir diese um von „sendRequest“ in „sendWellcomeGreetingRequest“.

Nun passen wir unseren Aufruf in der Funktion „doInBackground“ an damit wir unterscheiden können ob wir eine Willkommensnachricht absenden oder aber einen Wert des Fotowiderstandes erhalten wollen.

Layout anpassen

Nun wollen wir einen zweiten Button erzeugen und diesem in der Funktion „onClick“ die Aktion zuweisen einen Request an den ESP Controller zu senden einen Wert des Fotowiderstandes auszulesen und zurück zu liefern.

Unser Layout „activity_main.xml“ erweitern wir wiefolgt:

Die Texte für die Schaltflächen werden in der Datei „strings.xml“ verwaltet, hier müssen wir nun die beiden Texte hinzufügen.

Des Weiteren müssen wir (natürlich) unserem neuen Button eine Aktion zuweisen.

Da wir unsere Funktion „doInBackground“ bereits multifunktional umgeschrieben haben brauchen wir nichts weiter tun. 

Ergebnis vom ESP Controller transformieren

Im nächsten Schritt wollen wir nun das Ergebnis (der Respond) vom ESP Controller in unser „EspMessage“ Objekt transformieren / umwandeln. Dazu nutzen wir wie eingangs erwähnt die Bibliothek Google Gson.

Nun wird uns der Wert des Fotowiderstandes in der App angezeigt wenn wir den Button „FOTOWIDERSTAND AUSLESEN“ betätigen.

aktueller Wert des Fotowiderstandes vom WittyCloud
aktueller Wert des Fotowiderstandes vom WittyCloud

Download

Ausblick

Nun nachdem wir den Wert lesen können wollen wir uns diesen in einem Liniendiagramm anzeigen lassen. Dazu müssen wir jedoch unser Layout (fast) komplett umstellen. Im nächsten Tutorial werden wir also eine Navigationsleiste hinzufügen und für jede bestehende Funktion eine Extra Seite einrichten. 

 

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.