mirror of
https://github.com/smittix/intercept.git
synced 2026-07-20 15:28:11 -07:00
feat: Make trails checked by default and remove both radar modes from ADS-B
Trails checkbox now defaults to checked (on). Removed the RADAR view toggle, Radar overlay checkbox, RadarScope class, and all associated animation/overlay JS and CSS. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Smittix
@@ -872,42 +872,6 @@ body {
|
|||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
|
|
||||||
#radarOverlayCanvas {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
z-index: 500;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#radarOverlayCanvas.active {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
#radarScope {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: none;
|
|
||||||
background: var(--radar-bg);
|
|
||||||
}
|
|
||||||
|
|
||||||
#radarScope.active {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#radarCanvas {
|
|
||||||
max-width: 100%;
|
|
||||||
max-height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Right sidebar - Mobile first */
|
/* Right sidebar - Mobile first */
|
||||||
.sidebar {
|
.sidebar {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -934,42 +898,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* View toggle */
|
|
||||||
.view-toggle {
|
|
||||||
display: flex;
|
|
||||||
padding: 10px;
|
|
||||||
gap: 8px;
|
|
||||||
background: var(--bg-panel);
|
|
||||||
border-bottom: 1px solid rgba(74, 158, 255, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn {
|
|
||||||
flex: 1;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid rgba(74, 158, 255, 0.3);
|
|
||||||
background: transparent;
|
|
||||||
color: var(--text-secondary);
|
|
||||||
font-family: 'Orbitron', monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: 600;
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 2px;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn:hover {
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
color: var(--accent-cyan);
|
|
||||||
}
|
|
||||||
|
|
||||||
.view-btn.active {
|
|
||||||
background: var(--accent-cyan);
|
|
||||||
border-color: var(--accent-cyan);
|
|
||||||
color: var(--bg-dark);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Selected aircraft panel */
|
/* Selected aircraft panel */
|
||||||
.selected-aircraft {
|
.selected-aircraft {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
|||||||
@@ -245,22 +245,12 @@
|
|||||||
<div class="main-display">
|
<div class="main-display">
|
||||||
<div class="display-container">
|
<div class="display-container">
|
||||||
<div id="radarMap">
|
<div id="radarMap">
|
||||||
<canvas id="radarOverlayCanvas"></canvas>
|
|
||||||
</div>
|
|
||||||
<div id="radarScope">
|
|
||||||
<canvas id="radarCanvas"></canvas>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Sidebar -->
|
<!-- Sidebar -->
|
||||||
<div class="sidebar">
|
<div class="sidebar">
|
||||||
<!-- View Toggle -->
|
|
||||||
<div class="view-toggle">
|
|
||||||
<button class="view-btn active" id="mapViewBtn" onclick="setView('map')">MAP</button>
|
|
||||||
<button class="view-btn" id="radarViewBtn" onclick="setView('radar')">RADAR</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Selected Aircraft -->
|
<!-- Selected Aircraft -->
|
||||||
<div class="panel selected-aircraft">
|
<div class="panel selected-aircraft">
|
||||||
<div class="panel-header">
|
<div class="panel-header">
|
||||||
@@ -296,9 +286,8 @@
|
|||||||
<div class="control-group">
|
<div class="control-group">
|
||||||
<span class="control-group-label">DISPLAY</span>
|
<span class="control-group-label">DISPLAY</span>
|
||||||
<div class="control-group-items">
|
<div class="control-group-items">
|
||||||
<label title="Show aircraft trails"><input type="checkbox" id="showTrails" onchange="toggleTrails()"> Trails</label>
|
<label title="Show aircraft trails"><input type="checkbox" id="showTrails" checked onchange="toggleTrails()"> Trails</label>
|
||||||
<label title="Show range rings"><input type="checkbox" id="showRangeRings" checked onchange="drawRangeRings()"> Rings</label>
|
<label title="Show range rings"><input type="checkbox" id="showRangeRings" checked onchange="drawRangeRings()"> Rings</label>
|
||||||
<label title="Radar sweep overlay"><input type="checkbox" id="radarOverlay" onchange="toggleRadarOverlay()"> Radar</label>
|
|
||||||
<label title="Audio alerts for military/emergency"><input type="checkbox" id="alertToggle" checked onchange="toggleAlerts()"> Alerts</label>
|
<label title="Audio alerts for military/emergency"><input type="checkbox" id="alertToggle" checked onchange="toggleAlerts()"> Alerts</label>
|
||||||
<label title="Sound when new aircraft detected"><input type="checkbox" id="detectionSoundToggle" onchange="toggleDetectionSound()"> Ping</label>
|
<label title="Sound when new aircraft detected"><input type="checkbox" id="detectionSoundToggle" onchange="toggleDetectionSound()"> Ping</label>
|
||||||
<select id="aircraftFilter" onchange="applyFilter()" title="Filter aircraft">
|
<select id="aircraftFilter" onchange="applyFilter()" title="Filter aircraft">
|
||||||
@@ -428,20 +417,15 @@
|
|||||||
let alertsEnabled = true;
|
let alertsEnabled = true;
|
||||||
let detectionSoundEnabled = localStorage.getItem('adsb_detectionSound') !== 'false'; // Default on
|
let detectionSoundEnabled = localStorage.getItem('adsb_detectionSound') !== 'false'; // Default on
|
||||||
let soundedAircraft = {}; // Track aircraft we've played detection sound for
|
let soundedAircraft = {}; // Track aircraft we've played detection sound for
|
||||||
let currentView = 'map'; // 'map' or 'radar'
|
|
||||||
|
|
||||||
// Watchlist - persisted to localStorage
|
// Watchlist - persisted to localStorage
|
||||||
let watchlist = JSON.parse(localStorage.getItem('adsb_watchlist') || '[]');
|
let watchlist = JSON.parse(localStorage.getItem('adsb_watchlist') || '[]');
|
||||||
|
|
||||||
// Aircraft trails
|
// Aircraft trails
|
||||||
let aircraftTrails = {}; // ICAO -> [{lat, lon, alt, time}, ...]
|
let aircraftTrails = {}; // ICAO -> [{lat, lon, alt, time}, ...]
|
||||||
let trailLines = {}; // ICAO -> L.polyline (array of segments)
|
let trailLines = {}; // ICAO -> L.polyline (array of segments)
|
||||||
let showTrails = false;
|
let showTrails = true;
|
||||||
const MAX_TRAIL_POINTS = 100;
|
const MAX_TRAIL_POINTS = 100;
|
||||||
|
|
||||||
// Radar scope
|
|
||||||
let radarScope = null;
|
|
||||||
let radarAnimationId = null;
|
|
||||||
let maxRange = 200; // nautical miles
|
let maxRange = 200; // nautical miles
|
||||||
|
|
||||||
// Statistics
|
// Statistics
|
||||||
@@ -1387,444 +1371,6 @@ ACARS: ${r.statistics.acarsMessages} messages`;
|
|||||||
delete aircraftTrails[icao];
|
delete aircraftTrails[icao];
|
||||||
}
|
}
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// RADAR SCOPE (PPI)
|
|
||||||
// ============================================
|
|
||||||
class RadarScope {
|
|
||||||
constructor(canvasId) {
|
|
||||||
this.canvas = document.getElementById(canvasId);
|
|
||||||
this.ctx = this.canvas.getContext('2d');
|
|
||||||
this.sweepAngle = 0;
|
|
||||||
this.blips = []; // Aircraft blips with afterglow
|
|
||||||
this.resize();
|
|
||||||
window.addEventListener('resize', () => this.resize());
|
|
||||||
}
|
|
||||||
|
|
||||||
resize() {
|
|
||||||
const container = this.canvas.parentElement;
|
|
||||||
const size = Math.min(container.clientWidth, container.clientHeight) - 40;
|
|
||||||
this.canvas.width = size;
|
|
||||||
this.canvas.height = size;
|
|
||||||
this.centerX = size / 2;
|
|
||||||
this.centerY = size / 2;
|
|
||||||
this.radius = (size / 2) - 30;
|
|
||||||
}
|
|
||||||
|
|
||||||
draw() {
|
|
||||||
const ctx = this.ctx;
|
|
||||||
const w = this.canvas.width;
|
|
||||||
const h = this.canvas.height;
|
|
||||||
|
|
||||||
// Clear
|
|
||||||
ctx.fillStyle = '#1a1a2e';
|
|
||||||
ctx.fillRect(0, 0, w, h);
|
|
||||||
|
|
||||||
// Draw range rings
|
|
||||||
this.drawRangeRings();
|
|
||||||
|
|
||||||
// Draw compass rose
|
|
||||||
this.drawCompassRose();
|
|
||||||
|
|
||||||
// Draw aircraft blips
|
|
||||||
this.drawBlips();
|
|
||||||
|
|
||||||
// Draw sweep line
|
|
||||||
this.drawSweep();
|
|
||||||
|
|
||||||
// Draw center point (observer)
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(this.centerX, this.centerY, 4, 0, Math.PI * 2);
|
|
||||||
ctx.fillStyle = '#ffff00';
|
|
||||||
ctx.fill();
|
|
||||||
}
|
|
||||||
|
|
||||||
drawRangeRings() {
|
|
||||||
const ctx = this.ctx;
|
|
||||||
const rings = [0.25, 0.5, 0.75, 1.0];
|
|
||||||
|
|
||||||
ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
|
|
||||||
rings.forEach((ratio, i) => {
|
|
||||||
const r = this.radius * ratio;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(this.centerX, this.centerY, r, 0, Math.PI * 2);
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Range label
|
|
||||||
const rangeNm = Math.round(maxRange * ratio);
|
|
||||||
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
|
|
||||||
ctx.font = '10px Roboto Condensed';
|
|
||||||
ctx.fillText(`${rangeNm}`, this.centerX + r + 5, this.centerY + 4);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
drawCompassRose() {
|
|
||||||
const ctx = this.ctx;
|
|
||||||
const directions = [
|
|
||||||
{ angle: 0, label: 'N' },
|
|
||||||
{ angle: 90, label: 'E' },
|
|
||||||
{ angle: 180, label: 'S' },
|
|
||||||
{ angle: 270, label: 'W' }
|
|
||||||
];
|
|
||||||
|
|
||||||
ctx.fillStyle = '#00ffff';
|
|
||||||
ctx.font = 'bold 12px Orbitron';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.textBaseline = 'middle';
|
|
||||||
|
|
||||||
directions.forEach(d => {
|
|
||||||
const rad = (d.angle - 90) * Math.PI / 180;
|
|
||||||
const x = this.centerX + (this.radius + 15) * Math.cos(rad);
|
|
||||||
const y = this.centerY + (this.radius + 15) * Math.sin(rad);
|
|
||||||
ctx.fillText(d.label, x, y);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Draw tick marks every 30 degrees
|
|
||||||
ctx.strokeStyle = 'rgba(0, 255, 255, 0.3)';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
for (let angle = 0; angle < 360; angle += 30) {
|
|
||||||
const rad = (angle - 90) * Math.PI / 180;
|
|
||||||
const inner = this.radius - 5;
|
|
||||||
const outer = this.radius + 2;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(
|
|
||||||
this.centerX + inner * Math.cos(rad),
|
|
||||||
this.centerY + inner * Math.sin(rad)
|
|
||||||
);
|
|
||||||
ctx.lineTo(
|
|
||||||
this.centerX + outer * Math.cos(rad),
|
|
||||||
this.centerY + outer * Math.sin(rad)
|
|
||||||
);
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
drawSweep() {
|
|
||||||
const ctx = this.ctx;
|
|
||||||
const rad = (this.sweepAngle - 90) * Math.PI / 180;
|
|
||||||
|
|
||||||
// Sweep line with gradient
|
|
||||||
const gradient = ctx.createLinearGradient(
|
|
||||||
this.centerX, this.centerY,
|
|
||||||
this.centerX + this.radius * Math.cos(rad),
|
|
||||||
this.centerY + this.radius * Math.sin(rad)
|
|
||||||
);
|
|
||||||
gradient.addColorStop(0, 'rgba(0, 255, 255, 0.8)');
|
|
||||||
gradient.addColorStop(1, 'rgba(0, 255, 255, 0.1)');
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(this.centerX, this.centerY);
|
|
||||||
ctx.lineTo(
|
|
||||||
this.centerX + this.radius * Math.cos(rad),
|
|
||||||
this.centerY + this.radius * Math.sin(rad)
|
|
||||||
);
|
|
||||||
ctx.strokeStyle = gradient;
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Sweep arc (afterglow)
|
|
||||||
const startAngle = (this.sweepAngle - 90 - 30) * Math.PI / 180;
|
|
||||||
const endAngle = (this.sweepAngle - 90) * Math.PI / 180;
|
|
||||||
const arcGradient = ctx.createConicGradient(startAngle, this.centerX, this.centerY);
|
|
||||||
arcGradient.addColorStop(0, 'rgba(0, 255, 255, 0)');
|
|
||||||
arcGradient.addColorStop(1, 'rgba(0, 255, 255, 0.15)');
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(this.centerX, this.centerY);
|
|
||||||
ctx.arc(this.centerX, this.centerY, this.radius, startAngle, endAngle);
|
|
||||||
ctx.closePath();
|
|
||||||
ctx.fillStyle = arcGradient;
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Update sweep angle
|
|
||||||
this.sweepAngle = (this.sweepAngle + 2) % 360;
|
|
||||||
}
|
|
||||||
|
|
||||||
drawBlips() {
|
|
||||||
const ctx = this.ctx;
|
|
||||||
const now = Date.now();
|
|
||||||
|
|
||||||
// Update blips from aircraft data
|
|
||||||
this.blips = [];
|
|
||||||
Object.entries(aircraft).forEach(([icao, ac]) => {
|
|
||||||
if (!ac.lat || !ac.lon) return;
|
|
||||||
if (!passesFilter(icao, ac)) return;
|
|
||||||
|
|
||||||
const distance = calculateDistanceNm(
|
|
||||||
observerLocation.lat, observerLocation.lon,
|
|
||||||
ac.lat, ac.lon
|
|
||||||
);
|
|
||||||
|
|
||||||
if (distance > maxRange) return;
|
|
||||||
|
|
||||||
const bearing = calculateBearing(
|
|
||||||
observerLocation.lat, observerLocation.lon,
|
|
||||||
ac.lat, ac.lon
|
|
||||||
);
|
|
||||||
|
|
||||||
const ratio = distance / maxRange;
|
|
||||||
const rad = (bearing - 90) * Math.PI / 180;
|
|
||||||
const x = this.centerX + (this.radius * ratio) * Math.cos(rad);
|
|
||||||
const y = this.centerY + (this.radius * ratio) * Math.sin(rad);
|
|
||||||
|
|
||||||
this.blips.push({
|
|
||||||
x, y,
|
|
||||||
icao,
|
|
||||||
callsign: ac.callsign,
|
|
||||||
altitude: ac.altitude,
|
|
||||||
selected: icao === selectedIcao
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Draw blips
|
|
||||||
this.blips.forEach(blip => {
|
|
||||||
// Blip glow
|
|
||||||
const gradient = ctx.createRadialGradient(blip.x, blip.y, 0, blip.x, blip.y, 12);
|
|
||||||
gradient.addColorStop(0, blip.selected ? 'rgba(255, 255, 0, 0.8)' : 'rgba(0, 255, 255, 0.8)');
|
|
||||||
gradient.addColorStop(1, 'rgba(0, 255, 255, 0)');
|
|
||||||
ctx.fillStyle = gradient;
|
|
||||||
ctx.fillRect(blip.x - 12, blip.y - 12, 24, 24);
|
|
||||||
|
|
||||||
// Blip dot
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(blip.x, blip.y, blip.selected ? 5 : 3, 0, Math.PI * 2);
|
|
||||||
ctx.fillStyle = blip.selected ? '#ffff00' : '#00ffff';
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Label
|
|
||||||
if (blip.callsign || blip.selected) {
|
|
||||||
ctx.fillStyle = '#00ffff';
|
|
||||||
ctx.font = '9px Roboto Condensed';
|
|
||||||
ctx.textAlign = 'left';
|
|
||||||
ctx.fillText(blip.callsign || blip.icao, blip.x + 8, blip.y - 5);
|
|
||||||
if (blip.altitude) {
|
|
||||||
ctx.fillText(`${Math.round(blip.altitude/100)}`, blip.x + 8, blip.y + 7);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
handleClick(event) {
|
|
||||||
const rect = this.canvas.getBoundingClientRect();
|
|
||||||
const x = event.clientX - rect.left;
|
|
||||||
const y = event.clientY - rect.top;
|
|
||||||
|
|
||||||
// Find clicked blip
|
|
||||||
for (const blip of this.blips) {
|
|
||||||
const dx = x - blip.x;
|
|
||||||
const dy = y - blip.y;
|
|
||||||
if (dx * dx + dy * dy < 100) { // 10px radius
|
|
||||||
selectAircraft(blip.icao);
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startRadarAnimation() {
|
|
||||||
if (radarAnimationId) return;
|
|
||||||
function animate() {
|
|
||||||
if (currentView === 'radar' && radarScope) {
|
|
||||||
radarScope.draw();
|
|
||||||
}
|
|
||||||
radarAnimationId = requestAnimationFrame(animate);
|
|
||||||
}
|
|
||||||
animate();
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopRadarAnimation() {
|
|
||||||
if (radarAnimationId) {
|
|
||||||
cancelAnimationFrame(radarAnimationId);
|
|
||||||
radarAnimationId = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// RADAR OVERLAY ON MAP
|
|
||||||
// ============================================
|
|
||||||
let radarOverlayEnabled = false;
|
|
||||||
let radarOverlayAnimationId = null;
|
|
||||||
let radarOverlaySweepAngle = 0;
|
|
||||||
|
|
||||||
function toggleRadarOverlay() {
|
|
||||||
radarOverlayEnabled = document.getElementById('radarOverlay').checked;
|
|
||||||
const canvas = document.getElementById('radarOverlayCanvas');
|
|
||||||
|
|
||||||
if (radarOverlayEnabled) {
|
|
||||||
canvas.classList.add('active');
|
|
||||||
startRadarOverlayAnimation();
|
|
||||||
} else {
|
|
||||||
canvas.classList.remove('active');
|
|
||||||
stopRadarOverlayAnimation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function startRadarOverlayAnimation() {
|
|
||||||
if (radarOverlayAnimationId) return;
|
|
||||||
|
|
||||||
const canvas = document.getElementById('radarOverlayCanvas');
|
|
||||||
const ctx = canvas.getContext('2d');
|
|
||||||
|
|
||||||
function animate() {
|
|
||||||
if (radarOverlayEnabled && currentView === 'map') {
|
|
||||||
drawRadarOverlay(canvas, ctx);
|
|
||||||
}
|
|
||||||
radarOverlayAnimationId = requestAnimationFrame(animate);
|
|
||||||
}
|
|
||||||
animate();
|
|
||||||
}
|
|
||||||
|
|
||||||
function stopRadarOverlayAnimation() {
|
|
||||||
if (radarOverlayAnimationId) {
|
|
||||||
cancelAnimationFrame(radarOverlayAnimationId);
|
|
||||||
radarOverlayAnimationId = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawRadarOverlay(canvas, ctx) {
|
|
||||||
const container = canvas.parentElement;
|
|
||||||
const w = container.clientWidth;
|
|
||||||
const h = container.clientHeight;
|
|
||||||
|
|
||||||
// Resize canvas if needed
|
|
||||||
if (canvas.width !== w || canvas.height !== h) {
|
|
||||||
canvas.width = w;
|
|
||||||
canvas.height = h;
|
|
||||||
}
|
|
||||||
|
|
||||||
const centerX = w / 2;
|
|
||||||
const centerY = h / 2;
|
|
||||||
const radius = Math.min(w, h) / 2 - 20;
|
|
||||||
|
|
||||||
// Clear with transparency
|
|
||||||
ctx.clearRect(0, 0, w, h);
|
|
||||||
|
|
||||||
// Draw range rings
|
|
||||||
ctx.strokeStyle = 'rgba(0, 255, 255, 0.15)';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
const rings = [0.25, 0.5, 0.75, 1.0];
|
|
||||||
rings.forEach((ratio, i) => {
|
|
||||||
const r = radius * ratio;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(centerX, centerY, r, 0, Math.PI * 2);
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Range label
|
|
||||||
const rangeNm = Math.round(maxRange * ratio);
|
|
||||||
ctx.fillStyle = 'rgba(0, 255, 255, 0.4)';
|
|
||||||
ctx.font = '10px Roboto Condensed';
|
|
||||||
ctx.fillText(`${rangeNm}nm`, centerX + r + 5, centerY);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Draw compass directions
|
|
||||||
ctx.fillStyle = 'rgba(0, 255, 255, 0.5)';
|
|
||||||
ctx.font = 'bold 14px Orbitron';
|
|
||||||
ctx.textAlign = 'center';
|
|
||||||
ctx.textBaseline = 'middle';
|
|
||||||
|
|
||||||
const directions = [
|
|
||||||
{ angle: 0, label: 'N', x: centerX, y: centerY - radius - 12 },
|
|
||||||
{ angle: 90, label: 'E', x: centerX + radius + 12, y: centerY },
|
|
||||||
{ angle: 180, label: 'S', x: centerX, y: centerY + radius + 12 },
|
|
||||||
{ angle: 270, label: 'W', x: centerX - radius - 12, y: centerY }
|
|
||||||
];
|
|
||||||
directions.forEach(d => ctx.fillText(d.label, d.x, d.y));
|
|
||||||
|
|
||||||
// Draw tick marks every 30 degrees
|
|
||||||
ctx.strokeStyle = 'rgba(0, 255, 255, 0.2)';
|
|
||||||
for (let angle = 0; angle < 360; angle += 30) {
|
|
||||||
const rad = (angle - 90) * Math.PI / 180;
|
|
||||||
const inner = radius - 8;
|
|
||||||
const outer = radius + 3;
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(centerX + inner * Math.cos(rad), centerY + inner * Math.sin(rad));
|
|
||||||
ctx.lineTo(centerX + outer * Math.cos(rad), centerY + outer * Math.sin(rad));
|
|
||||||
ctx.stroke();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Draw sweep line
|
|
||||||
const sweepRad = (radarOverlaySweepAngle - 90) * Math.PI / 180;
|
|
||||||
const gradient = ctx.createLinearGradient(
|
|
||||||
centerX, centerY,
|
|
||||||
centerX + radius * Math.cos(sweepRad),
|
|
||||||
centerY + radius * Math.sin(sweepRad)
|
|
||||||
);
|
|
||||||
gradient.addColorStop(0, 'rgba(0, 255, 255, 0.6)');
|
|
||||||
gradient.addColorStop(1, 'rgba(0, 255, 255, 0.1)');
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(centerX, centerY);
|
|
||||||
ctx.lineTo(
|
|
||||||
centerX + radius * Math.cos(sweepRad),
|
|
||||||
centerY + radius * Math.sin(sweepRad)
|
|
||||||
);
|
|
||||||
ctx.strokeStyle = gradient;
|
|
||||||
ctx.lineWidth = 2;
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Draw sweep arc (afterglow)
|
|
||||||
const startAngle = (radarOverlaySweepAngle - 90 - 40) * Math.PI / 180;
|
|
||||||
const endAngle = (radarOverlaySweepAngle - 90) * Math.PI / 180;
|
|
||||||
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.moveTo(centerX, centerY);
|
|
||||||
ctx.arc(centerX, centerY, radius, startAngle, endAngle);
|
|
||||||
ctx.closePath();
|
|
||||||
|
|
||||||
const arcGradient = ctx.createConicGradient(startAngle, centerX, centerY);
|
|
||||||
arcGradient.addColorStop(0, 'rgba(0, 255, 255, 0)');
|
|
||||||
arcGradient.addColorStop(1, 'rgba(0, 255, 255, 0.1)');
|
|
||||||
ctx.fillStyle = arcGradient;
|
|
||||||
ctx.fill();
|
|
||||||
|
|
||||||
// Draw center point
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(centerX, centerY, 4, 0, Math.PI * 2);
|
|
||||||
ctx.fillStyle = 'rgba(255, 255, 0, 0.8)';
|
|
||||||
ctx.fill();
|
|
||||||
ctx.beginPath();
|
|
||||||
ctx.arc(centerX, centerY, 6, 0, Math.PI * 2);
|
|
||||||
ctx.strokeStyle = 'rgba(255, 255, 0, 0.4)';
|
|
||||||
ctx.lineWidth = 1;
|
|
||||||
ctx.stroke();
|
|
||||||
|
|
||||||
// Update sweep angle
|
|
||||||
radarOverlaySweepAngle = (radarOverlaySweepAngle + 1.5) % 360;
|
|
||||||
}
|
|
||||||
|
|
||||||
// ============================================
|
|
||||||
// VIEW TOGGLE
|
|
||||||
// ============================================
|
|
||||||
function setView(view) {
|
|
||||||
currentView = view;
|
|
||||||
const mapEl = document.getElementById('radarMap');
|
|
||||||
const scopeEl = document.getElementById('radarScope');
|
|
||||||
const mapBtn = document.getElementById('mapViewBtn');
|
|
||||||
const radarBtn = document.getElementById('radarViewBtn');
|
|
||||||
|
|
||||||
if (view === 'map') {
|
|
||||||
mapEl.style.display = 'block';
|
|
||||||
scopeEl.classList.remove('active');
|
|
||||||
mapBtn.classList.add('active');
|
|
||||||
radarBtn.classList.remove('active');
|
|
||||||
stopRadarAnimation();
|
|
||||||
// Invalidate map size after showing
|
|
||||||
setTimeout(() => radarMap && radarMap.invalidateSize(), 100);
|
|
||||||
} else {
|
|
||||||
mapEl.style.display = 'none';
|
|
||||||
scopeEl.classList.add('active');
|
|
||||||
mapBtn.classList.remove('active');
|
|
||||||
radarBtn.classList.add('active');
|
|
||||||
if (!radarScope) {
|
|
||||||
radarScope = new RadarScope('radarCanvas');
|
|
||||||
document.getElementById('radarCanvas').addEventListener('click', (e) => radarScope.handleClick(e));
|
|
||||||
}
|
|
||||||
radarScope.resize();
|
|
||||||
startRadarAnimation();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateRange() {
|
function updateRange() {
|
||||||
maxRange = parseInt(document.getElementById('rangeSelect').value);
|
maxRange = parseInt(document.getElementById('rangeSelect').value);
|
||||||
drawRangeRings();
|
drawRangeRings();
|
||||||
@@ -3242,7 +2788,7 @@ sudo make install</code>
|
|||||||
updateFlightLookupBtn();
|
updateFlightLookupBtn();
|
||||||
|
|
||||||
const ac = aircraft[icao];
|
const ac = aircraft[icao];
|
||||||
if (ac && ac.lat && ac.lon && currentView === 'map') {
|
if (ac && ac.lat && ac.lon) {
|
||||||
radarMap.setView([ac.lat, ac.lon], 10);
|
radarMap.setView([ac.lat, ac.lon], 10);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user