Commit a537428e by Alexander Bazo

Add user specific colors for gaze points

parent 93fbbbb2
...@@ -5,17 +5,17 @@ const schema = require("@colyseus/schema"), ...@@ -5,17 +5,17 @@ const schema = require("@colyseus/schema"),
class GazePoint extends Schema { class GazePoint extends Schema {
constructor(screenX, screenY, createdAt, source) { constructor(screenX, screenY, createdAt) {
super(); super();
this.screenX = screenX; this.screenX = screenX;
this.screenY = screenY; this.screenY = screenY;
this.createdAt = createdAt; this.createdAt = createdAt;
this.source = source; this.color = color;
this.relativeAge = 0; this.relativeAge = 0;
} }
static fromClientData(data) { static fromClientData(data) {
return new GazePoint(data.screenX, data.screenY, data.createdAt, data.source); return new GazePoint(data.screenX, data.screenY, data.createdAt, data.color);
} }
} }
...@@ -25,7 +25,7 @@ schema.defineTypes(GazePoint, { ...@@ -25,7 +25,7 @@ schema.defineTypes(GazePoint, {
screenY: "number", screenY: "number",
createdAt: "number", createdAt: "number",
relativeAge: "number", relativeAge: "number",
source: "string", color: "string",
}); });
module.exports = GazePoint; module.exports = GazePoint;
\ No newline at end of file
...@@ -2,10 +2,11 @@ ...@@ -2,10 +2,11 @@
const MAX_GAZE_POINT_AGE = 2000, const MAX_GAZE_POINT_AGE = 2000,
// Set max update intervall to ~ 30FPS // Set max update intervall to ~ 30FPS
GAZE_POINT_UPDATE_DELAY = 1000/32; GAZE_POINT_UPDATE_DELAY = 1000 / 32;
const colyseus = require("colyseus"), const colyseus = require("colyseus"),
Logger = require("../utils/Logger.js"), Logger = require("../utils/Logger.js"),
Colors = require("../utils/Colors.js"),
ServerConfiguration = require("../config/ServerConfig.js"), ServerConfiguration = require("../config/ServerConfig.js"),
GazePoint = require("../logic/GazePoint.js"), GazePoint = require("../logic/GazePoint.js"),
Task = require("../logic/Task.js"), Task = require("../logic/Task.js"),
...@@ -47,10 +48,15 @@ class ImageViewerRoom extends colyseus.Room { ...@@ -47,10 +48,15 @@ class ImageViewerRoom extends colyseus.Room {
onMessage(client, message) { onMessage(client, message) {
if (message.type === "gaze") { if (message.type === "gaze") {
message.data.source = client.id; if (client.color === undefined) {
client.color = Colors.createRandomColor();
}
message.data.color = client.color;
let point = GazePoint.fromClientData(message.data); let point = GazePoint.fromClientData(message.data);
gazePoints.push(point); gazePoints.push(point);
Logger.log(`Adding new gaze point (${gazePoints.length} points stored)`, "ImageViewer Room"); Logger.log(
`Adding new gaze point (${gazePoints.length} points stored)`,
"ImageViewer Room");
} }
if (message.type === "subscribeToGazeData") { if (message.type === "subscribeToGazeData") {
Logger.log("Gaze observer subsribed", "ImageViewer Room"); Logger.log("Gaze observer subsribed", "ImageViewer Room");
...@@ -78,18 +84,19 @@ class ImageViewerRoom extends colyseus.Room { ...@@ -78,18 +84,19 @@ class ImageViewerRoom extends colyseus.Room {
// Remove old gaze points // Remove old gaze points
this.updateGazePoints(now); this.updateGazePoints(now);
// Sanity check to prevent empty updates to subscribers // Sanity check to prevent empty updates to subscribers
if(gazePoints.length === 0) { if (gazePoints.length === 0) {
return; return;
} }
// Sanity check to prevent high frequency gaze updates to subscribers // Sanity check to prevent high frequency gaze updates to subscribers
if(now - lastGazePointUpdate < GAZE_POINT_UPDATE_DELAY) { if (now - lastGazePointUpdate < GAZE_POINT_UPDATE_DELAY) {
return; return;
} }
for (let i = 0; i < gazeSubscribers.length; i++) { for (let i = 0; i < gazeSubscribers.length; i++) {
Logger.log(`${gazePoints.length} gaze points available`); Logger.log(`${gazePoints.length} gaze points available`);
if (gazeSubscribers[i]) { if (gazeSubscribers[i]) {
Logger.log(`Sending ${gazePoints.length} gaze points to subscriber`, "ImageViewer Room"); Logger.log(`Sending ${gazePoints.length} gaze points to subscriber`,
this.send(gazeSubscribers[i],{ "ImageViewer Room");
this.send(gazeSubscribers[i], {
type: "gazelist", type: "gazelist",
data: gazePoints, data: gazePoints,
}); });
......
/* eslint-env node */
function createRandomColorChannel() {
let value = Math.floor(Math.random() * 256);
value = (value + 255) / 2;
return value;
}
function componentToHex(c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
function rgbToHex(r, g, b) {
return "#" + componentToHex(r) + componentToHex(g) + componentToHex(b);
}
class Colors {
static createRandomGazeColor() {
let r = createRandomColorChannel(),
g = createRandomColorChannel(),
b = createRandomColorChannel();
return rgbToHex(r,g,b);
}
}
module.exports = Colors;
\ No newline at end of file
/* eslint-env browser */ /* eslint-env browser */
const GAZE_POINT_RADIUS = 15, const GAZE_POINT_RADIUS = 15,
GAZE_POINT_COLOR = "#4cd494"; DEFAULT_GAZE_POINT_COLOR = "#4cd494";
var context; var context;
...@@ -13,7 +13,6 @@ class Renderer { ...@@ -13,7 +13,6 @@ class Renderer {
static drawGazePoints(gazePoints) { static drawGazePoints(gazePoints) {
context.clearRect(0, 0, screen.width, screen.height); context.clearRect(0, 0, screen.width, screen.height);
context.fillStyle = GAZE_POINT_COLOR;
for (let i = 0; i < gazePoints.length; i++) { for (let i = 0; i < gazePoints.length; i++) {
Renderer.drawSingleGazePoint(gazePoints[i]); Renderer.drawSingleGazePoint(gazePoints[i]);
} }
...@@ -23,6 +22,7 @@ class Renderer { ...@@ -23,6 +22,7 @@ class Renderer {
let inversedAge = 1 - gazePoint.relativeAge, let inversedAge = 1 - gazePoint.relativeAge,
radius = inversedAge * GAZE_POINT_RADIUS; radius = inversedAge * GAZE_POINT_RADIUS;
context.save(); context.save();
context.fillStyle = gazePoint.color;
context.globalAlpha = inversedAge; context.globalAlpha = inversedAge;
context.globalAlpha = 1; context.globalAlpha = 1;
context.beginPath(); context.beginPath();
......
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