Commit a537428e by Alexander Bazo

Add user specific colors for gaze points

parent 93fbbbb2
......@@ -5,17 +5,17 @@ const schema = require("@colyseus/schema"),
class GazePoint extends Schema {
constructor(screenX, screenY, createdAt, source) {
constructor(screenX, screenY, createdAt) {
super();
this.screenX = screenX;
this.screenY = screenY;
this.createdAt = createdAt;
this.source = source;
this.color = color;
this.relativeAge = 0;
}
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, {
screenY: "number",
createdAt: "number",
relativeAge: "number",
source: "string",
color: "string",
});
module.exports = GazePoint;
\ No newline at end of file
......@@ -2,10 +2,11 @@
const MAX_GAZE_POINT_AGE = 2000,
// Set max update intervall to ~ 30FPS
GAZE_POINT_UPDATE_DELAY = 1000/32;
GAZE_POINT_UPDATE_DELAY = 1000 / 32;
const colyseus = require("colyseus"),
Logger = require("../utils/Logger.js"),
Colors = require("../utils/Colors.js"),
ServerConfiguration = require("../config/ServerConfig.js"),
GazePoint = require("../logic/GazePoint.js"),
Task = require("../logic/Task.js"),
......@@ -47,10 +48,15 @@ class ImageViewerRoom extends colyseus.Room {
onMessage(client, message) {
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);
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") {
Logger.log("Gaze observer subsribed", "ImageViewer Room");
......@@ -78,18 +84,19 @@ class ImageViewerRoom extends colyseus.Room {
// Remove old gaze points
this.updateGazePoints(now);
// Sanity check to prevent empty updates to subscribers
if(gazePoints.length === 0) {
if (gazePoints.length === 0) {
return;
}
// 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;
}
for (let i = 0; i < gazeSubscribers.length; i++) {
Logger.log(`${gazePoints.length} gaze points available`);
if (gazeSubscribers[i]) {
Logger.log(`Sending ${gazePoints.length} gaze points to subscriber`, "ImageViewer Room");
this.send(gazeSubscribers[i],{
Logger.log(`Sending ${gazePoints.length} gaze points to subscriber`,
"ImageViewer Room");
this.send(gazeSubscribers[i], {
type: "gazelist",
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 */
const GAZE_POINT_RADIUS = 15,
GAZE_POINT_COLOR = "#4cd494";
DEFAULT_GAZE_POINT_COLOR = "#4cd494";
var context;
......@@ -13,7 +13,6 @@ class Renderer {
static drawGazePoints(gazePoints) {
context.clearRect(0, 0, screen.width, screen.height);
context.fillStyle = GAZE_POINT_COLOR;
for (let i = 0; i < gazePoints.length; i++) {
Renderer.drawSingleGazePoint(gazePoints[i]);
}
......@@ -23,6 +22,7 @@ class Renderer {
let inversedAge = 1 - gazePoint.relativeAge,
radius = inversedAge * GAZE_POINT_RADIUS;
context.save();
context.fillStyle = gazePoint.color;
context.globalAlpha = inversedAge;
context.globalAlpha = 1;
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