Inital commit

.eslintrc

+{
+    "parserOptions": {
+        "sourceType": "module"
+    },
+    "rules":
+    {
+        "block-scoped-var": "error",
+        "camelcase": "warn",
+        "comma-dangle": ["error", "always-multiline"],
+        "consistent-return": "error",
+        "curly": "error",
+        "default-case": "error",
+        "eqeqeq": "error",
+        "guard-for-in": "error",
+        "no-alert": "error",
+        "no-console": "warn",
+        "no-else-return": "error",
+        "no-empty-function": "error",
+        "no-eval": "error",
+        "no-eq-null": "error",
+        "no-extend-native": "warn",
+        "no-extra-bind": "error",
+        "no-loop-func": "error",
+        "no-magic-numbers": ["warn", {"ignore": [0, 1, -1], "ignoreArrayIndexes": true}],
+        "no-multiple-empty-lines": ["warn", {"max": 1}],
+        "no-multi-spaces": "warn",
+        "no-new": "error",
+        "no-new-func": "error",
+        "no-new-wrappers": "error",
+        "no-unused-expressions": "error",
+        "no-useless-concat": "error",
+        "no-undef-init": "error",
+        "no-underscore-dangle": "error",
+        "no-param-reassign": "error",
+        "no-self-compare": "error",
+        "no-void": "error",
+        "no-with": "error",
+        "one-var": "error",
+        "quotes": ["warn", "double"],
+        "semi": "error",
+        "strict": "error",
+        "vars-on-top": "error",
+        "yoda": "error"
+    },
+    "env":
+    {
+        "es6": true,
+        "browser": true
+    },
+    "extends": "eslint:recommended"
+}
\ No newline at end of file

.gitignore

+# dev
+node_modules
+
+# test
+loadtest

.jsbeautifyrc

+{
+// Details: https://github.com/victorporof/Sublime-HTMLPrettify#using-your-own-jsbeautifyrc-options
+"js": {
+    "allowed_file_extensions": ["js", "json", "jshintrc", "jsbeautifyrc"],
+    "brace_style": "collapse-preserve-inline",
+    "break_chained_methods": false, 
+    "e4x": false,
+    "eol": "\n",
+    "end_with_newline": false,
+    "indent_char": " ",
+    "indent_level": 0,
+    "indent_size": 2,
+    "indent_with_tabs": false,
+    "jslint_happy": false, 
+    "keep_array_indentation": false, 
+    "keep_function_indentation": false,
+    "max_preserve_newlines": 0, 
+    "preserve_newlines": true,
+    "space_after_anon_function": false,
+    "space_before_conditional": true, 
+    "space_in_empty_paren": false, 
+    "space_in_paren": false, 
+    "unescape_strings": false, 
+    "wrap_line_length": 80 
+  }
+}
\ No newline at end of file

README.md

+# Star Gazer Server
+
+StarGazer is a multiplayer game using gaze data as an input source. This demo showcases the eye tracking classroom's abilities to utilize gaze based real time collaboration.
+
+## Dependencies
+
+StarGazer is based on the colyseus game server framework. To install all dependencies, run `npm install`.
+
+## Requirements
+
+To play the game using gaze data for input a local [gaze-server](https://lab.las3.de/gitlab/eye-tracking-classroom/gaze-server.cs) must be running at `ws://localhost:8001`.
+
+## Building and Testing
+
+- Run `npm install` to install dependencies and build game to `build/`
+- Run `npm start` to run the game server
+- See [this repository]() for client code
\ No newline at end of file

index.js

+/* eslint-env node */
+
+const http = require("http"),
+  express = require("express"),
+  cors = require("cors"),
+  colyseus = require("colyseus"),
+  monitor = require("@colyseus/monitor").monitor,
+  socialRoutes = require("@colyseus/social/express").default,
+  ImageViewerRoom = require("./lib/rooms/ImageViewerRoom.js"),
+  Logger = require("./lib/utils/Logger.js"),
+  ServerConfiguration = require("./lib/config/ServerConfig.js");
+
+Logger.disable();
+
+var app = express(),
+  server = http.createServer(app),
+  imageServer;
+
+// Logger.enable();
+
+app.use(cors());
+app.use(express.json());
+
+imageServer = new colyseus.Server({
+  server: server,
+  express: app,
+});
+
+imageServer.define(ServerConfiguration.getViewerRoomName(), ImageViewerRoom);
+// Must be set after game server is created
+app.use(ServerConfiguration.getSocialRoute(), socialRoutes);
+app.use(ServerConfiguration.getMonitorRoute(), monitor(imageServer));
+// Prrobably shoud be set after game server is created
+app.use(ServerConfiguration.getViewerRoute(), express.static(ServerConfiguration.getViewerPath(), {
+  maxAge: 100,
+}));
+
+imageServer.listen(ServerConfiguration.getPort()); 
+Logger.log(`Listening on ws://localhost:${ ServerConfiguration.getPort() }`, "Server");
\ No newline at end of file

lib/config/ServerConfig.js

+/* eslint-env node */
+/* eslint-disable no-magic-numbers */
+
+var port,
+socialRoute,
+monitorRoute,
+updateInterval,
+viewerRoute,
+viewerPath,
+viewerRoomName;
+
+class ServerConfig {
+
+  reset() {
+    port = process.env.PORT || 2568;
+    socialRoute = "/";
+    monitorRoute = "/colyseus";
+    updateInterval = 1000/60;
+    viewerRoute = "/viewer";
+    viewerPath = "./www";
+    viewerRoomName = "image_viewer";
+  }
+
+  getPort() {
+    return port;
+  }
+
+  getSocialRoute() {
+    return socialRoute;
+  }
+
+  getMonitorRoute() {
+    return monitorRoute;
+  }
+
+  getUpdateInterval() {
+    return updateInterval;
+  }
+
+  getViewerRoute() {
+     return viewerRoute;
+  }
+
+  getViewerPath() {
+    return viewerPath;
+  }
+
+  getViewerRoomName() {
+    return viewerRoomName;
+  }
+
+}
+
+const Config = new ServerConfig();
+Config.reset();
+
+module.exports = Config;
\ No newline at end of file

lib/logic/GazePoint.js

+/* eslint-env node */
+
+const schema = require("@colyseus/schema"),
+  Schema = schema.Schema;
+
+class GazePoint extends Schema {
+
+  constructor(screenX, screenY, createdAt, source) {
+    super();
+    this.screenX = screenX;
+    this.screenY = screenY;
+    this.createdAt = createdAt;
+    this.source = source;
+    this.relativeAge = 0;
+  }
+
+  static fromClientData(data) {
+    return new GazePoint(data.screenX, data.screenY, data.createdAt, data.source);
+  }
+
+}
+
+schema.defineTypes(GazePoint, {
+  screenX: "number",
+  screenY: "number",
+  createdAt: "number",
+  relativeAge: "number",
+  source: "string",
+});
+
+module.exports = GazePoint;
\ No newline at end of file

lib/logic/ImageViewerState.js

+/* eslint-env node */
+
+const schema = require("@colyseus/schema"),
+    Logger = require("../utils/Logger.js"),
+    Task = require("./Task"),
+    Schema = schema.Schema;
+
+var currentCallback;
+
+class ImageViewerState extends Schema {
+
+    constructor() {
+        super();
+        this.task = null;
+    }
+
+    setTask(task, onFinish) {
+        this.task = task;  
+        currentCallback = onFinish;
+        setTimeout(this.onTaskFinished, task.duration);
+    }
+
+    onTaskFinished() {
+        currentCallback();
+    }
+
+}
+
+schema.defineTypes(ImageViewerState, {
+    stateType: "string",
+    width: "number",
+    height: "number",
+    task: Task,
+});
+
+module.exports = ImageViewerState;
\ No newline at end of file

lib/logic/Task.js

+/* eslint-env node */
+
+const schema = require("@colyseus/schema"),
+  Schema = schema.Schema;
+
+var taskCounter = 0;
+
+class Task extends Schema {
+
+  constructor(imageUrl, taskDescription, taskSource, duration) {
+    super();
+    taskCounter++;
+    this.imageUrl = imageUrl;
+    this.taskDescription = taskDescription;
+    this.taskSource = taskSource;
+    this.duration = duration;
+    this.position = taskCounter;
+  }
+}
+
+schema.defineTypes(Task, {
+  imageUrl: "string",
+  taskDescription: "string",
+  taskSource: "string",
+  duration: "number",
+  height: "number",
+  position: "number",
+});
+
+module.exports = Task;
\ No newline at end of file

lib/rooms/ImageViewerRoom.js

+/* eslint-env node */
+
+const TASKS = [{
+    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: 30000,
+  }],
+  MAX_GAZE_POINT_AGE = 2000,
+  GAZE_POINT_UPDATE_DELAY = 250;
+
+const colyseus = require("colyseus"),
+  Logger = require("../utils/Logger.js"),
+  ServerConfiguration = require("../config/ServerConfig.js"),
+  GazePoint = require("../logic/GazePoint.js"),
+  Task = require("../logic/Task.js"),
+  ImageViewerState = require("../logic/ImageViewerState.js");
+
+var availableTasks,
+  currentTask,
+  currentTaskIndex,
+  gazePoints,
+  gazeSubscribers,
+  lastGazePointUpdate = 0;
+
+class ImageViewerRoom extends colyseus.Room {
+
+  onCreate() {
+    Logger.log("Creating ImageViewer room", "ImageViewer Room");
+    gazePoints = [];
+    gazeSubscribers = [];
+    this.createTasks();
+    this.setState(new ImageViewerState());
+    this.setSimulationInterval(this.update.bind(this), ServerConfiguration.getUpdateInterval());
+    this.setTask();
+  }
+
+  createTasks() {
+    availableTasks = [];
+    for (let i = 0; i < TASKS.length; i++) {
+      availableTasks.push(new Task(TASKS[i].imageUrl, TASKS[i].taskDescription,
+        TASKS[i].taskSource, TASKS[i].duration));
+    }
+    currentTaskIndex = 0;
+  }
+
+  onJoin(client, options) {
+    Logger.log(`Viewer ${client.sessionId} joined ImageViewer room`,
+      "ImageViewer Room");
+  }
+
+  onMessage(client, message) {
+    if (message.type === "gaze") {
+      message.data.source = client.id;
+      let point = GazePoint.fromClientData(message.data);
+      gazePoints.push(point);
+      Logger.log(`Adding new gaze point (${gazePoints.length} points stored)`, "ImageViewer Room");
+    }
+    if (message.type === "subscribeToGazeData") {
+      Logger.log("Gaze observer subsribed", "ImageViewer Room");
+      gazeSubscribers.push(client);
+    }
+  }
+
+  onLeave(client, consented) {
+    Logger.log(`Viewer ${client.sessionId} left ImageViewer room`,
+      "ImageViewer Room");
+  }
+
+  onDispose() {
+    Logger.log("Disposing ImageViewer room", "ImageViewer Room");
+  }
+
+  onTaskFinished() {
+    Logger.log(`Switching to next task`, "ImageViewer Room");
+    this.setTask();
+  }
+
+  update() {
+    let now = Date.now();
+    this.updateGazePoints(now);
+    if(now - lastGazePointUpdate < GAZE_POINT_UPDATE_DELAY) {
+      return;
+    }
+    for (let i = 0; i < gazeSubscribers.length; i++) {
+      let client = gazeSubscribers[i];
+      Logger.log(`${gazePoints.length} gaze points available`);
+      if (client && gazePoints.length > 0) {
+        Logger.log(`Sending ${gazePoints.length} gaze points to subsriber`, "ImageViewer Room");
+        this.send(client,{
+          type: "gazelist",
+          data: gazePoints,
+        });
+      }
+    }
+    lastGazePointUpdate = now;
+  }
+
+  updateGazePoints(now) {
+    for (let i = gazePoints.length - 1; i >= 0; i--) {
+      let age = now - gazePoints[i].createdAt;
+      if (age > MAX_GAZE_POINT_AGE) {
+        gazePoints.splice(i, 1);
+      } else {
+        gazePoints[i].relativeAge = age / MAX_GAZE_POINT_AGE;
+      }
+    }
+  }
+
+  setTask() {
+    Logger.log("Sending current task to state", "ImageViewrRoom");
+    currentTaskIndex += 1;
+    if (currentTaskIndex >= availableTasks.length) {
+      currentTaskIndex = 0;
+    }
+    currentTask = availableTasks[currentTaskIndex];
+    this.state.setTask(currentTask, this.onTaskFinished.bind(this));
+  }
+}
+
+module.exports = ImageViewerRoom;
\ No newline at end of file

lib/utils/Logger.js

+class Logger {
+
+  constructor() {
+    this.enabled = false;
+  }
+
+  enable() {
+    this.enabled = true;
+  }
+
+  disable() {
+    this.enabled = false;
+  }
+
+  log(msg, label) {
+    let time = new Date(),
+      hours = time.getUTCHours(),
+      minutes = time.getUTCMinutes(),
+      seconds = time.getUTCSeconds();
+    if (hours < 10) {
+      hours = "0" + hours;
+    }
+    if (minutes < 10) {
+      minutes = "0" + minutes;
+    }
+    if (seconds < 10) {
+      seconds = "0" + seconds;
+    }
+    if (this.enabled === false) {
+      return;
+    }
+    console.log(`[${label}]\t${hours}:${minutes}:${seconds} - ${msg}`);
+  }
+
+}
+
+module.exports = new Logger();
\ No newline at end of file

package.json

+{
+  "name": "my-app",
+  "version": "1.0.0",
+  "description": "npm init template for bootstraping an empty Colyseus project",
+  "main": "index.js",
+  "scripts": {
+    "start": "node index.js",
+    "loadtest": "colyseus-loadtest loadtest/example.js --room my_room --numClients 2",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "",
+  "license": "UNLICENSED",
+  "bugs": {
+    "url": "https://github.com/colyseus/create-colyseus/issues"
+  },
+  "homepage": "https://github.com/colyseus/create-colyseus#readme",
+  "devDependencies": {
+    "@colyseus/loadtest": "^0.11.0"
+  },
+  "dependencies": {
+    "@colyseus/monitor": "^0.11.0",
+    "@colyseus/social": "^0.10.2",
+    "colyseus": "^0.11.0",
+    "cors": "^2.8.5",
+    "express": "^4.16.4",
+    "express-jwt": "^5.3.1"
+  }
+}

www/index.html

+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8">
+    <title>Live Gaze Analyser</title>
+    <link rel="stylesheet" href="resources/css/default.css">
+</head>
+
+<body>
+    <div id="startScreen">
+        <div id="startTitle">Live Gaze Analyser</div>
+        <div id="startMenu">
+            <h1>Options</h1>
+            <span class="option">
+                <input type="checkbox" id="useMouseInput" name="useMouseInput">
+                <label for="useMouseInput">Use mouse input</label>
+            </span>
+            <span class="option">
+                <input type="checkbox" id="isObserver" name="isObserver">
+                <label for="isObserver">Observer mode</label>
+            </span>
+            <span class="option">
+                <label for="viewerServerUrl">Server</label>
+                <input type="url" id="viewerServerUrl" name="viewerServerUrl" value="ws://localhost:2568">
+            </span>
+        </div>
+        <div class="startButton">Start</div>
+    </div>
+    <div id="stage" class="hidden">
+        <canvas class="background"></canvas>
+        <canvas class="gaze"></canvas>
+        <div id="task">
+            <div class="task-description"></div>
+            <div class="task-source"></div>
+        </div>
+    </div>
+  
+
+    <script type="application/javascript" src="vendors/gazeclient.js"></script>
+    <script type="application/javascript" src="vendors/colyseus.js"></script>
+    <script type="module" src="resources/js/index.js"></script>
+</body>
+
+</html>
\ No newline at end of file

www/resources/css/default.css

+/* colors: https://lospec.com/palette-list/spf-80 */
+
+@font-face {
+    font-family: "ShareTech";
+    src: url("../fonts/ShareTechMono/ShareTechMono-Regular.ttf");
+}
+
+.hidden {
+    display: none;
+}
+
+body {
+    margin: 0;
+    padding: 0;
+    font-family: "ShareTech";
+    background: rgb(0, 0, 0);
+}
+
+canvas {
+    position: fixed;
+    top: 0;
+    left: 0;
+    cursor: none;
+}
+
+#task {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 98%;
+    margin: 0;
+    padding: 1%;
+    background-color: rgba(30, 30, 30, 0.5);
+}
+
+#task .task-description {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    text-align: left;
+    font-size: 2em;
+    color: #FFF;
+}
+
+#task .task-source {
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    text-align: right;
+    font-size: 1em;
+    color: #FFF;
+}
+
+
+#startScreen {
+    width: 60vw;
+    height: 100vh;
+    margin: 0 auto;
+    background: rgb(0, 0, 0);
+}
+
+#startTitle {
+    width: 60vw;
+    height: 10vh;
+    margin: 0 auto;
+    padding-top: 10vh;
+    text-align: center;
+    line-height: 10vh;
+    font-size: 5vh;
+    color: #FFF;
+    text-shadow: 5px 5px 5px #611894;
+}
+
+.startButton {
+    display: block;
+    width: 20vw;
+    height: 5vh;
+    margin: 0 auto;
+    border-radius: 5px;
+    border-width: 5px;
+    border-style: solid;
+    background-color: #3f0d76;
+    border-color: #d2ccf3;
+    text-align: center;
+    line-height: 5vh;
+    font-size: 2.5vh;
+    color: #FFF;
+}
+
+.startButton:hover {
+    cursor: pointer;
+    background-color: #d2ccf3;
+    border-color: #3f0d76;
+    color: #3f0d76;
+}
+
+#startMenu {
+    width: 30vw;
+    margin: 5vh auto;
+    color: #FFF;
+}
+
+#startMenu h1 {
+    text-align: center;
+    padding-bottom: 1vh;
+    border-style: solid;
+    border-width: 0 0 1px 0;
+    text-shadow: 3px 3px 3px #611894;
+}
+
+#startMenu .option {
+    display: block;
+    margin-top: 2vh;
+}
+
+#startMenu input[type="checkbox"] {
+    display: none;
+}
+
+#startMenu input[type="checkbox"]+label::before {
+    width: 3vh;
+    height: 3vh;
+    border-radius: 5px;
+    border: 0.25vh solid #a2bcc5;
+    background-color: #fff;
+    display: block;
+    content: "";
+    float: left;
+    margin-right: 5px;
+    color: #3f0d76;
+}
+
+#startMenu input[type="checkbox"]+label:hover {
+    cursor: pointer;
+}
+
+#startMenu label {
+    margin-left: 0.5vw;
+    line-height: 3.5vh;
+    font-size: 2.5vh;
+}
+
+#startMenu input[type="checkbox"]:checked+label::before {
+    content: "\2A2F";
+    text-align: center;
+    line-height: 3vh;
+    font-size: 3vh;
+}
\ No newline at end of file

www/resources/fonts/ShareTechMono/OFL.txt

+Copyright (c) 2012, Carrois Type Design, Ralph du Carrois (post@carrois.com www.carrois.com), with Reserved Font Name 'Share'
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded, 
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

www/resources/js/com/NetClient.js

+/* eslint-env browser */
+/* global Colyseus */
+
+import Logger from "../utils/Logger.js";
+import Observable from "../utils/Observable.js";
+
+const DEFAULT_GAME_ROOM = "image_viewer";
+
+class NetClient extends Observable {
+
+  constructor(url) {
+    super();
+    this.url = url;
+  }
+
+  connect(asObserver) {
+    this.isObserver = asObserver;
+    this.client = new Colyseus.Client(this.url);
+    this.client.joinOrCreate(DEFAULT_GAME_ROOM).then(this.onConnect.bind(this))
+      .catch(this.onError.bind(this));
+  }
+
+  sendGazeData(gazeData) {
+    if (this.room === undefined) {
+      return;
+    }
+    this.room.send({
+      type: "gaze",
+      data: gazeData,
+    });
+  }
+
+  onConnect(room) {
+    Logger.log(`Viewer ${room.sessionId} joined ${room.name}`, "NetClient");
+    this.room = room;
+    this.room.onStateChange(this.onUpdate.bind(this));
+    this.room.onMessage(this.onMessage.bind(this));
+    this.room.onError(this.onError.bind(this));
+    this.room.onLeave(this.onLeave.bind(this));
+    if (this.isObserver === true) {
+      this.room.send({
+        type: "subscribeToGazeData",
+      });
+    }
+    this.notifyAll({
+      type: "connect",
+      ownID: this.room.sessionId,
+    });
+
+  }
+
+  onUpdate(state) {
+    this.notifyAll({
+      type: "stateupdate",
+      state: state,
+    });
+  }
+
+  onMessage(message) {
+    Logger.log("Received new message from server", "NetClient");
+    if (message.type === "gazelist") {
+      this.notifyAll({
+        type: "gazeupdate",
+        gazepoints: message.data,
+      });
+    }
+  }
+
+  onError(error) {
+    Logger.log(error, "NetClient");
+  }
+
+  onLeave() {
+    Logger.log("Local client left room", "NetClient");
+  }
+}
+
+export default NetClient;
\ No newline at end of file

www/resources/js/gaze/FakeGazeDataProvider.js

+import GazeDataProvider from "./GazeDataProvider.js";
+import Event from "../utils/Event.js";
+import GazePoint from "./GazePoint.js";
+
+class FakeGazeDataProvider extends GazeDataProvider {
+
+  constructor() {
+    super();
+  }
+
+  start() {
+    window.addEventListener("mousemove", this.onMouseDataAvailable.bind(this));
+  }
+
+  onMouseDataAvailable(event) {
+    let gazeEvent = new Event("dataavailable", new GazePoint(event.screenX,
+      event.screenY));
+    this.notifyAll(gazeEvent);
+  }
+
+}
+
+export default FakeGazeDataProvider;
\ No newline at end of file

www/resources/js/gaze/GazeDataProvider.js

+/* global GazeClient */
+
+import Observable from "../utils/Observable.js";
+import Event from "../utils/Event.js";
+import Logger from "../utils/Logger.js";
+import GazePoint from "../gaze/GazePoint.js";
+
+class GazeDataProvider extends Observable {
+
+  constructor() {
+    super();
+  }
+
+  start(url) {
+    this.gclient = new GazeClient();
+    this.gclient.connect(url);
+    this.gclient.addEventListener("connectionopened", this.onConnected.bind(this));
+    this.gclient.addEventListener("dataavailable", this.onGazeDataAvailable.bind(
+      this));
+    this.gclient.addEventListener("connectionclosed", this.onDisconnected.bind(this));
+  }
+
+  onConnected(event) {
+    Logger.log(event);
+  }
+
+  onGazeDataAvailable(event) {
+    let eyeX = (event.data.leftEyeX + event.data.rightEyeX) / 2,
+      eyeY = (event.data.leftEyeY + event.data.rightEyeY) / 2,
+      gazeEvent = new Event("dataavailable", new GazePoint(eyeX, eyeY));
+    this.notifyAll(gazeEvent);
+  }
+
+  onDisconnected(event) {
+    Logger.log(event);
+  }
+
+}
+
+export default GazeDataProvider;
\ No newline at end of file

www/resources/js/gaze/GazePoint.js

+class GazePoint {
+
+  constructor(screenX, screenY) {
+    this.screenX = screenX;
+    this.screenY = screenY;
+    this.createdAt = Date.now();
+    this.id = this.createdAt;
+  }
+
+  linkTo(node) {
+    let bb = node.getBoundingClientRect(),
+      // Difference between height of browser window (including menus and decoration) and actual viewport height
+      yOffSet = window.outerHeight - window.innerHeight,
+      elementLeft = window.screenX + bb.left,
+      elementTop = window.screenY + bb.top + yOffSet,
+      elementRight = window.screenX + bb.right,
+      elementBottom = window.screenY + bb.bottom + yOffSet,
+      coordinates;
+    if (this.screenX >= elementLeft && this.screenX <= elementRight && this
+      .screenY >=
+      elementTop && this.screenY <= elementBottom) {
+      this.hasLink = true;
+      this.link = node;
+      this.targetX = this.screenX - elementLeft;
+      this.targetY = this.screenY - elementTop;
+    }
+    return coordinates;
+  }
+
+}
+
+export default GazePoint;
\ No newline at end of file

www/resources/js/index.js

+/* eslint-env browser */
+
+import Logger from "./utils/Logger.js";
+import ImageViewer from "./viewer/ImageViewer.js";
+import NetClient from "./com/NetClient.js";
+import FakeGazeDataProvider from "./gaze/FakeGazeDataProvider.js";
+import GazeDataProvider from "./gaze/GazeDataProvider.js";
+
+const GAZE_SERVER_URL = "ws://localhost:8001/gaze",
+VIEWER_SERVER_URL = "ws://localhost:2568";
+
+var starScreen = document.querySelector("#startScreen"),
+  stage = document.querySelector("#stage"),
+  viewerServerUrl = VIEWER_SERVER_URL,
+  useMouseInput = false,
+  isObserver = false,
+  imageViewer;
+
+function init() {
+  document.querySelector(".startButton").addEventListener("click", initViewer);
+}
+
+function loadOptions() {
+  useMouseInput = document.querySelector("#useMouseInput").checked;
+  isObserver = document.querySelector("#isObserver").checked;
+  viewerServerUrl = document.querySelector("#viewerServerUrl").value;
+}
+
+function initViewer() {
+  let netClient, dataProvider;
+  loadOptions();
+  netClient = new NetClient(viewerServerUrl);
+  dataProvider = getDataProvider();
+  imageViewer = new ImageViewer(dataProvider, netClient, stage, isObserver);
+  stage.requestFullscreen().then(startViewer);
+}
+
+function startViewer() {
+  starScreen.classList.add("hidden");
+  stage.classList.remove("hidden");
+}
+
+function getDataProvider() {
+  let provider;
+  if (useMouseInput === true) {
+    provider = new FakeGazeDataProvider();
+  } else {
+    provider = new GazeDataProvider();
+  }
+  provider.start(GAZE_SERVER_URL);
+  return provider;
+}
+
+init();
\ No newline at end of file

www/resources/js/utils/Event.js

+class Event {
+
+  constructor(type, data) {
+    this.type = type;
+    this.data = data;
+  }
+
+}
+
+export default Event;
\ No newline at end of file

www/resources/js/utils/Logger.js

+/* eslint-env browser */
+/* eslint-disable no-console */
+
+class Logger {
+
+  constructor() {
+    this.enabled = false;
+  }
+
+  enable() {
+    this.enabled = true;
+  }
+
+  disable() {
+    this.enabled = false;
+  }
+
+  log(msg, label) {
+    let time = new Date(),
+      hours = time.getUTCHours(),
+      minutes = time.getUTCMinutes(),
+      seconds = time.getUTCSeconds();
+    if (hours < 10) {
+      hours = "0" + hours;
+    }
+    if (minutes < 10) {
+      minutes = "0" + minutes;
+    }
+    if (seconds < 10) {
+      seconds = "0" + seconds;
+    }
+    if (this.enabled === false) {
+      return;
+    }
+    console.log(`[${label}]\t${hours}:${minutes}:${seconds} - ${msg}`);
+  }
+
+}
+
+let log = new Logger();
+export default log;
\ No newline at end of file

www/resources/js/utils/Observable.js

+class Observable {
+
+  constructor() {
+    this.listeners = {};
+  }
+
+  addEventListener(type, callback) {
+    if (this.listeners[type] === undefined) {
+      this.listeners[type] = [];
+    }
+    this.listeners[type].push(callback);
+  }
+
+  notifyAll(event) {
+    let listeners = this.listeners[event.type];
+    if (listeners) {
+      for (let i = 0; i < listeners.length; i++) {
+        listeners[i](event);
+      }
+    }
+  }
+
+}
+
+export default Observable;
\ No newline at end of file

www/resources/js/utils/Time.js

+var Time = {
+	ONE_SECOND_IN_MS: 1000,
+};
+
+Object.freeze(Time);
+
+export default Time;
\ No newline at end of file

www/resources/js/viewer/ImageViewer.js

+/* eslint-env browser */
+
+import Renderer from "./Renderer.js";
+
+const FRAME_RATE = 60,
+  MAX_GAZE_POINT_AGE = 500;
+
+var gazePoints = [],
+observedGazePoints = [];
+
+class ImageViewer {
+
+  constructor(dataProvider, netClient, stage, isObserver) {
+    this.observerMode = isObserver;
+    this.initNetClient(netClient, isObserver);
+    if(this.observerMode === false) {
+      this.initDataProvider(dataProvider); 
+    } else {
+      this.netClient.addEventListener("gazeupdate", this.onGazePointsAvailable);
+    }
+    setInterval(this.onTick.bind(this), 1000 / FRAME_RATE);
+    this.initStage(stage);
+  }
+
+  initNetClient(netClient, isObserver) {
+    this.netClient = netClient;
+    this.netClient.addEventListener("stateupdate", this.onStateUpdate.bind(
+      this));
+    this.netClient.connect(isObserver);
+  }
+
+  initDataProvider(dataProvider) {
+    this.dataProvider = dataProvider;
+    this.dataProvider.addEventListener("dataavailable", this.onInputDataAvailable
+      .bind(this));
+  }
+
+  initStage(stage) {
+    this.stage = stage;
+    this.backgroundCanvas = this.stage.querySelector(".background");
+    this.gazeCanvas = this.stage.querySelector(".gaze");
+    this.stage.style.width = this.backgroundCanvas.style.width = this.gazeCanvas
+      .style.width = `${screen.width}px`;
+    this.stage.style.height = this.backgroundCanvas.style.height = this.gazeCanvas
+      .style.height = `${screen.height}px`;
+    this.backgroundCanvas.width = this.gazeCanvas.width = screen.width;
+    this.backgroundCanvas.height = this.gazeCanvas.height = screen.height;
+    this.backgroundContext = this.backgroundCanvas.getContext("2d", { alpha: false });
+    this.gazeContext = this.gazeCanvas.getContext("2d", { alpha: true });
+    Renderer.setContext(this.gazeContext);
+  }
+
+  initTask(task) {
+    this.setTaskImage(task.imageUrl);
+    this.setTaskData(task.taskDescription, task.taskSource);
+  }
+
+  setTaskImage(imageUrl) {
+    let that = this,
+      image = new Image();
+    image.src = imageUrl;
+    image.onload = function() {
+      that.backgroundContext.drawImage(image, 0, 0);
+    };
+  }
+
+  setTaskData(description, source) {
+    this.stage.querySelector(".task-description").innerHTML = description;
+    this.stage.querySelector(".task-source").innerHTML = source;
+  }
+
+  onTick() {
+    let now = Date.now();
+    if(this.observerMode === false) {
+      this.updateGazePoints(now);
+      Renderer.drawGazePoints(gazePoints);
+    } else {
+      Renderer.drawGazePoints(observedGazePoints);
+    }
+  }
+
+  updateGazePoints(now) {
+    for (let i = gazePoints.length - 1; i >= 0; i--) {
+      let age = now - gazePoints[i].createdAt;
+      if (age > MAX_GAZE_POINT_AGE) {
+        gazePoints.splice(i, 1);
+      } else {
+        gazePoints[i].relativeAge = age / MAX_GAZE_POINT_AGE;
+      }
+    }
+  }
+
+  onInputDataAvailable(event) {
+    gazePoints.push(event.data);
+    this.netClient.sendGazeData(event.data);
+  }
+
+  onStateUpdate(event) {
+    this.initTask(event.state.task);
+  }
+
+  onGazePointsAvailable(event) {
+    observedGazePoints = event.gazepoints;
+  }
+
+}
+
+export default ImageViewer;
\ No newline at end of file

www/resources/js/viewer/Renderer.js

+/* eslint-env browser */
+
+const GAZE_POINT_RADIUS = 15,
+  GAZE_POINT_COLOR = "#4cd494";
+
+var context;
+
+class Renderer {
+
+  static setContext(_context) {
+    context = _context;
+  }
+
+  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]);
+    }
+  }
+
+  static drawSingleGazePoint(gazePoint) {
+    let inversedAge = 1 - gazePoint.relativeAge,
+      radius = inversedAge * GAZE_POINT_RADIUS;
+    context.save();
+    context.globalAlpha = inversedAge;
+    context.globalAlpha = 1;
+    context.beginPath();
+    context.ellipse(gazePoint.screenX, gazePoint.screenY, radius, radius,
+      Math.PI /
+      4, 0, 2 * Math.PI);
+    context.closePath();
+    context.fill();
+    context.restore();
+  }
+
+}
+
+export default Renderer;
\ No newline at end of file

www/vendors/gazeclient.js

+// GazeClient Version 1.0 - [https://lab.las3.de/gitlab/eye-tracking-classroom/gaze-client.js]
+(function () {
+  'use strict';
+
+  class Observable {
+
+    constructor() {
+      this.listeners = {};
+    }
+
+    addEventListener(type, callback) {
+      if (this.listeners[type] === undefined) {
+        this.listeners[type] = [];
+      }
+      this.listeners[type].push(callback);
+    }
+
+    notifyAll(event) {
+      let listeners = this.listeners[event.type];
+      if (listeners) {
+        for (let i = 0; i < listeners.length; i++) {
+          listeners[i](event);
+        }
+      }
+    }
+
+  }
+
+  class Event {
+
+    constructor(type, data) {
+      this.type = type;
+      this.data = data;
+    }
+
+  }
+
+  class DataEvent extends Event {
+    constructor(data) {
+      super("dataavailable", data);
+    }
+  }
+
+  class ConnectionOpenedEvent extends Event {
+    constructor() {
+      super("connectionopened");
+    }
+  }
+
+  class ConnectionClosedEvent extends Event {
+    constructor() {
+      super("connectionclosed");
+    }
+  }
+
+  class ConnectionErrorEvent extends Event {
+    constructor() {
+      super("erroroccurred");
+    }
+  }
+
+  const DATA_SEPERATOR = ";";
+
+  class GazeData {
+    constructor(leftEyeX, leftEyeY, rightEyeX, rightEyeY, trackerTimeStamp,
+      systemTimeStamp) {
+      this.leftEyeX = leftEyeX;
+      this.leftEyeY = leftEyeY;
+      this.rightEyeX = rightEyeX;
+      this.rightEyeY = rightEyeY;
+      this.trackerTimeStamp = trackerTimeStamp;
+      this.systemTimeStamp = systemTimeStamp;
+    }
+
+    static fromDataString(dataString) {
+      let dataValues = dataString.split(DATA_SEPERATOR);
+      return new GazeData(parseFloat(dataValues[0]), parseFloat(dataValues[1]), parseFloat(dataValues[2]),
+        parseFloat(dataValues[3]), parseInt(dataValues[4]), parseInt(dataValues[5]));
+    }
+  }
+
+  class WebSocketClient extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
+      this.ws = new WebSocket(url);
+      this.ws.onopen = onOpen.bind(this);
+      this.ws.onclose = onClose.bind(this);
+      this.ws.onerror = onError.bind(this);
+      this.ws.onmessage = onMessage.bind(this);
+    }
+
+  }
+
+  function onOpen() {
+    let connectionEvent = new ConnectionOpenedEvent();
+    this.notifyAll(connectionEvent);
+  }
+
+  function onClose() {
+    let connectionEvent = new ConnectionClosedEvent();
+    this.notifyAll(connectionEvent);
+  }
+
+  function onError() {
+    let connectionEvent = new ConnectionErrorEvent();
+    this.notifyAll(connectionEvent);
+  }
+
+  function onMessage(event) {
+    let data = GazeData.fromDataString(event.data),
+      dataEvent = new DataEvent(data);
+    this.notifyAll(dataEvent);
+  }
+
+  class GazeClient extends Observable {
+
+    constructor() {
+      super();
+    }
+
+    connect(url) {
+      this.url = url;
+      this.client = new WebSocketClient();
+      this.client.addEventListener("connectionopened", this.onConnected.bind(this));
+      this.client.addEventListener("connectionclosed", this.onDisconnected.bind(this));
+      this.client.addEventListener("erroroccurred", this.onDisconnected.bind(this));
+      this.client.addEventListener("dataavailable", this.onDataAvailable
+        .bind(this));
+      this.client.connect(url);
+    }
+
+    onConnected(event) {
+      this.notifyAll(event);
+    }
+
+    onDisconnected(event) {
+      this.notifyAll(event);
+    }
+
+    onError(event) {
+      this.notifyAll(event);
+    }
+
+    onDataAvailable(event) {
+      this.notifyAll(event);
+    }
+
+  }
+
+  window.GazeClient = GazeClient;
+
+}());
+//# sourceMappingURL=gazeclient.js.map

www/vendors/gazeclient.js.map

+{"version":3,"file":"gazeclient.js","sources":["../lib/utils/Observable.js","../lib/com/Events.js","../lib/data/GazeData.js","../lib/com/WebSocketClient.js","../lib/index.js"],"sourcesContent":["class Observable {\r\n\r\n  constructor() {\r\n    this.listeners = {};\r\n  }\r\n\r\n  addEventListener(type, callback) {\r\n    if (this.listeners[type] === undefined) {\r\n      this.listeners[type] = [];\r\n    }\r\n    this.listeners[type].push(callback);\r\n  }\r\n\r\n  notifyAll(event) {\r\n    let listeners = this.listeners[event.type];\r\n    if (listeners) {\r\n      for (let i = 0; i < listeners.length; i++) {\r\n        listeners[i](event);\r\n      }\r\n    }\r\n  }\r\n\r\n}\r\n\r\nexport default Observable;","class Event {\r\n\r\n  constructor(type, data) {\r\n    this.type = type;\r\n    this.data = data;\r\n  }\r\n\r\n}\r\n\r\nclass DataEvent extends Event {\r\n  constructor(data) {\r\n    super(\"dataavailable\", data);\r\n  }\r\n}\r\n\r\nclass ConnectionOpenedEvent extends Event {\r\n  constructor() {\r\n    super(\"connectionopened\");\r\n  }\r\n}\r\n\r\nclass ConnectionClosedEvent extends Event {\r\n  constructor() {\r\n    super(\"connectionclosed\");\r\n  }\r\n}\r\n\r\nclass ConnectionErrorEvent extends Event {\r\n  constructor() {\r\n    super(\"erroroccurred\");\r\n  }\r\n}\r\n\r\nexport {DataEvent, ConnectionOpenedEvent, ConnectionClosedEvent, ConnectionErrorEvent};","const DATA_SEPERATOR = \";\";\r\n\r\nclass GazeData {\r\n  constructor(leftEyeX, leftEyeY, rightEyeX, rightEyeY, trackerTimeStamp,\r\n    systemTimeStamp) {\r\n    this.leftEyeX = leftEyeX;\r\n    this.leftEyeY = leftEyeY;\r\n    this.rightEyeX = rightEyeX;\r\n    this.rightEyeY = rightEyeY;\r\n    this.trackerTimeStamp = trackerTimeStamp;\r\n    this.systemTimeStamp = systemTimeStamp;\r\n  }\r\n\r\n  static fromDataString(dataString) {\r\n    let dataValues = dataString.split(DATA_SEPERATOR);\r\n    return new GazeData(parseFloat(dataValues[0]), parseFloat(dataValues[1]), parseFloat(dataValues[2]),\r\n      parseFloat(dataValues[3]), parseInt(dataValues[4]), parseInt(dataValues[5]));\r\n  }\r\n}\r\n\r\nexport default GazeData;","import Observable from \"../utils/Observable.js\";\r\nimport { ConnectionOpenedEvent, ConnectionClosedEvent, ConnectionErrorEvent,\r\n  DataEvent } from \"./Events.js\";\r\nimport GazeData from \"../data/GazeData.js\";\r\n\r\nclass WebSocketClient extends Observable {\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n\r\n  connect(url) {\r\n    this.ws = new WebSocket(url);\r\n    this.ws.onopen = onOpen.bind(this);\r\n    this.ws.onclose = onClose.bind(this);\r\n    this.ws.onerror = onError.bind(this);\r\n    this.ws.onmessage = onMessage.bind(this);\r\n  }\r\n\r\n}\r\n\r\nfunction onOpen() {\r\n  let connectionEvent = new ConnectionOpenedEvent();\r\n  this.notifyAll(connectionEvent);\r\n}\r\n\r\nfunction onClose() {\r\n  let connectionEvent = new ConnectionClosedEvent();\r\n  this.notifyAll(connectionEvent);\r\n}\r\n\r\nfunction onError() {\r\n  let connectionEvent = new ConnectionErrorEvent();\r\n  this.notifyAll(connectionEvent);\r\n}\r\n\r\nfunction onMessage(event) {\r\n  let data = GazeData.fromDataString(event.data),\r\n    dataEvent = new DataEvent(data);\r\n  this.notifyAll(dataEvent);\r\n}\r\n\r\nexport default WebSocketClient;","import Observable from \"./utils/Observable.js\";\r\nimport WebSocketClient from \"./com/WebSocketClient.js\";\r\n\r\nclass GazeClient extends Observable {\r\n\r\n  constructor() {\r\n    super();\r\n  }\r\n\r\n  connect(url) {\r\n    this.url = url;\r\n    this.client = new WebSocketClient();\r\n    this.client.addEventListener(\"connectionopened\", this.onConnected.bind(this));\r\n    this.client.addEventListener(\"connectionclosed\", this.onDisconnected.bind(this));\r\n    this.client.addEventListener(\"erroroccurred\", this.onDisconnected.bind(this));\r\n    this.client.addEventListener(\"dataavailable\", this.onDataAvailable\r\n      .bind(this));\r\n    this.client.connect(url);\r\n  }\r\n\r\n  onConnected(event) {\r\n    this.notifyAll(event);\r\n  }\r\n\r\n  onDisconnected(event) {\r\n    this.notifyAll(event);\r\n  }\r\n\r\n  onError(event) {\r\n    this.notifyAll(event);\r\n  }\r\n\r\n  onDataAvailable(event) {\r\n    this.notifyAll(event);\r\n  }\r\n\r\n}\r\n\r\nwindow.GazeClient = GazeClient;"],"names":[],"mappings":"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"}
\ No newline at end of file

www/vendors/gazeclient.min.js

+(function(){"use strict";class Observable{constructor(){this.listeners={}}addEventListener(type,callback){if(this.listeners[type]===undefined){this.listeners[type]=[]}this.listeners[type].push(callback)}notifyAll(event){let listeners=this.listeners[event.type];if(listeners){for(let i=0;i<listeners.length;i++){listeners[i](event)}}}}class Event{constructor(type,data){this.type=type;this.data=data}}class DataEvent extends Event{constructor(data){super("dataavailable",data)}}class ConnectionOpenedEvent extends Event{constructor(){super("connectionopened")}}class ConnectionClosedEvent extends Event{constructor(){super("connectionclosed")}}class ConnectionErrorEvent extends Event{constructor(){super("erroroccurred")}}const DATA_SEPERATOR=";";class GazeData{constructor(leftEyeX,leftEyeY,rightEyeX,rightEyeY,trackerTimeStamp,systemTimeStamp){this.leftEyeX=leftEyeX;this.leftEyeY=leftEyeY;this.rightEyeX=rightEyeX;this.rightEyeY=rightEyeY;this.trackerTimeStamp=trackerTimeStamp;this.systemTimeStamp=systemTimeStamp}static fromDataString(dataString){let dataValues=dataString.split(DATA_SEPERATOR);return new GazeData(parseFloat(dataValues[0]),parseFloat(dataValues[1]),parseFloat(dataValues[2]),parseFloat(dataValues[3]),parseInt(dataValues[4]),parseInt(dataValues[5]))}}class WebSocketClient extends Observable{constructor(){super()}connect(url){this.ws=new WebSocket(url);this.ws.onopen=onOpen.bind(this);this.ws.onclose=onClose.bind(this);this.ws.onerror=onError.bind(this);this.ws.onmessage=onMessage.bind(this)}}function onOpen(){let connectionEvent=new ConnectionOpenedEvent;this.notifyAll(connectionEvent)}function onClose(){let connectionEvent=new ConnectionClosedEvent;this.notifyAll(connectionEvent)}function onError(){let connectionEvent=new ConnectionErrorEvent;this.notifyAll(connectionEvent)}function onMessage(event){let data=GazeData.fromDataString(event.data),dataEvent=new DataEvent(data);this.notifyAll(dataEvent)}class GazeClient extends Observable{constructor(){super()}connect(url){this.url=url;this.client=new WebSocketClient;this.client.addEventListener("connectionopened",this.onConnected.bind(this));this.client.addEventListener("connectionclosed",this.onDisconnected.bind(this));this.client.addEventListener("erroroccurred",this.onDisconnected.bind(this));this.client.addEventListener("dataavailable",this.onDataAvailable.bind(this));this.client.connect(url)}onConnected(event){this.notifyAll(event)}onDisconnected(event){this.notifyAll(event)}onError(event){this.notifyAll(event)}onDataAvailable(event){this.notifyAll(event)}}window.GazeClient=GazeClient})();
\ No newline at end of file