|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<title>Global SDR Network Monitor</title> |
|
|
<style> |
|
|
body { |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
background: #000; |
|
|
color: #0f0; |
|
|
font-family: monospace; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.container { |
|
|
display: grid; |
|
|
grid-template-columns: 300px 1fr; |
|
|
gap: 20px; |
|
|
height: calc(100vh - 40px); |
|
|
} |
|
|
|
|
|
.sidebar { |
|
|
background: #111; |
|
|
padding: 15px; |
|
|
border-radius: 8px; |
|
|
overflow-y: auto; |
|
|
} |
|
|
|
|
|
.map-container { |
|
|
background: #111; |
|
|
border-radius: 8px; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.receiver { |
|
|
margin: 10px 0; |
|
|
padding: 10px; |
|
|
background: #1a1a1a; |
|
|
border-radius: 4px; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
|
|
|
.receiver:hover { |
|
|
background: #222; |
|
|
} |
|
|
|
|
|
.status { |
|
|
display: flex; |
|
|
align-items: center; |
|
|
margin-bottom: 5px; |
|
|
} |
|
|
|
|
|
.led { |
|
|
width: 8px; |
|
|
height: 8px; |
|
|
border-radius: 50%; |
|
|
margin-right: 8px; |
|
|
} |
|
|
|
|
|
.active { |
|
|
background: #0f0; |
|
|
box-shadow: 0 0 10px #0f0; |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
|
|
|
@keyframes pulse { |
|
|
0% { opacity: 1; } |
|
|
50% { opacity: 0.5; } |
|
|
100% { opacity: 1; } |
|
|
} |
|
|
|
|
|
.inactive { |
|
|
background: #f00; |
|
|
} |
|
|
|
|
|
#map { |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
cursor: move; |
|
|
} |
|
|
|
|
|
.signal-strength { |
|
|
height: 4px; |
|
|
background: #222; |
|
|
margin-top: 5px; |
|
|
border-radius: 2px; |
|
|
} |
|
|
|
|
|
.signal-bar { |
|
|
height: 100%; |
|
|
background: #0f0; |
|
|
width: 50%; |
|
|
transition: width 0.3s; |
|
|
} |
|
|
|
|
|
.detection { |
|
|
padding: 5px; |
|
|
margin: 5px 0; |
|
|
font-size: 12px; |
|
|
border-left: 2px solid #0f0; |
|
|
background: #1a1a1a; |
|
|
border-radius: 0 4px 4px 0; |
|
|
transition: background-color 0.3s; |
|
|
} |
|
|
|
|
|
.detection:hover { |
|
|
background: #222; |
|
|
} |
|
|
|
|
|
.controls { |
|
|
position: absolute; |
|
|
bottom: 20px; |
|
|
right: 20px; |
|
|
background: rgba(0, 0, 0, 0.7); |
|
|
padding: 10px; |
|
|
border-radius: 4px; |
|
|
display: flex; |
|
|
gap: 10px; |
|
|
} |
|
|
|
|
|
.control-btn { |
|
|
background: #1a1a1a; |
|
|
border: 1px solid #0f0; |
|
|
color: #0f0; |
|
|
padding: 5px 10px; |
|
|
border-radius: 4px; |
|
|
cursor: pointer; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
|
|
|
.control-btn:hover { |
|
|
background: #0f0; |
|
|
color: #000; |
|
|
} |
|
|
|
|
|
h3, h4 { |
|
|
color: #0f0; |
|
|
margin-top: 15px; |
|
|
margin-bottom: 10px; |
|
|
border-bottom: 1px solid #0f0; |
|
|
padding-bottom: 5px; |
|
|
} |
|
|
|
|
|
.region-label { |
|
|
display: inline-block; |
|
|
background: #1a1a1a; |
|
|
padding: 2px 6px; |
|
|
border-radius: 4px; |
|
|
font-size: 0.8em; |
|
|
margin-left: 10px; |
|
|
} |
|
|
|
|
|
.tooltip { |
|
|
position: absolute; |
|
|
background: rgba(0, 0, 0, 0.8); |
|
|
border: 1px solid #0f0; |
|
|
padding: 5px; |
|
|
border-radius: 4px; |
|
|
pointer-events: none; |
|
|
display: none; |
|
|
color: #0f0; |
|
|
font-size: 12px; |
|
|
z-index: 1000; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<div class="sidebar"> |
|
|
<h3>Active SDR Receivers</h3> |
|
|
<div id="receivers"></div> |
|
|
|
|
|
<h3>Real-time Detections</h3> |
|
|
<div id="detections"></div> |
|
|
</div> |
|
|
|
|
|
<div class="map-container"> |
|
|
<canvas id="map"></canvas> |
|
|
<div class="controls"> |
|
|
<button class="control-btn" id="zoomIn">Zoom In</button> |
|
|
<button class="control-btn" id="zoomOut">Zoom Out</button> |
|
|
<button class="control-btn" id="resetView">Reset View</button> |
|
|
</div> |
|
|
<div class="tooltip" id="tooltip"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const sdrStations = [ |
|
|
|
|
|
{ |
|
|
name: "Twente WebSDR", |
|
|
url: "websdr.ewi.utwente.nl:8901", |
|
|
location: [52.2389, 6.8343], |
|
|
frequency: "0-29.160 MHz", |
|
|
range: 200, |
|
|
active: true, |
|
|
region: "Europe" |
|
|
}, |
|
|
{ |
|
|
name: "TU Delft WebSDR", |
|
|
url: "websdr.tudelft.nl:8901", |
|
|
location: [51.9981, 4.3731], |
|
|
frequency: "0-29.160 MHz", |
|
|
range: 180, |
|
|
active: true, |
|
|
region: "Europe" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "W6YXP WebSDR", |
|
|
url: "w6yxp.stanford.edu", |
|
|
location: [37.4275, -122.1697], |
|
|
frequency: "0-30 MHz", |
|
|
range: 200, |
|
|
active: true, |
|
|
region: "North America" |
|
|
}, |
|
|
{ |
|
|
name: "K3FEF WebSDR", |
|
|
url: "k3fef.com:8901", |
|
|
location: [40.5697, -75.9363], |
|
|
frequency: "0-30 MHz", |
|
|
range: 180, |
|
|
active: true, |
|
|
region: "North America" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "Tokyo WebSDR", |
|
|
url: "tokyo.websdr.org", |
|
|
location: [35.6762, 139.6503], |
|
|
frequency: "0-30 MHz", |
|
|
range: 200, |
|
|
active: true, |
|
|
region: "Asia" |
|
|
}, |
|
|
{ |
|
|
name: "Seoul WebSDR", |
|
|
url: "seoul.websdr.org", |
|
|
location: [37.5665, 126.9780], |
|
|
frequency: "0-30 MHz", |
|
|
range: 180, |
|
|
active: true, |
|
|
region: "Asia" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "Sydney WebSDR", |
|
|
url: "sydney.websdr.org", |
|
|
location: [-33.8688, 151.2093], |
|
|
frequency: "0-30 MHz", |
|
|
range: 200, |
|
|
active: true, |
|
|
region: "Oceania" |
|
|
}, |
|
|
|
|
|
{ |
|
|
name: "São Paulo WebSDR", |
|
|
url: "saopaulo.websdr.org", |
|
|
location: [-23.5505, -46.6333], |
|
|
frequency: "0-30 MHz", |
|
|
range: 180, |
|
|
active: true, |
|
|
region: "South America" |
|
|
} |
|
|
]; |
|
|
|
|
|
class GlobalRadarSystem { |
|
|
constructor() { |
|
|
this.canvas = document.getElementById('map'); |
|
|
this.ctx = this.canvas.getContext('2d'); |
|
|
this.targets = new Set(); |
|
|
this.zoom = 1; |
|
|
this.offset = { x: 0, y: 0 }; |
|
|
this.isDragging = false; |
|
|
this.lastMousePos = { x: 0, y: 0 }; |
|
|
this.tooltip = document.getElementById('tooltip'); |
|
|
|
|
|
this.setupCanvas(); |
|
|
this.setupControls(); |
|
|
this.setupEventListeners(); |
|
|
this.renderReceivers(); |
|
|
this.loadWorldMap(); |
|
|
this.startTracking(); |
|
|
} |
|
|
|
|
|
setupCanvas() { |
|
|
const resizeCanvas = () => { |
|
|
const container = this.canvas.parentElement; |
|
|
this.canvas.width = container.offsetWidth; |
|
|
this.canvas.height = container.offsetHeight; |
|
|
this.draw(); |
|
|
}; |
|
|
|
|
|
resizeCanvas(); |
|
|
window.addEventListener('resize', resizeCanvas); |
|
|
} |
|
|
|
|
|
setupControls() { |
|
|
document.getElementById('zoomIn').addEventListener('click', () => { |
|
|
this.zoom *= 1.2; |
|
|
this.draw(); |
|
|
}); |
|
|
|
|
|
document.getElementById('zoomOut').addEventListener('click', () => { |
|
|
this.zoom /= 1.2; |
|
|
this.draw(); |
|
|
}); |
|
|
|
|
|
document.getElementById('resetView').addEventListener('click', () => { |
|
|
this.zoom = 1; |
|
|
this.offset = { x: 0, y: 0 }; |
|
|
this.draw(); |
|
|
}); |
|
|
} |
|
|
|
|
|
setupEventListeners() { |
|
|
this.canvas.addEventListener('mousedown', (e) => { |
|
|
this.isDragging = true; |
|
|
this.lastMousePos = { |
|
|
x: e.clientX, |
|
|
y: e.clientY |
|
|
}; |
|
|
}); |
|
|
|
|
|
this.canvas.addEventListener('mousemove', (e) => { |
|
|
if (this.isDragging) { |
|
|
this.offset.x += (e.clientX - this.lastMousePos.x) / this.zoom; |
|
|
this.offset.y += (e.clientY - this.lastMousePos.y) / this.zoom; |
|
|
this.lastMousePos = { |
|
|
x: e.clientX, |
|
|
y: e.clientY |
|
|
}; |
|
|
this.draw(); |
|
|
} |
|
|
|
|
|
|
|
|
const rect = this.canvas.getBoundingClientRect(); |
|
|
const mouseX = e.clientX - rect.left; |
|
|
const mouseY = e.clientY - rect.top; |
|
|
this.showTooltip(mouseX, mouseY); |
|
|
}); |
|
|
|
|
|
this.canvas.addEventListener('mouseup', () => { |
|
|
this.isDragging = false; |
|
|
}); |
|
|
|
|
|
this.canvas.addEventListener('mouseleave', () => { |
|
|
this.isDragging = false; |
|
|
this.tooltip.style.display = 'none'; |
|
|
}); |
|
|
|
|
|
this.canvas.addEventListener('wheel', (e) => { |
|
|
e.preventDefault(); |
|
|
const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1; |
|
|
this.zoom *= zoomFactor; |
|
|
this.draw(); |
|
|
}); |
|
|
} |
|
|
|
|
|
showTooltip(mouseX, mouseY) { |
|
|
|
|
|
let tooltipContent = null; |
|
|
|
|
|
|
|
|
sdrStations.forEach(station => { |
|
|
const pos = this.latLongToXY(station.location[0], station.location[1]); |
|
|
const distance = Math.hypot(pos.x - mouseX, pos.y - mouseY); |
|
|
if (distance < 10) { |
|
|
tooltipContent = ` |
|
|
${station.name}<br> |
|
|
Frequency: ${station.frequency}<br> |
|
|
Location: ${station.location.join(', ')}<br> |
|
|
Range: ${station.range}km |
|
|
`; |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
this.targets.forEach(target => { |
|
|
const pos = this.latLongToXY(target.position.lat, target.position.lon); |
|
|
const distance = Math.hypot(pos.x - mouseX, pos.y - mouseY); |
|
|
if (distance < 10) { |
|
|
tooltipContent = ` |
|
|
ID: ${target.id}<br> |
|
|
Type: ${target.type}<br> |
|
|
Speed: ${target.speed.toFixed(0)}kts<br> |
|
|
Altitude: ${target.altitude.toFixed(0)}ft<br> |
|
|
Position: ${target.position.lat.toFixed(2)}°, ${target.position.lon.toFixed(2)}° |
|
|
`; |
|
|
} |
|
|
}); |
|
|
|
|
|
if (tooltipContent) { |
|
|
this.tooltip.style.display = 'block'; |
|
|
this.tooltip.style.left = (mouseX + 10) + 'px'; |
|
|
this.tooltip.style.top = (mouseY + 10) + 'px'; |
|
|
this.tooltip.innerHTML = tooltipContent; |
|
|
} else { |
|
|
this.tooltip.style.display = 'none'; |
|
|
} |
|
|
} |
|
|
|
|
|
loadWorldMap() { |
|
|
this.worldGrid = { |
|
|
latLines: [], |
|
|
lonLines: [] |
|
|
}; |
|
|
|
|
|
for(let lat = -75; lat <= 75; lat += 15) { |
|
|
this.worldGrid.latLines.push(lat); |
|
|
} |
|
|
|
|
|
for(let lon = -180; lon <= 180; lon += 30) { |
|
|
this.worldGrid.lonLines.push(lon); |
|
|
} |
|
|
} |
|
|
|
|
|
latLongToXY(lat, lon) { |
|
|
const mapWidth = this.canvas.width; |
|
|
const mapHeight = this.canvas.height; |
|
|
|
|
|
|
|
|
const x = (lon + 180) * (mapWidth / 360) * this.zoom + this.offset.x; |
|
|
const latRad = lat * Math.PI / 180; |
|
|
const mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2))); |
|
|
const y = (mapHeight / 2 - (mapWidth * mercN / (2 * Math.PI))) * this.zoom + this.offset.y; |
|
|
|
|
|
return {x, y}; |
|
|
} |
|
|
|
|
|
draw() { |
|
|
this.drawWorldMap(); |
|
|
this.drawStations(); |
|
|
this.drawTargets(); |
|
|
} |
|
|
|
|
|
drawWorldMap() { |
|
|
|
|
|
this.ctx.fillStyle = '#111'; |
|
|
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|
|
|
|
|
|
|
|
this.ctx.strokeStyle = '#1a1a1a'; |
|
|
this.ctx.lineWidth = 1; |
|
|
|
|
|
|
|
|
this.worldGrid.latLines.forEach(lat => { |
|
|
const start = this.latLongToXY(lat, -180); |
|
|
const end = this.latLongToXY(lat, 180); |
|
|
this.ctx.beginPath(); |
|
|
this.ctx.moveTo(start.x, start.y); |
|
|
this.ctx.lineTo(end.x, end.y); |
|
|
this.ctx.stroke(); |
|
|
|
|
|
|
|
|
this.ctx.fillStyle = '#444'; |
|
|
this.ctx.font = '10px monospace'; |
|
|
this.ctx.fillText(`${lat}°`, end.x + 5, end.y); |
|
|
}); |
|
|
|
|
|
|
|
|
this.worldGrid.lonLines.forEach(lon => { |
|
|
const start = this.latLongToXY(-75, lon); |
|
|
const end = this.latLongToXY(75, lon); |
|
|
this.ctx.beginPath(); |
|
|
this.ctx.moveTo(start.x, start.y); |
|
|
this.ctx.lineTo(end.x, end.y); |
|
|
this.ctx.stroke(); |
|
|
|
|
|
|
|
|
this.ctx.fillStyle = '#444'; |
|
|
this.ctx.font = '10px monospace'; |
|
|
this.ctx.fillText(`${lon}°`, start.x - 15, this.canvas.height - 5); |
|
|
}); |
|
|
} |
|
|
|
|
|
drawStations() { |
|
|
sdrStations.forEach(station => { |
|
|
const pos = this.latLongToXY(station.location[0], station.location[1]); |
|
|
|
|
|
|
|
|
this.ctx.beginPath(); |
|
|
this.ctx.arc(pos.x, pos.y, (station.range / 10) * this.zoom, 0, Math.PI * 2); |
|
|
this.ctx.strokeStyle = `rgba(0,255,0,${station.active ? 0.2 : 0.1})`; |
|
|
this.ctx.stroke(); |
|
|
|
|
|
|
|
|
this.ctx.beginPath(); |
|
|
this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI * 2); |
|
|
this.ctx.fillStyle = station.active ? '#0f0' : '#f00'; |
|
|
this.ctx.fill(); |
|
|
|
|
|
|
|
|
this.ctx.fillStyle = '#0f0'; |
|
|
this.ctx.font = `${10 * this.zoom}px monospace`; |
|
|
this.ctx.fillText(station.name, pos.x + 10, pos.y + 4); |
|
|
}); |
|
|
} |
|
|
|
|
|
drawTargets() { |
|
|
this.targets.forEach(target => { |
|
|
const pos = this.latLongToXY(target.position.lat, target.position.lon); |
|
|
|
|
|
|
|
|
sdrStations.forEach(station => { |
|
|
if(station.active) { |
|
|
const stationPos = this.latLongToXY(station.location[0], station.location[1]); |
|
|
const distance = Math.hypot(pos.x - stationPos.x, pos.y - stationPos.y); |
|
|
if(distance < station.range * this.zoom / 5) { |
|
|
this.ctx.beginPath(); |
|
|
this.ctx.strokeStyle = `rgba(0,255,0,${target.signalStrength * 0.3})`; |
|
|
this.ctx.moveTo(stationPos.x, stationPos.y); |
|
|
this.ctx.lineTo(pos.x, pos.y); |
|
|
this.ctx.stroke(); |
|
|
} |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const size = 3 * this.zoom; |
|
|
if(target.type === 'aircraft') { |
|
|
|
|
|
this.ctx.fillStyle = '#ff0'; |
|
|
this.ctx.beginPath(); |
|
|
this.ctx.moveTo(pos.x, pos.y - size); |
|
|
this.ctx.lineTo(pos.x + size, pos.y + size); |
|
|
this.ctx.lineTo(pos.x - size, pos.y + size); |
|
|
this.ctx.closePath(); |
|
|
this.ctx.fill(); |
|
|
} else { |
|
|
|
|
|
this.ctx.fillStyle = '#0ff'; |
|
|
this.ctx.fillRect(pos.x - size, pos.y - size, size * 2, size * 2); |
|
|
} |
|
|
|
|
|
|
|
|
this.ctx.fillStyle = '#666'; |
|
|
this.ctx.font = `${10 * this.zoom}px monospace`; |
|
|
this.ctx.fillText( |
|
|
`${target.id} • ${target.speed.toFixed(0)}kts • ${target.altitude.toFixed(0)}ft`, |
|
|
pos.x + 10, |
|
|
pos.y + 4 |
|
|
); |
|
|
}); |
|
|
} |
|
|
|
|
|
updateDetections() { |
|
|
const detections = document.getElementById('detections'); |
|
|
detections.innerHTML = Array.from(this.targets) |
|
|
.map(target => ` |
|
|
<div class="detection"> |
|
|
${target.type === 'aircraft' ? '✈️' : '🚗'} |
|
|
${target.id} |
|
|
${target.speed.toFixed(0)}kts |
|
|
${target.type === 'aircraft' ? `${target.altitude.toFixed(0)}ft` : ''} |
|
|
Signal: ${(target.signalStrength * 100).toFixed(0)}% |
|
|
Position: ${target.position.lat.toFixed(2)}°, ${target.position.lon.toFixed(2)}° |
|
|
</div> |
|
|
`).join(''); |
|
|
} |
|
|
|
|
|
updateSignalStrengths() { |
|
|
sdrStations.forEach(station => { |
|
|
const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`); |
|
|
if(bar) { |
|
|
const strength = 40 + Math.random() * 60; |
|
|
bar.style.width = `${strength}%`; |
|
|
} |
|
|
}); |
|
|
} |
|
|
|
|
|
generateTarget() { |
|
|
return { |
|
|
type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', |
|
|
position: { |
|
|
lat: -75 + Math.random() * 150, |
|
|
lon: -180 + Math.random() * 360 |
|
|
}, |
|
|
speed: Math.random() * 500 + 200, |
|
|
altitude: Math.random() * 35000 + 5000, |
|
|
heading: Math.random() * 360, |
|
|
id: Math.random().toString(36).substr(2, 6).toUpperCase(), |
|
|
signalStrength: Math.random() |
|
|
}; |
|
|
} |
|
|
|
|
|
startTracking() { |
|
|
setInterval(() => { |
|
|
|
|
|
if(Math.random() < 0.1 && this.targets.size < 15) { |
|
|
this.targets.add(this.generateTarget()); |
|
|
} |
|
|
if(Math.random() < 0.1 && this.targets.size > 0) { |
|
|
this.targets.delete(Array.from(this.targets)[0]); |
|
|
} |
|
|
|
|
|
|
|
|
this.targets.forEach(target => { |
|
|
const speed = target.speed / 3600; |
|
|
const radians = target.heading * Math.PI / 180; |
|
|
|
|
|
target.position.lon += Math.sin(radians) * speed; |
|
|
target.position.lat += Math.cos(radians) * speed; |
|
|
|
|
|
|
|
|
if(target.position.lon > 180) target.position.lon -= 360; |
|
|
if(target.position.lon < -180) target.position.lon += 360; |
|
|
if(target.position.lat > 75) target.position.lat = 75; |
|
|
if(target.position.lat < -75) target.position.lat = -75; |
|
|
|
|
|
|
|
|
if(Math.random() < 0.05) { |
|
|
target.heading += (Math.random() - 0.5) * 30; |
|
|
target.heading = (target.heading + 360) % 360; |
|
|
} |
|
|
|
|
|
|
|
|
target.signalStrength = Math.max(0.1, Math.min(1, target.signalStrength + (Math.random() - 0.5) * 0.1)); |
|
|
}); |
|
|
|
|
|
this.draw(); |
|
|
this.updateDetections(); |
|
|
this.updateSignalStrengths(); |
|
|
}, 100); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
const radar = new GlobalRadarSystem(); |
