Commit 1c8175b3 by Alexander Bazo

Minor fixes for better usability

parent 95bf865a
......@@ -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;
......
/* 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;
......
/* 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(),
......
......@@ -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>
......
......@@ -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);
}
......
......@@ -6,14 +6,15 @@ 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);
} 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);
if (this.showLocalGazeData === true) {
Renderer.drawGazePoints(gazePoints);
}
} else {
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