|
|
|
# Inhaltsverzeichnis
|
|
|
|
|
|
|
|
1. [Projektziel](#projektziel)
|
|
|
|
2. [Projektplanung](#projektplanung)
|
|
|
|
2.1 [Projektstruktur & Ablauf](#projektstruktur--ablauf)
|
|
|
|
2.2 [UseCases](#usecases)
|
|
|
|
2. [Projektplanung](#projektplanung)\
|
|
|
|
2\.1 [Projektstruktur & Ablauf](#projektstruktur--ablauf)\
|
|
|
|
2\.2 [UseCases](#usecases)
|
|
|
|
3. [Mockups und Systemskizzen](#mockups-und-systemskizzen)
|
|
|
|
4. [Verwendete Hardware](#verwendete-hardware)
|
|
|
|
5. [AmbientBox](#ambientbox)
|
|
|
|
5.1 [Architektur](#architektur)
|
|
|
|
5.2 [Frontend und Backend](#frontend-und-backend)
|
|
|
|
5.3 [Betriebssystem](#betriebssystem)
|
|
|
|
5.4 [Hardware](#hardware)
|
|
|
|
6. [Schnittstellen](#schnittstellen)
|
|
|
|
6.1 [Initialisierung der Backend-Verbindung](#initialisierung-der-backend-verbindung)
|
|
|
|
6.2 [Verbindung einer AmbientBox mit einem Nutzer](#verbindung-einer-ambientbox-mit-einem-nutzer)
|
|
|
|
6.3 [Event-Weiterleitung](#event-weiterleitung)
|
|
|
|
6.4 [WebRTC](#webrtc)
|
|
|
|
6.5 [Sonstige Events](#sonstige-events)
|
|
|
|
7. [Usertests](#usertests)
|
|
|
|
7.1 [Vorgehen](#vorgehen)
|
|
|
|
7.2 [Ergebnisse](#ergebnisse)
|
|
|
|
8. [Anleitung](#anleitung)
|
|
|
|
8.1 [Vorbereitung](#vorbereitung)
|
|
|
|
8.2 [Bedienung](#bedienung)
|
|
|
|
5. [AmbientBox](#ambientbox)\
|
|
|
|
5\.1 [Architektur](#architektur)\
|
|
|
|
5\.2 [Frontend und Backend](#frontend-und-backend)\
|
|
|
|
5\.3 [Betriebssystem](#betriebssystem)\
|
|
|
|
5\.4 [Hardware](#hardware)
|
|
|
|
6. [Schnittstellen](#schnittstellen)\
|
|
|
|
6\.1 [Initialisierung der Backend-Verbindung](#initialisierung-der-backend-verbindung)\
|
|
|
|
6\.2 [Verbindung einer AmbientBox mit einem Nutzer](#verbindung-einer-ambientbox-mit-einem-nutzer)\
|
|
|
|
6\.3 [Event-Weiterleitung](#event-weiterleitung)\
|
|
|
|
6\.4 [WebRTC](#webrtc)\
|
|
|
|
6\.5 [Sonstige Events](#sonstige-events)
|
|
|
|
7. [Usertests](#usertests)\
|
|
|
|
7\.1 [Vorgehen](#vorgehen)\
|
|
|
|
7\.2 [Ergebnisse](#ergebnisse)
|
|
|
|
8. [Anleitung](#anleitung)\
|
|
|
|
8\.1 [Vorbereitung](#vorbereitung)\
|
|
|
|
8\.2 [Bedienung](#bedienung)
|
|
|
|
9. [Lizenzen der verwendeten Software](#lizenzen-der-verwendeten-software)
|
|
|
|
10. [Fazit und Ausblick](#fazit-und-ausblick)
|
|
|
|
|
|
|
|
# Projektziel
|
|
|
|
|
|
|
|
Sollten bei einem Meeting nicht alle Personen in der Lage sein, in Person zu erscheinen, jedoch online verfügbar sein, so können diese Personen über Accelerator zu den Meetings dazu gerufen werden. Leider fühlt sich diese Art von Kommunikation weniger persönlich und vertraulich als die Kommunikation in Person an.\
|
|
|
|
Unser Projekt, welches wir AmbientBox genannt haben, soll hier Abhilfe verschaffen. Mittels Ambient Awareness-Methoden soll das Gerät in der Lage sein, Personen auf den Status und das Verhalten von remote-zugeschalteten Teilnehmern aufmerksam zu machen. LEDs, welche eine hohe Anzahl verschiedener Farben darstellen können, geben direkt an, ob die zugeschaltete Person einen Daumen hoch oder runter gibt, ob er/sie momentan abwesend ist und mehr.\
|
|
|
|
Durch eingebaute Mikrofone und Lautsprecher soll die nutzende Person der AmbientBox in der Lage sein, die Meeting-Teilnehmer gut zu verstehen und mit Ihnen direkt zu kommunizieren. Ein eingebauter Touchscreen erlaubt es, Einstellungen an der Box vorzunehmen und das Profilbild des Verwenders anzuzeigen (später eventuell Kameraaufnahme) und eine eingebaute Kamera erlaubt es der nutzenden Person, welcher remote über Accelerator dem Meeting beigetreten ist, die restlichen Meeting Teilnehmer zu sehen.
|
|
|
|
|
|
|
|
# Projektplanung
|
|
|
|
|
|
|
|
Zur Projektplanung gehörten zum einen die Erfassung der Arbeitspakete in einem Projektstrukturplan und die Darstellung des zeitlichen Ablaufs des Projekts in einem Ganttdiagramm, zum anderen die Formulierung und Gewichtung projektrelevanter Use Cases.
|
| ... | ... | @@ -49,9 +53,8 @@ Abbildung XX: Ganttdiagramm |
|
|
|
Im obigen Ganttdiagramm 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 nachhinten verlegt wurde.
|
|
|
|
|
|
|
|
## UseCases
|
|
|
|
|
|
|
|
| Bezeichnung | Use Case | Priorität |
|
|
|
|
| ----------- | ------------------------------------------------------------------------------------------------------------------------------- | --------- |
|
|
|
|
|-------------|----------|-----------|
|
|
|
|
| | _Use Cases beim Accelerator_ | |
|
|
|
|
| **UC1** | Der remote-zugeschaltete Nutzer möchte eine verfügbare AmbientBox auswählen, um sich mit einer lokalen Sitzung zu vernetzen. | 1 |
|
|
|
|
| **UC2** | Der remote-zugeschaltete Nutzer möchte eine ausgewählte AmbientBox entfernen, um diese für andere Nutzer freizugeben. | 1 |
|
| ... | ... | @@ -78,33 +81,46 @@ Die Priorität der Use Cases (1 – hohe Priorität bis 4 – niedrige Prioritä |
|
|
|
|
|
|
|
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 Nutzerbild und Nutzername der verbundenen Person abgebildet, zudem werden hier sämtliche im Accelerator durchführbare Nutzeraktionen mithilfe von Icons und Farben dargestellt, die die jeweilige Nutzeraktion widerspiegeln. Durch Klicken auf das im oberen Eck befindliche Zahnrädchen gelangt man auf die Einstellungsseite. Hier ist es den Nutzern 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
|
|
|
|
|
|
|
|
Neben der Gestlatung 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 XX: Auswahl einer verfügbaren AmbientBox (1)
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung XX: Auswahl einer verfügbaren AmbientBox (2)
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (2)
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung XX: Auswahl einer verfügbaren AmbientBox (3)
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (3)
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung XX: Auswahl einer verfügbaren AmbientBox (4)
|
|
|
|
 Abbildung XX: Auswahl einer verfügbaren AmbientBox (4)
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung XX: Interaktion mit der AmbientBox
|
|
|
|
 Abbildung XX: 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 Touchdisplays erleichtert wird.
|
|
|
|
|
|
|
|
 \
|
|
|
|
 \
|
|
|
|
Abbildung XX, XX: Variante 1 und 2 der Systemskizze des Hardwareprototyps
|
|
|
|
|
|
|
|
# Verwendete Hardware
|
|
|
|
|
|
|
|
| Bild | Teil | Funktion | Link |
|
|
|
|
| ------ | ------ | ------ | ------ |
|
|
|
|
|  | Powerbank | Kabelloses Betreiben der AmbientBox | [Amazon ](https://www.amazon.de/Intenso-Powerbank-Ladeger%C3%A4t-Smartphone-Digitalkamera-schwarz/dp/B07Z8DF4DG/ref=sr_1_3?adgrpid=71776869780&gclid=Cj0KCQjwhqaVBhCxARIsAHK1tiMxxdRo-tlhkHoChQZyhYtthafzQICoDHvBHFPRumV1NOHzQQ_G0W8aApgGEALw_wcB&hvadid=352805799758&hvdev=c&hvlocphy=9042255&hvnetw=g&hvqmt=e&hvrand=14916314900801430281&hvtargid=kwd-300699482045&hydadcr=19826_1788583&keywords=intenso%2Bpowerbank%2B10000&qid=1655307935&sr=8-3&th=1)|
|
|
|
|
|  | USB-C Verlängerungskabel | Anschluss zum Aufladen der AmbientBox | [Amazon ](https://www.amazon.de/Verl%C3%A4ngerungskabel-Thunderbolt-Compatible-Extension-Microsoft/dp/B088NMGX4M/ref=sr_1_3?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=2TJTFWPYYI03I&keywords=usb+c+verl%C3%A4ngerungskabel+kurz&qid=1655308381&sprefix=usb+c+verl%C3%A4ngerungskabel+kurz%2Caps%2C84&sr=8-3)|
|
|
|
|
|  | Stromschalter | Verbindet Pi mit Powerbank und lässt den Strom manuell ab- und wieder anschalten | [Reichelt ](https://www.reichelt.de/raspberry-pi-kabel-mit-schalter-100-cm-schwarz-rpi-cable-sw-100-p242762.html?PROVID=2788&gclid=Cj0KCQjwhqaVBhCxARIsAHK1tiOwyJ73cqOu5L4eFa_UUA0z09DPA_nO3vKbzEAs9dq1TxaMSP-aZa0aAtPiEALw_wcB)|
|
|
|
|
|  | USB-A Verlängerungskabel | Port zum Anschließen einer Tastatur | [Amazon ](https://www.amazon.de/KabelDirekt-Verl%C3%A4ngerungskabel-Stecker-geeignet-Anschl%C3%BCsse-Schwarz-Space-Grey/dp/B083Y2DR9Z/ref=sr_1_4?__mk_de_DE=%C3%85M%C3%85%C5%BD%C3%95%C3%91&crid=2AIBJZG5AW89N&keywords=usb%2Bverl%C3%A4ngerung%2Bkurz&qid=1655300086&sprefix=usb%2Bverl%C3%A4ngerung%2Bkurz%2Caps%2C96&sr=8-4&th=1) |
|
|
|
|
|  | LED-Strifen | Anzeigen des Nutzerstatus | [Amazon](https://www.amazon.de/-/en/WS2812B1M60LB30E-WS2812B-Eco-All-LED/dp/B088BRY2SH/ref=sr_1_5?adgrpid=79509414868&gclid=CjwKCAjwo8-SBhAlEiwAopc9W5Bw1y-AwcBqO6jVPA8LKOuRY8JLpdDSRqz3ztWccGJagXYKOmNoyhoCjoUQAvD_BwE&hvadid=352784706883&hvdev=c&hvlocphy=9042262&hvnetw=g&hvqmt=e&hvrand=12279209566090651273&hvtargid=kwd-300684716062&hydadcr=8204_1722825&keywords=arduino%2Brgb%2Bstrip&qid=1649693230&sr=8-5&th=1) |
|
|
|
|
|  | Bildschirm | Anzeigen und Bedienen der AmbientBox | [Amazon](https://www.amazon.de/-/en/ELEGOO-Display-Monitor-Raspberry-Interface/dp/B01JRUH0CY/ref=sr_1_2?crid=2VEMW01VZCJNX&keywords=elegoo+3%2C5+zoll&qid=1657206973&sprefix=elegoo+3.5+inch%2Caps%2C69&sr=8-2) |
|
|
|
|
|  | Raspberry Pi 3B+ | Kern der AmbientBox | [Amazon](https://www.amazon.de/-/en/Raspberry-1373331-Pi-Model-Motherboard/dp/B07BDR5PDW) |
|
|
|
|
|  | Jumper Käbel | Verbinden des Pis mit dem LED-Streifen und dem Bildschirm | [Amazon](https://www.amazon.de/-/en/Elegoo-Jumper-Bridges-Arduino-Raspberry/dp/B01EV70C78/ref=sr_1_6?crid=7PEESEYVBD4W&keywords=pin%2Bkabel&qid=1657207195&s=computers&sprefix=pi%2Bk%C3%A4bel%2Ccomputers%2C60&sr=1-6&th=1) |
|
|
|
|
|  | Mini Breadboard | Verbinden des Pis mit dem LED-Streifen und dem Bildschirm | [Amazon](https://www.amazon.de/-/en/ELEGOO-Points-Mini-Breadboard-Arduino/dp/B01M9CHKO4/ref=sr_1_10?crid=2D2066MXXESIT&keywords=mini+breadboard&qid=1657207288&s=computers&sprefix=mini+breadboard%2Ccomputers%2C58&sr=1-10) |
|
|
|
|
|  | USB-Soundkarte | Ausgabe von Geräuschen (Ersatz für on-board Soundkarte) | [Amazon](https://www.amazon.de/-/en/Vention-External-Microphone-Computer-Headphone/dp/B07MNRRT84/ref=sr_1_10?crid=11PDGUNZG354L&keywords=kleine+usb+soundkarte&qid=1657207470&sprefix=small+usb+sound+card%2Caps%2C68&sr=8-10) |
|
|
|
|
|  | Lautsprecher | Ausgabe von Ton des Nutzers | [Amazon](https://www.amazon.de/-/en/VBESTLIFE-Speaker-Outdoor-Cushion-Android/dp/B07D3RP3KL/ref=sr_1_3?crid=1WT0NFQJST2UU&keywords=mini+lautsprecher+flach&qid=1657207531&sprefix=mini+flat+speaker%2Caps%2C74&sr=8-3) |
|
|
|
|
|  | USB-Kamera | Aufnahme der Gesprächsteilnehmer | [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ächsteilnehmer | [Amazon](https://www.amazon.de/-/en/Microphone-Omnidirectional-Capacitor-Interviews-Recording/dp/B071171DBP/ref=psdc_430209031_t3_B08XQ4XKWF) |
|
|
|
|
|
|
|
|
Tabelle XX: Im Hardware-Prototypen verwendete Teile
|
|
|
|
|
|
|
|
# AmbientBox
|
|
|
|
|
|
|
|
In den nachfolgenden Kapiteln wird die Umsetzung der AmbientBox genauer beschrieben. Zuerst wird in [Kapitel 5.1](#architektur) ein Überblick über die Architektur der AmbientBox gegeben. [Kapitel 5.2](#frontend-und-backend) geht danach genauer auf die Frontend und Backend-Komponenten der AmbientBox ein. In den Kapiteln [5.3](#betriebssystem) und [5.4](#hardware) wird genauer auf die verwendeten Hardwarekomponenten der AmbientBox eingegangen, sowie das Betriebssystem behandelt.
|
| ... | ... | @@ -113,46 +129,71 @@ In den nachfolgenden Kapiteln wird die Umsetzung der AmbientBox genauer beschrie |
|
|
|
|
|
|
|
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 unterschiedlichen Stadien 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.
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung X: Systemübersicht der AmbientBox
|
|
|
|
 Abbildung X: Systemübersicht der AmbientBox
|
|
|
|
|
|
|
|
## Frontend und Backend
|
|
|
|
|
|
|
|
 \
|
|
|
|
 \
|
|
|
|
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 (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).\
|
|
|
|
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 |
|
|
|
|
| ------ | ------ | ------ | ------ |
|
|
|
|
| Verbinduungsaufbau | 50% | 255, 69, 0 | abwechselndes Blinken |
|
|
|
|
| Verbunden | 50% | 0, 0, 50 | konstantes Leuchten |
|
|
|
|
| Pause | 50% | 255, 255, 0 | konstantes Leuchten |
|
|
|
|
| Handheben | 50% | 107, 1, 125 | im Kreis laufendes Leuchten |
|
|
|
|
| Daumen hoch | 50% | 0, 255, 0 | konstantes Leuchten |
|
|
|
|
| Daumen runter | 50% | 255, 0, 0 | konstantes Leuchten |
|
|
|
|
| Klatschen | 50% | 0, 0, 255 | Blinken aller LEDs |
|
|
|
|
| Lautsprecher | 100% | 0, 0, 50 | konstantes Leuchten |
|
|
|
|
| Abwesend | 25% | 0, 0, 50 | konstantes Leuchten |
|
|
|
|
|
|
|
|
Tabelle XX: LED-Reaktionen auf Accelerator-Statuse
|
|
|
|
|
|
|
|
## Betriebssystem
|
|
|
|
|
|
|
|
Auf dem Raspberry Pi in der AmbientBox läuft die sogenannte Legacy-Version des Raspberry Pi OS Betriebssystems. Es handelt sich um eine ältere Revision des Betriebssystems, welche allerdings noch offiziell unterstützt wird und Sicherheitsupdates bekommt. Diese wurde gewählt, da bei der aktuellen Version Probleme beim Ausführen von Skripten beim Hochfahren des Systems entstehen.\
|
|
|
|
Beim Start führt das Betriebssystem das autorun Skript in dem Ordner `/etc/xdg/lxsession/LXDE-pi/autostart` aus. Zu diesem Skript wurden Anweisungen hinzugefügt, damit das Frontend der AmbientBox automatisch gestartet wird. Zunächst wird dafür Node.js gestartet und damit das ambientbox-Projekt, dass mittels der Git-Seite zu finden ist, lokal gehostet. Dann wird der Chromium-Browser im sogenannten Kiosk-Modus, bei dem der Browser alle anderen Fenster überdeckt und im Vollbildmodus angezeigt wird, gestartet. Der Browser navigiert automatisch zur Seite http://localhost:3000, auf welcher das ambientbox-Projekt gehostet wird.
|
|
|
|
|
|
|
|
## Hardware
|
|
|
|
|
|
|
|
Die initiale Idee war es, für das System einen Arduino Microkontroller zu verwenden. Es zeigte sich allerdings schon bald, dass dessen Leistung und Funktionen für das Projekt nicht passend war. Stattdessen wurde sich also für einen Raspberry Pi Mini-Computer entschieden. Dieser unterscheidet sich vom Arduino durch deutlich höhere Rechenkapazität, erweiterten Kommunikationsmöglichkeiten wie einem eingebauten WLAN-Modul und mehrere Anschlüsse und durch ein vollständiges Betriebssystem, dem Raspbian OS.
|
|
|
|
Es wird ein 3,5 Zoll TFT Touchscreen-Bildschirm verwendet. Dieser kann über Pins direkt mit dem Pi verbunden werden, in diesem Fall haben wurde sich aber dafür entschieden, den Pi mit einem kleinen Breadboard zur Weiterleitung der Signale zu verbinden und dann entsprechend den Bildschirm mit dem Breadboard zu verbinden. Der Bildschirm ist für das Projekt ausreichend, zeichnet sich allerdings durch mehrere Schwachstellen aus: Der Bildschirm ist ziemlich klein, was die Eingabe von beispielsweise dem Passwort einer WLAN-Verknüpfung erschwert. Zudem ist die Bildwiederholrate sehr niedrig, was zu einem ruckeligen Bild und entsprechend einer negativeren Nutzererfahrung führt. Ein großer Kritikpunkt ist ebenfalls der Blickwinkel – schon bei einer leichten Neigung werden die Farben auf dem Bildschirm stark verzerrt angezeigt.
|
|
|
|
Aufgrund der beim Pi eingebauten 3,5mm-Klinke zur Audioausgabe/-eingabe wurde ein kleiner Lautsprecher mit entsprechendem Anschluss ausgewählt. Dieser ist für das Projekt ausreichend, sollte allerdings im Optimalfall durch einen stärkeren Lautsprecher ersetzt werden, da er auch bei maximaler Lautstärke recht leise ist. Im Endeffekt wurde allerdings doch nicht die 3,5mm-Klinke des Pis verwendet, da es zu einem Softwareproblem kam, welches in Kapitel [TODO Kapitelnummer einfügen] erklärt wird. Aus diesem Grund wird einer der vier USB-Ports des Pis für eine externe Soundkarte verwendet. Diese ist klein und leistungsstark genug, um für das Projekt gut verwendbar zu sein. Zur Aufnahme der Stimmen der Personen, die sich mit der AmbientBox im Raum befinden, wurde ein USB-Mikrofon verwendet. Dieses ist für das Projekt passend, da es ein langes Kabel hat und klein und unaufmerksam ist. Es stellte sich allerdings heraus, dass das Kabel an dem USB-Anschluss einen langen Plastiktrichter hat, der nicht verbogen werden kann und deshalb die Größe der AmbientBox radikal erhöhen würde. Aus diesem Grund wurde ein Verlängerungskabel besorgt.
|
|
|
|
Ein weiteres Verlängerungskabel wurde vom Pi nach außen zum unteren Rand der AmbientBox gelegt. Dadurch wird ein USB-A Anschluss geboten, an dem beispielsweise eine USB-Tastatur oder eine Maus zur einfacheren Navigation angeschlossen werden kann. Neben diesem Anschluss befindet sich ein zweiter USB-C Anschluss. Dieses Kabel ist intern direkt mit einer Powerbank verbunden, die es der AmbientBox erlaubt, ohne direkten Stromanschluss betrieben zu werden. Über den USB-C Anschluss lässt sich die Powerbank und somit die gesamte AmbientBox laden. Die Powerbank stammt von der Marke Intenso und verfügt über eine Kapazität von 10.000 Milliamperestunden, was zu einer langen Batterielaufzeit der AmbientBox führt.
|
|
|
|
Die AmbientBox ist mit der Powerbank über ein Kabel verbunden, welches einen physischen An- und Ausschalter besitzt. Dieser Schalter wurde zur Außenseite der Box gelegt und schaltet entsprechend den Stromfluss zwischen dem Raspberry Pi und der Powerbank ab oder an.
|
|
|
|
\
|
|
|
|
Abbildung XX: Der AmbientBox Hardware-Prototyp während der Konstruktion
|
|
|
|
|
|
|
|
Die initiale Idee war es, für das System einen Arduino Microkontroller zu verwenden. Es zeigte sich allerdings schon bald, dass dessen Leistung und Funktionen für das Projekt nicht passend war. Stattdessen wurde sich also für einen Raspberry Pi Mini-Computer entschieden. Dieser unterscheidet sich vom Arduino durch deutlich höhere Rechenkapazität, erweiterten Kommunikationsmöglichkeiten wie einem eingebauten WLAN-Modul und mehrere Anschlüsse und durch ein vollständiges Betriebssystem, dem Raspbian OS.\
|
|
|
|
Es wird ein 3,5 Zoll TFT Touchscreen-Bildschirm verwendet. Dieser kann über Pins direkt mit dem Pi verbunden werden, in diesem Fall haben wurde sich aber dafür entschieden, den Pi mit einem kleinen Breadboard zur Weiterleitung der Signale zu verbinden und dann entsprechend den Bildschirm mit dem Breadboard zu verbinden. Der Bildschirm ist für das Projekt ausreichend, zeichnet sich allerdings durch mehrere Schwachstellen aus: Der Bildschirm ist ziemlich klein, was die Eingabe von beispielsweise dem Passwort einer WLAN-Verknüpfung erschwert. Zudem ist die Bildwiederholrate sehr niedrig, was zu einem ruckeligen Bild und entsprechend einer negativeren Nutzererfahrung führt. Ein großer Kritikpunkt ist ebenfalls der Blickwinkel – schon bei einer leichten Neigung werden die Farben auf dem Bildschirm stark verzerrt angezeigt.\
|
|
|
|
Aufgrund der beim Pi eingebauten 3,5mm-Klinke zur Audioausgabe/-eingabe wurde ein kleiner Lautsprecher mit entsprechendem Anschluss ausgewählt. Dieser ist für das Projekt ausreichend, sollte allerdings im Optimalfall durch einen stärkeren Lautsprecher ersetzt werden, da er auch bei maximaler Lautstärke recht leise ist. Im Endeffekt wurde allerdings doch nicht die 3,5mm-Klinke des Pis verwendet, da es zu einem Softwareproblem kam, welches durch die LED-Leiste ausgelöst wird. Diese verwendet ebenfalls den internen Audio-Kanal des Pis, weshalb der Audio-Treiber der internen Soundkarte des Pis deaktiviert werden muss. Aus diesem Grund wird einer der vier USB-Ports des Pis für eine externe Soundkarte verwendet. Diese ist klein und leistungsstark genug, um für das Projekt gut verwendbar zu sein. Zur Aufnahme der Stimmen der Personen, die sich mit der AmbientBox im Raum befinden, wurde ein USB-Mikrofon verwendet. Dieses ist für das Projekt passend, da es ein langes Kabel hat und klein und unaufmerksam ist. Es stellte sich allerdings heraus, dass das Kabel an dem USB-Anschluss einen langen Plastiktrichter hat, der nicht verbogen werden kann und deshalb die Größe der AmbientBox radikal erhöhen würde. Aus diesem Grund wurde ein Verlängerungskabel besorgt.
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung XX: Das Innenleben des AmbientBox Hardware-Prototypen
|
|
|
|
|
|
|
|
Ein weiteres Verlängerungskabel wurde vom Pi nach außen zum unteren Rand der AmbientBox gelegt. Dadurch wird ein USB-A Anschluss geboten, an dem beispielsweise eine USB-Tastatur oder eine Maus zur einfacheren Navigation angeschlossen werden kann. Neben diesem Anschluss befindet sich ein zweiter USB-C Anschluss. Dieses Kabel ist intern direkt mit einer Powerbank verbunden, die es der AmbientBox erlaubt, ohne direkten Stromanschluss betrieben zu werden. Über den USB-C Anschluss lässt sich die Powerbank und somit die gesamte AmbientBox laden. Die Powerbank stammt von der Marke Intenso und verfügt über eine Kapazität von 10.000 Milliamperestunden, was zu einer langen Batterielaufzeit der AmbientBox führt.\
|
|
|
|
Die AmbientBox ist mit der Powerbank über ein Kabel verbunden, welches einen physischen An- und Ausschalter besitzt. Dieser Schalter wurde zur Außenseite der Box gelegt und schaltet entsprechend den Stromfluss zwischen dem Raspberry Pi und der Powerbank ab oder an.\
|
|
|
|
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ächsteilnehmer gut zu sehen.
|
|
|
|
|
|
|
|
\
|
|
|
|
Abbildung XX: Der AmbientBox Hardware-Prototyp im Betrieb
|
|
|
|
|
|
|
|
# Schnittstellen
|
|
|
|
|
|
|
|
Die Kommunikation zwischen der AmbientBox und dem Accelerator erfolgt ebenso wie die interne AmbientBox-Kommunikation über Websockets. Dafür wird socket.io Version 2.4.0 verwendet. Aufteilen lässt sich die Kommunikation zwischen den beiden Systemen in Frontend- und Backend-Kommunikation.
|
|
|
|
|
|
|
|
## Initialisierung der Backend-Verbindung
|
|
|
|
|
|
|
|
Das Backend der AmbientBox setzt sowhl 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.
|
|
|
|
Das Backend der AmbientBox setzt sowhl 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 ziehlt 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: Verbindungsabufbau zwischen der AmbientBox und dem Accelerator
|
|
|
|
 Abbildung X: Verbindungsabufbau zwischen der AmbientBox und dem Accelerator
|
|
|
|
|
|
|
|
Wenn die AmbientBox angeschaltet wird, wird nach der Initialisierung von unterschiedlichen Socket-Listenern eine Verbndungsanfrage an den Accelerator gesendet. Der Accelerator initialisiert ebenfalls zu Beginn derLaufzeit Socket-Listener. Nachfolgend sind die relevanten Listener-Events der AmbientBox und des Accelerators aufgelistet aufgelistet:
|
|
|
|
|
|
|
|
| Event | Funktionalität |
|
|
|
|
| --------------- | -------------------------------------------------------------------------------------------------------- |
|
|
|
|
|-------|----------------|
|
|
|
|
| connect | Erfasst den erfolgreichen Verbindungsaufbau und sendet die Aktivierung der AmbientBox an den Accelerator |
|
|
|
|
| disconnect | Erfasst einen Verbindungsabbruch und aktualisiert die LED-Leiste |
|
|
|
|
| reconnect | Erfasst ein Reconnect nach einem Verbindungsabbruch und setzt den Error-Zähler zurück |
|
| ... | ... | @@ -164,9 +205,8 @@ Wenn die AmbientBox angeschaltet wird, wird nach der Initialisierung von untersc |
|
|
|
| error | Erfasst undefinierte Fehler |
|
|
|
|
|
|
|
|
Tabelle X: Event-Listener auf der Seite der AmbientBox
|
|
|
|
|
|
|
|
| Event | Funktionalität |
|
|
|
|
| --------------------------- | ----------------------------------------------------------------------------------------------- |
|
|
|
|
|-------|----------------|
|
|
|
|
| connection | Erfasst alle Verbindungsanfragen und sendet bei Erfolg das "connect"-Event |
|
|
|
|
| disconnect | Erfasst alle Verbindungsabbrüche und aktualisiert die Liste der AmbientBoxen |
|
|
|
|
| activateAmbientBox | Erfasst die ID einer AmbientBox und aktiviert diese in der Liste aller AmbientBoxe |
|
| ... | ... | @@ -203,8 +243,7 @@ Das Objekt enthält die ID der Box, ihren Namen und die Farbe für die Anzeige i |
|
|
|
|
|
|
|
Sobald eine initiale Verbindung der beiden Systeme erstellt ist, kann ein Nutzer im Accelerator sich mit einer AmbientBox verbinden. Der Nutzer 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 Nutzer 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 Nutzer mitgesendet. Im Frontend der AmbientBox wird daraufhin eine Verbindungsanfrage angezeigt. Wenn der Nutzer die Verbindung akzeptiert, wird der Nutzer und der Raum in das Frontend geladen und eine WebRTC-Verbindung erstellt ([siehe Kapitel WebRTC](#webrtc)). Wenn der Nutzer 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 Forntend nicht geladen ist. In der nachfolgenden Abbildung ist diese Kommunikation visualisiert.
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung X: Verbindung einer AmbientBox mit einem Nutzer
|
|
|
|
 Abbildung X: Verbindung einer AmbientBox mit einem Nutzer
|
|
|
|
|
|
|
|
## Event-Weiterleitung
|
|
|
|
|
| ... | ... | @@ -222,8 +261,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 Events 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 X: Event-Weiterleitung
|
|
|
|
|
|
|
|
## WebRTC
|
|
|
|
|
| ... | ... | @@ -239,9 +277,8 @@ Die WebRTC-Verbindung wird von der Seite der AmbientBox initialisiert, wenn der |
|
|
|
- vpx-worker.js
|
|
|
|
|
|
|
|
Diese Dateien setzten ebenfalls Event-Listener um, welche wichtig für die WebRTC-Verbindung sind. In der nachfolgenden Tabelle sind die wichtigsten Listener aufgelistet, welche hauptsächlich für den Verbindungsaufbau verantwortlich ist.
|
|
|
|
|
|
|
|
| Datei | Event | Funktionalität |
|
|
|
|
| ---------- | ------------------ | -------------------------------------------------------------------------------------------------------- |
|
|
|
|
|-------|-------|----------------|
|
|
|
|
| ezMCU.js | mcu_registerStream | Veröffentlicht einen eigenen Audio- oder Videostream |
|
|
|
|
| connect.js | newStreamPublished | Erfasst alle neuen Streams und subscribed zu diesen, sofern eine Verbindung mit einer AmbientBox besteht |
|
|
|
|
| connect.js | streamAdded | Erfasst verfügbare Streams, und fügt diese als Audio- oder Video-Element hinzu |
|
| ... | ... | @@ -251,15 +288,13 @@ Tabelle X: 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 Berechtigunegn für die Audio- und Videostreams der Kamera und des Mikrofons der AmbientBox angefragt und als neuer Stream an den Accelerator gepublisht. 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 verknüpften Nutzers 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.
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung X: WebRTC-Verbindungsaufbau
|
|
|
|
 Abbildung X: WebRTC-Verbindungsaufbau
|
|
|
|
|
|
|
|
## Sonstige Events
|
|
|
|
|
|
|
|
Es gibt noch einige weitere Socket-Events, welche wichtig für die Kommunikation zwischen den beiden Systemen und intern in der AmbientBox sind. In der Tabelle X sind diese Events aufgelistet.
|
|
|
|
|
|
|
|
| Event | System | Funktionalität |
|
|
|
|
| -------------------- | ------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
|-------|--------|----------------|
|
|
|
|
| ambientBoxes | Accelerator | Schickt Updates des AmbientBox-Arrays an alle Clients |
|
|
|
|
| assignAmbientBoxes | Accelerator | Führt die Zuteilung der AmbientBoxen durch, wenn ein Nutzer in einen Raum beitritt, in welchem bereits eine AmbientBox in Anwendung ist |
|
|
|
|
| stopWebRTCConnection | AmbientBox / Accelerator | Teilt dem Accelerator mit, dass die AmbientBox ihre WebRTC-Verbindung beendet hat |
|
| ... | ... | @@ -274,9 +309,7 @@ Zur Evalutaion der Usability der AmbientBox wurde das System mehreren Personen v |
|
|
|
|
|
|
|
## Vorgehen
|
|
|
|
|
|
|
|
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
|
|
|
|
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
|
|
|
|
|
|
|
|
Die Teilnehmer wurde 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 Nutzer neun Aufgaben gestellt werden. Jede der Aufgaben ziehlt darauf ab, dass die Funktionalitäten der AmbientBox durch den Nutzer ausgeführt werden. Dabei werden dem Nutzer keine Tipps gegeben. Die neun Aufgaben sind nachfolgend aufgelistet:
|
|
|
|
|
| ... | ... | @@ -295,32 +328,91 @@ Nachdem alle Aufgaben ausgeführt wurden, wird dem Nutzer der Fragebogen zur Bew |
|
|
|
## Ergebnisse
|
|
|
|
|
|
|
|
Nachfolgend sind die Ergebnisse der SUS-Fragebögen aufgelistet:
|
|
|
|
|
|
|
|
| Teilnehmer | F1 | F2 | F3 | F4 | F5 | F6 | F7 | F8 | F9 | F10 | Score | Anmerkungen |
|
|
|
|
| ---------- | --- | --- | --- | --- | --- | --- | --- | --- | --- | --- | ----- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
|
|
| 1 | 3 | 1 | 4 | 1 | 3 | 1 | 5 | 2 | 5 | 1 | 85 | Die Hardware ist ausbaufähig -> bessere Lautsprecher, Kamera nach oben ausrichten, Bildschirm gekippt für bessere Sicht. <br/>Das Grundkonzept ist gut. |
|
|
|
|
|------------|----|----|----|----|----|----|----|----|----|-----|-------|-------------|
|
|
|
|
| 1 | 3 | 1 | 4 | 1 | 3 | 1 | 5 | 2 | 5 | 1 | 85 | Die Hardware ist ausbaufähig -> bessere Lautsprecher, Kamera nach oben ausrichten, Bildschirm gekippt für bessere Sicht. <br>Das Grundkonzept ist gut. |
|
|
|
|
| 2 | 2 | 1 | 4 | 1 | 3 | 1 | 5 | 2 | 4 | 1 | 80 | Hardware könnte optimiert werden. |
|
|
|
|
| 3 | 2 | 2 | 4 | 1 | 4 | 2 | 3 | 2 | 4 | 1 | 72,5 | Bildschirm sehr klein und spiegelt aus sitzender Perspektive sehr stark. |
|
|
|
|
| 4 | 2 | 2 | 4 | 1 | 4 | 3 | 2 | 4 | 3 | 1 | 60 | Die Hardware ist nicht so geeignet <br /> - Display viel zu klein & spiegelt <br /> - Zeigt unterschiedliche Farben an, je nach Blickwinkel <br/> - Kamera ist zu tief + Leute am Tisch müssen sich über die Box & Kamera beugen, um den Bildschirm anzusehen. -> d.h. Box müsste größer bzw. Kamera höher liegen & der Bildschirm senkrecht statt waagrecht angebracht sein |
|
|
|
|
| 4 | 2 | 2 | 4 | 1 | 4 | 3 | 2 | 4 | 3 | 1 | 60 | Die Hardware ist nicht so geeignet <br>- Display viel zu klein & spiegelt <br>- Zeigt unterschiedliche Farben an, je nach Blickwinkel <br>- Kamera ist zu tief + Leute am Tisch müssen sich über die Box & Kamera beugen, um den Bildschirm anzusehen. -> d.h. Box müsste größer bzw. Kamera höher liegen & der Bildschirm senkrecht statt waagrecht angebracht sein |
|
|
|
|
| 5 | 4 | 2 | 5 | 1 | 5 | 2 | 5 | 1 | 4 | 1 | 90 | - |
|
|
|
|
| 6 | 4 | 1 | 5 | 1 | 4 | 3 | 5 | 1 | 4 | 2 | 87,5 | - Ton und Bild sind noch etwas verzögert, wackelig <br/> - Bildschirm könnte ein klein bisschen größer sein für die Bedienung durch ältere Menschen |
|
|
|
|
| 7 | 3 | 2 | 5 | 2 | 4 | 1 | 4 | 2 | 4 | 2 | 77,5 | - Andere Anordnung des Displays <br/> - Feedback beim Einschalten |
|
|
|
|
| 8 | 5 | 1 | 5 | 1 | 5 | 1 | 5 | 1 | 5 | 1 | 100 | - Sehr intuitiv <br /> - Blickwinkel von Display etwas schlecht |
|
|
|
|
| 6 | 4 | 1 | 5 | 1 | 4 | 3 | 5 | 1 | 4 | 2 | 87,5 | - Ton und Bild sind noch etwas verzögert, wackelig <br>- Bildschirm könnte ein klein bisschen größer sein für die Bedienung durch ältere Menschen |
|
|
|
|
| 7 | 3 | 2 | 5 | 2 | 4 | 1 | 4 | 2 | 4 | 2 | 77,5 | - Andere Anordnung des Displays <br>- Feedback beim Einschalten |
|
|
|
|
| 8 | 5 | 1 | 5 | 1 | 5 | 1 | 5 | 1 | 5 | 1 | 100 | - Sehr intuitiv <br>- Blickwinkel von Display etwas schlecht |
|
|
|
|
| 9 | 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 |
|
|
|
|
| 10 | 4 | 1 | 5 | 1 | 5 | 1 | 4 | 1 | 5 | 1 | 92,5 | - |
|
|
|
|
|
|
|
|
Tabelle X: 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.
|
|
|
|
Ein weiterer Kritikpunkt ist die Anordnung des Displays. Von einer sitzenden Position spiegelt dieses sehr und es ist schwierig zu erkennen, was sich auf dem Display abspielt. Eine gekippte Position oben auf der AmbientBox oder die Anbringung des Bildschirms an der Vorderseite wurden dabei angemerkt. Beim letzten Punkt wurde dabei aber auch angemerkt, dass dabei die Bedienbarkeit darunter leiden würde.
|
|
|
|
Eine weitere Anmerkung ist die Verwendung der Kamera. Die Kamera ist zu tief angebracht, sodass nicht alle Personen vollständig erkennbar sind. Ein veränderter Winkel oder eine Kamera mit Weitwinkelfunktion könnten dieses Problem beheben.
|
|
|
|
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.\
|
|
|
|
Ein weiterer Kritikpunkt ist die Anordnung des Displays. Von einer sitzenden Position spiegelt dieses sehr und es ist schwierig zu erkennen, was sich auf dem Display abspielt. Eine gekippte Position oben auf der AmbientBox oder die Anbringung des Bildschirms an der Vorderseite wurden dabei angemerkt. Beim letzten Punkt wurde dabei aber auch angemerkt, dass dabei die Bedienbarkeit darunter leiden würde.\
|
|
|
|
Eine weitere Anmerkung ist die Verwendung der Kamera. Die Kamera ist zu tief angebracht, sodass nicht alle Personen vollständig erkennbar sind. Ein veränderter Winkel oder eine Kamera mit Weitwinkelfunktion könnten dieses Problem beheben.\
|
|
|
|
Es wurden keine Anmerkungen oder Kritikpunkte an der entwickelten Oberfläche der AmbientBox erfasst. Aufgrund der geringen restlichen Zeit des Semesters wurden keine Änderungen aufgrund des Feedbacks vorgenommen, jedoch bietet dieses Anhaltspunkte für eine Weiterentwicklung des Systems in kommenden Semestern.
|
|
|
|
|
|
|
|
# Anleitung
|
|
|
|
|
|
|
|
## Vorbereitung
|
|
|
|
|
|
|
|
|
|
|
|
Abbildung XX: Downloadseite des Raspberry Pi Imagers
|
|
|
|
|
|
|
|
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.\
|
|
|
|
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: Betribssystemauswahl
|
|
|
|
|
|
|
|
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.\
|
|
|
|
Sobald das System fertig aufgesetzt ist und Sie sich auf dem Desktop befinden, kann man Node.js installieren. Dafür öffnen Sie eine Konsole mittels der Tastaturkombination STRG+ALT+T. Tippen Sie das folgende Kommando in die Konsole ein und bestätigen Sie mit Enter:\
|
|
|
|
`curl -sL https://deb.nodesource.com/setup_14.x | sudo bash -`\
|
|
|
|
Danach tippen Sie das folgende Kommando ein: \
|
|
|
|
`sudo apt install nodejs`\
|
|
|
|
Sie können prüfen, ob die Installation erfolgreich war, indem Sie folgendes Kommando eingeben:\
|
|
|
|
`node –version` Es sollte eine Versionsnummer ausgegeben werden.\
|
|
|
|
Als nächstes klonen Sie sich das AmbientBox Projekt. Dafür geben Sie in die Konsole Folgendes ein:\
|
|
|
|
`git clone https://gitlab.reutlingen-university.de/eckl/ambientbox.git`\
|
|
|
|
Geben Sie den Nutzernamen und das Passwort eines Nutzers ein, der/die Zugriff auf das Repository hat. Wenn das Projekt geladen ist, wechseln Sie in den Projektordner mittels des Kommandos:\
|
|
|
|
`cd ambientbox/client/`\
|
|
|
|
Hier geben Sie folgendes Kommando ein:\
|
|
|
|
`npm run build`\
|
|
|
|
Danach gehen Sie in den Hauptprojektsorder zurück. Dafür geben Sie ein:\
|
|
|
|
`cd ..`\
|
|
|
|
Und hier führen Sie aus:\
|
|
|
|
`npm run prod`\
|
|
|
|
Damit ist das Projekt bereit, gehostet zu werden.\
|
|
|
|
Als nächstes wollen Sie den Treiber für die LED-Leiste installieren. Hierfür gehen Sie in den home-Ordner zurück indem Sie eingeben:\
|
|
|
|
`cd`\
|
|
|
|
Dann laden Sie sich das Paket runter. Geben Sie dafür folgendes ein:\
|
|
|
|
`sudo pip install rpi_ws281x`\
|
|
|
|
Bei diesem Paket gibt es ein Problem, weshalb der Audio-Treiber des Pis deaktiviert werden muss. Hierfür geben Sie folgendes Kommando ein:\
|
|
|
|
`sudo nano /etc/modprobe.d/snd-blacklist.conf`\
|
|
|
|
Es öffnet sich ein leeres Fenster in der Konsole. Tippen Sie hier folgendes ein:\
|
|
|
|
`blacklist snd_bcm2835`\
|
|
|
|
Danach drücken Sie STRG+X um das Programm zu schließen. Bestätigen Sie, dass Sie speichern wollen wenn, Sie darum gebeten werden, indem Sie den Buchstaben j und dann Enter eingeben. Wenn das System Sie um einen Namen fragt, geben Sie einfach Enter ein um den Standardnamen zu akzeptieren. Somit sollten die LEDs in der Lage sein, zu funktionieren.\
|
|
|
|
Als nächstes wollen Sie die autostart-Datei editieren, damit das ambientBox Frontend automatisch beim Start des Systems geladen wird. Geben Sie folgendes ein:\
|
|
|
|
`sudo nano /etc/xdg/lxsession/LXDE-pi/autostart`\
|
|
|
|
Die Datei wird in der Konsole angezeigt. Es sollten bereits ein paar Zeilen hier stehen, diese können Sie einfach uneditiert lassen. Tippen Sie unter den bestehenden Zeilen folgendes ein:\
|
|
|
|
```
|
|
|
|
@npm –prefix ./ambientbox/ run prodPi
|
|
|
|
@xset s off
|
|
|
|
@xset -dpms
|
|
|
|
@xset s noblank
|
|
|
|
@chromium --incognito --kiosk http://localhost:3000
|
|
|
|
```
|
|
|
|
Beenden Sie das Programm wie zuvor mit STRG+X. Bestätigen Sie mit j und Enter und akzeptieren Sie den Namen mit Enter. Jetzt sollte das System beim Start ausgeführt werden.\
|
|
|
|
Das letzte was noch fehlt ist der Treiber für den Bildschirm. Dafür geben Sie in die Konsole ein:\
|
|
|
|
`git clone https://github.com/waveshare/LCD-show.git`\
|
|
|
|
Sobald das Klonen fertig ist, wechseln Sie in den Ordner mittels:\
|
|
|
|
`cd LCD-show/`\
|
|
|
|
Jetzt geben Sie ein:\
|
|
|
|
`sudo ./LCD35-show `\
|
|
|
|
Der Pi sollte sich automatisch abschalten und neustarten. Wenn er neugestartet ist, sollten Sie ein Bild nur auf dem mit dem Pi verbunden Touchscreen sehen und nicht mehr auf den mit HDMI verbundenen Monitor. Es muss noch die Auflösung angepasst werden. Öffnen Sie erneut eine Konsole mittels STRG+ALT+T und geben Sie ein:\
|
|
|
|
`sudo raspi-config `\
|
|
|
|
Es öffnet sich ein blau-graues Fenster in der Konsole. Benutzen Sie die Pfeiltasten der Tastatur um runter zu „Advanced Options“ zu navigieren und bestätigen Sie mit Enter. Jetzt navigieren Sie erneut runter zu „Resolution“ und bestätigen erneut mit Enter. Wählen Sie das Feld, bei dem „720x480“ steht aus und bestätigen Sie. Wenn ein Textfeld erscheint das Sie fragt, ob Sie das System neustarten möchten, wählen Sie „yes“ aus.\
|
|
|
|
Glückwunsch! Wenn alles richtig gelaufen ist, sollten Sie jetzt die AmbientBox wie geplant verwenden können.
|
|
|
|
|
|
|
|
## Bedienung
|
|
|
|
|
|
|
|
Wenn die AmbientBox per Hardwareschalter angeschaltet wird, startet der Node.js Server und die Benutzeroberfläche wird automatisch geladen.
|
| ... | ... | |
