| ... | ... | @@ -92,7 +92,7 @@ Das Arbeiten mit Mockups half uns von Beginn an grundlgegende Charakteristika de |
|
|
|
|
|
|
|
Im Accelerator werden sogenannte Modale benutzt, um Einstellungen vorzunehmen, z.B: die Auswahl von Präsentationsfolien. Innerhalb des Timer Settings Modals werden dem entsprechend Konfigurationsmöglichkeiten bezüglich des Timers gruppiert. Bevor das Timer Settings Modal und der zugehörige Timer Button implementiert wurde, wurde ein Dialog dafür festgelegt.
|
|
|
|
|
|
|
|
Die Abbildung zeigt des Verlauf des Dialogs für die Erstellung / Löschung eines Timers. Sie diente als Grundlage für die Implementierung, auch wenn diese nicht eins zu eins umgesetzt wurde.
|
|
|
|
Die Abbildung zeigt den Verlauf des Dialogs für die Erstellung / Löschung eines Timers. Sie diente als Grundlage für die Implementierung, auch wenn diese nicht eins zu eins umgesetzt wurde.
|
|
|
|
|
|
|
|
|
|
|
|
|
| ... | ... | @@ -131,7 +131,7 @@ Step Details | Expected Results | |
|
|
|
| Change the position of the Timer by dragging it to a corner | Timer changes from horizontal to vertical layout and back |
|
|
|
|
|
|
|
|
Für die vollständige Spezifikation der Testfälle wurde ein Template genutzt:
|
|
|
|
[text](https://www.guru99.com/download-sample-test-case-template-with-explanation-of-important-fields.html)
|
|
|
|
[Template](https://www.guru99.com/download-sample-test-case-template-with-explanation-of-important-fields.html)
|
|
|
|
(Zuletzt überprüft am 06.01.2020)
|
|
|
|
|
|
|
|
-------------
|
| ... | ... | @@ -151,11 +151,10 @@ Zudem zeigt das Video einen Bug, der zu Zeitpunkt der Aufnahme noch bestand, inz |
|
|
|
**Timer Button**
|
|
|
|
Das Settings Modal wird über den Timer-Button geöffnet. Dieser befindet sich in der Toolbar, die der Rolle des Moderators zur Verfügung steht. Der Button ist aktuell neben dem Clock-Button platziert, dies kann jedoch sehr leicht geändert werden. Die Sanduhr als Symbol wurde für den Timer ausgewählt, da eine Uhrdarstellng schon existierte. Das Zahnrad deutet darauf hin, dass hier weitere Einstellungen ausgewählt werden können. Ein Klick auf den Timer Button öffnet das zugehörige Modal, in welchem es möglich ist, verschiedene Einstellungen festzulegen.
|
|
|
|
|
|
|
|
|
|
|
|
Dazu gehört folgendes:
|
|
|
|
Dazu gehört Folgendes:
|
|
|
|
|
|
|
|
**Visibility**
|
|
|
|
An dieser Stelle kann der Nutzer auswählen, wer den timer nutzt / wem dieser angezeigt wird. Je nach Einstellung ist hier der Rollen Wechsel zu beachten. Bei wählen des Moderators wird der Timer aktuell dem Moderator zugeordnet, d. h. niemand anderen sieht den Timer. Falls "all" ausgewählt ist, dann musst in der Datei connect.js die Änderungen an den Server gesendet werden.
|
|
|
|
An dieser Stelle kann der Nutzer auswählen, wer den Timer nutzt / wem dieser angezeigt wird. Je nach Einstellung ist hier der Rollen Wechsel zu beachten. Bei der Auswahl der Rolle des Moderators wird der Timer aktuell dem Moderator zugeordnet, d. h. niemand anderen sieht den Timer. Falls "all" ausgewählt ist, dann muss in der Datei connect.js die Änderungen an den Server gesendet werden.
|
|
|
|
|
|
|
|
**Time**
|
|
|
|
Die Eingabe einer Zeitdauer erfolgt an dieser Stelle. Dabei werden Input Felder für Stunden, Minuten und Sekunden zur Verfügung gestellt. Alle angegebenen Zeiten werden in Sekunden umgerechnet.
|
| ... | ... | @@ -164,28 +163,26 @@ Die Eingabe einer Zeitdauer erfolgt an dieser Stelle. Dabei werden Input Felder |
|
|
|
Das Settings Modal enthält auch einen Button, um den Timer zu löschen und dessen Anzeige zu beenden. Nachdem der Timer gelöscht wird, wird die gestoppt, die notwendigen Klassen zum "verstecken" der Kreise hinzugefügt.
|
|
|
|
|
|
|
|
**Start Timer**
|
|
|
|
Nach Ausführen dieses Buttons, läuft der Timer je nach Sichtbarkeit für den Moderator oder für alle gleichzeitig herunter. Mit Hilfe der Methode `setInterval` kann angegeben werden, wie oft eine bestimmte Methode ausgeführt wird. Bei der Erstellung des Timers wird die Anzahl der Darstellungselemente (Punkte) dynamisch festgelegt. Aktuell ist die maximale Anzahl an Punkten 14. Dies kann bei Bedarf geändert werden. Bei der Breite des Timers ist immer darauf zu achten, dass diese nicht länger ist als die Höhe des Fensters (aufgrund der vertikalen Ausrichtung).
|
|
|
|
|
|
|
|
Nach Ausführen dieses Buttons, läuft der Timer je nach Sichtbarkeit für den Moderator oder für alle gleichzeitig herunter. Mit Hilfe der Methode 'setInterval' kann angegeben werden, wie oft eine bestimmte Methode ausgeführt wird. Bei der Erstellung des Timers wird die Anzahl der Darstellungselemente (Punkte) dynamisch festgelegt. Aktuell ist die maximale Anzahl an Punkten 14. Dies kann bei Bedarf geändert werden. Bei der Breite des Timers ist immer darauf zu achten, dass diese nicht länger ist als die Höhe des Fensters (aufgrund der vertikalen Ausrichtung).
|
|
|
|
|
|
|
|
## 4.2 Timer
|
|
|
|
|
|
|
|
Zuerst wurde eine simple Erstversion eines Timers implementiert, um die Logik zu entwicklen und mit dem Code des Accelerator vertraut zu werden.
|
|
|
|
Zuerst wurde eine simple Erstversion eines Timers implementiert, um die Logik zu entwickeln und mit dem Code des Accelerators vertraut zu werden.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*Abbildung 5: Erstversion Timer*
|
|
|
|
|
|
|
|
Diese Erstversion half uns dabei, die Anforderungen für den Timer weiter zu konkretisieren. Im folgenden wird auf einige Details der Implementierung eingegangen.
|
|
|
|
Nachdem der Timer gestartet wurde, wird eine bestimmte Funktion jede Sekunde ausgeführt. Dabei werden zunächst alle Selektoren auf die niedrige Transparenz gestellt. Danach werden die Anzahl der Punkte gesamt ermittelt, die beim Starten dynamisch generiert wurden. Danach wird die aktuelle Zeit in Relation zu der gesamten Zeit gestellt und mit Hilfe des Ergebnisses der aktuelle zu anzeigende Punkt berechnet. Wenn die Zeit abgelaufen ist wird mit Hilfe von `clearInterval` der Timer gestoppt. Dies ist auch notwendig, wenn der Timer gelöscht oder einfach neu ausgeführt wird.
|
|
|
|
Diese Erstversion half uns dabei, die Anforderungen für den Timer weiter zu konkretisieren. Im Folgenden wird auf einige Details der Implementierung eingegangen.
|
|
|
|
Nachdem der Timer gestartet wurde, wird eine bestimmte Funktion jede Sekunde ausgeführt. Dabei werden zunächst alle Selektoren auf die niedrige Transparenz gestellt. Danach werden die Anzahl der Punkte gesamt ermittelt, die beim Starten dynamisch generiert wurden. Dann wird die aktuelle Zeit in Relation zu der gesamten Zeit gestellt und mithilfe des Ergebnisses der aktuelle zu anzeigende Punkt berechnet. Wenn die Zeit abgelaufen ist, wird mithilfe von 'clearInterval' der Timer gestoppt. Dies ist auch notwendig, wenn der Timer gelöscht oder einfach neu ausgeführt wird.
|
|
|
|
|
|
|
|
**Start / Stopp Funktionalität**
|
|
|
|
Der Timer lässt sich bei Bedarf pausieren. Dazu werden jeweils Buttons zur Verfügung gestellt. Dabei haben wir uns für einen Hoover-Effekt entschieden. Die Farbe Blau wird im Accelerator genutzt um Dinge hervorzuheben z.B: welche Buttons gedrückt sind. Um uns diese "Gewöhnung des Nutzers" zu Nutzen zu machen, ist das selbe Blau in den Buttons und der Zeitangabe aufgegriffen.
|
|
|
|
Der Timer lässt sich bei Bedarf pausieren. Dazu werden jeweils Buttons zur Verfügung gestellt. Dabei haben wir uns für einen Hoover-Effekt entschieden. Die Farbe Blau wird im Accelerator genutzt, um Dinge hervorzuheben z.B: welche Buttons gedrückt sind. Um uns diese "Gewöhnung des Nutzers" zu Nutzen zu machen, ist dasselbe Blau in den Buttons und der Zeitangabe aufgegriffen.
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
*Abbildung 6: Stopp auf dem Timer*
|
|
|
|
|
|
|
|
|
|
|
|
---------------------
|
|
|
|
|
|
|
|
# 5 Ausblick
|
| ... | ... | |
