Commit 1c8175b3 by Alexander Bazo

Minor fixes for better usability

parent 95bf865a
...@@ -6,19 +6,19 @@ const schema = require("@colyseus/schema"), ...@@ -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;
......
/* 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 { ...@@ -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;
......
/* 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) { ...@@ -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(),
......
...@@ -17,6 +17,10 @@ ...@@ -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>
......
...@@ -13,6 +13,7 @@ var starScreen = document.querySelector("#startScreen"), ...@@ -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() { ...@@ -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() { ...@@ -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);
} }
......
...@@ -6,14 +6,15 @@ const FRAME_RATE = 60, ...@@ -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 { ...@@ -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);
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment