Skip to content
Toggle navigation
P
Projects
G
Groups
S
Snippets
Help
Eye-Tracking Classroom
/
Live-Gaze-Analyser
This project
Loading...
Sign in
Toggle navigation
Go to a project
Project
Repository
Issues
0
Merge Requests
0
Pipelines
Wiki
Members
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Commit
a537428e
authored
5 years ago
by
Alexander Bazo
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
Add user specific colors for gaze points
parent
93fbbbb2
master
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
51 additions
and
13 deletions
+51
-13
lib/logic/GazePoint.js
+5
-4
lib/rooms/ImageViewerRoom.js
+14
-7
lib/utils/Colors.js
+30
-0
www/resources/js/viewer/Renderer.js
+2
-2
No files found.
lib/logic/GazePoint.js
View file @
a537428e
...
...
@@ -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
This diff is collapsed.
Click to expand it.
lib/rooms/ImageViewerRoom.js
View file @
a537428e
...
...
@@ -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
,
});
...
...
This diff is collapsed.
Click to expand it.
lib/utils/Colors.js
0 → 100644
View file @
a537428e
/* 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
This diff is collapsed.
Click to expand it.
www/resources/js/viewer/Renderer.js
View file @
a537428e
/* 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
();
...
...
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment