UI des Smart Mirrors

Wie wir unseren Smart Mirror gebaut haben — Teil 2/2 — Software

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:

UI des Smart Mirrors
UI des Smart Mirrors


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.

 

 

Wenn dir dieser Beitrag gefallen hat, melde dich jetzt für unseren Digital Letter an! Auf diesem Weg bekommst du regelmäßig unsere spannendsten Blogbeiträge, nützliche Fachartikel und interessante Events rund um Digitalisierung, IoT, New Work und vieles mehr!

 

Hier geht’s zur Anmeldung

 

Back to Blog

Related Articles

Mit App-Marketing steigerst du die Performance deiner App!

Für die Steigerung der App-Downloads sind Kampagnen mit App-Installations-Anzeigen die effektivste...

Apps mit JavaScript: Ein Status-Update zu hybriden Apps

JavaScript zählt heutzutage zu einer der beliebtesten Programmiersprachen. Längst findet...

Mütter- und Väterberatung: Vorreiter in der digitalen Verwaltung

Digitale Prozessoptimierung ist mehr als eine neue Technologie. Die Digitalisierung bedeutet für...
v