u01ai11 / mouseview.js

Attentional mouse tracking. Alternative to online eye tracking. Eye tracking without the eyes!

Research Scientist and Software Developer 👋

I build tools to better understand and model human behaviour.

I currently work as an R&D Scientist at Cambridge Cognition, where I make new assessments for memory and other cognitive abilities.

mouseview.js's Issues

Need for a proper build proccess

At the moment WebGazer.js is edited directly.

It's two dependencies: html2canvas and heatmap.js are bundled in there all the time.

This is a problem because someone (me) has to update these whenever the versions we use are depreciated.

Click to update mode

Basically current mouseview, but update aperture location in click/touch.

Also support new position logging for this functionality

Question about removing aperature

This is a great tool and I am excited to learn and work with it some more.

I was playing with the jsPsych demo you have here in examples/ and was wondering how I would go about removing the aperture after the last image displayed to the user. I thought mouseview.removeAll() would do it, but it does not appear to do so.

Essentally what I am trying to think about what I'd do is show a series of images, and then have a page to ask a series of questions about the images afterwards. But I wouldn't want the aperture to be there for that; I'd want it to just look like a standard survey-multi-choice page.

I am not super familiar with js so I may just be overlooking something.

aperture size in % is twice as big as I'd expect

Hey again :),

I ran a test where I used these settings:

mouseview.params.apertureSize = '50%';
mouseview.params.apertureGauss = 0;

I noticed that the aperture perfectly filled the height of my window, but I would expect it to be half the height.

Also, noticed in the code that the aperture scaling is relative to window.innerHeight, but that could give unexpected behavior with screens in portrait orientation.

HTML2CANVAS offset in image

Need to fix the screen-capture so offset and scale match the vewport.

Also it seems to be capturing the entire page after scrolling, rather than what is currently viewable on the viewport.

Question about mouseview jsPsych plugin

Hello,

First of all, thank you for the excellent tool.

I was using the jsPsych implementation and I was wondering if it's possible to keep the window still after the first touch without ending the trial (I want participants only touch one time the screen instead of inspect all around). Would I need to finish an event listener?

Best,

Gustavo.

Coordinates of mouse are relative to the viewport, not the page

This should be resovable using offset!

Centering the overlay

I build a demo using MouseView in PsychoJS: https://gitlab.pavlovia.org/tpronk/demo_mouseview/

I noticed when using Alpa 0.2, the overlay was shifted a bit to the right, revealing a small stripe of the background at the left.

I could fix this by adding...
overlay.style.left = '0px'

Over here...

MouseView.js/MouseView.js

Line 96 in 6991d82

overlay.style.top = '0px'

Edge of blur visible on canvas

Blurring also effects the edge of the canvas overlay -- this is undesirable and I need to make a workaround

Create as NPM package

Having a node.js version would be helpful for people doing UX research.

The node version is broken currently / never worked. This needs to be improved

Show/hide cover by creating it in advance and manipulate opacity?

Heya, @RebeccaHirst further developed my PsychoPy/PsychoJS demo, and now I'm further developing that again. Got a little suggestion that might benefit the way the cover is set up...

I noticed that in the reference Gorilla implementation, the cover DIV is created on the first trial, and manipulated via show/hide (i.e. setting the CSS property display to none or block). This can be a bit laggy (see this excellent paper ;) and this one)

Got two suggestions (which are implemented in an updated PsychoJS demo):

1. Create the DIV in advance
2. Show/hide it by manipulating opacity

To ensure that clicks on the cover are still bubbled to any HTML elements below it, set this CSS property: pointer-events: none;.

CORS issue when importing module from CDN

Expose functions for pausing update of aperture position

Improvement arising from the problem outlined here: #21 bought up by @GEJ1

Basically make a simple function that temporarily removes and adds event listeners and expose in the API

Timestamp-Timing Lags

potential sources of lag that need to be addressed from experimental analysis perspective:

1. Between timer instantiation and the first mouse event

• This means our first sample will never have a timestamp at zero

2. From Blur initiation and hiding

• The timer and sampling from startTracking() are delayed whilst the blur is loading. If we have a promise that hides the screen, maybe best practice is to put startTracking in the promise.

New names for "startRecording()" and "stopRecording()"?

The docs in the README and mouseview.org mention startRecording() and stopRecording(), but I couldn't find those methods in the mouseview object. I could find startTracking() and stopTracking. Might those be the new names?

CORS issue on demo - urgent

header seems to have changed, demo does not work

Aperture edge blur interference issue

When the user requests a guassian blur on the overlay, a gaussian blur on the apeture edge, and a colour overlay, we get an interaction of overlapping guassians. This leads to a halo effect.

This needs to be fixed