... | @@ -114,10 +114,10 @@ Abbildung XX, XX: Variante 1 und 2 der Systemskizze des Hardwareprototyps |
... | @@ -114,10 +114,10 @@ Abbildung XX, XX: Variante 1 und 2 der Systemskizze des Hardwareprototyps |
|
 \
|
|
 \
|
|
Abbildung XX, XX: Home-Seite und Einstellungsseite der AmbientBox
|
|
Abbildung XX, XX: Home-Seite und Einstellungsseite der AmbientBox
|
|
|
|
|
|
Das Frontend der AmbientBox wurde mithilfe des Frameworks VueJS gestaltet und auf einem nodeJS 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.\
|
|
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.\
|
|
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.\
|
|
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 NodeJS 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 (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).
|
|
|
|
|
|
## Betriebssystem
|
|
## Betriebssystem
|
|
|
|
|
... | | ... | |