Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/nisalrenuja/vigilant-waffle
- Owner: nisalrenuja
- Created: 2022-03-06T09:30:40.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2024-12-29T08:55:55.000Z (about 1 month ago)
- Last Synced: 2024-12-29T09:26:02.870Z (about 1 month ago)
- Topics: webgazer
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
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! 🚀