Nachdem wir in Teil 1 vor allem die Hardwarekomponenten unseres Smart Mirrors beschrieben haben, widmen wir uns in diesem Post der Software.
Hier fühlten wir uns ganz zuhause. Allerdings gab es natürlich auch hier einige Tücken, die wir so nicht vorausgesehen hätten. Vor allem das Ansprechen des Bewegungssensors in C war nicht ganz einfach.
Die Software des Spiegels ist eine Web App, die in einem Browserfenster im Vollbildmodus ausgeführt wird. Die Web App besteht aus einem Python/Flask Backend mit einer in C geschriebenen Steuersoftware für den Bewegungssensor und einem mit React implementierten Frontend.
Das Frontend
Die Benutzeroberfläche (UI) des Spiegels ist ähnlich wie ein Dashboard aufgebaut. Hierbei haben wir für unseren täglichen Agenturbetrieb ein Konzept mit hilfreichen Informationen erarbeitet. Aktuell zweigen wir auf unserem Spiegel folgende Informationen:
Aufgrund der Oberfläche, die aus verschiedenen Komponenten besteht, haben wir uns für das komponentenorientierte React entschieden. Jede der “Kacheln” wurde mit einer React Komponente abgebildet.
Die Wetter-Komponente greift hierbei auf die Wetter-API von Open Weather Map zurück.
Die Datum- und Uhrzeitkomponente wurde mit Hilfe der ausgezeichneten Library MomentJS entwickelt. Diese können wir für alle Anwendungsfälle, bei denen man in JavaScript mit Daten oder Uhrzeiten hantieren muss, nur wärmstens empfehlen.
Die Mensa Komponente greift auf eine Schnittstelle zu, die vom Studierendenwerk der Universität Koblenz bereit gestellt wird.
Für das Anzeigen der aktuellen und kommenden Belegung unseres Meetingraumes wird in Verbindung mit OAuth2 auf die Microsoft Graph API zugegriffen, die auf den Kalender unseres Office 365 Konto zugreift.
Die Buslinien werden über eine interne, aktuell nur offline verfügbare Datenbank der EVM Buslinen für den Stadtbereich Koblenz abgerufen.
Das Backend
Um die API für das Frontend konsistent zu halten, agiert das Backend der Anwendung als eine Art Facade für Zugriffe auf die externen APIs. So können die Daten im Backend aufbereitet und in einer einheitlichen Form an die React Komponenten ausgeliefert werden.
Eine Besonderheit stellt hier die Microsoft Graph API dar, die als einzige der verwendeten Schnittstellen mit einer Authentifizierung über OAuth2 gesichert ist. Für einen sicheren und dauerhaften Zugriff auf die Microsoft Graph API wird nach Abruf des ersten Access Tokens das Refresh Token im Backend gespeichert, um nach Auslaufen des aktuellen Access Tokens ein “frisches” Access Token ohne erneute Eingabe der Benutzerdaten zu erhalten.
Um die UI des Spiegels steuern zu können, haben wir den Bewegungssensor SparkFun RGB and Gesture Sensor — APDS-9960 verbaut, dieser kommuniziert über eine Art Brücke, welche in C programmiert wurde über die GPIOs des Raspberry Pi mit dem Backend des Spiegels, welcher die Eingaben des Users über Websockets an die UI weiter gibt. Es ist wichtig zu bemerken, dass der Sensor nicht in den Rahmen eingelassen werden kann, da sonst Bewegungen falsch oder gar nicht erkannt werden. Dies sollte vor Bau den Rahmens bedacht werden.
Geplante Features
-
App: Die Fernsteuerung über eine Web oder Smartphone App ist schon prototypisch umgesetzt. Man kann mit der ersten Version der SmartMirror Remote, die wir in React Native entwickelt haben, Nachrichten auf den Spiegel senden.
-
Kamera: Man könnte z.B. über eine Kamera und Gesichtserkennung die UI anpassen oder sogar steuern.
-
Lautsprecher und Mikrofon: Über Sprachbefehle und mit Hilfe von Spracherkennungsdiensten, wie z.B. die Microsoft Azure Voice Recognition API könnte die Software Befehle entgegen nehmen.
Fazit
Die Umsetzung des Smart Mirror Projektes hat nicht nur Spaß gemacht, sondern hatte für uns auch einen wichtigen Weiterbildungshintergrund. Das Thema IoT wird immer wichtiger und da der Fokus unserer Agentur auf der Entwicklung von Anwendungen mit modernen Technologien liegt, konnten wir uns für zukünftige spannende Kundenprojekte mit eben diesen modernen Technologien auseinander setzen.
Ähnliche Artikel
