Lösung Units Use Case 3
Der Krisen-Anwendungsfall betrifft ein Inhouse-Krisenmanagementsystem welches zusätzlich über eine mobile Applikation kontrolliert werden kann. Er erlaubt, Informationen über Räume zu erhalten und informiert zu werden, wenn festgelegte Grenzen durchschritten werden. Egal ob junge Erwachsene oder besorgte Eltern, der Wunsch das eigene Haus in Sicherheit zu wissen und benachrichtigt zu werden, wenn es notwendig wird, ist bei jedem vorhanden. Das Krisenmanagementsystem zeigt die Installation der erforderlichen physischen Geräte und die Programmierung des Krisenmanagementsystems..
Es gibt zwei Versionen des Krisenmanagementsystems, einmal mit den Units Laser RX und TX und einmal mit der Licht Unit. Der Code und der M5Stack mit seinen zusammengesteckten Komponenten müssen demzufolge von derselben Version sein.
M5Stack einschalten und am Computersystem mit dem USB-C-Kabel anstecken. Danach in den USB Mode setzen.
Der Grove-Hub mit dem angeschlossenen Grove-Kabel, wird an Port A des M5Stack angeschlossen.
Den Environment Sensor mit dem angeschlossenen Grove- Kabel an den Grove-Hub anstecken.
Den Pb.Hub mit dem angeschlossenen Grove- Kabel an den Grove-Hub anstecken.
Die Motion-Sensor Unit mit dem angeschlossenen Grove-Kabel an den Pb.Hub anschließen. (Achtung: Es ist unbedingt notwendig, dass diese Unit an den Steckplatz 0 angeschlossen wird. Die Steckplätze sind alle auf der Unit nummeriert.)
Das Ergebnis soll so aussehen:
Der Grove-Hub mit dem angeschlossenen Grove-Kabel wird an Port B des M5Stack angeschlossen.
Laser TX Unit und Laser RX Unit mit dem angeschlossenen Grove-Kabel an den Grove-Hub anschließen.
Statt des Laser TX und Laser RX wird ein Light Modul eingesetzt.
Die Light Unit mit dem angeschlossenen Grove-Kabel an den Pb.Hub anschließen. (Achtung: Es ist unbedingt notwendig, dass diese Unit an den Steckplatz 1 angeschlossen wird. Die Steckplätze sind alle auf der Unit nummeriert.)
Das Ergebnis soll so aussehen:
Version 1
Version 2
Lösung Komponenten mittels App Inventor
Sobald alle Units korrekt angesteckt wurden und der Python Code in UIFlow hinzugefügt wurde, geht es im nächsten Schritt um die Erstellung der mobilen Applikation.
Zuerst müssen die benötigten Komponenten in MIT App Inventor hinzugefügt werden. Wie auf der Seite Einführung MIT App Inventor erwähnt, geht man dafür auf die angezeigten Komponenten im Paletten Bereich, um eine Auflistung aller vorhandenen Komponenten zu erhalten. Für Version 1 und Version 2 ist der Aufbau der mobilen Applikation gleich.
Hier zu sehen ist eine Auflistung aller Komponenten vom “User Interface”, sowie die weiteren Metakategorien
Anschließend wählt man die gewünschte Komponente aus und fügt diese durch Drag-and-Drop auf die Benutzeroberfläche hinzu. Für das Krisenmanagementsystem empfiehlt es sich, mit dem „HorizontalArrangement“ im „Layout“ Bereich zu beginnen. Allerdings spielt die Reihenfolge, in der die Komponenten hinzugefügt werden, keine Rolle.
Hier zu sehen sind alle für das Krisenmanagementsystem benötigten Komponenten:
Wie bereits auf der Seite Einführung MIT App Inventor erklärt, wird eine Komponente per Drag-and-Drop auf die Oberfläche gezogen. Danach ist es notwendig, der neu erstellten Komponente einen passenden Namen zu geben, um diese später ansprechen zu können. In den nächsten Seiten werden zudem die notwendigen Eigenschaften (Properties) von den benötigten Komponenten aufgezeigt. Damit wird sichergestellt, dass alle Einstellungen korrekt vorgenommen werden und die mobile Applikation am Ende erfolgreich ausgeführt wird.
Die erste Komponente, die hinzugefügt wird, ist „HorizontalArrangement“. Die Eigenschaften sowie der Name der Komponente sind hier dargestellt.
Anschließend wählen wir die Texting Komponente unter im Panel auf der linken Seite unter „Social“ aus und ziehen diese Komponente auf die bereits existierende Komponente „HorizontalArrangement1“. Hierbei ist es wichtig zu gewährleisten, dass die Texting Komponente korrekt abgelegt wird. Diese ist dann korrekt abgelegt, wenn in der Ansicht die neue Komponente etwas Rechts eingerückt dargestellt wird wie in der nächsten Abbildung zu sehen ist.
Nachdem die Komponente erfolgreich hinzugefügt wurde, erhält diese den Namen „serverURL“. Die Eigenschaften sind wie folgt einzutragen:
Hierbei ist anzumerken, dass als „Text“ die IP-Adresse eingegeben werden soll, die vom M5Stack erstellt wird. Diese wird am LCD-Display vom M5Stack angezeigt. Ein Beispiel könnte folgend aussehen: http://192.168.8.107/api/v1.0/level. Um mit der IP-Adresse weiter arbeiten zu können, ist es wichtig, dass sich der M5Stack im selben Netzwerk befindet, wie das Endgerät für die App. Wie der M5Stack mit einem bestimmten Netzwerk verbunden wird, ist in Kapitel 4.1 zu sehen.
Eine erfolgreiche IP-VErbindung wird folgendermaßen signalisiert:
Ähnlich wie zur Texting Komponente, wird ein neuer Button namens „goButton“ hinzufügt. Dieser sollte folgende Eigenschaften aufweisen:
Die nächste Komponente ist eine CheckBox namens „liveCheckBox“ mit folgenden Eigenschaften.
Diese Komponente ermöglicht eine Auswahl zur durchgehenden (wiederholten) Datenübertragung vom M5Stack zur App oder einer einmaligen.
Die nächste Komponente ist optional, da sie nur optisch einen Vorteil bewirkt. Wir fügen ein Bild hinzu, um die Übersicht später zu verbessern namens „lineImage“. Wie unter Media bereits erwähnt, fügen wir ein Bild hinzu. Hierbei handelt es sich um einen kleinen dünnen Strich, wie im unteren Bild zu sehen ist.
Diese Komponente sollte folgende Eigenschaften besitzen:
Als nächstes fügen wir eine ListView Komponente namens „bioDataList“ hinzu. Durch diese Liste werden die Informationen vom M5Stack gespeichert und für uns lesbar ausgegeben. Die Eigenschaften werden in der unteren Abbildung gezeigt.
Die nächste Komponente ist ein Label namens „ProjectName“. Die Eigenschaften werden wieder in der nächsten Abbildung angezeigt.
Eine weitere wichtige Komponente ist ein Notifier, namens „msgNotifier“ mit folgenden Eigenschaften.
Die vorletzte Komponente ist eine Web Komponente namens „webComponent“. Diese ermöglicht der Applikation eine Internetverbindung aufzubauen.
Die letzte Komponente ist eine Clock namens „timerClock“ mit folgenden Eigenschaften.
