Here are the main editable sections of the mouse contingent display HTML file. Under each code section, I detail which values you can change, and what they do. Note: to change the contents of this file, you will need to open it in an editor or some sort (not opening the HTML page in your browser). For Windows users, notepad will work. I personally recommend Notepad++ for enhanced organization features.
-webkit-backdrop-filter: blur(10px);
backdrop-filter: blur(10px);
You can change the 10px value to whatever size you want your blur sigma to be. Larger numbers equals bigger blur. You will need to change this number in both lines (the webkit line is what lets the backdrop filter work in Safari).
I am working on a validation study to determine the most optimal blur sigma and window radius values to get mouse movements most similar to eye movements. I will add in the results of this study when I have them.
Until then, my recommendation is using 5% of the window width. I will have code to calculate this from participants’ screen sizes up soon. Until that point, try 50px.
blur_elem.style.clipPath = makeCircleHoleClipPathRule( 50 );
blur_elem.style.webkitClipPath = makeCircleHoleClipPathRule( 50 );
You can change the 50 value to be whatever you would like the radius of your window to be, in pixels. I will also be looking into the optimal value for this radius in my validation study, but until then, use 5% of window width or 50px.
Ideally, I will get this working to display stimuli and the unblurred window in sizes based on a visual angle estimate of the user’s screen. Once I have this implemented, it will get its own page on this site.
//get start time of routine
const start = Date.now();
//when mouse moves, save time and mouse coordinates to PsychoPy, and move to next data entry point
document.onmousemove = (evt) => {
blur_elem.style.transform = `translate(${evt.clientX}px, ${evt.clientY}px)`;
parent.addData("TIME",Date.now() - start);
parent.addData("X",evt.clientX);
parent.addData("Y",evt.clientY);
parent.nextEntry();
};
Currently, I save the x and y coordinates of the mouse while those values are also used to move the mouse window, on each mouse movement. I have found this to be the most lag-free method of saving data (about 60hz currently). To change the name of the column the x and y coordinates appear in within your data file, you can change the “X” and “Y” names in the bottom two parent.addData() commands. This is the command that sends the data back to the PsychoPy experiment.
I also save the time of each movement in milliseconds elapsed since the beginning of the experiment. To change the name of this variable column, change the “TIME” name in the top parent.addData() command.
This code only saves coordinates and time on mouse movements, meaning data will need to be filled in when the mouse is still. I am currently writing code for this, but for the time being you can add a new column in your results file and subtract each time entry from the one after it (difference = time2 - time1), to get the time elapsed between recordings.
//save screen size and browser information
parent.addData("screensizeX",window.screen.width);
parent.addData("screensizeY",window.screen.height);
parent.addData("Browser",browserName);
parent.addData("Version",fullVersion);
These addData() commands send back the user’s screen size (in width and height) and the infomation gathered from the browser check in the code preceeding this (sending back the browser name and version number). Collecting the browser information is expecially important in the mouse contingent display, as the code currently only works in Chrome, Safari, and Edge (not Firefox, unless you directly tell your participants to change their browser permissions. I would advise against that, and just tell them to use one of the three confirmed browser types).