Interface Behaviour

GazeFilter’s interface automatically adapts based on viewport dimensions.

Tracker Mode (Default)

The default interface mode shows the full set of controls and video preview. Initialization parameters can be used to override which controls are visible (see initialization parameters).

Tracker Mode is active when neither Status Mode nor Calibration Mode conditions are met.

Status Mode

When the viewport becomes extremely small, the interface switches to Status Mode. This mode shows only minimal status indicators — a single eye icon when tracking and double X icons when not tracking. Video preview and controls are hidden.

Triggers when:

  • width ≤ 100px OR height ≤ 50px.

Calibration Mode

In Calibration Mode, the interface hides most UI elements and shows only the calibration procedure. This mode is designed for precise eye-tracking calibration with minimal distractions.

Triggers when any of these conditions are met:

  • fullscreen mode is active on the container element,
  • calibration is explicitly requested but fullscreen API fails,
  • the viewport size approaches screen resolution.

The viewport size check behaves differently depending on context:

  • In embedded contexts (iframes, etc.): Triggers if EITHER width OR height matches screen resolution
  • In standalone contexts: Requires a more strict match of dimensions to screen resolution

Calibration can be initiated in several ways:

  1. Calibration Button: Clicking the calibration button first attempts to use the Fullscreen API.
  2. Automatic Fallback: If the fullscreen request fails (common in iOS browsers or restricted environments), the application automatically sets an internal override flag to enter calibration mode without requiring fullscreen.
  3. Size-based Detection: The interface automatically switches to calibration mode when the viewport size approaches the screen resolution according to the embedded/non-embedded rules above.

The calibration mode can be exited by:

  • Pressing the Escape key (exits both fullscreen and override modes)
  • Using the browser’s built-in fullscreen exit controls (which the application detects)