Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nisalrenuja/vigilant-waffle

The project leverages eye-tracking technology to provide a hands-free, immersive experience for navigating through images. By detecting the user’s gaze direction, the slider transitions between images based on where the user looks.
https://github.com/nisalrenuja/vigilant-waffle

webgazer

Last synced: 5 days ago
JSON representation

The project leverages eye-tracking technology to provide a hands-free, immersive experience for navigating through images. By detecting the user’s gaze direction, the slider transitions between images based on where the user looks.

Awesome Lists containing this project

README

        

Gaze-Based Image Slider

This repository contains a gaze-controlled image slider built using the WebGazer.js library. The project leverages eye-tracking technology to provide a hands-free, immersive experience for navigating through images. By detecting the user’s gaze direction, the slider transitions between images based on where the user looks.

Features

• Eye Tracking: Uses WebGazer.js to detect gaze direction in real-time.
• Gaze-Based Navigation:
• Look left to go to the previous image.
• Look right to move to the next image.
• Dynamic Image Loading: Fetches random images from https://picsum.photos to provide a continuous stream of visually appealing content.
• Smooth Transitions: Utilizes CSS transitions for seamless image movement.
• Fully Responsive: Designed to adapt to various screen sizes with an elegant layout.

How It Works

1. WebGazer Integration: The project initializes WebGazer.js and sets up a gaze listener to track eye movements.
2. Gaze Zones:
• The screen is divided into three zones:
• Left: Triggers navigation to the previous image.
• Right: Triggers navigation to the next image.
• Center: Resets gaze tracking.
3. Look Delay: A configurable delay (LOOK_DELAY) ensures intentional gaze input for navigation, reducing accidental triggers.
4. Dynamic Updates: Images are dynamically created and removed to maintain a clean and efficient DOM.

Setup and Usage

1. Clone this repository
2. Open the project folder and serve the index.html file using a local server (e.g., Live Server extension in VS Code or Python’s HTTP server).
3. Visit the webpage in a browser (preferably Chrome).
4. Grant camera permissions when prompted.
5. Look left or right to navigate through the images.

Customization

• Adjust Look Delay: Modify the LOOK_DELAY value in script.js to change the required time for gaze detection.
• Change Image Source: Replace the URL in the getNewImage function to load images from a different source.

Technology Stack

• HTML5: For structuring the webpage.
• CSS3: For styling and smooth transitions.
• JavaScript: For handling gaze detection and DOM manipulation.
• WebGazer.js: For real-time eye-tracking capabilities.

Future Improvements

• Add a calibration screen for improved gaze accuracy.
• Enhance accessibility with alternative input methods.
• Include support for different image sources or user-uploaded images.

Acknowledgments

• Thanks to the creators of WebGazer.js for the open-source eye-tracking library.
• Images sourced from Picsum.

Feel free to fork, contribute, or raise issues! 🚀