|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Hand Tracking App - Reachy Mini</title> |
|
|
<meta name="description" content="Control Reachy Mini's antennas with your hands using MediaPipe hand tracking technology."> |
|
|
<link rel="stylesheet" href="style.css"> |
|
|
</head> |
|
|
<body> |
|
|
|
|
|
|
|
|
<section class="hero"> |
|
|
<div class="container"> |
|
|
<div class="hero-grid"> |
|
|
<div> |
|
|
<img src="assets/reachy-mini-hand-tracking.gif" alt="Hand Tracking Demo" class="hero-gif"> |
|
|
</div> |
|
|
|
|
|
<div class="hero-content"> |
|
|
<div class="hero-header"> |
|
|
<img src="assets/reachy-mini-waving.png" alt="Reachy Mini" class="hero-icon"> |
|
|
<h1 class="hero-title">Hand Tracking</h1> |
|
|
</div> |
|
|
|
|
|
<div class="tags"> |
|
|
<span class="tag">vision</span> |
|
|
<span class="tag">lite</span> |
|
|
<span class="tag">hands-tracking</span> |
|
|
<span class="tag">mediapipe</span> |
|
|
</div> |
|
|
|
|
|
<p class="hero-description"> |
|
|
Control <b>Reachy Mini’s head and antennas</b> using natural hand movements, powered by real-time hand tracking with MediaPipe. <br> |
|
|
Reachy Mini follows the position of your hand with its head, while the orientation of your fingers controls the antennas. |
|
|
</p> |
|
|
<p style="color: #b45309; background: #fef3c7; padding: 10px; border-radius: 6px;"> |
|
|
⚠️ This application is available only on <b>Reachy Mini Lite.</b> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="technical"> |
|
|
<div class="container"> |
|
|
<div class="technical-grid"> |
|
|
<div> |
|
|
<h2 class="section-title">How it works</h2> |
|
|
|
|
|
<p class="section-text"> |
|
|
Simply place <strong>one or two hands</strong> in front of Reachy Mini’s camera. |
|
|
</p> |
|
|
|
|
|
<p class="section-text"> |
|
|
With <strong>one hand</strong>, Reachy Mini tracks your hand position with its head, and |
|
|
<strong>finger orientation controls both antennas together</strong>. |
|
|
</p> |
|
|
|
|
|
<p class="section-text"> |
|
|
With <strong>two hands</strong>, each hand controls one antenna independently |
|
|
</p> |
|
|
|
|
|
<p class="section-text"> |
|
|
For best tracking results, keep your hands at least <strong>50 cm</strong> away from the robot’s camera. |
|
|
</p> |
|
|
|
|
|
|
|
|
<div class="section-text"> |
|
|
<span>From the UI, you can:</span> |
|
|
<ul style="padding-left: 1.2rem; margin-top: 0;"> |
|
|
<li>Enable or disable tracking features</li> |
|
|
<li>Select the preferred hand to track</li> |
|
|
<li>Change antenna behavior modes</li> |
|
|
<li>View the robot’s live camera feed in real time</li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
<h2 class="section-title" style="margin-top: 2rem;">How to install</h2> |
|
|
|
|
|
<ol class="install-steps"> |
|
|
<li> |
|
|
<span> |
|
|
Make sure you already have the |
|
|
<a href="https://github.com/pollen-robotics/reachy-mini-desktop-app/releases/latest" |
|
|
class="link-tertiary">dashboard</a> |
|
|
installed. |
|
|
</span> |
|
|
</li> |
|
|
<li> |
|
|
<span>Connect to your Reachy Mini using the dashboard.</span> |
|
|
</li> |
|
|
<li> |
|
|
<span>Navigate to the "Applications" tab in the dashboard.</span> |
|
|
</li> |
|
|
<li> |
|
|
<span>Find "Hand Tracking" in the list of available applications.</span> |
|
|
</li> |
|
|
<li> |
|
|
<span>Click "Install" and allow camera access when prompted.</span> |
|
|
</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<img src="assets/reachy_mini_move_antenna.gif" alt="Dashboard Demo" class="demo-gif"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="footer"> |
|
|
<div class="container"> |
|
|
<div class="footer-content"> |
|
|
<div class="footer-links"> |
|
|
<a href="https://github.com/pollen-robotics/reachy_mini" target="_blank" rel="noopener">> Documentation</a> |
|
|
<a href="https://huggingface.co/spaces/pollen-robotics/Reachy-Mini_Best_Spaces" target="_blank" rel="noopener">> Browse other apps</a> |
|
|
<a href="https://huggingface.co/blog/pollen-robotics/make-and-publish-your-reachy-mini-apps" target="_blank" rel="noopener">> Make and publish your Reachy Mini app</a> |
|
|
</div> |
|
|
<p class="footer-help"> |
|
|
Need help? Contact us on <a href="https://discord.gg/u3QtUBhy" target="_blank" rel="noopener">Discord</a> and join the community. |
|
|
Proudly brought by <a href="https://www.pollen-robotics.com/" target="_blank">Pollen Robotics</a> x 🤗 <a href="https://huggingface.co" target="_blank">Hugging Face</a> |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
</body> |
|
|
</html> |
