Als nächstes werden wir die App zur Steuerung der Smart Clock erstellen. Das werden wir mithilfe des MIT App Inventors umsetzen.
Das ist eine Website, bei welcher man mit Hilfe von Drag and Drop Bausteinen eine eigene App entwickeln kann.
Wenn ihr die Seite geöffnet habt, klickt ihr zuerst oben Links auf „Create Apps“ und erstellt eine neu App.



Wenn ihr dann im Entwicklungsmodus seid, habt ihr oben rechts die Auswahl zwischen Designer und Blocks. Wie der Name schon sagt, könnt ihr bei Designer eure App gestalten, bei Blocks hingegen könnt ihr die Funktionen programmieren.

Wir fangen mit dem Designer an. Dafür fügt ihr 3 Horizontal Arrangements ein. Diese findet ihr auf der linken Seite unter  „Layout“.
Die dient dazu, dass alle Objekte wie Knöpfe, Labels usw. richtig angeordnet werden. Danach fügt ihr im ersten Horizontal Arrangement ein „Label“ ein. Dieses findet ihr links unter User Interface.

Auf der rechten Seite findet ihr dann eure „Components“. Darunter solltet ihr jetzt euer Label sehen, wenn ihr nun auf label1 klickt, könnt rechts neben „Components“ unter „Properties“ einen Text für das Label eingeben. Hier schreibt ihr T1 smart clock rein, das ist einfach  nur der Name der App. Unter Properties könnt ihr auch Dinge wie Textgröße, Farbe und Textposition festlegen, ob ihr das tun möchtet, ist euch selbst überlassen.

Fügt danach auch alle weiteren Objekte, so wie auf dem Bild gezeigt, ein. Hierbei is es wichtig, dass ihr die Objekte richtig benennt und auch im richtigen Horizontal Arrangement einfügt.

Zum Schluss fügt ihr noch eine Clock und einen Bluetooth Client hinzu. Die Clock findet ihr auf der linken Seite unter Sensors, diese müsst ihr einfach nur zum angezeigten Handybildschirm ziehen.
Dabei ist es egal wo hin, da diese beiden Elemente unsichtbar sind. Das gleiche macht ihr dann mit dem Bluetooth Client, welchen ihr unter Connectivity findet. Wenn ihr möchtet, könnt ihr das Design also Schriftgrößen, Farben und Größen der einzelnen Elemente noch bearbeiten.

Das war’s dann erstmal im Designer, jetzt machen wir mit den Blocks weiter.

     


Wie ihr auf dem Bild sehen könnt, ist der „Code“ für diese App sehr simpel. Der erste Block ist für den „Connect“ Button. Wenn dieser geklickt wird, stellt das Handy eine Verbindung mit dem ESP32 her.
Dafür müsst ihr die Mac Adresse und den Namen eures ESP32 angeben. Da ihr diese noch nicht habt, könnt ihr das erstmal frei lassen. Später zeige ich euch, wie ihr diese bekommt.
Der zweite Block ist für den Send Button, wenn dieser geklickt wird, wird der Inhalt der TextBox an das verbundene Gerät gesendet.
Ihr könnt die Blocks jetzt einfach so, wie sie auf dem Bild zu sehen sind, nachbauen.
Die einzelnen Bausteine findet ihr rechts unter Blocks. Oben unter „Control“, „Logic“ usw. findet ihr einige Standardbausteine. Darunter könnt ihr eure Components vom Designer sehen, wenn ihr auf diese geht, findet ihr noch einige Bausteine speziell für dieses Element.

Benötigte Bausteine:
1.   Den „when connect“ Baustein findet ihr unter „connect“.
2.  „set status“ findet ihr unter „status“.
3.  „call BluetoothClient1“ unter „BluetoothClient1“.
4.  Das Feld für die Mac Adresse ist eine einfache TextBox, welche ihr unter „Text“ findet
5.  „when send“ findet ihr dann unter „send“
6.  und „TextBox1.text“ unter „TextBox1“

Um die App zu nutzen, müsst ihr zuerst die "App inventor " App auf dem Smartphone installieren. Wenn ihr diese öffnet, habt ihr die Möglichkeit, einen QR Code zu scannen oder einen Code einzugeben. Beides findet ihr auf der Website unter Connect --> AI Companion.


Zuletzt geändert: Freitag, 10. September 2021, 15:33