Implement 3D Radar View Controls #9

New issue

Closed

opened 2025-08-24 18:17:09 +02:00 by olemd · 0 comments

olemd commented

2025-08-24 18:17:09 +02:00

Owner

Description

The 3D Radar view has control buttons (Reset View, Auto Rotate, Range slider) but none of them are functional.

Current Status

✅ 3D visualization works and displays aircraft
✅ Control UI elements exist but are disabled
❌ No event listeners bound to control buttons
❌ Range slider doesn't affect 3D visualization bounds
❌ Hard-coded coordinates instead of dynamic origin

Expected Functionality

Reset View Button

Reset 3D camera to default position and orientation
Restore original zoom level and viewing angle

Auto Rotate Button

Toggle automatic camera rotation around the center point
Smooth continuous rotation when enabled
Button state should reflect on/off status

Range Slider

Control the maximum display distance for aircraft
Update 3D scene to only show aircraft within range
Real-time updates as slider moves
Display current range value (10-500km)

Technical Implementation

Add event listeners in assets/static/js/app.js
Integrate with existing Three.js 3D radar implementation
Remove disabled attributes from control elements
Make coordinates dynamic based on receiver locations

Files to Modify

assets/static/js/app.js - Add control event handlers
assets/static/index.html - Remove disabled attributes
3D radar implementation - Add camera controls and range filtering

## Description The 3D Radar view has control buttons (Reset View, Auto Rotate, Range slider) but none of them are functional. ## Current Status - ✅ 3D visualization works and displays aircraft - ✅ Control UI elements exist but are disabled - ❌ No event listeners bound to control buttons - ❌ Range slider doesn't affect 3D visualization bounds - ❌ Hard-coded coordinates instead of dynamic origin ## Expected Functionality ### Reset View Button - Reset 3D camera to default position and orientation - Restore original zoom level and viewing angle ### Auto Rotate Button - Toggle automatic camera rotation around the center point - Smooth continuous rotation when enabled - Button state should reflect on/off status ### Range Slider - Control the maximum display distance for aircraft - Update 3D scene to only show aircraft within range - Real-time updates as slider moves - Display current range value (10-500km) ## Technical Implementation - Add event listeners in assets/static/js/app.js - Integrate with existing Three.js 3D radar implementation - Remove disabled attributes from control elements - Make coordinates dynamic based on receiver locations ## Files to Modify - assets/static/js/app.js - Add control event handlers - assets/static/index.html - Remove disabled attributes - 3D radar implementation - Add camera controls and range filtering