From b34bd9cbe29447f833920af124ee6d9cac8e892d Mon Sep 17 00:00:00 2001 From: Candy Xie <154905277+candpixie@users.noreply.github.com> Date: Sat, 8 Nov 2025 15:08:36 -0500 Subject: [PATCH] Add files via upload --- README.md | 307 +------------------------------------------------ index.html | 15 +++ package.json | 59 ++++++++++ vite.config.ts | 61 ++++++++++ 4 files changed, 141 insertions(+), 301 deletions(-) create mode 100644 index.html create mode 100644 package.json create mode 100644 vite.config.ts diff --git a/README.md b/README.md index 193453b..df8044b 100644 --- a/README.md +++ b/README.md @@ -1,306 +1,11 @@ -# GlaucoGuard Detection System -A real-time obstacle detection system with haptic feedback, designed for visual assistance applications. + # User Interface Design Request -## Features + This is a code bundle for User Interface Design Request. The original project is available at https://www.figma.com/design/bZB4QShSc1s5pFSRUnfjOs/User-Interface-Design-Request. -- **Real-time Detection**: Monitor three zones (LEFT, CENTER, RIGHT) for obstacles -- **WebSocket Communication**: Low-latency real-time data streaming -- **Phone Camera Support**: Stream camera feed from your phone using Expo Go -- **Dual Interface**: - - Web UI with live video feed and visual alerts - - Terminal UI for quick status monitoring -- **Haptic Feedback System**: Zone-specific alerts for obstacle detection -- **Distance Monitoring**: Track obstacle distances in centimeters + ## Running the code -## Project Structure + Run `npm i` to install the dependencies. -``` -glaucogauard/ -├── backend/ -│ ├── server.py # WebSocket server with detection logic -│ └── terminal_ui.py # Terminal-based monitoring interface -├── web/ -│ └── index.html # Web-based UI with live feed -├── mobile/ # Expo app for phone camera streaming -│ ├── App.js # React Native camera app -│ ├── package.json # Mobile app dependencies -│ └── README.md # Mobile app setup guide -├── requirements.txt # Python dependencies -├── README.md # This file -└── SETUP_PHONE_CAMERA.md # Phone camera setup guide -``` - -## Quick Start - -### 1. Install Dependencies - -```bash -pip install -r requirements.txt -``` - -### 2. Run the Backend Server - -```bash -python backend/server.py -``` - -The WebSocket server will start on `ws://localhost:8765` - -### 3. Open the Web UI - -Open `web/index.html` in a modern web browser. The UI will: -- Automatically connect to the WebSocket server -- Display real-time detection data -- Show video feed from phone camera (if connected) - -### 4. (Optional) Connect Phone Camera - -To stream your phone's camera to the laptop: - -1. See `SETUP_PHONE_CAMERA.md` for detailed instructions -2. Quick steps: - - Find your laptop's IP address - - Update `mobile/App.js` with your IP - - Install dependencies: `cd mobile && npm install` - - Run: `npm start` and scan QR code with Expo Go - - Connect and start streaming from the phone app - -### 5. Or Use the Terminal UI - -For a lightweight monitoring interface: - -```bash -python backend/terminal_ui.py -``` - -## Web UI - -The web interface provides: - -- **Live Video Feed**: Real-time camera display -- **Zone Indicators**: Visual alerts for LEFT, CENTER, and RIGHT zones -- **Distance Display**: Shows obstacle distances in centimeters -- **Status Panel**: - - System status (ACTIVE/OFFLINE) - - Detection count - - Haptic feedback status -- **Connection Indicator**: Shows WebSocket connection state - -### UI Features - -- **Active Zones**: Red pulsing animation when obstacle detected < 200cm -- **Auto-Reconnect**: Automatically reconnects if connection is lost -- **Responsive Design**: Adapts to different screen sizes - -## Terminal UI - -Simple text-based interface showing: - -``` -=== GLAUCOGUARD STATUS === -LEFT: 🔴 OBSTACLE DETECTED (120cm) -CENTER: ✅ CLEAR -RIGHT: ✅ CLEAR -HAPTIC: LEFT ACTIVE -========================== -``` - -**Status Indicators**: -- 🔴 DANGER: Obstacle < 100cm -- 🟡 WARNING: Obstacle 100-200cm -- ✅ CLEAR: No obstacle or > 200cm - -## Detection System - -The current implementation includes **simulation mode** for testing. In production: - -1. **Replace simulation with actual sensors**: - - Ultrasonic sensors - - LiDAR - - Depth cameras (RealSense, etc.) - -2. **Integrate computer vision**: - - Object detection models - - Depth estimation - - Semantic segmentation - -3. **Add haptic hardware**: - - Vibration motors - - Haptic feedback controllers - - Zone-specific actuators - -## WebSocket API - -### Server → Client Messages - -```json -{ - "timestamp": "2025-11-08T12:34:56.789", - "detection": true, - "zones": { - "left": 120, - "center": null, - "right": 250 - }, - "haptic": "left" -} -``` - -**Fields**: -- `timestamp`: ISO 8601 timestamp -- `detection`: Boolean indicating if any obstacle detected < 200cm -- `zones`: Distance in cm for each zone (null if no obstacle) -- `haptic`: Active haptic zone ("left", "center", "right", or "none") - -### Client → Server Messages - -Currently, the server accepts client commands for future expansion: - -```json -{ - "command": "start_detection", - "params": {} -} -``` - -## Configuration - -### Server Configuration - -Edit `backend/server.py`: - -```python -server = GlaucoGuardServer( - host="localhost", # Change to "0.0.0.0" for network access - port=8765 # Change port if needed -) -``` - -### Detection Parameters - -Adjust in `server.py` → `simulate_detection()`: - -- **Detection frequency**: Change `await asyncio.sleep(0.5)` in `detection_loop()` -- **Danger threshold**: Modify distance comparisons (currently 200cm) -- **Zone ranges**: Adjust random distance generation - -### UI Customization - -Edit `web/index.html`: - -- **Colors**: Modify CSS variables in `