... | ... | @@ -47,16 +47,16 @@ Beim Arbeitspaket der **Entwicklung** wurde verdeutlicht aus welchen Komponenten |
|
|
Die **Dokumentation** besteht aus der anfänglichen Projektplanung, die Projektdokumentation im Wiki des Accelerators und die Vorbereitung und Durchführung der Abschlusspräsentation.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Projektstrukturplan
|
|
|
Abbildung 1: Projektstrukturplan
|
|
|
|
|
|
Im unten zu sehenden Gantt-Diagramm wird dargestellt, wie der zeitliche Ablauf unseres Projekts geplant war, in welchem Zeitraum die aufgeführten Arbeitspakete abzuarbeiten waren und zu welchen Zeitpunkten die aufgestellten Meilensteine erreicht werden sollten. Der Zeitplan konnte bei der Durchführung des Projekts größtenteils eingehalten werden. Lediglich die Entwicklungsphase hat etwas mehr Zeit in Anspruch genommen als geplant, das konnte jedoch kompensiert werden, da weniger Zeit für Systemtests benötigt wurde als geplant und der Projektabschluss um eine Woche nach hinten verlegt wurde.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Gantt-Diagramm
|
|
|
Abbildung 2: Gantt-Diagramm
|
|
|
|
|
|
## Use Cases
|
|
|
|
|
|
Die Use Cases für dieses Projekt wurden, wie in Tabelle XX zu sehen, in zwei Kategorien unterteilt. Die Use Cases beim Accelerator beschreiben die Use Cases die aus Sicht des/der remote-zugeschalteten NutzerIn, welcher/welche über dem Accelerator mit der AmbientBox verbunden ist, erfüllt werden müssen, während die Use Cases bei der AmbientBox solche Use Cases beschreiben, die aus Sicht der lokalen NutzerInnen, die durch Interaktion mit der AmbientBox mit dem/der remote-zugeschalteten NutzerIn kommunizieren, realisiert werden müssen.\
|
|
|
Die Use Cases für dieses Projekt wurden, wie in Tabelle 1 zu sehen, in zwei Kategorien unterteilt. Die Use Cases beim Accelerator beschreiben die Use Cases die aus Sicht des/der remote-zugeschalteten NutzerIn, welcher/welche über dem Accelerator mit der AmbientBox verbunden ist, erfüllt werden müssen, während die Use Cases bei der AmbientBox solche Use Cases beschreiben, die aus Sicht der lokalen NutzerInnen, die durch Interaktion mit der AmbientBox mit dem/der remote-zugeschalteten NutzerIn kommunizieren, realisiert werden müssen.\
|
|
|
Die Priorität der Use Cases (1 – hohe Priorität bis 4 – niedrige Priorität) hat festgelegt in welche Reihenfolge die Use Cases abzuarbeiten sind, sollten nicht alle Use Cases erfüllt werden können. Nach Projektabschluss waren jedoch alle Use Cases umgesetzt.
|
|
|
|
|
|
| Bezeichnung | Use Case | Priorität |
|
... | ... | @@ -78,31 +78,31 @@ Die Priorität der Use Cases (1 – hohe Priorität bis 4 – niedrige Prioritä |
|
|
| **UC13** | Der/Die lokale NutzerIn möchte Einstellungen vornehmen, um das Mikrofon der AmbientBox umzuschalten. | 3 |
|
|
|
| **UC14** | Der/Die lokale NutzerIn möchte Einstellungen vornehmen, um die Kamera der AmbientBox umzuschalten. | 3 |
|
|
|
|
|
|
Tabelle XX: Use Cases
|
|
|
Tabelle 1: Use Cases
|
|
|
|
|
|
# Mockups und Systemskizzen
|
|
|
|
|
|
In den folgenden Mockups wird die geplante Benutzerschnittstelle der AmbientBox dargestellt. Das Design ist sehr einfach gehalten, um die Bedienung der AmbientBox möglichst intuitiv zu gestalten. Die Schnittstelle besteht aus zwei Oberflächen; die Home-Seite und die Einstellungsseite. Auf der Home-Seite wird das Nutzerbild und der Nutzername der verbundenen Person abgebildet, zudem werden hier sämtliche im Accelerator durchführbare Nutzeraktionen mithilfe von Icons und Farben dargestellt, welche die jeweilige Nutzeraktion widerspiegeln. Durch Klicken auf das im oberen Eck befindliche Zahnrädchen gelangt man auf die Einstellungsseite. Hier ist es den NutzernInnen unter anderem möglich unterschiedliche Konfigurationen an den Sensoren der Box vorzunehmen und die Box mit verfügbaren WLAN-Netzwerken zu verbinden.
|
|
|
|
|
|
  \
|
|
|
Abbildungen XX, XX, XX: Mockups des Startbildschirms, der Einstellungsseite und eines Angezeigten Nutzerstatus
|
|
|
Abbildungen 3, 4, 5: Mockups des Startbildschirms, der Einstellungsseite und eines Angezeigten Nutzerstatus
|
|
|
|
|
|
Neben der Gestaltung der Oberfläche der AmbientBox bedarf es auch eine Anpassung der GUI des Accelerators. In den unten eingefügten Mockups ist zu sehen, dass in der unteren rechten Ecke ein zusätzlicher Button eingefügt wird, um den Raum mit einer aktiven AmbientBox zu verbinden. Wird eine Verknüpfung zu einer AmbientBox hergestellt, kann sich ein beliebiger Nutzer im Raum, wie abgebildet, mit der Box verbinden.
|
|
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (1)
|
|
|
 Abbildung 6: Auswahl einer verfügbaren AmbientBox (1)
|
|
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (2)
|
|
|
 Abbildung 7: Auswahl einer verfügbaren AmbientBox (2)
|
|
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (3)
|
|
|
 Abbildung 8: Auswahl einer verfügbaren AmbientBox (3)
|
|
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (4)
|
|
|
 Abbildung 9: Auswahl einer verfügbaren AmbientBox (4)
|
|
|
|
|
|
 Abbildung XX: Interaktion mit der AmbientBox
|
|
|
 Abbildung 10: Interaktion mit der AmbientBox
|
|
|
|
|
|
Da auch ein Hardwareprototyp entwickelt werden muss, wurden hierfür auch Systemskizzen angefertigt. Hierbei haben sich zwei Möglichkeiten herauskristallisiert, die in den folgenden Abbildungen zu sehen sind. Beide Systemskizzen besitzen Bildschirm, Mikrofon, Kamera, Lautsprecher und LEDs, welche die Schnittstellen bilden, anhand dessen die Nutzer mit der AmbientBox interagieren können. Unterschieden werden die Systemskizzen durch die Positionierung des Bildschirms und des Lautsprechers. Bei der späteren Umsetzung haben wir uns für die Variante entschieden, bei der sich der Bildschirm auf der Oberseite der Box befindet, da hierdurch die Bedienung des Bildschirms mit Touch-Funktionalität erleichtert wird.
|
|
|
|
|
|
 \
|
|
|
Abbildung XX, XX: Variante 1 und 2 der Systemskizze des Hardwareprototyps
|
|
|
Abbildungen 11, 12: Variante 1 und 2 der Systemskizze des Hardwareprototyps
|
|
|
|
|
|
# Verwendete Hardware
|
|
|
|
... | ... | @@ -124,7 +124,7 @@ Nachfolgend ist die gesamte Hardware aufgelistet, welche für das Projekt verwen |
|
|
|  | USB-Kamera | Aufnahme der GesprächsteilnehmerInnen | [Amazon](https://www.amazon.de/-/en/dp/B07DKLZSZV/ref=sr_1_3?crid=3TY553BI87U24&keywords=egalbest+Mini+USB&qid=1657207620&sprefix=egalbest+mini+usb%2Caps%2C56&sr=8-3) |
|
|
|
|  | USB-Mikrofon | Aufnahme des Tons der GesprächsteilnehmerInnen | [Amazon](https://www.amazon.de/-/en/Microphone-Omnidirectional-Capacitor-Interviews-Recording/dp/B071171DBP/ref=psdc_430209031_t3_B08XQ4XKWF) |
|
|
|
|
|
|
Tabelle XX: Im Hardware-Prototypen verwendete Hardware-Komponenten
|
|
|
Tabelle 2: Im Hardware-Prototypen verwendete Hardware-Komponenten
|
|
|
|
|
|
# AmbientBox
|
|
|
|
... | ... | @@ -132,17 +132,17 @@ In den nachfolgenden Kapiteln wird die Umsetzung der AmbientBox genauer beschrie |
|
|
|
|
|
## Architektur
|
|
|
|
|
|
Das Kernstück der AmbientBox bildet ein Raspberry Pi. Auf diesem werden die Software-Komponenten der AmbientBox ausgeführt. Dies umfasst einen Backend-Server, Python-Childprozesse und eine Webapplikation. Der Backend-Server ist über eine Socket-Verbindung mit dem Accelerator verbunden. Über einen Middleware-Router und einen Socket-Server kommuniziert dieser ebenfalls mit der Webapplikaton, welche das UI der AmbientBox bildet. Über die Webapplikation findet die WebRTC-Kommunikation, sowie die Konfiguration der Hardware statt. Dafür werden eine Kamera, ein Mikrofon und ein Lautsprecher angesprochen. Das Backend verwendet zudem zur Darstellung von unterschiedlichem Status der AmbientBox eine LED-Anzeige. Diese wird mit Python-Childprozessen angesprochen. Zusätzliche Komponenten des Systems sind eine Powerbank, mit welcher der Raspberry Pi betrieben wird und ein Bildschirm, über welchen die Ausgabe des Frontends visualisiert wird. In Abbildung X ist diese Architektur zu sehen.
|
|
|
Das Kernstück der AmbientBox bildet ein Raspberry Pi. Auf diesem werden die Software-Komponenten der AmbientBox ausgeführt. Dies umfasst einen Backend-Server, Python-Childprozesse und eine Webapplikation. Der Backend-Server ist über eine Socket-Verbindung mit dem Accelerator verbunden. Über einen Middleware-Router und einen Socket-Server kommuniziert dieser ebenfalls mit der Webapplikaton, welche das UI der AmbientBox bildet. Über die Webapplikation findet die WebRTC-Kommunikation, sowie die Konfiguration der Hardware statt. Dafür werden eine Kamera, ein Mikrofon und ein Lautsprecher angesprochen. Das Backend verwendet zudem zur Darstellung von unterschiedlichem Status der AmbientBox eine LED-Anzeige. Diese wird mit Python-Childprozessen angesprochen. Zusätzliche Komponenten des Systems sind eine Powerbank, mit welcher der Raspberry Pi betrieben wird und ein Bildschirm, über welchen die Ausgabe des Frontends visualisiert wird. In Abbildung 13 ist diese Architektur zu sehen.
|
|
|
|
|
|
 Abbildung X: Systemübersicht der AmbientBox
|
|
|
 Abbildung 13: Systemübersicht der AmbientBox
|
|
|
|
|
|
## Frontend und Backend
|
|
|
|
|
|
 \
|
|
|
Abbildung XX, XX: Home-Seite und Einstellungsseite der AmbientBox
|
|
|
Abbildungen 14, 15: 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 Bibliothek von Font Awesome verwendet.\
|
|
|
Die Home-Seite dient der aktiven Nutzung und Interaktion mit der AmbientBox. Neben Nutzerbild und Nutzername des/der verbundenen NutzerIn 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, welche gesondert und farblos in der rechten Leiste angezeigt werden. Aktiviert der/die remote-zugeschaltete NutzerIn seine Videoübertragung, wird diese anstelle des Nutzerbildes angezeigt.\
|
|
|
Die Home-Seite dient der aktiven Nutzung und Interaktion mit der AmbientBox. Neben Nutzerbild und Nutzername des/der verbundenen NutzerIn 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 34 zu sehen. Ausnahme zu den anderen Nutzerstatus bilden das Mikrofon- und das Abwesenheitssymbol, welche gesondert und farblos in der rechten Leiste angezeigt werden. Aktiviert der/die remote-zugeschaltete NutzerIn 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 NutzerInnen 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 NutzerInnen zudem die Möglichkeit über die dafür vorgesehenen Schaltflächen den/die remote-zugeschaltete NutzerIn 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 Vue.js-Frontend statt. Hierzu gehören Nutzerbild, Nutzername, Nutzerstatus und Raumname die mittels Socket.io kommuniziert werden. Audio- und Video-Streams werden mithilfe von WebRTC direkt im Frontend übertragen. Neben der Informationsbeschaffung und -weitergabe wird im Server ein Python-Prozess wiederholt erstellt, 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 (Maximalhelligkeit der LEDs) umgerechnet wird. Die Berechnung der verwendeten Helligkeit und die Statusauflösung sind auf die folgenden Codeabschnitte zurückzuführen:
|
... | ... | @@ -174,7 +174,7 @@ function setLEDs() { |
|
|
```
|
|
|
|
|
|
Der displayLEDs-Funktion kann ein Status und eine Helligkeit übergeben werden. Wenn ein Status vorhanden ist, wird dieser verwendet, ansonsten wird die setLEDs-Funktion aufgerufen, welche aus dem aktiven Nutzerstatus den aktuellen LED-Status bestimmt. Hier wird auch die Priorität des Nutzerstatus festgelegt.
|
|
|
Die Helligkeit hat einen Standardwert von 50%. Wenn ein Wert übergeben wird, oder ein Wert in den Nutzereinstellungen vorhanden ist, wird dieser anstelle des Standards verwendet. Zusätzlich wird ein Modifikator für die Helligkeit berechnet. Dieser wird durch ein aktives Mikrofon oder dem Silence-Status beeinflusst. Die Helligkeit wird daraufhin mit dem Modifikator verrechnet, wobei diese auf maximal 100% gesetzt werden kann. In Tabelle X werden die Möglichen Darstellung der LED gezeigt.
|
|
|
Die Helligkeit hat einen Standardwert von 50%. Wenn ein Wert übergeben wird, oder ein Wert in den Nutzereinstellungen vorhanden ist, wird dieser anstelle des Standards verwendet. Zusätzlich wird ein Modifikator für die Helligkeit berechnet. Dieser wird durch ein aktives Mikrofon oder dem Silence-Status beeinflusst. Die Helligkeit wird daraufhin mit dem Modifikator verrechnet, wobei diese auf maximal 100% gesetzt werden kann. In Tabelle 3 werden die Möglichen Darstellung der LED gezeigt.
|
|
|
|
|
|
| Status | Standardhelligkeit | RGB-Werte | Muster |
|
|
|
| ------ | ------------------ | --------- | ------ |
|
... | ... | @@ -191,7 +191,7 @@ Die Helligkeit hat einen Standardwert von 50%. Wenn ein Wert übergeben wird, od |
|
|
| Ausschalten (Shutdown) | 0% | 0, 0, 0 | kein Leuchten |
|
|
|
|
|
|
|
|
|
Tabelle XX: LED-Reaktionen auf unterschiedliche Statusmeldungen
|
|
|
Tabelle 3: LED-Reaktionen auf unterschiedliche Statusmeldungen
|
|
|
|
|
|
## Betriebssystem
|
|
|
|
... | ... | @@ -214,18 +214,18 @@ Die AmbientBox ist mit der Powerbank über ein Kabel verbunden, welches einen ph |
|
|
Zuletzt verfügt die AmbientBox noch über eine portable USB-Kamera. Diese verfügt über ein einfahrbares Kabel, welche gut zu dem Projekt gepasst hat. Sie nimmt mit einer Auflösung von 640x480 Pixeln auf und erlaubt es der nutzenden Person der AmbientBox die anderen GesprächsteilnehmerInnen gut zu sehen. Nachfolgend sind ein paar Bilder der Hardware im Entstehungsprozess und als finaler Prototyp zu sehen.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Der AmbientBox Hardware-Prototyp während der Konstruktion
|
|
|
Abbildung 16: Der AmbientBox Hardware-Prototyp während der Konstruktion
|
|
|
|
|
|

|
|
|
Abbildung XX: Das Innenleben des AmbientBox Hardware-Prototypen
|
|
|
Abbildung 17: Das Innenleben des AmbientBox Hardware-Prototypen
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Der AmbientBox Hardware-Prototyp im Betrieb
|
|
|
Abbildung 18: Der AmbientBox Hardware-Prototyp im Betrieb
|
|
|
|
|
|
In Abbildung XX ist zu sehen, wie die Verkabelung der Komponente innerhalb der Box aussieht. Der Bildschirm benutzt von oben bis unten die ersten 13 Pins auf beiden Seiten des Pis. Die LED-Leiste benötigt einen fünf Volt Pin, einen GPIO Pin (standardmäßig 18) und einen Ground Pin. Zusätzlich sind über die USB-Anschlüsse das Mikrofon, der Lautsprecher, die Kamera und das USB-Verlängerungskabel angeschlossen. Der Mikro-USB-Anschluss wird für die Stromzufuhr des Raspberry Pis genutzt.
|
|
|
In Abbildung 19 ist zu sehen, wie die Verkabelung der Komponente innerhalb der Box aussieht. Der Bildschirm benutzt von oben bis unten die ersten 13 Pins auf beiden Seiten des Pis. Die LED-Leiste benötigt einen fünf Volt Pin, einen GPIO Pin (standardmäßig 18) und einen Ground Pin. Zusätzlich sind über die USB-Anschlüsse das Mikrofon, der Lautsprecher, die Kamera und das USB-Verlängerungskabel angeschlossen. Der Mikro-USB-Anschluss wird für die Stromzufuhr des Raspberry Pis genutzt.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Die Verkabelung des Pis mit dem Bildschirm und der LED-Leiste
|
|
|
Abbildung 19: Die Verkabelung des Pis mit dem Bildschirm und der LED-Leiste
|
|
|
|
|
|
# Schnittstellen
|
|
|
|
... | ... | @@ -236,7 +236,7 @@ Die Kommunikation zwischen der AmbientBox und dem Accelerator erfolgt ebenso wie |
|
|
Das Backend der AmbientBox setzt sowohl einen Socket.io-Client als auch -Server um. Der Server dient zur Kommunikation zwischen dem AmbientBox-Backend und -Frontend. Die hauptsächliche Aufgabe besteht dabei bei der Weiterleitung von Verbindungsinformationen und Nutzerevents von Seiten des Accelerator und der AmbientBox.\
|
|
|
Die Client-Verbindung zielt auf die Anbindung zwischen den beiden Systemen ab. In der nachfolgenden Abbildung ist der Ablauf eines Verbindungsaufbaus zwischen den beiden Systemen zu sehen.
|
|
|
|
|
|
 Abbildung X: Verbindungsaufbau zwischen der AmbientBox und dem Accelerator
|
|
|
 Abbildung 20: Verbindungsaufbau zwischen der AmbientBox und dem Accelerator
|
|
|
|
|
|
Wenn die AmbientBox angeschaltet wird, wird nach der Initialisierung von unterschiedlichen Socket-Listenern eine Verbindungsanfrage an den Accelerator gesendet. Der Accelerator initialisiert ebenfalls zu Beginn der Laufzeit Socket-Listener. Nachfolgend sind die relevanten Listener-Events der AmbientBox und des Accelerators aufgelistet:
|
|
|
|
... | ... | @@ -252,7 +252,7 @@ Wenn die AmbientBox angeschaltet wird, wird nach der Initialisierung von untersc |
|
|
| connect_timeout | Erfasst Verbindungsüberschreitungen |
|
|
|
| error | Erfasst undefinierte Fehler |
|
|
|
|
|
|
Tabelle X: Event-Listener auf der Seite der AmbientBox
|
|
|
Tabelle 4: Event-Listener auf der Seite der AmbientBox
|
|
|
| Event | Funktionalität |
|
|
|
|-------|----------------|
|
|
|
| connection | Erfasst alle Verbindungsanfragen und sendet bei Erfolg das "connect"-Event |
|
... | ... | @@ -268,7 +268,7 @@ Tabelle X: Event-Listener auf der Seite der AmbientBox |
|
|
| detachAmbientBoxFromUser | Entfernt eine AmbientBox von dem/der aktuellen NutzerIn mit dem "leaveRoom"-Event |
|
|
|
| setStatus | Leitet den aktuellen Status des/der NutzerIn an die verknüpfte AmbientBox weiter |
|
|
|
|
|
|
Tabelle X: Event-Listener auf der Seite des Accelerators
|
|
|
Tabelle 5: Event-Listener auf der Seite des Accelerators
|
|
|
|
|
|
Nachdem die Verbindung zwischen den Systemen aufgebaut wurde, sendet die AmbientBox ihre UUID mit dem "activateAmbientBox"-Event an den Accelerator. Dieser pflegt eine Laufzeit-Array, in welchem die folgenden Eigenschaften für jede AmbientBox gespeichert werden:
|
|
|
|
... | ... | @@ -291,7 +291,7 @@ Das Objekt enthält die UUID der Box, ihren Namen und die Farbe für die Anzeige |
|
|
|
|
|
Sobald eine initiale Verbindung der beiden Systeme erstellt ist, kann ein/eine NutzerIn im Accelerator sich mit einer AmbientBox verbinden. Der/Die NutzerIn kann aus einer Liste von verfügbaren AmbientBoxen eine AmbientBox auswählen und sie dem aktuellen Raum hinzufügen. Dadurch wird diese für alle anderen Räume blockiert. Jeder/Jede NutzerIn im Raum kann daraufhin sich mit der AmbientBox verknüpfen. Dafür wird vom Accelerator das "attachAmbientBoxToUser"-Event gesendet an das Backend gesendet, welches das "joinRoom"-Event an die AmbientBox sendet. Zusätzlich zu dem Event werden der aktuelle Raum und der/die NutzerIn mitgesendet. Im Frontend der AmbientBox wird daraufhin eine Verbindungsanfrage angezeigt. Wenn der/die NutzerIn die Verbindung akzeptiert, wird der/die NutzerIn und der Raum in das Frontend geladen und eine WebRTC-Verbindung erstellt ([siehe Kapitel WebRTC](#webrtc)). Wenn der/die NutzerIn die Verbindung ablehnt, wird das "AmbientBoxConnectionRefused"-Event an den Accelerator zurückgesendet. Dieses Event wird ebenfalls gesendet, wenn eine Anfrage bei der AmbientBox ankommt, jedoch das Frontend dieser nicht geladen ist. In der nachfolgenden Abbildung ist diese Kommunikation visualisiert.
|
|
|
|
|
|
 Abbildung X: Verbindung einer AmbientBox mit einem/einer NutzerIn
|
|
|
 Abbildung 21: Verbindung einer AmbientBox mit einem/einer NutzerIn
|
|
|
|
|
|
## Event-Weiterleitung
|
|
|
|
... | ... | @@ -309,7 +309,7 @@ Die Event-Weiterleitung geht einseitig von der Seite des Accelerators aus. Der L |
|
|
|
|
|
Für jedes der Events gibt es ebenfalls ein negiertes Event. Wenn eines dieser Events im Accelerator-Backend ankommt, wird überprüft, ob es eine verknüpfte AmbientBox gibt. Wenn ja, dann wird das Event an den Socket dieser AmbientBox gesendet. Im AmbientBox-Backend wird das Event in ein Laufzeit-Objekt gespeichert und eventuelle Widersprüche von einzelnen Events behoben. Dieses Objekt wird dann im Frontend geladen und visualisiert angezeigt. Nachfolgend ist die Event-Weiterleitung visualisiert:
|
|
|
|
|
|
 Abbildung X: Event-Weiterleitung
|
|
|
 Abbildung 22: Event-Weiterleitung
|
|
|
|
|
|
## WebRTC
|
|
|
|
... | ... | @@ -333,15 +333,15 @@ Diese Dateien setzten ebenfalls Event-Listener um, welche wichtig für die WebRT |
|
|
| connect.js | streamAdded | Erfasst verfügbare Streams, und fügt diese als Audio- oder Video-Element hinzu |
|
|
|
| connect.js | streamUnpublished | Erfasst alle Streams, die unpublished wurden und unsubscribed von diesen |
|
|
|
|
|
|
Tabelle X: Event-Listener für den WebRTC-Verbindungsaufbau
|
|
|
Tabelle 6: Event-Listener für den WebRTC-Verbindungsaufbau
|
|
|
|
|
|
Bei einem Verbindungsaufbau wird die ezMCU-Klasse initialisiert und auf das "connect"-Event der neu erstellten Socket-Verbindung gewartet. Sobald das Event ausgelöst wird, startet die Erfassung der lokalen Audio- und Videostreams. Abhängig von den konfigurierten Einstellungen werden die Berechtigungen für die Audio- und Videostreams der Kamera und des Mikrofons der AmbientBox angefragt und als neuer Stream an den Accelerator veröffentlicht. Sobald alle benötigten Streams vorhanden sind, wird das "join"-Event an den Accelerator gesendet. Dieses fügt die AmbientBox als Teilnehmer in einen Raum hinzu. Danach erhält die AmbientBox alle Streams aus diesem Raum und kann sich die Streams des/der verknüpften NutzerIn auswählen. Ebenfalls wird während des Verbindungsaufbaus die ID des WebRTC-Sockets der AmbientBox an das Accelerator-Backend über das "setWebRTCID"-Event gesendet. Dadurch kann der Accelerator die ausgewählte AmbientBox der WebRTC-Verbindung zuordnen und entsprechend die Streams verwalten. In Abbildung X ist der Ablauf des WebRTC-Verbindungsaufbaus visualisiert.
|
|
|
Bei einem Verbindungsaufbau wird die ezMCU-Klasse initialisiert und auf das "connect"-Event der neu erstellten Socket-Verbindung gewartet. Sobald das Event ausgelöst wird, startet die Erfassung der lokalen Audio- und Videostreams. Abhängig von den konfigurierten Einstellungen werden die Berechtigungen für die Audio- und Videostreams der Kamera und des Mikrofons der AmbientBox angefragt und als neuer Stream an den Accelerator veröffentlicht. Sobald alle benötigten Streams vorhanden sind, wird das "join"-Event an den Accelerator gesendet. Dieses fügt die AmbientBox als Teilnehmer in einen Raum hinzu. Danach erhält die AmbientBox alle Streams aus diesem Raum und kann sich die Streams des/der verknüpften NutzerIn auswählen. Ebenfalls wird während des Verbindungsaufbaus die ID des WebRTC-Sockets der AmbientBox an das Accelerator-Backend über das "setWebRTCID"-Event gesendet. Dadurch kann der Accelerator die ausgewählte AmbientBox der WebRTC-Verbindung zuordnen und entsprechend die Streams verwalten. In Abbildung 23 ist der Ablauf des WebRTC-Verbindungsaufbaus visualisiert.
|
|
|
|
|
|
 Abbildung X: WebRTC-Verbindungsaufbau
|
|
|
 Abbildung 23: WebRTC-Verbindungsaufbau
|
|
|
|
|
|
## Sonstige Events
|
|
|
|
|
|
Es gibt noch einige weitere Socket-Events, welche wichtig für die Kommunikation zwischen den beiden Systemen und innerhalb der AmbientBox sind. In der Tabelle X sind diese Events aufgelistet.
|
|
|
Es gibt noch einige weitere Socket-Events, welche wichtig für die Kommunikation zwischen den beiden Systemen und innerhalb der AmbientBox sind. In der Tabelle 7 sind diese Events aufgelistet.
|
|
|
|
|
|
| Event | System | Funktionalität |
|
|
|
|-------|--------|----------------|
|
... | ... | @@ -351,7 +351,7 @@ Es gibt noch einige weitere Socket-Events, welche wichtig für die Kommunikation |
|
|
| reloadFrontend | AmbientBox | Teilt dem AmbientBox-Frontend mit, dass es neu geladen werden soll. Dies passiert bei zu häufigem Verbindungsabbruch oder einem Crash des Backend-Servers, um die WebRTC-Verbindung gesteuert zu beenden |
|
|
|
| shutdown | AmbientBox | Schält die LED-Leiste aus und fährt die AmbientBox herunter |
|
|
|
|
|
|
Tabelle X: Weitere Socket-Events
|
|
|
Tabelle 7: Weitere Socket-Events
|
|
|
|
|
|
# Nutzertests
|
|
|
|
... | ... | @@ -361,7 +361,7 @@ Zur Evaluation der Usability der AmbientBox wurde das System mehreren Personen v |
|
|
|
|
|
Der Fragebogen wurde nach dem originalen SUS-Fragebogen designt und ins Deutsche übersetzt. Zudem wurden einzelne Anpassungen der Formulierungen der Fragen umgesetzt. Als Zusatz wurde am Ende des Fragebogens ein Freitext-Feld für weitere Anmerkungen hinzugefügt. Durch den Fragebogen wird nur die Usability der AmbientBox abgefragt. Eine Evaluation des Accelerators und der dort umgesetzten Funktionalitäten wird nicht durchgeführt. Nachfolgend ist der Fragebogen zu sehen.
|
|
|
|
|
|
 Abbildung X: SUS-Fragebogen zur Erfassung der Usability der AmbientBox
|
|
|
 Abbildung 24: SUS-Fragebogen zur Erfassung der Usability der AmbientBox
|
|
|
|
|
|
Die TeilnehmerInnen wurden alle an der Hochschule Reutlingen befragt und alle Fragebögen wurden anonymisiert erfasst. Zu Beginn wird das System und das Ziel dieses erklärt, woraufhin dem/der NutzerIn neun Aufgaben gestellt werden. Jede der Aufgaben zielt darauf ab, dass die Funktionalitäten der AmbientBox durch den/die NutzerIn ausgeführt werden. Dabei werden dem/der NutzerIn keine Tipps gegeben. Die neun Aufgaben sind nachfolgend aufgelistet:
|
|
|
|
... | ... | @@ -394,7 +394,7 @@ Nachfolgend sind die Ergebnisse der SUS-Fragebögen aufgelistet: |
|
|
| T9 | 4 | 1 | 5 | 1 | 5 | 1 | 5 | 1 | 5 | 1 | 97,5 | Display sollte hochkant sein, schwierig zu lesen, wenn es flach auf dem Tisch liegt |
|
|
|
| T10 | 4 | 1 | 5 | 1 | 5 | 1 | 4 | 1 | 5 | 1 | 92,5 | - |
|
|
|
|
|
|
Tabelle X: Ergebnisse der SUS-Fragebögen
|
|
|
Tabelle 8: Ergebnisse der SUS-Fragebögen
|
|
|
|
|
|
Der errechnete SUS-Score liegt bei 84,25 von 100 Punkten. Die Bewertung des Systems fiel überwiegend sehr positiv aus. Der niedrigste erhaltene Score liegt bei 60 Punkten und der höchste Score bei 100 Punkten. Acht der zehn befragten Personen haben weitere Anmerkungen an das System hinzugefügt.\
|
|
|
Der hauptsächliche Kritikpunkt ist hierbei die verwendete Hardware. Insbesondere wird dabei der zu kleine Bildschirm und der zu leise Lautsprecher hervorgehoben.\
|
... | ... | @@ -411,13 +411,13 @@ In den folgenden beiden Kapiteln wird die Nutzung des Systems erklärt. In [Kapi |
|
|
Zum Betreiben der AmbientBox ist eine Micro-SD Karte notwendig. Diese sollte eine Mindestgröße von 16 GB haben. Der erste Schritt ist das Aufsetzen des Betriebssystems auf dieser Micro-SD Karte. Hierfür laden Sie sich bitte das Raspberry Pi Imager Programm ([https://www.raspberrypi.com/software/](https://www.raspberrypi.com/software/)) herunter und installieren es auf Ihrem Computer.\
|
|
|
|
|
|

|
|
|
Abbildung XX: Downloadseite des Raspberry Pi Imagers
|
|
|
Abbildung 25: Downloadseite des Raspberry Pi Imagers
|
|
|
|
|
|
Zum Ende der Installation setzen Sie noch ein Häkchen neben dem Text „Run Raspberry Pi Imager“ um das Programm zu starten. Verbinden Sie Ihre Micro-SD Karte mit Ihrem Computer. Klicken Sie dann auf das mittlere Feld auf dem steht „CHOOSE STORAGE“. In dem Dialog, der sich öffnet wählen Sie Ihre SD-Karte aus und bestätigen. Danach klicken Sie auf das linke Feld „CHOOSE OS“.
|
|
|
|
|
|
\
|
|
|
\
|
|
|
Abbildung XX: Betriebssystemauswahl
|
|
|
Abbildung 26: Betriebssystemauswahl
|
|
|
|
|
|
Hier klicken Sie zunächst auf „Raspberry Pi OS (other)“. In der sich öffnenden Liste wählen Sie „Raspberry Pi OS (Legacy)“ aus. Jetzt können Sie auf das rechte Feld „WRITE“ klicken und ein wenig warten, während das Betriebssystem heruntergeladen und aufgespielt wird. Sobald ein Pop-Up erscheint, dass die Operation erfolgreich war, können Sie das Programm schließen.\
|
|
|
Im nächsten Schritt stecken Sie die Micro-SD Karte in den Raspberry Pi mittels des Schlitzes an der Unterseite der Platine ein. Verbinden Sie den Pi mittels des HDMI-Ports an einen Bildschirm und schließen Sie eine USB-Maus und Tastatur an und schalten Sie ihn ein, indem Sie ihn mittels des Mikro-USB Ports an eine Stromquelle anschließen. Befolgen Sie die Anweisungen auf dem Bildschirm, um das Betriebssystem aufzusetzen. Sie können ein beliebiges Passwort setzen. Für die weiteren Schritte ist Internet benötigt, also verbinden Sie sich mit einem WLAN-Netzwerk, wenn das System Sie danach fragt, oder schließen Sie ein LAN-Kabel an den Pi an.\
|
... | ... | @@ -478,56 +478,56 @@ Damit ist die Installation des Systems beendet und es kann nun genutzt werden. |
|
|
Wenn die AmbientBox per Hardwareschalter angeschaltet wird, startet der Node.js Server und die Benutzeroberfläche wird automatisch geladen.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: AmbientBox ohne verbundenen Nutzer
|
|
|
Abbildung 27: AmbientBox ohne verbundenen Nutzer
|
|
|
|
|
|
Sollte die AmbientBox nicht bereits mit einem WLAN-Netzwerk verbunden sein, muss durch Kicken auf das Zahnrädchen im rechten oberen Eck auf die Einstellungsseite gewechselt werden und anschließend unter „Select a Wifi network“ ein verfügbares Netzwerk ausgewählt werden.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: WLAN-Netzwerk auswählen
|
|
|
Abbildung 28: WLAN-Netzwerk auswählen
|
|
|
|
|
|
Im sich öffnenden Dialogfenster kann mit der eingebundenen digitalen Tastatur ein benötigtes Passwort eingegeben werden und mit „Connect“ bestätigt werden. Nachdem die AmbientBox mit einem Netzwerk verbunden wurde, kann sie vom Accelerator erfasst und eine Verbindung hergestellt werden.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: WLAN-Passwort eingeben und bestätigen
|
|
|
Abbildung 29: WLAN-Passwort eingeben und bestätigen
|
|
|
|
|
|
Hierzu kann im Accelerator unter der AmbientBox Schaltfläche im rechten unteren Eck geschaut werden, welche AmbientBox online ist und zur Verfügung steht. Um eine verfügbare Box mit einem Raum zu verbinden, muss auf das Auge neben der gewünschten Box geklickt werden.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Verfügbare AmbientBox hinzufügen
|
|
|
Abbildung 30: Verfügbare AmbientBox hinzufügen
|
|
|
|
|
|
Hieraufhin wird die AmbientBox dem Raum hinzugefügt und erscheint in der linken Leiste des Accelerators unterhalb der verbundenen NutzerInnen. Um die AmbientBox nun mit sich selbst zu verbinden, wird auf das Nutzersymbol geklickt.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: AmbientBox mit einem/einer NutzerIn verbinden
|
|
|
Abbildung 31: AmbientBox mit einem/einer NutzerIn verbinden
|
|
|
|
|
|
Nachdem der/die NutzerIn seitens des Accelerators mit der AmbientBox verbunden worden ist, muss diese Verbindung von der AmbientBox bestätigt werden. Hierzu muss im erscheinenden Dialogfenster auf Connect geklickt werden.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Nutzerverbindung bestätigen
|
|
|
Abbildung 32: Nutzerverbindung bestätigen
|
|
|
|
|
|
Wenn die Verbindung durch das Dialogfenster bestätigt wurde, erscheinen Nutzerbild und Nutzername des/der verbundenen NutzerIn in der Home-Seite der AmbientBox, woraufhin die AmbientBox zur aktiven Nutzung und Interaktion bereitsteht.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: AmbientBox mit verbundenem/verbundener NutzerIn
|
|
|
Abbildung 33: AmbientBox mit verbundenem/verbundener NutzerIn
|
|
|
|
|
|
Ab diesem Schritt werden sämtliche Nutzerstatus sowie Video- und Audiostreams des/der verbundenen NutzerIn von der AmbientBox wiedergegeben. Die Nutzerstatus werden mithilfe der auf der Home-Seite erscheinenden Icons und die entsprechend leuchtenden LEDs angezeigt, der Videostream wird nach Aktivierung bei Bedarf anstelle des Nutzerbildes übertragen, und der Audiostream wird über den Lautsprecher der AmbientBox ausgegeben.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: AmbientBox mit aktivierten Nutzerstatus
|
|
|
Abbildung 34: AmbientBox mit aktivierten Nutzerstatus
|
|
|
|
|
|
Um die Helligkeit der LEDs und die Lautstärke des Lautsprechers anzupassen, oder die Kameraübertragung bzw. die des Mikrofons an- und auszuschalten, muss auf die Einstellungsseite gewechselt werden. Hier befinden sich durch Beschriftung und Icon gekennzeichnete Schalter und Regler, um die gewünschten Konfigurationen zu treffen.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Einstellungsseite der AmbientBox
|
|
|
Abbildung 35: Einstellungsseite der AmbientBox
|
|
|
|
|
|
Sollten die lokalen NutzerInnen den Wunsch haben den/die remote-zugeschaltete NutzerIn von der AmbientBox zu trennen, können sie das erreichen, indem sie auf die Exit Schaltfläche klicken und das erscheinende Dialogfenster bestätigen. Daraufhin steht die AmbientBox im Raum des Accelerators frei für neue Verbindungen. Dasselbe kann der/die remote-zugeschaltete NutzerIn durch ein Klicken auf das „X“ in der AmbientBox-Verbindung im Accelerator erreichen. Soll die Box wieder für andere Räume zur Verfügung gestellt werden, muss erneut auf das „X“ in der AmbientBox-Komponente im Accelerator geklickt werden.\
|
|
|
Soll die AmbientBox heruntergefahren werden, muss auf das Ausschalten Icon auf der Einstellungsseite geklickt und in dem erscheinenden Dialogfenster bestätigt werden. Nach etwa 10 Sekunden sollte die Box heruntergefahren sein und die Stromversorgung kann per Hardwareschalter abgeschaltet werden.
|
|
|
|
|
|
\
|
|
|
Abbildung XX: Verbindung zu dem/der remote-zugeschalteten NutzerIn trennen
|
|
|
Abbildung 36: Verbindung zu dem/der remote-zugeschalteten NutzerIn trennen
|
|
|
|
|
|
\
|
|
|
Abbildung XX: AmbientBox herunterfahren
|
|
|
Abbildung 37: AmbientBox herunterfahren
|
|
|
|
|
|
## Zugänge
|
|
|
|
... | ... | @@ -536,6 +536,7 @@ https://accelerator.reutlingen-university.de/ambientbox/ |
|
|
Um Zugang zu dem Server zu erhalten, muss eine Email an Raphael Fritsch (Raphael.Fritsch@reutlingen-university.de) geschrieben werden. Auf dem Server kann dann im home-Verzeichnis als root die `updateAmbientBox.sh` ausgeführt werden, um den Accelerator zu aktualisieren.\
|
|
|
Um Zugang zur AmbientBox zu erhalten muss die IP-Adresse dieser erhalten werden. Mit SSH kann dann zu dieser Adresse mit dem Nutzer `pi` und dem Passwort `4mb13n7b0x_Pw` zugegriffen werden.\
|
|
|
Der Code der AmbientBox ist in dem [Repository](https://gitlab.reutlingen-university.de/eckl/ambientbox) zu finden. Für den Zugang muss eine Mail an Frau Tullius oder Herr Hertkorn geschrieben werden. Der Code für die angepasste Accelerator-Version befindet sich im Accelerator-Repository auf dem Branch [AmbientBox](https://gitlab.reutlingen-university.de/ksystem/Accelerator/-/tree/AmbientBox).\
|
|
|
Der Raspberry Pi ist für einen Zugang an der Hochschule im iot-inf Netzwerk registriert. Wenn die Zugangsdaten nicht mehr vorhanden sind, dann eine Email an Florian Diemer (Florian.Diemer@Reutlingen-University.de) senden.
|
|
|
|
|
|
# Lizenzen der verwendeten Software
|
|
|
|
... | ... | @@ -557,7 +558,9 @@ _npx license-checker --summary_ |
|
|
| [OBSD](https://opensource.org/licenses/0BSD) | 1 |
|
|
|
| [MIT](https://opensource.org/licenses/MIT) OR [CC-1.0](https://creativecommons.org/publicdomain/zero/1.0/deed.de) | 1 |
|
|
|
|
|
|
_npx license-compatibility-checker_ - Packages mit Lizenzwarnung
|
|
|
Tabelle 9: Häufigkeit der Lizenzen der im Backend verwendeten Packages
|
|
|
|
|
|
_npx license-compatibility-checker_
|
|
|
| Package | Warnmeldung | Lizenz |
|
|
|
| ------ | ------ | ------ |
|
|
|
| [component-bind@1.0.0](https://www.npmjs.com/package/component-bind) | No license (Unlicensed) - possibly incompatible with MIT (Permissive) | [MIT](https://opensource.org/licenses/MIT) |
|
... | ... | @@ -568,6 +571,8 @@ _npx license-compatibility-checker_ - Packages mit Lizenzwarnung |
|
|
| [tslib@1.14.1](https://www.npmjs.com/package/tslib) | 0BSD (Unknown) - possibly incompatible with MIT (Permissive) | [OBSD](https://opensource.org/licenses/0BSD) |
|
|
|
| [type-fest@0.20.2](https://www.npmjs.com/package/type-fest) | (MIT OR CC0-1.0) (Unknown) - possibly incompatible with MIT (Permissive) | [MIT](https://opensource.org/licenses/MIT) OR [CC0-1.0](https://creativecommons.org/publicdomain/zero/1.0/deed.de) |
|
|
|
|
|
|
Tabelle 10: Im Backend verwendeten Packages mit Lizenzwarnung
|
|
|
|
|
|
**Frontend**\
|
|
|
_npx license-checker --summary_
|
|
|
| Lizenz | Häufigkeit |
|
... | ... | @@ -594,6 +599,8 @@ _npx license-checker --summary_ |
|
|
| [OBSD](https://opensource.org/licenses/0BSD) | 1 |
|
|
|
| [MPL](https://www.mozilla.org/en-US/MPL/) | 1 |
|
|
|
|
|
|
Tabelle 11: Häufigkeit der Lizenzen der im Frontend verwendeten Packages
|
|
|
|
|
|
_npx license-compatibility-checker_ - Packages mit Lizenzwarnung
|
|
|
| Package | Warnmeldung | Lizenz |
|
|
|
| ------ | ------ | ------ |
|
... | ... | @@ -616,6 +623,8 @@ _npx license-compatibility-checker_ - Packages mit Lizenzwarnung |
|
|
| [tslib@1.14.1](https://www.npmjs.com/package/tslib) | 0BSD (Unknown) - possibly incompatible with No license (Unlicensed) | [0BSD](https://opensource.org/licenses/0BSD) |
|
|
|
| [type-fest@0.21.3](https://www.npmjs.com/package/type-fest) | (MIT OR CC0-1.0) (Unknown) - possibly incompatible with No license (Unlicensed) | [MIT](https://opensource.org/licenses/MIT) OR [CC0-1.0](https://creativecommons.org/publicdomain/zero/1.0/deed.de) |
|
|
|
|
|
|
Tabelle 12: Im Frontend verwendeten Packages mit Lizenzwarnung
|
|
|
|
|
|
# Fazit und Ausblick
|
|
|
|
|
|
Das Ziel der AmbientBox, einen/eine remote-zugeschaltete NutzerIn in einem lokalen Meeting zu repräsentieren, konnte erreicht werden. Es wurde ein Hardware-Prototyp erstellt, mit dem GesprächsteilnehmerInnen, die nicht in Person an einem Meeting teilnehmen können, ihren Status und ihr Verhalten mittels der AmbientBox an die anderen GesprächsteilnehmerInnen übermitteln können. Entsprechend wurde auch der Code des Accelerators so angepasst, dass AmbientBoxes leicht zu sehen sind und zu NutzerInnen problemlos hinzugefügt werden können.\
|
... | ... | |