Minor fixes for better usability

1c8175b3 · Alexander Bazo · 95bf865a · 1c8175b3 · 1c8175b3 · 1c8175b3
Commit 1c8175b3 authored Oct 14, 2019 by Alexander Bazo
Showing with 32 additions and 12 deletions

lib/logic/Task.js
+3 -3

lib/rooms/ImageViewerRoom.js
+2 -2

lib/utils/Colors.js
+11 -0

www/index.html
+4 -0

www/resources/js/index.js
+3 -1

www/resources/js/viewer/ImageViewer.js
+9 -6

No files found.
--- a/lib/logic/Task.js
+++ b/lib/logic/Task.js
@@ -6,19 +6,19 @@ const schema = require("@colyseus/schema"),
    imageUrl: "images/Brueghel-The_Dutch_Proverbs.jpg",
    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",
-    duration: 15000,
+    duration: 30000,
  },
  {
    imageUrl: "images/Brueghel-The_Fight_Between_Carnival_and_Lent.jpg",
    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",
-    duration: 15000,
+    duration: 30000,
  },
  {
    imageUrl: "images/Bruegel-Childrens_Games.jpg",
    taskDescription: "Identifizieren Sie unterschiedliche Spiele.",
    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;

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

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

--- a/www/index.html
+++ b/www/index.html
@@ -17,6 +17,10 @@
                <label for="useMouseInput">Use mouse input</label>
            </span>
            <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">
                <label for="isObserver">Observer mode</label>
            </span>

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

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