Add user specific colors for gaze points

lib/logic/GazePoint.js

@@ -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

lib/rooms/ImageViewerRoom.js

 /* eslint-env node */
 
 const MAX_GAZE_POINT_AGE = 2000,
- // Set max update intervall to ~ 30FPS
-  GAZE_POINT_UPDATE_DELAY = 1000/32;
+  // Set max update intervall to ~ 30FPS
+  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"),
   ImageViewerState = require("../logic/ImageViewerState.js");
 
-var tasks = Task.getTasks(), 
+var tasks = Task.getTasks(),
   availableTasks,
   currentTask,
   currentTaskIndex,
@@ -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,
         });

lib/utils/Colors.js

+/* 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

www/resources/js/viewer/Renderer.js

 /* 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();