reachy_mini_3d_web_viz

Running

App Files Files Community

8bitkick commited on 17 days ago

Commit

b9d9e30

1 Parent(s): bf33112

URDF renders!

Browse files

Files changed (5) hide show

.gitignore +1 -0
pyproject.toml +1 -1
reachy_mini_app_example/main.py +35 -5
reachy_mini_app_example/robot_viz.html +258 -0
reachy_mini_app_example/setup_assets.py +133 -0

.gitignore CHANGED Viewed

@@ -1,3 +1,4 @@
 __pycache__/
 *.egg-info/
 build/*

 __pycache__/
 *.egg-info/
 build/*
+reachy_mini_app_example/assets/*.stl

pyproject.toml CHANGED Viewed

@@ -21,4 +21,4 @@ reachy_mini_app_example = "reachy_mini_app_example.main:ExampleApp"
 packages = ["reachy_mini_app_example"]
 [tool.setuptools.package-data]
-reachy_mini_app_example = ["*.html", "*.css", "*.js"]

 packages = ["reachy_mini_app_example"]
 [tool.setuptools.package-data]
+reachy_mini_app_example = ["*.html", "*.css", "*.js", "*.py", "assets/*.stl"]

reachy_mini_app_example/main.py CHANGED Viewed

@@ -17,11 +17,41 @@ class ExampleApp(ReachyMiniApp):
     def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
         def start_static_server(host="127.0.0.1", port=8080, directory=None):
             directory = directory or Path(__file__).resolve().parent
-            handler = partial(SimpleHTTPRequestHandler, directory=str(directory))
-            server = HTTPServer((host, port), handler)
-            print(f"🚀 Web server: http://{host}:{port}")
-            print("🔌 WebSocket: ws://127.0.0.1:8000/api/state/ws/full")
-            print("📄 Open: http://127.0.0.1:8080/stream.html\n")
             server.serve_forever()
         threading.Thread(

     def run(self, reachy_mini: ReachyMini, stop_event: threading.Event):
         def start_static_server(host="127.0.0.1", port=8080, directory=None):
             directory = directory or Path(__file__).resolve().parent
+            # Use local assets folder
+            assets_path = directory / "assets"
+            # Download assets if they don't exist
+            if not assets_path.exists() or not list(assets_path.glob("*.stl")):
+                print("📥 Assets not found, downloading...")
+                from . import setup_assets
+                setup_assets.setup_assets()
+            # Create custom handler that serves from both directories
+            class CustomHandler(SimpleHTTPRequestHandler):
+                def __init__(self, *args, **kwargs):
+                    super().__init__(*args, directory=str(directory), **kwargs)
+                def translate_path(self, path):
+                    # Parse the URL to remove query parameters
+                    from urllib.parse import urlparse, unquote
+                    path = urlparse(path).path
+                    path = unquote(path)
+                    # If requesting /assets/, serve from local assets folder
+                    if path.startswith('/assets/'):
+                        # Remove '/assets/' prefix and any leading slashes
+                        asset_file = path[8:].lstrip('/')
+                        asset_full_path = assets_path / asset_file
+                        return str(asset_full_path)
+                    # Otherwise serve from app directory
+                    return super().translate_path(path)
+            server = HTTPServer((host, port), CustomHandler)
+            print("📄 Open: http://127.0.0.1:8080/stream.html")
+            print("📄 3D Viz: http://127.0.0.1:8080/robot_viz.html")
+            print(f"📦 Serving assets from: {assets_path}\n")
             server.serve_forever()
         threading.Thread(

reachy_mini_app_example/robot_viz.html ADDED Viewed

	@@ -0,0 +1,258 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8" />
+    <title>Reachy Mini 3D Visualization</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <style>
+        body {
+            margin: 0;
+            font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
+            overflow: hidden;
+        }
+        #container {
+            width: 100vw;
+            height: 100vh;
+        }
+        #status {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 10px 15px;
+            border-radius: 5px;
+            font-size: 14px;
+            z-index: 100;
+        }
+        .ok { color: #0a0; }
+        .err { color: #a00; }
+        #info {
+            position: absolute;
+            bottom: 10px;
+            left: 10px;
+            background: rgba(255, 255, 255, 0.9);
+            padding: 10px 15px;
+            border-radius: 5px;
+            font-size: 12px;
+            z-index: 100;
+            max-width: 300px;
+        }
+    </style>
+</head>
+<body>
+    <div id="status">Loading...</div>
+    <div id="info">
+        <strong>Controls:</strong><br>
+        • Left click + drag to rotate<br>
+        • Right click + drag to pan<br>
+        • Scroll to zoom
+    </div>
+    <div id="container"></div>
+    <!-- Three.js and URDFLoader -->
+    <script type="importmap">
+    {
+        "imports": {
+            "three": "https://cdn.jsdelivr.net/npm/three@0.169.0/build/three.module.js",
+            "three/addons/": "https://cdn.jsdelivr.net/npm/three@0.169.0/examples/jsm/"
+        }
+    }
+    </script>
+    <script type="module">
+        import * as THREE from 'three';
+        import { OrbitControls } from 'three/addons/controls/OrbitControls.js';
+        import URDFLoader from 'https://cdn.jsdelivr.net/npm/urdf-loader@0.12.3/+esm';
+        // WebSocket URL - can be changed via URL parameter
+        const WS_URL = new URLSearchParams(location.search).get("ws")
+            || "ws://127.0.0.1:8000/api/state/ws/full";
+        const URDF_URL = new URLSearchParams(location.search).get("urdf")
+            || "http://127.0.0.1:8000/api/kinematics/urdf";
+        const statusEl = document.getElementById("status");
+        // Scene setup
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0xf0f0f0);
+        // Camera setup
+        const camera = new THREE.PerspectiveCamera(
+            75,
+            window.innerWidth / window.innerHeight,
+            0.01,
+            100
+        );
+        camera.position.set(0.5, 0.5, 0.5);
+        // Renderer setup
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        document.getElementById('container').appendChild(renderer.domElement);
+        // Controls
+        const controls = new OrbitControls(camera, renderer.domElement);
+        controls.enableDamping = true;
+        controls.dampingFactor = 0.05;
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        scene.add(ambientLight);
+        const directionalLight = new THREE.DirectionalLight(0xffffff, 0.6);
+        directionalLight.position.set(1, 2, 1);
+        directionalLight.castShadow = true;
+        scene.add(directionalLight);
+        // Grid helper
+        const gridHelper = new THREE.GridHelper(1, 10);
+        scene.add(gridHelper);
+        // Robot model
+        let robot = null;
+        let jointMap = {};
+        // Load URDF
+        statusEl.innerHTML = '📥 Loading URDF...';
+        // Fetch the URDF JSON from the daemon
+        fetch(URDF_URL)
+            .then(response => response.json())
+            .then(data => {
+                if (!data.urdf) {
+                    throw new Error('No URDF found in response');
+                }
+                let urdfXml = data.urdf;
+                // DON'T modify the URDF - keep package:// URIs as-is
+                // The loader will use the packages map to resolve them
+                console.log('URDF snippet:', urdfXml.substring(0, 1000));
+                // Create a blob URL from the URDF XML string
+                const blob = new Blob([urdfXml], { type: 'application/xml' });
+                const blobUrl = URL.createObjectURL(blob);
+                // Create loader with custom package paths that resolve to OUR local server
+                // serving the assets from the reachy_mini package
+                const loader = new URDFLoader();
+                loader.packages = {
+                    'assets': `${window.location.origin}/assets/`,
+                    'reachy_mini_description': `${window.location.origin}/assets/`
+                };
+                console.log('Package resolution:', loader.packages);
+                // Add a custom fetch function to handle mesh loading with better error handling
+                const originalFetch = loader.fetchOptions?.fetch || fetch;
+                loader.fetchOptions = {
+                    ...loader.fetchOptions,
+                    fetch: (url, ...args) => {
+                        console.log('Fetching mesh:', url);
+                        return originalFetch(url, ...args).then(response => {
+                            if (!response.ok) {
+                                console.error(`Failed to fetch ${url}: ${response.status}`);
+                            }
+                            return response;
+                        });
+                    }
+                };
+                loader.load(
+                    blobUrl,
+                    (urdfRobot) => {
+                        robot = urdfRobot;
+                        scene.add(robot);
+                        // Build joint map for easy access
+                        robot.traverse((child) => {
+                            if (child.isURDFJoint) {
+                                jointMap[child.name] = child;
+                            }
+                        });
+                        // Clean up the blob URL
+                        URL.revokeObjectURL(blobUrl);
+                        statusEl.innerHTML = '✅ URDF loaded (some meshes may be missing). Connecting to WebSocket...';
+                        connectWebSocket();
+                    },
+                    undefined,
+                    (error) => {
+                        statusEl.innerHTML = `<span class="err">❌ Error loading URDF: ${error.message}</span>`;
+                        console.error('URDF load error:', error);
+                        URL.revokeObjectURL(blobUrl);
+                    }
+                );
+            })
+            .catch(error => {
+                statusEl.innerHTML = `<span class="err">❌ Error fetching URDF: ${error.message}</span>`;
+                console.error('URDF fetch error:', error);
+            });
+        // WebSocket connection
+        let ws = null;
+        function connectWebSocket() {
+            ws = new WebSocket(WS_URL);
+            ws.onopen = () => {
+                statusEl.innerHTML = '<span class="ok">🟢 Connected</span>';
+            };
+            ws.onmessage = (event) => {
+                try {
+                    const data = JSON.parse(event.data);
+                    updateRobotJoints(data);
+                } catch (e) {
+                    console.error('Error parsing WebSocket message:', e);
+                }
+            };
+            ws.onerror = (error) => {
+                statusEl.innerHTML = '<span class="err">❌ WebSocket error</span>';
+                console.error('WebSocket error:', error);
+            };
+            ws.onclose = () => {
+                statusEl.innerHTML = '<span class="err">🔴 Disconnected. Reconnecting...</span>';
+                setTimeout(connectWebSocket, 3000);
+            };
+        }
+        // Update robot joints from WebSocket data
+        function updateRobotJoints(data) {
+            if (!robot || !data.joints) return;
+            // Update each joint position
+            for (const [jointName, jointData] of Object.entries(data.joints)) {
+                const joint = jointMap[jointName];
+                if (joint && jointData.present_position !== undefined) {
+                    // Convert from degrees to radians if needed
+                    const angle = jointData.present_position * (Math.PI / 180);
+                    joint.setJointValue(angle);
+                }
+            }
+        }
+        // Animation loop
+        function animate() {
+            requestAnimationFrame(animate);
+            controls.update();
+            renderer.render(scene, camera);
+        }
+        // Handle window resize
+        window.addEventListener('resize', () => {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        });
+        // Start animation
+        animate();
+    </script>
+</body>
+</html>

reachy_mini_app_example/setup_assets.py ADDED Viewed

	@@ -0,0 +1,133 @@

+#!/usr/bin/env python3
+"""
+Download URDF mesh assets from the reachy_mini repository using Git LFS.
+There is definitely a more elegant way to do this...
+"""
+import subprocess
+import shutil
+from pathlib import Path
+def setup_assets():
+    """Download STL assets from the reachy_mini repository."""
+    assets_dir = Path(__file__).parent / "assets"
+    # If assets already exist and have .stl files, skip
+    if assets_dir.exists() and list(assets_dir.glob("*.stl")):
+        print(f"✅ Assets already exist in {assets_dir}")
+        return
+    print("📥 Downloading mesh assets from reachy_mini repository...")
+    # Create assets directory
+    assets_dir.mkdir(exist_ok=True)
+    # Clone just the assets folder using sparse checkout
+    temp_dir = Path(__file__).parent / ".temp_repo"
+    temp_dir.mkdir(exist_ok=True)
+    try:
+        # Initialize git repo
+        subprocess.run(
+            ["git", "init"],
+            cwd=temp_dir,
+            check=False,
+            capture_output=True
+        )
+        # Add remote
+        subprocess.run(
+            ["git", "remote", "add", "origin",
+             "https://github.com/pollen-robotics/reachy_mini.git"],
+            cwd=temp_dir,
+            check=False,
+            capture_output=True
+        )
+        # Configure sparse checkout
+        subprocess.run(
+            ["git", "config", "core.sparseCheckout", "true"],
+            cwd=temp_dir,
+            check=False,
+            capture_output=True
+        )
+        # Specify the path to checkout
+        sparse_file = temp_dir / ".git" / "info" / "sparse-checkout"
+        sparse_file.parent.mkdir(parents=True, exist_ok=True)
+        sparse_file.write_text("src/reachy_mini/descriptions/reachy_mini/urdf/assets\n")
+        # Pull the files
+        result = subprocess.run(
+            ["git", "pull", "--depth=1", "origin", "develop"],
+            cwd=temp_dir,
+            capture_output=True,
+            text=True
+        )
+        if result.returncode != 0:
+            print(f"⚠️  Git pull failed: {result.stderr}")
+            print("Trying direct download instead...")
+            download_directly(assets_dir)
+        else:
+            # Copy assets
+            source_assets = temp_dir / "src" / "reachy_mini" / "descriptions" / "reachy_mini" / "urdf" / "assets"
+            if source_assets.exists():
+                for file in source_assets.glob("*.stl"):
+                    shutil.copy(file, assets_dir / file.name)
+                print(f"✅ Downloaded {len(list(assets_dir.glob('*.stl')))} STL files")
+            else:
+                print("⚠️  Assets folder not found in cloned repo")
+                download_directly(assets_dir)
+    finally:
+        # Cleanup
+        if temp_dir.exists():
+            shutil.rmtree(temp_dir, ignore_errors=True)
+def download_directly(assets_dir):
+    """Fallback: download files directly from GitHub raw URL."""
+    import urllib.request
+    # List of STL files (from the GitHub repo structure you showed)
+    stl_files = [
+        "5w_speaker.stl", "antenna.stl", "antenna_body_3dprint.stl",
+        "antenna_holder_l_3dprint.stl", "antenna_holder_r_3dprint.stl",
+        "antenna_interface_3dprint.stl", "arducam.stl", "arm.stl",
+        "b3b_eh.stl", "b3b_eh_1.stl", "ball.stl", "bearing_85x110x13.stl",
+        "big_lens.stl", "big_lens_d40.stl", "body_down_3dprint.stl",
+        "body_foot_3dprint.stl", "body_turning_3dprint.stl",
+        "dc15_a01_horn_dummy.stl", "dc15_a01_led_cap2_dummy.stl",
+        "glasses_dolder_3dprint.stl", "head_back_3dprint.stl",
+        "head_front_3dprint.stl", "head_mic_3dprint.stl",
+        "lens_cap_d40_3dprint.stl", "m12_fisheye_lens_1_8mm.stl",
+        "mp01062_stewart_arm_3.stl", "neck_reference_3dprint.stl",
+        "phs_1_7x20_5_dc10.stl", "phs_1_7x20_5_dc10_1.stl",
+        "phs_1_7x20_5_dc10_3.stl", "pp01102_arducam_carter.stl",
+        "small_lens_d30.stl", "stewart_link_ball.stl",
+        "stewart_link_ball_2.stl", "stewart_link_rod.stl",
+        "stewart_tricap_3dprint.stl"
+    ]
+    base_url = "https://github.com/pollen-robotics/reachy_mini/raw/develop/src/reachy_mini/descriptions/reachy_mini/urdf/assets"
+    print(f"📥 Downloading {len(stl_files)} STL files directly...")
+    success_count = 0
+    for filename in stl_files:
+        url = f"{base_url}/{filename}"
+        dest = assets_dir / filename
+        try:
+            urllib.request.urlretrieve(url, dest)
+            success_count += 1
+            print(f"  ✓ {filename}")
+        except Exception as e:
+            print(f"  ✗ {filename}: {e}")
+    print(f"✅ Downloaded {success_count}/{len(stl_files)} files")
+if __name__ == "__main__":
+    setup_assets()