Calibration
About
The setup of our calibration system. This is a crucial part of the gaze tracker in order to map your eyes to the screen.
Global Variables
calibrationPoints:
Object
Stores the number of clicks for each calibration point
totalPointsCalibrated:
number
Number of points calibrated (points clicked 5 times)
userGazePoints:
Object
Stores mouse and pupil coordinates when user clicks on each of the nine points
Functions
startCalibration()
Description
Initialises the 9 calibration points and the start calibration button. When
clicked, drawCalibrationPoints() is executed.
Parameters
None
Return
None
drawCalibration()
Description
Draws the 9 calibration points on the screen. The user
will have to click a point 5 times in order to collect their gaze data which is
stored in userGazePoints.
Parameters
None
Return
None
calibrateAllPoints(event)
Description
Calibrates all points and gets pupil coordinates and stores them alongside the
mouse position in
userGazePoints. By default the pupil coordinates are extracted from
croppedCanvasLeft.
Parameters
event: Event
Return
None
storePupilCoordinates(PointID, pupilX, pupilY)
Description
Helper function to store an individual pupil's coordinates into
userGazePoints.
Parameters
PointID: string
pupilX: number
pupilY: number
Return
None
Elements
About
Initialises various html elements including the video feed, settings menu and canvases.
Global Variables
video:
HTMLElement
Main video that catches users face and display it on the screen.
croppedCanvasLeft:
HTMLElement
cropped out eye image (black and white)
grayscaleCanvas:
HTMLElement
cropped out eye image (grayscale)
Functions
clearCanvas(canvas)
Description
clears the HTML canvas
Parameters
canvas: HTMLElement
Return
None
Eye Detection
About
Extracts the eyes from face api's landmark detection.
drawCroppedCanvases(detections, leftCanvas)
Description
Draws a cropped canvas for the left eye.
Parameters
detections: any
leftCanvas: HTMLElement
Return
none
calculateStartAndDistance(eye, padding)
Description
Finds the starting and ending x, y coordinates of a bounding box around the eyes.
Parameters
eye: Object
padding: number
Return
x, y x, y value of the left eye
Image Processing
About
This file contains openCV methods that apply filters on our canvas to make it easier to extract pupil datta
applyImageProcessing(canvas, debugCanvas)
Description
Converts the image from canvas to grayscale and applies it to both
canvases.
Parameters
canvas: HTMLElement
debugCanvas: HTMLElement
Return
None
Pupil Detection
About
Extraction of pupils from a cropped greyscaled canvas.
Global Variables
originalGrayScaleData: Array
pimX: number
pimY: number
Functions
evaluateIntensity(canvas, intensityThreshold)
Description
Changes the intensity of each pixel in the canvas.
Parameters
canvas: HTMLElement
intensityThreshold: number
Return
None
applyMinimumFilter(canvas)
Description
Applies minimum filter to a specified canvas.
Parameters
canvas: HTMLElement
Return
None
getPMIIndex(canvas)
Description
Calculates the PMI (pixel with minimum intensity) of canvas.
Parameters
canvas: HTMLElement
Return
pmiIndex: number index of the PMI from
originalGrayScaleData.
getPupils(canvas, pmiIndex)
Description
Calculates pixel position of the pupil based on PMI
Parameters
canvas: HTMLElement
pmiIndex: number
Return
number: [x,y] x and y pupil coordinates.
drawPupilRegion(canvas, pupilX, pupilY)
Description
Draws graphic on pupil.
Parameters
canvas: HTMLElement
pupilX: number
pupilY: number
Return
None
getAverageIntensity(grayScaleMatrix, x, y, size, canvas)
Description
Calculates the average intensity in a (size x size)
pixel square around the PMI
Parameters
grayscaleMatrix: Array
x: number
y: number
size: number
canvas: HTMLElement
Return
number: Average intensity around the PMI
Mapping
About
Extraction of pupils from a cropped greyscaled canvas.
getPositions(pupilX, pupilY)
Description
Returns relevant information regarding user's gaze and boundaries based off calibration.
Parameters
pupilX: number
pupilY: number
Return
number: cursorX, cursorY, screenWidth, screenHeight, yScreenStart, xScreenStart
user's gaze position and screen coordinates and dimensions
drawMapping(canvas, cursorX, cursorY, screenWidth, screenHeight, yScreenStart, xScreenStart)
Description
Draws the user's gaze as a circle on the browser.
Parameters
canvas: HTMLElement
cursorX: number
cursorY: number
screenWidth: number
screenHeight: number
yScreenStart: number
xScreenStart: number
Return
None
getAveragePoints(key)
Description
Extracts average points from userGazePoints.
Parameters
key: string
Return
number: [][] list of averaged coordinates