{"id":30066346,"url":"https://github.com/ejfox/glasses-hud","last_synced_at":"2026-02-23T03:42:38.307Z","repository":{"id":307726840,"uuid":"1030268074","full_name":"ejfox/glasses-hud","owner":"ejfox","description":null,"archived":false,"fork":false,"pushed_at":"2025-08-01T19:33:59.000Z","size":150,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-08-01T21:42:34.844Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ejfox.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-08-01T11:00:53.000Z","updated_at":"2025-08-01T19:34:03.000Z","dependencies_parsed_at":"2025-08-01T21:42:38.462Z","dependency_job_id":"87aa967b-74db-41d1-8c15-139c7e9e5ecf","html_url":"https://github.com/ejfox/glasses-hud","commit_stats":null,"previous_names":["ejfox/glasses-hud"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/ejfox/glasses-hud","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fglasses-hud","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fglasses-hud/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fglasses-hud/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fglasses-hud/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ejfox","download_url":"https://codeload.github.com/ejfox/glasses-hud/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ejfox%2Fglasses-hud/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269383782,"owners_count":24408288,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-08T02:00:09.200Z","response_time":72,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-08-08T07:29:50.950Z","updated_at":"2026-02-23T03:42:38.300Z","avatar_url":"https://github.com/ejfox.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Glasses HUD Prototyping Tool\n\nA React-based simulator for prototyping AR glasses heads-up displays. Design and preview widget layouts for smart glasses interfaces with realistic, smoothly-animated sensor data.\n\n**Live Demo:** https://ejfox.github.io/glasses-hud/\n\n## Why This Exists\n\nDesigning interfaces for AR glasses is hard without the actual hardware. This tool lets you:\n\n- **Prototype layouts** - Place widgets on left/right lenses in 9 positions\n- **See realistic data** - Sensor values animate smoothly, not randomly\n- **Test on mobile** - Collapsible controls for fullscreen preview on phones/tablets\n- **Iterate quickly** - No build step needed for layout changes\n\n## Features\n\n### 55+ Widget Types\n\nOrganized into 13 categories that mirror real smartwatch/glasses capabilities:\n\n| Category | Widgets |\n|----------|---------|\n| **Body** | Heart Rate, HRV, Blood Oxygen (SpO2), Stress Level, Calories, Body Temp |\n| **Motion** | Steps, Distance, Speed, Pace, Floors Climbed, Cadence |\n| **Location** | Compass/Bearing, Altitude, Coordinates, GPS Accuracy |\n| **Environment** | Temperature, Humidity, Pressure, UV Index, Air Quality, Light Level, Noise Level |\n| **Device** | Watch Battery, Phone Battery, Signal Strength, WiFi, Storage |\n| **Time** | Clock, Date, Stopwatch, Timer, Sunrise, Sunset |\n| **Messages** | Unread Messages, Emails, Missed Calls, Slack Unread, All Notifications |\n| **Productivity** | Todo Count, Next Todo, Focus Time, Screen Time, Meeting Countdown, Pomodoro Timer |\n| **Media** | Now Playing, Artist, Song BPM, Song Progress, Volume |\n| **Social** | Followers, New Likes, Mentions |\n| **Weather** | Current Weather, Feels Like, Rain Chance, Wind Speed, Visibility |\n| **Navigation** | Distance to Destination, ETA, Next Turn Direction |\n| **Custom** | Custom Text, Labels |\n\n### Realistic Data Simulation\n\nValues don't just random-walk. The simulator uses:\n\n- **Fractal Brownian Motion (FBM)** - Multi-octave noise for organic, smooth transitions\n- **Correlated sensors** - Walking increases heart rate, speed, cadence simultaneously\n- **Activity states** - Simulated walking/resting cycles affect multiple readings\n- **Temporal patterns** - Some values (UV, meetings) follow time-of-day patterns\n\n### Mobile-Friendly Viewing\n\n- Collapsible control panel for fullscreen HUD preview\n- Larger text on mobile devices\n- Dark theme optimized for viewing the display\n- Touch-friendly controls\n\n## Getting Started\n\n```bash\n# Clone\ngit clone https://github.com/ejfox/glasses-hud.git\ncd glasses-hud\n\n# Install\nnpm install\n\n# Run locally\nnpm run dev\n\n# Build for production\nnpm run build\n\n# Deploy to GitHub Pages\nnpx gh-pages -d dist\n```\n\n## Usage\n\n1. **Drag** a widget from the bento grid palette\n2. **Drop** onto left or right lens (ghost preview shows position)\n3. **Drag placed widgets** to reposition (snaps to 5% grid with anime.js)\n4. **Hover + ×** to delete widgets\n5. **Show Grid** reveals Swiss-style alignment guides\n6. **Hide Controls** for fullscreen preview\n\n## Adding New Widgets\n\nTo add a new widget type:\n\n### 1. Add to `WIDGET_CATEGORIES`\n\n```jsx\n{\n  label: '— Your Category —',\n  widgets: [\n    { value: 'yourWidget', label: 'Your Widget' },\n  ]\n}\n```\n\n### 2. Add sensor data (if needed)\n\nIn the `setSensors()` call inside `useEffect`:\n\n```jsx\nsetSensors({\n  // ... existing sensors\n  yourValue: n.main.range(t, min, max, speed),\n})\n```\n\n### 3. Add display handler\n\nIn the `getValue()` switch statement:\n\n```jsx\ncase 'yourWidget': return `${s.yourValue} units`\n```\n\n## Technical Details\n\n### Noise Generation\n\nThe `SmoothNoise` class generates FBM (Fractal Brownian Motion) noise:\n\n```jsx\nconst noise = new SmoothNoise(seed)\n// Get value between min-max, animated over time\nconst value = noise.range(time, min, max, speed)\n```\n\n- `seed` - Different seeds = different patterns\n- `time` - Usually `performance.now() / 1000`\n- `speed` - How fast the value changes (0.1 = slow drift, 2 = rapid variation)\n\n### Walking Simulation\n\nThe app simulates activity cycles:\n\n```jsx\nconst walkCycle = noise.range(t * 0.1, 0, 1, 0.5)\nif (walkCycle \u003e 0.7) isWalking = true  // ~30% of time walking\n```\n\nWhen walking:\n- Heart rate increases from ~68 to ~95 BPM\n- Speed jumps from ~0 to 3.5-5.5 km/h\n- Cadence activates (~110 spm)\n- Steps and calories accumulate\n\n### Positions\n\n9 widget positions available:\n\n| Code | Position |\n|------|----------|\n| `tl` | Top Left |\n| `tc` | Top Center |\n| `tr` | Top Right |\n| `ml` | Middle Left |\n| `c` | Center |\n| `mr` | Middle Right |\n| `bl` | Bottom Left |\n| `bc` | Bottom Center |\n| `br` | Bottom Right |\n\n## Stack\n\n- **React 19** - UI framework\n- **Vite** - Build tool\n- **Tailwind CSS v4** - Styling\n- **shadcn/ui** - Component library (Button, Input)\n- **@dnd-kit** - Drag and drop from palette to lens\n- **anime.js** - Smooth grid-snap animations\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Fglasses-hud","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fejfox%2Fglasses-hud","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fejfox%2Fglasses-hud/lists"}