... | ... | @@ -140,7 +140,7 @@ Abbildung XX, XX: Home-Seite und Einstellungsseite der AmbientBox |
|
|
Das Frontend der AmbientBox wurde mithilfe des Frameworks Vue.js gestaltet und auf einem Node.js Server aufgesetzt. Bei der Umsetzung des Frontends, bestehend aus Home- und Einstellungsseite, wurde darauf Wert gelegt die Aufteilung und das Design der Mockups zu übernehmen, um eine intuitive Bedienung zu gewährleisten. Für die eingesetzten Icons wurde, wie beim Accelerator, die Bilbliothek von Font Awesome verwendet.\
|
|
|
Die Home-Seite der AmbientBox dient der aktiven Nutzung und Interaktion mit der AmbientBox. Neben Nutzerbild und Nutzername des verbundenen Nutzers werden, wie in den Mockups vorgesehen, die Nutzerstatus durch farbliche Icons abgebildet. Diese sind priorisiert, sodass bei Aktivierung mehrerer Status, der Status mit der höchsten Priorität zentral angezeigt wird und die weiteren in der linken Leiste, wie in Abbildung XX zu sehen. Ausnahme zu den anderen Nutzerstatus bilden das Mikrofon- und das Abwesenheitssymbol die gesondert und farblos in der rechten Leiste angezeigt werden. Aktiviert der Remote Nutzer seine Videoübertragung, wird diese anstelle des Nutzerbildes angezeigt.\
|
|
|
Mithilfe der Schalter und Regler auf der Einstellungsseite können die diversen Sensoren der AmbientBox aktiviert und deaktiviert werden, zudem können die Helligkeit bzw. die Lautstärke der LEDs und des Lautsprechers angepasst werden. Zusätzlich ist es den Nutzern möglich die AmbientBox mittels der dafür gekennzeichneten Schaltfläche mit einem verfügbaren WLAN-Netzwerk zu verbinden. Die Eingabe eines geforderten Passworts erfolgt mithilfe der eingebundenen virtuellen Tastatur. Neben den bereits genannten Funktionen haben die lokalen Nutzer zudem die Möglichkeit über die dafür vorgesehenen Schaltflächen den verbundenen remote Nutzer von der AmbientBox zu trennen und die AmbientBox herunterzufahren.\
|
|
|
Über den Node.js Server der AmbientBox findet der Informationsaustausch mit dem Accelerator und die Weiterleitung besagter Information an das VueJS-Frontend statt. Hierzu gehören Nutzerbild, Nutzername und Nutzerstatus die mittels socket.io kommuniziert werden, sowie Audio- und Video-Streams die mithilfe von WebRTC übertragen werden (genaueres in Kapitel X.X Schnittstellen). Neben der Informationsbeschaffung und -weitergabe, werden im Server Python-Prozesse gespawnt, welche die LED-Leiste entsprechend der Situation und Anforderungen zum Leuchten bringen (mehr hierzu unter Kapitel X.X Betriebssystem).\
|
|
|
Über den Node.js Server der AmbientBox findet der Informationsaustausch mit dem Accelerator und die Weiterleitung besagter Information an das VueJS-Frontend statt. Hierzu gehören Nutzerbild, Nutzername und Nutzerstatus die mittels socket.io kommuniziert werden, sowie Audio- und Video-Streams die mithilfe von WebRTC übertragen werden. Neben der Informationsbeschaffung und -weitergabe, wird im Server ein Python-Prozess wiederholt gespawnt, welcher die LED-Leiste entsprechend der Situation und Anforderungen zum Leuchten bringt.\
|
|
|
Der Python-Prozess zur Steuerung der LEDs benutzt hauptsächlich die rpi-ws281x Bibliothek. Durch diese lässt sich jede LED einzeln ansprechen und ein RGB-Wert übergeben werden. Die Helligkeit aller LEDs lässt sich bei der Ausführung des Skriptes setzen, allerdings lässt sich nicht die Helligkeit jeder LED einzeln ansprechen. Die beim Ausführen des Skriptes übergebenen Parameter geben zum einen den Farbton und falls zusprechend das auszuführende Muster an. Der zweite Parameter gibt die Helligkeit in Form einer Zahl von 1-100 an, welche vom Skript in eine Zahl zwischen null und 255, der Maximalhelligkeit der LEDs, umgerechnet wird.
|
|
|
|
|
|
| Status | Standardhelligkeit | RGB-Werte | Muster |
|
... | ... | @@ -466,4 +466,14 @@ Soll die AmbientBox heruntergefahren werden, muss auf das Ausschalten Icon auf d |
|
|
|
|
|
# Lizenzen der verwendeten Software
|
|
|
|
|
|
Dank der Verwendung von Vue.js konnten bei der AmbientBox sowohl im Backend als auch im Frontend Packages installiert werden. Folgend sind die Lizenzen der verwendeten Packages tabellarisch dargestellt.\
|
|
|
Mit dem Befehl _npx license-checker --summary_ wurden die Anzahl der Packages mit den jeweiligen Lizenzen aufgelistet. Mit dem Befehl _npx license-compatibility-checker_ konnten die Packages identifiziert werden, die potenziell problematisch bezüglich der Lizenz sein könnten. In den untenstehenden Tabellen sind die Packages aufgelistet, die mit einer Warnung versehen waren. Bei genauerer Recherche wurde festgestellt, dass sämtliche Packages mit unbedenklichen Lizenzen gekennzeichnet sind.
|
|
|
|
|
|
**Backend**
|
|
|
_npx license-checker --summary_
|
|
|
| Lizenz | Häufigkeit |
|
|
|
| ------ | ------ |
|
|
|
| cell | cell |
|
|
|
| cell | cell |
|
|
|
|
|
|
# Fazit und Ausblick |
|
|
\ No newline at end of file |