diff --git a/lib/logic/Task.js b/lib/logic/Task.js
index 35e701f..992e59f 100644
--- 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;
diff --git a/lib/rooms/ImageViewerRoom.js b/lib/rooms/ImageViewerRoom.js
index 4913a05..8e2e01b 100644
--- a/lib/rooms/ImageViewerRoom.js
+++ b/lib/rooms/ImageViewerRoom.js
@@ -1,6 +1,6 @@
/* 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;
diff --git a/lib/utils/Colors.js b/lib/utils/Colors.js
index c9d3887..582f16e 100644
--- a/lib/utils/Colors.js
+++ b/lib/utils/Colors.js
@@ -1,5 +1,9 @@
/* 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(),
diff --git a/www/index.html b/www/index.html
index e8df696..02c2bf2 100644
--- a/www/index.html
+++ b/www/index.html
@@ -17,6 +17,10 @@
+
+
+
+
diff --git a/www/resources/js/index.js b/www/resources/js/index.js
index fb4294c..02f34d0 100755
--- 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);
}
diff --git a/www/resources/js/viewer/ImageViewer.js b/www/resources/js/viewer/ImageViewer.js
index d325745..7928276 100644
--- 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) {
- this.initDataProvider(dataProvider);
+ if (this.observerMode === false) {
+ 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);
}