|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Real 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; |
|
} |
|
|
|
.sidebar { |
|
background: #111; |
|
padding: 15px; |
|
border-radius: 8px; |
|
height: calc(100vh - 40px); |
|
overflow-y: auto; |
|
} |
|
|
|
.receiver { |
|
margin: 10px 0; |
|
padding: 10px; |
|
background: #1a1a1a; |
|
border-radius: 4px; |
|
position: relative; |
|
} |
|
|
|
.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 { |
|
background: #111; |
|
border-radius: 8px; |
|
height: calc(100vh - 40px); |
|
} |
|
|
|
.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; |
|
} |
|
|
|
.signal-line { |
|
position: absolute; |
|
background: linear-gradient(90deg, rgba(0,255,0,0.2) 0%, rgba(0,255,0,0) 100%); |
|
height: 1px; |
|
transform-origin: 0 0; |
|
pointer-events: none; |
|
opacity: 0.5; |
|
} |
|
</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> |
|
|
|
<canvas id="map"></canvas> |
|
</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 |
|
}, |
|
{ |
|
name: "TU Delft WebSDR", |
|
url: "websdr.tudelft.nl:8901", |
|
location: [51.9981, 4.3731], |
|
frequency: "0-29.160 MHz", |
|
range: 180, |
|
active: true |
|
}, |
|
{ |
|
name: "SUWS WebSDR UK", |
|
url: "websdr.suws.org.uk", |
|
location: [51.2785, -0.7642], |
|
frequency: "0-30 MHz", |
|
range: 150, |
|
active: true |
|
}, |
|
{ |
|
name: "KiwiSDR Switzerland", |
|
url: "hb9ryz.no-ip.org:8073", |
|
location: [47.3769, 8.5417], |
|
frequency: "0-30 MHz", |
|
range: 160, |
|
active: true |
|
} |
|
]; |
|
|
|
class RadarSystem { |
|
constructor() { |
|
this.canvas = document.getElementById('map'); |
|
this.ctx = this.canvas.getContext('2d'); |
|
this.targets = new Set(); |
|
this.setupCanvas(); |
|
this.renderReceivers(); |
|
this.startTracking(); |
|
} |
|
|
|
setupCanvas() { |
|
this.canvas.width = this.canvas.offsetWidth; |
|
this.canvas.height = this.canvas.offsetHeight; |
|
|
|
window.addEventListener('resize', () => { |
|
this.canvas.width = this.canvas.offsetWidth; |
|
this.canvas.height = this.canvas.offsetHeight; |
|
}); |
|
} |
|
|
|
renderReceivers() { |
|
const container = document.getElementById('receivers'); |
|
container.innerHTML = sdrStations.map(station => ` |
|
<div class="receiver" id="rx-${station.url.split(':')[0]}"> |
|
<div class="status"> |
|
<div class="led ${station.active ? 'active' : 'inactive'}"></div> |
|
<strong>${station.name}</strong> |
|
</div> |
|
<div>📡 ${station.url}</div> |
|
<div>📻 ${station.frequency}</div> |
|
<div>📍 ${station.location.join(', ')}</div> |
|
<div>Range: ${station.range}km</div> |
|
<div class="signal-strength"> |
|
<div class="signal-bar"></div> |
|
</div> |
|
</div> |
|
`).join(''); |
|
} |
|
|
|
latLongToXY(lat, lon) { |
|
const centerLat = 51.5; |
|
const centerLon = 5.0; |
|
const scale = 100; |
|
|
|
const x = (lon - centerLon) * scale + this.canvas.width/2; |
|
const y = (centerLat - lat) * scale + this.canvas.height/2; |
|
|
|
return {x, y}; |
|
} |
|
|
|
generateTarget() { |
|
return { |
|
type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', |
|
position: { |
|
lat: 51.5 + (Math.random() - 0.5) * 4, |
|
lon: 5.0 + (Math.random() - 0.5) * 8 |
|
}, |
|
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() |
|
}; |
|
} |
|
|
|
drawBackground() { |
|
this.ctx.fillStyle = '#111'; |
|
this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height); |
|
|
|
|
|
this.ctx.strokeStyle = '#1a1a1a'; |
|
this.ctx.lineWidth = 1; |
|
|
|
for(let i = 0; i < this.canvas.width; i += 50) { |
|
this.ctx.beginPath(); |
|
this.ctx.moveTo(i, 0); |
|
this.ctx.lineTo(i, this.canvas.height); |
|
this.ctx.stroke(); |
|
} |
|
|
|
for(let i = 0; i < this.canvas.height; i += 50) { |
|
this.ctx.beginPath(); |
|
this.ctx.moveTo(0, i); |
|
this.ctx.lineTo(this.canvas.width, i); |
|
this.ctx.stroke(); |
|
} |
|
} |
|
|
|
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, 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 = '10px 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]); |
|
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(); |
|
} |
|
}); |
|
|
|
|
|
this.ctx.beginPath(); |
|
this.ctx.arc(pos.x, pos.y, 3, 0, Math.PI * 2); |
|
this.ctx.fillStyle = target.type === 'aircraft' ? '#ff0' : '#0ff'; |
|
this.ctx.fill(); |
|
|
|
|
|
this.ctx.fillStyle = '#666'; |
|
this.ctx.font = '10px 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)}% |
|
</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}%`; |
|
} |
|
}); |
|
} |
|
|
|
startTracking() { |
|
setInterval(() => { |
|
|
|
if(Math.random() < 0.1 && this.targets.size < 10) { |
|
this.targets.add(this.generateTarget()); |
|
} |
|
if(Math.random() < 0.1 && this.targets.size > 0) { |
|
this.targets.delete(Array.from(this.targets)[0]); |
|
} |
|
|
|
this.drawBackground(); |
|
this.drawStations(); |
|
this.drawTargets(); |
|
this.updateDetections(); |
|
this.updateSignalStrengths(); |
|
}, 100); |
|
} |
|
} |
|
|
|
|
|
const radar = new RadarSystem(); |
|
</script> |
|
</body> |
|
</html> |
