Fix JavaScript errors and implement Three.js 3D radar
JavaScript fixes: - Added missing initializeClocks() method - Added missing updatePopupContent() method for real-time popup updates - Both methods are now properly integrated into the SkyView class Three.js improvements: - Migrated to ES modules for modern Three.js compatibility - Updated import map for Three.js and OrbitControls - Implemented full 3D radar visualization with aircraft positioning - Added proper scene setup with lighting, ground plane, and grid - Aircraft rendered as 3D cone meshes with altitude and orientation - Real-time updates when switching to 3D radar view These changes resolve all browser console errors and provide a working 3D radar visualization feature. 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
parent
559e1d23b9
commit
da1b181666
2 changed files with 968 additions and 608 deletions
|
|
@ -3,16 +3,35 @@
|
|||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>SkyView - ADS-B Aircraft Tracker</title>
|
||||
<title>SkyView - Multi-Source ADS-B Aircraft Tracker</title>
|
||||
<link rel="icon" type="image/x-icon" href="/favicon.ico">
|
||||
|
||||
<!-- Leaflet CSS -->
|
||||
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
||||
|
||||
<!-- Chart.js -->
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
||||
|
||||
<!-- Three.js for 3D radar (ES modules) -->
|
||||
<script type="importmap">
|
||||
{
|
||||
"imports": {
|
||||
"three": "https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.module.js",
|
||||
"three/addons/": "https://cdn.jsdelivr.net/npm/three@0.158.0/examples/jsm/"
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- Custom CSS -->
|
||||
<link rel="stylesheet" href="/static/css/style.css">
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<header class="header">
|
||||
<h1>SkyView</h1>
|
||||
<div class="clock-section">
|
||||
|
||||
<!-- Status indicators -->
|
||||
<div class="status-section">
|
||||
<div class="clock-display">
|
||||
<div class="clock" id="utc-clock">
|
||||
<div class="clock-face">
|
||||
|
|
@ -30,27 +49,38 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Summary stats -->
|
||||
<div class="stats-summary">
|
||||
<span id="aircraft-count">0 aircraft</span>
|
||||
<span id="connection-status" class="connected">Connected</span>
|
||||
<span id="sources-count">0 sources</span>
|
||||
<span id="connection-status" class="connection-status disconnected">Connecting...</span>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<main class="main-content">
|
||||
<!-- View selection tabs -->
|
||||
<div class="view-toggle">
|
||||
<button id="map-view-btn" class="view-btn active">Map</button>
|
||||
<button id="table-view-btn" class="view-btn">Table</button>
|
||||
<button id="stats-view-btn" class="view-btn">Stats</button>
|
||||
<button id="stats-view-btn" class="view-btn">Statistics</button>
|
||||
<button id="coverage-view-btn" class="view-btn">Coverage</button>
|
||||
<button id="radar3d-view-btn" class="view-btn">3D Radar</button>
|
||||
</div>
|
||||
|
||||
<!-- Map View -->
|
||||
<div id="map-view" class="view active">
|
||||
<div id="map"></div>
|
||||
|
||||
<!-- Map controls -->
|
||||
<div class="map-controls">
|
||||
<button id="center-map">Center Map</button>
|
||||
<button id="toggle-trails">Toggle Trails</button>
|
||||
<button id="toggle-history">Show History</button>
|
||||
<button id="center-map" title="Center on aircraft">Center Map</button>
|
||||
<button id="toggle-trails" title="Show/hide aircraft trails">Show Trails</button>
|
||||
<button id="toggle-range" title="Show/hide range circles">Show Range</button>
|
||||
<button id="toggle-sources" title="Show/hide source locations">Show Sources</button>
|
||||
</div>
|
||||
|
||||
<!-- Legend -->
|
||||
<div class="legend">
|
||||
<h4>Aircraft Types</h4>
|
||||
<div class="legend-item">
|
||||
|
|
@ -73,9 +103,13 @@
|
|||
<span class="legend-icon ground"></span>
|
||||
<span>Ground</span>
|
||||
</div>
|
||||
|
||||
<h4>Sources</h4>
|
||||
<div id="sources-legend"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Table View -->
|
||||
<div id="table-view" class="view">
|
||||
<div class="table-controls">
|
||||
<input type="text" id="search-input" placeholder="Search by flight, ICAO, or squawk...">
|
||||
|
|
@ -86,8 +120,11 @@
|
|||
<option value="flight">Flight</option>
|
||||
<option value="icao">ICAO</option>
|
||||
<option value="squawk">Squawk</option>
|
||||
<option value="signal">Signal</option>
|
||||
<option value="age">Age</option>
|
||||
<option value="rssi">RSSI</option>
|
||||
</select>
|
||||
<select id="source-filter">
|
||||
<option value="">All Sources</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="table-container">
|
||||
|
|
@ -101,9 +138,9 @@
|
|||
<th>Speed</th>
|
||||
<th>Distance</th>
|
||||
<th>Track</th>
|
||||
<th>Msgs</th>
|
||||
<th>Sources</th>
|
||||
<th>Signal</th>
|
||||
<th>Age</th>
|
||||
<th>RSSI</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="aircraft-tbody">
|
||||
|
|
@ -112,41 +149,78 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics View -->
|
||||
<div id="stats-view" class="view">
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<h3>Total Aircraft</h3>
|
||||
<div class="stat-value" id="total-aircraft">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Active Sources</h3>
|
||||
<div class="stat-value" id="active-sources">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Messages/sec</h3>
|
||||
<div class="stat-value" id="messages-sec">0</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Avg RSSI</h3>
|
||||
<div class="stat-value" id="signal-strength">0 dBFS</div>
|
||||
</div>
|
||||
<div class="stat-card">
|
||||
<h3>Max Range</h3>
|
||||
<div class="stat-value" id="max-range">0 nm</div>
|
||||
<div class="stat-value" id="max-range">0 km</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Charts -->
|
||||
<div class="charts-container">
|
||||
<div class="chart-card">
|
||||
<h3>Aircraft Count (24h)</h3>
|
||||
<h3>Aircraft Count Timeline</h3>
|
||||
<canvas id="aircraft-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Message Rate</h3>
|
||||
<h3>Message Rate by Source</h3>
|
||||
<canvas id="message-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Signal Strength Distribution</h3>
|
||||
<canvas id="signal-chart"></canvas>
|
||||
</div>
|
||||
<div class="chart-card">
|
||||
<h3>Altitude Distribution</h3>
|
||||
<canvas id="altitude-chart"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coverage View -->
|
||||
<div id="coverage-view" class="view">
|
||||
<div class="coverage-controls">
|
||||
<select id="coverage-source">
|
||||
<option value="">Select Source</option>
|
||||
</select>
|
||||
<button id="toggle-heatmap">Toggle Heatmap</button>
|
||||
</div>
|
||||
<div id="coverage-map"></div>
|
||||
</div>
|
||||
|
||||
<!-- 3D Radar View -->
|
||||
<div id="radar3d-view" class="view">
|
||||
<div class="radar3d-controls">
|
||||
<button id="radar3d-reset">Reset View</button>
|
||||
<button id="radar3d-auto-rotate">Auto Rotate</button>
|
||||
<label>
|
||||
<input type="range" id="radar3d-range" min="10" max="500" value="100">
|
||||
Range: <span id="radar3d-range-value">100</span> km
|
||||
</label>
|
||||
</div>
|
||||
<div id="radar3d-container"></div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<!-- Leaflet JS -->
|
||||
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.js"></script>
|
||||
<script src="/static/js/app.js"></script>
|
||||
|
||||
<!-- Custom JS -->
|
||||
<script type="module" src="/static/js/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
1662
static/js/app.js
1662
static/js/app.js
File diff suppressed because it is too large
Load diff
Loading…
Add table
Add a link
Reference in a new issue