Roav MEP is a modular JavaScript-based framework for running MEP . The application begins at `src/experiment/index.js`, which manages and calls the various views that control different aspects of the test.
npm install @bdelab/roav-mepRoav MEP is a modular JavaScript-based framework for running MEP . The application begins at src/experiment/index.js, which manages and calls the various views that control different aspects of the test.
Each view is a separate JavaScript file located in the views folder. These views handle different parts of the experiment, from consent collection to calibration and the main crowding test. Below is a breakdown of each view and its purpose.
#### Consent View
- File: views/consentView.js
- Description: Displays the consent form. Participants must accept before proceeding to the next step.
#### Configure Device View
- File: views/configureDeviceView.js
- Description: Requests camera (and/or microphone) access, ensures proper seating position, and allows configuration of device details such as screen size.
#### Calibration View
- File: views/calibrationView.js
- Description: Displays a blue stimulus for eye tracking calibration. A simple linear regressor estimates gaze position based on the response.
#### Menu View
- File: views/menuView.js
- Description: Displays available tasks, dynamically loading them from the storage bucket. For example, crowding tests may have different versions (e.g., letters vs. symbols).
#### Test View
- File: views/TestView.js
- Description: The core MEP test, where participants perform the task.
- Cue Position NOTE: Cue position can have values from 0-5 and is marked relative to the fixation. It appears in the following way on the screen: 4 2 0 (fixation) 1 3 5. To learn more about how it is coded, refer to stimulusTemplate() in Test.js
#### Story View
- File: views/storyView.js
- Description: Presents a story as part of the experiment.
#### Preload View
- File: views/preloadView.js
- Description: A blank screen that preloads files into cache to optimize performance.
Each view follows a consistent structure to maintain modularity and ease of testing. For example, configureDeviceView consists of three main components:
1. HTML File: Defines the layout and styling of the view.
2. JavaScript File: Contains the logic for user interaction and view functionality.
3. View Loader (views.js): Loads the corresponding HTML and JavaScript files, initializes a wrapper div, and injects it into the document body.
- A view starts by creating a container div.
- It loads the necessary HTML and JavaScript files.
- The div is added to document.body.
- The view ends when a resolve flag is triggered (e.g., a button click or programmatic completion of a task).
The structure was designed to be highly modular, allowing for easy swapping and modification of different views during the testing phase. While some aspects could be streamlined further, refactoring will only take place once the test design is finalized and stable.
There are a few pertinent files related to handling eye tracking, which exist across the three web apps. These include videoCapture.js, headeyetracking.js, and eyetrackingVars.html.
- File: videoCapture.js
- Description: Contains functions to start and stop the camera. This is essential as it is the first step in running the eye tracking model, which ingests webcam feeds.
- File: headeyetracking.js
- Description: Processes the webcam feed and passes it into the eye tracking model to predict x, y coordinates of gaze.
- File: eyetrackingVars.html
- Description: Initializes global variables needed to run the eye tracking model, such as leftEyeCoordinates and rightEyeCoordinates, which store the model's predictions. It also initializes FaceMesh (a Google product) to track the face and crop the eyes before passing them into the eye tracking model.