|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Global SDR Network Monitor</title> |
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" /> |
|
<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; |
|
z-index: 1000; |
|
} |
|
|
|
.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 { |
|
height: calc(100vh - 40px); |
|
border-radius: 8px; |
|
background: #111; |
|
} |
|
|
|
.signal-strength { |
|
height: 4px; |
|
background: #222; |
|
margin-top: 5px; |
|
border-radius: 2px; |
|
} |
|
|
|
.signal-bar { |
|
height: 100%; |
|
background: linear-gradient(to right, #00ff00, #00ff00); |
|
width: 0%; |
|
transition: width 0.3s ease-in-out; |
|
border-radius: 2px; |
|
} |
|
|
|
.detection { |
|
background: rgba(0, 255, 0, 0.1); |
|
border-left: 3px solid #0f0; |
|
padding: 8px; |
|
margin: 5px 0; |
|
border-radius: 0 4px 4px 0; |
|
} |
|
|
|
.leaflet-tile-pane { |
|
filter: invert(1) hue-rotate(180deg); |
|
} |
|
|
|
.leaflet-container { |
|
background: #111 !important; |
|
} |
|
|
|
.leaflet-control-attribution { |
|
background: #222 !important; |
|
color: #666 !important; |
|
} |
|
|
|
.leaflet-popup-content-wrapper, |
|
.leaflet-popup-tip { |
|
background: #222 !important; |
|
color: #0f0 !important; |
|
} |
|
|
|
.station-marker { |
|
border: 2px solid #0f0; |
|
border-radius: 50%; |
|
width: 8px; |
|
height: 8px; |
|
background: transparent; |
|
} |
|
|
|
.station-range { |
|
stroke: #0f0; |
|
stroke-width: 1; |
|
fill: #0f0; |
|
fill-opacity: 0.1; |
|
} |
|
|
|
.signal-line { |
|
stroke: #0f0; |
|
stroke-width: 2px; |
|
stroke-opacity: 0.5; |
|
pointer-events: none; |
|
animation: signalPulse 2s infinite; |
|
} |
|
|
|
@keyframes signalPulse { |
|
0% { stroke-opacity: 0.4; } |
|
50% { stroke-opacity: 0.1; } |
|
100% { stroke-opacity: 0.4; } |
|
} |
|
|
|
.target-marker { |
|
width: 6px; |
|
height: 6px; |
|
background: #ff0; |
|
border-radius: 50%; |
|
border: 1px solid #fff; |
|
} |
|
|
|
|
|
.leaflet-overlay-pane path { |
|
stroke: #0f0 !important; |
|
stroke-opacity: 0.4 !important; |
|
stroke-width: 2px !important; |
|
animation: signalPulse 2s infinite; |
|
} |
|
|
|
.custom-tooltip { |
|
background: #111 !important; |
|
border: 1px solid #0f0 !important; |
|
border-radius: 4px !important; |
|
padding: 5px !important; |
|
color: #0f0 !important; |
|
} |
|
</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 id="map"></div> |
|
</div> |
|
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script> |
|
<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 |
|
}, |
|
|
|
{ |
|
name: "W6DRZ WebSDR", |
|
url: "w6drz.sdr.us:8901", |
|
location: [34.2847, -118.4429], |
|
frequency: "0-30 MHz", |
|
range: 170, |
|
active: true |
|
}, |
|
{ |
|
name: "K3FEF WebSDR", |
|
url: "k3fef.sdr.us:8901", |
|
location: [40.5697, -75.9363], |
|
frequency: "0-30 MHz", |
|
range: 160, |
|
active: true |
|
}, |
|
{ |
|
name: "WA2ZKD KiwiSDR", |
|
url: "wa2zkd.sdr.us:8073", |
|
location: [40.7128, -74.0060], |
|
frequency: "0-30 MHz", |
|
range: 150, |
|
active: true |
|
}, |
|
{ |
|
name: "W4AX WebSDR", |
|
url: "w4ax.sdr.us:8901", |
|
location: [33.7756, -84.3963], |
|
frequency: "0-30 MHz", |
|
range: 165, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "JH7VHZ WebSDR", |
|
url: "jh7vhz.sdr.jp:8901", |
|
location: [38.2682, 140.8694], |
|
frequency: "0-30 MHz", |
|
range: 155, |
|
active: true |
|
}, |
|
{ |
|
name: "JA1GJB KiwiSDR", |
|
url: "ja1gjb.sdr.jp:8073", |
|
location: [35.6762, 139.6503], |
|
frequency: "0-30 MHz", |
|
range: 145, |
|
active: true |
|
}, |
|
{ |
|
name: "JA3ZOH WebSDR", |
|
url: "ja3zoh.sdr.jp:8901", |
|
location: [34.6937, 135.5023], |
|
frequency: "0-30 MHz", |
|
range: 150, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "VK4YA KiwiSDR", |
|
url: "vk4ya.sdr.au:8073", |
|
location: [-27.4698, 153.0251], |
|
frequency: "0-30 MHz", |
|
range: 170, |
|
active: true |
|
}, |
|
{ |
|
name: "VK2RG WebSDR", |
|
url: "vk2rg.sdr.au:8901", |
|
location: [-33.8688, 151.2093], |
|
frequency: "0-30 MHz", |
|
range: 165, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "RZ3DJR WebSDR", |
|
url: "rz3djr.sdr.ru:8901", |
|
location: [55.7558, 37.6173], |
|
frequency: "0-30 MHz", |
|
range: 180, |
|
active: true |
|
}, |
|
{ |
|
name: "UA9UDX WebSDR", |
|
url: "ua9udx.sdr.ru:8901", |
|
location: [55.0084, 82.9357], |
|
frequency: "0-30 MHz", |
|
range: 175, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "BY1PK WebSDR", |
|
url: "by1pk.sdr.cn:8901", |
|
location: [39.9042, 116.4074], |
|
frequency: "0-30 MHz", |
|
range: 160, |
|
active: true |
|
}, |
|
{ |
|
name: "BG3MDO KiwiSDR", |
|
url: "bg3mdo.sdr.cn:8073", |
|
location: [23.1291, 113.2644], |
|
frequency: "0-30 MHz", |
|
range: 155, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "HL2WA KiwiSDR", |
|
url: "hl2wa.sdr.kr:8073", |
|
location: [37.5665, 126.9780], |
|
frequency: "0-30 MHz", |
|
range: 150, |
|
active: true |
|
}, |
|
{ |
|
name: "DS1URB WebSDR", |
|
url: "ds1urb.sdr.kr:8901", |
|
location: [35.1796, 129.0756], |
|
frequency: "0-30 MHz", |
|
range: 145, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "VE3HOA WebSDR", |
|
url: "ve3hoa.sdr.ca:8901", |
|
location: [43.6532, -79.3832], |
|
frequency: "0-30 MHz", |
|
range: 165, |
|
active: true |
|
}, |
|
{ |
|
name: "VA3ROM KiwiSDR", |
|
url: "va3rom.sdr.ca:8073", |
|
location: [45.4215, -75.6972], |
|
frequency: "0-30 MHz", |
|
range: 160, |
|
active: true |
|
}, |
|
|
|
{ |
|
name: "PY2RDZ WebSDR", |
|
url: "py2rdz.sdr.br:8901", |
|
location: [-23.5505, -46.6333], |
|
frequency: "0-30 MHz", |
|
range: 170, |
|
active: true |
|
}, |
|
{ |
|
name: "PY1ZV KiwiSDR", |
|
url: "py1zv.sdr.br:8073", |
|
location: [-22.9068, -43.1729], |
|
frequency: "0-30 MHz", |
|
range: 165, |
|
active: true |
|
} |
|
]; |
|
|
|
class RadarSystem { |
|
constructor() { |
|
this.targets = new Set(); |
|
this.markers = new Map(); |
|
this.signalLines = new Map(); |
|
this.initializeMap(); |
|
this.renderReceivers(); |
|
this.startTracking(); |
|
} |
|
|
|
initializeMap() { |
|
this.map = L.map('map', { |
|
center: [20, 0], |
|
zoom: 3, |
|
preferCanvas: true, |
|
worldCopyJump: true |
|
}); |
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { |
|
maxZoom: 19, |
|
attribution: 'Β© OpenStreetMap contributors' |
|
}).addTo(this.map); |
|
|
|
sdrStations.forEach(station => { |
|
const marker = L.circleMarker(station.location, { |
|
radius: 5, |
|
color: '#0f0', |
|
fillColor: '#0f0', |
|
fillOpacity: 1 |
|
}).addTo(this.map); |
|
|
|
const range = L.circle(station.location, { |
|
radius: station.range * 1000, |
|
className: 'station-range' |
|
}).addTo(this.map); |
|
|
|
marker.bindTooltip(` |
|
${station.name}<br> |
|
Frequency: ${station.frequency}<br> |
|
Range: ${station.range}km |
|
`, { |
|
className: 'custom-tooltip' |
|
}); |
|
}); |
|
} |
|
|
|
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(''); |
|
} |
|
|
|
generateTarget() { |
|
const station = sdrStations[Math.floor(Math.random() * sdrStations.length)]; |
|
const range = 5; |
|
return { |
|
type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', |
|
position: { |
|
lat: station.location[0] + (Math.random() - 0.5) * range, |
|
lon: station.location[1] + (Math.random() - 0.5) * range |
|
}, |
|
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() |
|
}; |
|
} |
|
|
|
updateTargets() { |
|
|
|
this.signalLines.forEach(line => this.map.removeLayer(line)); |
|
this.signalLines.clear(); |
|
this.markers.forEach(marker => this.map.removeLayer(marker)); |
|
this.markers.clear(); |
|
|
|
|
|
this.targets.forEach(target => { |
|
|
|
const marker = L.circleMarker([target.position.lat, target.position.lon], { |
|
radius: 5, |
|
color: target.type === 'aircraft' ? '#ff0' : '#0ff', |
|
fillColor: target.type === 'aircraft' ? '#ff0' : '#0ff', |
|
fillOpacity: 1, |
|
weight: 2 |
|
}).addTo(this.map); |
|
|
|
|
|
marker.bindTooltip(` |
|
<div style="color: #0f0;"> |
|
<strong>${target.id}</strong><br> |
|
${target.type === 'aircraft' ? 'βοΈ' : 'π'} ${target.type.toUpperCase()}<br> |
|
Speed: ${target.speed.toFixed(0)} kts<br> |
|
${target.type === 'aircraft' ? `Altitude: ${target.altitude.toFixed(0)} ft<br>` : ''} |
|
Signal: ${(target.signalStrength * 100).toFixed(0)}% |
|
</div> |
|
`, { |
|
className: 'custom-tooltip' |
|
}); |
|
|
|
this.markers.set(target.id, marker); |
|
|
|
|
|
sdrStations.forEach(station => { |
|
if (station.active) { |
|
const distance = this.map.distance( |
|
[target.position.lat, target.position.lon], |
|
station.location |
|
) / 1000; |
|
|
|
if (distance <= station.range) { |
|
const signalStrength = Math.max(0.1, 1 - (distance / station.range)); |
|
|
|
const line = L.polyline([ |
|
[target.position.lat, target.position.lon], |
|
station.location |
|
], { |
|
color: '#00ff00', |
|
opacity: signalStrength * 0.8, |
|
weight: 2, |
|
dashArray: '5, 10', |
|
className: 'signal-line' |
|
}).addTo(this.map); |
|
|
|
this.signalLines.set(`${target.id}-${station.name}`, line); |
|
} |
|
} |
|
}); |
|
}); |
|
} |
|
|
|
updateDetections() { |
|
const detections = document.getElementById('detections'); |
|
detections.innerHTML = Array.from(this.targets) |
|
.map(target => ` |
|
<div class="detection"> |
|
${target.type === 'aircraft' ? 'βοΈ' : 'π'} |
|
<strong>${target.id}</strong><br> |
|
Speed: ${target.speed.toFixed(0)} kts |
|
${target.type === 'aircraft' ? `<br>Alt: ${target.altitude.toFixed(0)} ft` : ''} |
|
<br>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) { |
|
|
|
let maxSignalStrength = 0; |
|
this.targets.forEach(target => { |
|
const distance = this.map.distance( |
|
[target.position.lat, target.position.lon], |
|
station.location |
|
) / 1000; |
|
|
|
if (distance <= station.range) { |
|
const strength = Math.max(0.1, 1 - (distance / station.range)); |
|
maxSignalStrength = Math.max(maxSignalStrength, strength); |
|
} |
|
}); |
|
|
|
|
|
const baseStrength = maxSignalStrength * 100; |
|
const fluctuation = Math.random() * 20 - 10; |
|
const finalStrength = Math.max(10, Math.min(100, baseStrength + fluctuation)); |
|
|
|
bar.style.width = `${finalStrength}%`; |
|
bar.style.opacity = maxSignalStrength > 0 ? 1 : 0.3; |
|
} |
|
}); |
|
} |
|
|
|
startTracking() { |
|
setInterval(() => { |
|
|
|
if(Math.random() < 0.1 && this.targets.size < 20) { |
|
this.targets.add(this.generateTarget()); |
|
} |
|
if(Math.random() < 0.1 && this.targets.size > 0) { |
|
this.targets.delete(Array.from(this.targets)[0]); |
|
} |
|
|
|
this.updateTargets(); |
|
this.updateDetections(); |
|
this.updateSignalStrengths(); |
|
}, 100); |
|
} |
|
} |
|
|
|
|
|
window.addEventListener('load', () => { |
|
const radar = new RadarSystem(); |
|
}); |
|
</script> |
|
</body> |
|
</html> |