Minor fixes for better usability

lib/logic/Task.js

@@ -6,19 +6,19 @@ const schema = require("@colyseus/schema"),
     imageUrl: "images/Brueghel-The_Dutch_Proverbs.jpg",
     imageUrl: "images/Brueghel-The_Dutch_Proverbs.jpg",
     taskDescription: "Suchen Sie nach bildlichen Darstellungen niederländischer Sprichwörter des 16. Jahrhunderts.",
     taskDescription: "Suchen Sie nach bildlichen Darstellungen niederländischer Sprichwörter des 16. Jahrhunderts.",
     taskSource: "Pieter Bruegel the Elder, Netherlandish Proverbs (Oil on oak wood, 1599), Gemäldegalerie, Berlin",
     taskSource: "Pieter Bruegel the Elder, Netherlandish Proverbs (Oil on oak wood, 1599), Gemäldegalerie, Berlin",
-    duration: 15000,
+    duration: 30000,
   },
   },
   {
   {
     imageUrl: "images/Brueghel-The_Fight_Between_Carnival_and_Lent.jpg",
     imageUrl: "images/Brueghel-The_Fight_Between_Carnival_and_Lent.jpg",
     taskDescription: "Suchen Sie nach Darstellungen von Personen ohne Kopfbedeckung.",
     taskDescription: "Suchen Sie nach Darstellungen von Personen ohne Kopfbedeckung.",
     taskSource: "Pieter Bruegel the Elder, The Fight Between Carnival and Lent (Oil on oak wood, 1559), Kunsthistorisches Museum, Vienna",
     taskSource: "Pieter Bruegel the Elder, The Fight Between Carnival and Lent (Oil on oak wood, 1559), Kunsthistorisches Museum, Vienna",
-    duration: 15000,
+    duration: 30000,
   },
   },
   {
   {
     imageUrl: "images/Bruegel-Childrens_Games.jpg",
     imageUrl: "images/Bruegel-Childrens_Games.jpg",
     taskDescription: "Identifizieren Sie unterschiedliche Spiele.",
     taskDescription: "Identifizieren Sie unterschiedliche Spiele.",
     taskSource: "Pieter Bruegel the Elder, Children's Bruegel-Childrens_Games (Oil on oak wood, 1560), Kunsthistorisches Museum, Vienna",
     taskSource: "Pieter Bruegel the Elder, Children's Bruegel-Childrens_Games (Oil on oak wood, 1560), Kunsthistorisches Museum, Vienna",
-    duration: 15000,
+    duration: 30000,
   }];
   }];
 
 
 var taskCounter = 0;
 var taskCounter = 0;

lib/rooms/ImageViewerRoom.js

 /* eslint-env node */
 /* eslint-env node */
 
 
-const MAX_GAZE_POINT_AGE = 2000,
+const MAX_GAZE_POINT_AGE = 4000,
   // Set max update intervall to ~ 30FPS
   // Set max update intervall to ~ 30FPS
   GAZE_POINT_UPDATE_DELAY = 1000 / 32;
   GAZE_POINT_UPDATE_DELAY = 1000 / 32;
 
 
@@ -49,7 +49,7 @@ class ImageViewerRoom extends colyseus.Room {
   onMessage(client, message) {
   onMessage(client, message) {
     if (message.type === "gaze") {
     if (message.type === "gaze") {
       if (client.color === undefined) {
       if (client.color === undefined) {
-        client.color = Colors.createRandomColor();
+        client.color = Colors.getNextColor();
         Logger.log(`Assign client color: ${client.color}`, "ImageViewer Room");
         Logger.log(`Assign client color: ${client.color}`, "ImageViewer Room");
       }
       }
       message.data.color = client.color;
       message.data.color = client.color;

lib/utils/Colors.js

 /* eslint-env node */
 /* eslint-env node */
 
 
+const COLORS = ["#ff1f5a","#ffd615","#f9ff21","#1e2a78", "#43ab92", "#f75f00", "#c93838", "#512c62", "#f6f078", "#01d28e", "#434982", "#730068"];
+
+var currentColor = 0;
+
 function createRandomColorChannel() {
 function createRandomColorChannel() {
   let value = Math.floor(Math.random() * 256);
   let value = Math.floor(Math.random() * 256);
   value = Math.floor((value + 255) / 2);
   value = Math.floor((value + 255) / 2);
@@ -20,6 +24,13 @@ function rgbToHex(r, g, b) {
 
 
 class Colors {
 class Colors {
 
 
+  static getNextColor() {
+    if(currentColor === COLORS.length) {
+      currentColor = 0;
+    }
+    return COLORS[currentColor++];
+  }
+
   static createRandomColor() {
   static createRandomColor() {
     let r = createRandomColorChannel(),
     let r = createRandomColorChannel(),
       g = createRandomColorChannel(),
       g = createRandomColorChannel(),

www/index.html

@@ -17,6 +17,10 @@
                 <label for="useMouseInput">Use mouse input</label>
                 <label for="useMouseInput">Use mouse input</label>
             </span>
             </span>
             <span class="option">
             <span class="option">
+                <input type="checkbox" id="showLocalGazeData" name="showLocalGazeData">
+                <label for="showLocalGazeData">Show local gaze data</label>
+            </span>
+            <span class="option">
                 <input type="checkbox" id="isObserver" name="isObserver">
                 <input type="checkbox" id="isObserver" name="isObserver">
                 <label for="isObserver">Observer mode</label>
                 <label for="isObserver">Observer mode</label>
             </span>
             </span>

www/resources/js/index.js

@@ -13,6 +13,7 @@ var starScreen = document.querySelector("#startScreen"),
   stage = document.querySelector("#stage"),
   stage = document.querySelector("#stage"),
   viewerServerUrl = VIEWER_SERVER_URL,
   viewerServerUrl = VIEWER_SERVER_URL,
   useMouseInput = false,
   useMouseInput = false,
+  showLocalGazeData = false,
   isObserver = false,
   isObserver = false,
   imageViewer;
   imageViewer;
 
 
@@ -22,6 +23,7 @@ function init() {
 
 
 function loadOptions() {
 function loadOptions() {
   useMouseInput = document.querySelector("#useMouseInput").checked;
   useMouseInput = document.querySelector("#useMouseInput").checked;
+  showLocalGazeData = document.querySelector("#showLocalGazeData").checked;
   isObserver = document.querySelector("#isObserver").checked;
   isObserver = document.querySelector("#isObserver").checked;
   viewerServerUrl = document.querySelector("#viewerServerUrl").value;
   viewerServerUrl = document.querySelector("#viewerServerUrl").value;
 }
 }
@@ -31,7 +33,7 @@ function initViewer() {
   loadOptions();
   loadOptions();
   netClient = new NetClient(viewerServerUrl);
   netClient = new NetClient(viewerServerUrl);
   dataProvider = getDataProvider();
   dataProvider = getDataProvider();
-  imageViewer = new ImageViewer(dataProvider, netClient, stage, isObserver);
+  imageViewer = new ImageViewer(dataProvider, netClient, stage, isObserver, showLocalGazeData);
   stage.requestFullscreen().then(startViewer);
   stage.requestFullscreen().then(startViewer);
 }
 }
 
 

www/resources/js/viewer/ImageViewer.js

@@ -6,14 +6,15 @@ const FRAME_RATE = 60,
   MAX_GAZE_POINT_AGE = 500;
   MAX_GAZE_POINT_AGE = 500;
 
 
 var gazePoints = [],
 var gazePoints = [],
-observedGazePoints = [];
+  observedGazePoints = [];
 
 
 class ImageViewer {
 class ImageViewer {
 
 
-  constructor(dataProvider, netClient, stage, isObserver) {
+  constructor(dataProvider, netClient, stage, isObserver, showLocalGazeData) {
     this.observerMode = isObserver;
     this.observerMode = isObserver;
+    this.showLocalGazeData = showLocalGazeData;
     this.initNetClient(netClient, isObserver);
     this.initNetClient(netClient, isObserver);
-    if(this.observerMode === false) {
+    if (this.observerMode === false) {
       this.initDataProvider(dataProvider);
       this.initDataProvider(dataProvider);
     } else {
     } else {
       this.netClient.addEventListener("gazeupdate", this.onGazePointsAvailable);
       this.netClient.addEventListener("gazeupdate", this.onGazePointsAvailable);
@@ -72,9 +73,11 @@ class ImageViewer {
 
 
   onTick() {
   onTick() {
     let now = Date.now();
     let now = Date.now();
-    if(this.observerMode === false) {
+    if (this.observerMode === false) {
       this.updateGazePoints(now);
       this.updateGazePoints(now);
+      if (this.showLocalGazeData === true) {
         Renderer.drawGazePoints(gazePoints);
         Renderer.drawGazePoints(gazePoints);
+      }
     } else {
     } else {
       Renderer.drawGazePoints(observedGazePoints);
       Renderer.drawGazePoints(observedGazePoints);
     }
     }