... | @@ -162,23 +162,17 @@ Ein Klick auf den Timer Button öffnet das zugehörige Modal, in welchem es mög |
... | @@ -162,23 +162,17 @@ Ein Klick auf den Timer Button öffnet das zugehörige Modal, in welchem es mög |
|
Dazu gehört folgendes:
|
|
Dazu gehört folgendes:
|
|
|
|
|
|
**Visibility**
|
|
**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.
|
|
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.
|
|
Bei wählen des Moderators wird der Timer aktuell dem Moderator zugeordnet, d. h. niemand anderen sieht es. Dabei ist darauf hinzuweisen, dass im Änderungen, die für alle sichtbar gemacht werden sollen, in einer anderen Javascript-Datei vorhanden sind.
|
|
|
|
|
|
|
|
**Time**
|
|
**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.
|
|
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.
|
|
|
|
|
|
**Position**
|
|
|
|
Der Nutzer wählt an hier aus, ob der Timer vertikal oder horizontal angezeigt werden soll.
|
|
|
|
|
|
|
|
**Style**
|
|
|
|
Der Nutzer kann an dieser Stelle festlegen, welches Design der Timer aufweisen soll. Dabei stehen aktuell zwei Optionen zur Verfügung. Diese können in zukünftigen Iterationen erweitert werden und dann als Option im Drop Down Menü erweitert werden.
|
|
|
|
|
|
|
|
**Delete Timer**
|
|
**Delete Timer**
|
|
Das Settings Modal enthält auch einen Button, um den Timer zu löschen und dessen Anzeige zu beenden.
|
|
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**
|
|
**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.
|
|
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
|
|
## 4.2 Timer
|
... | @@ -190,8 +184,7 @@ Zuerst wurde eine simple Erstversion eines Timers implementiert, um die Logik zu |
... | @@ -190,8 +184,7 @@ Zuerst wurde eine simple Erstversion eines Timers implementiert, um die Logik zu |
|
*Abbildung 5: Erstversion Timer*
|
|
*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.
|
|
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.
|
|
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).
|
|
|
|
|
|
|
|
**Start / Stopp Funktionalität**
|
|
**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 das selbe Blau in den Buttons und der Zeitangabe aufgegriffen.
|
... | | ... | |