From 1c8175b37c0b242fa6da48ffde8fa5be37d3097e Mon Sep 17 00:00:00 2001 From: Alexander Bazo Date: Mon, 14 Oct 2019 19:14:37 +0200 Subject: [PATCH] Minor fixes for better usability --- lib/logic/Task.js | 6 +++--- lib/rooms/ImageViewerRoom.js | 4 ++-- lib/utils/Colors.js | 11 +++++++++++ www/index.html | 4 ++++ www/resources/js/index.js | 4 +++- www/resources/js/viewer/ImageViewer.js | 15 +++++++++------ 6 files changed, 32 insertions(+), 12 deletions(-) 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); } -- libgit2 0.26.0