|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta charset="UTF-8"> |
|
<title>Real SDR Network Monitor - Extended Events</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; |
|
} |
|
#map { |
|
background: #111; |
|
border-radius: 8px; |
|
height: calc(100vh - 40px); |
|
} |
|
|
|
|
|
.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; |
|
} |
|
.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; |
|
} |
|
|
|
|
|
.events-area { |
|
margin-top: 15px; |
|
} |
|
.alert { |
|
background: #511; |
|
border-left: 2px solid #f00; |
|
margin: 5px 0; |
|
padding: 5px; |
|
color: #f66; |
|
} |
|
|
|
|
|
.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> |
|
|
|
<h3>Events</h3> |
|
<div class="events-area" id="events"></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.stormActive = false; |
|
this.jammingActive = false; |
|
|
|
|
|
this.stormCenter = { lat: 51.5, lon: 5.0 }; |
|
this.stormRadius = 150; |
|
this.jamCenter = { lat: 51.5, lon: 5.0 }; |
|
this.jamRadius = 100; |
|
|
|
|
|
this.events = []; |
|
|
|
|
|
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 }; |
|
} |
|
|
|
|
|
addEventLog(msg) { |
|
this.events.push(msg); |
|
const evDiv = document.getElementById('events'); |
|
evDiv.innerHTML += `<div class="alert">${msg}</div>`; |
|
|
|
|
|
if (this.events.length > 20) { |
|
this.events.shift(); |
|
evDiv.removeChild(evDiv.firstChild); |
|
} |
|
} |
|
|
|
|
|
generateTarget() { |
|
|
|
const lat = 51.5 + (Math.random() - 0.5)*4; |
|
const lon = 5.0 + (Math.random() - 0.5)*8; |
|
|
|
return { |
|
type: (Math.random() > 0.7) ? 'aircraft' : 'vehicle', |
|
position: { |
|
lat, |
|
lon |
|
}, |
|
speed: Math.random()*400 + 100, |
|
altitude: Math.random()*30000 + 1000, |
|
heading: Math.random()*360, |
|
id: Math.random().toString(36).substr(2, 6).toUpperCase(), |
|
signalStrength: Math.random() |
|
}; |
|
} |
|
|
|
|
|
moveTarget(target) { |
|
|
|
const speedFactor = 0.00005; |
|
const rad = target.heading * Math.PI / 180; |
|
target.position.lat += Math.cos(rad) * target.speed * speedFactor; |
|
target.position.lon += Math.sin(rad) * target.speed * speedFactor; |
|
} |
|
|
|
|
|
drawSpecialEvents() { |
|
|
|
if (this.stormActive) { |
|
const sc = this.latLongToXY(this.stormCenter.lat, this.stormCenter.lon); |
|
this.ctx.beginPath(); |
|
this.ctx.arc(sc.x, sc.y, this.stormRadius, 0, Math.PI*2); |
|
this.ctx.fillStyle = 'rgba(255,0,0,0.1)'; |
|
this.ctx.fill(); |
|
this.ctx.strokeStyle = 'rgba(255,0,0,0.5)'; |
|
this.ctx.stroke(); |
|
} |
|
|
|
|
|
if (this.jammingActive) { |
|
const jc = this.latLongToXY(this.jamCenter.lat, this.jamCenter.lon); |
|
this.ctx.beginPath(); |
|
this.ctx.arc(jc.x, jc.y, this.jamRadius, 0, Math.PI*2); |
|
this.ctx.fillStyle = 'rgba(255,255,0,0.1)'; |
|
this.ctx.fill(); |
|
this.ctx.strokeStyle = 'rgba(255,255,0,0.5)'; |
|
this.ctx.stroke(); |
|
} |
|
} |
|
|
|
|
|
drawBackgroundAndStations() { |
|
|
|
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(); |
|
} |
|
|
|
|
|
sdrStations.forEach(st => { |
|
const pos = this.latLongToXY(st.location[0], st.location[1]); |
|
|
|
|
|
this.ctx.beginPath(); |
|
this.ctx.arc(pos.x, pos.y, st.range, 0, Math.PI*2); |
|
this.ctx.strokeStyle = st.active ? 'rgba(0,255,0,0.2)' : 'rgba(255,0,0,0.2)'; |
|
this.ctx.stroke(); |
|
|
|
|
|
this.ctx.beginPath(); |
|
this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI*2); |
|
this.ctx.fillStyle = st.active ? '#0f0' : '#f00'; |
|
this.ctx.fill(); |
|
|
|
|
|
this.ctx.fillStyle = '#0f0'; |
|
this.ctx.font = '10px monospace'; |
|
this.ctx.fillText(st.name, pos.x+10, pos.y+4); |
|
}); |
|
} |
|
|
|
|
|
drawTargets() { |
|
this.targets.forEach(target => { |
|
const pos = this.latLongToXY(target.position.lat, target.position.lon); |
|
|
|
|
|
this.moveTarget(target); |
|
|
|
|
|
if (this.stormActive) { |
|
const sc = this.latLongToXY(this.stormCenter.lat, this.stormCenter.lon); |
|
const dist = Math.hypot(pos.x - sc.x, pos.y - sc.y); |
|
if (dist <= this.stormRadius) { |
|
target.signalStrength = Math.max(0, target.signalStrength - 0.01); |
|
} |
|
} |
|
|
|
|
|
if (this.jammingActive) { |
|
const jc = this.latLongToXY(this.jamCenter.lat, this.jamCenter.lon); |
|
const dist = Math.hypot(pos.x - jc.x, pos.y - jc.y); |
|
if (dist <= this.jamRadius) { |
|
target.signalStrength = Math.max(0, target.signalStrength - 0.01); |
|
} |
|
} |
|
|
|
|
|
sdrStations.forEach(st => { |
|
if (st.active) { |
|
|
|
const stPos = this.latLongToXY(st.location[0], st.location[1]); |
|
const dx = pos.x - stPos.x; |
|
const dy = pos.y - stPos.y; |
|
const distPx = Math.hypot(dx, dy); |
|
if (distPx <= st.range) { |
|
this.ctx.beginPath(); |
|
this.ctx.moveTo(stPos.x, stPos.y); |
|
this.ctx.lineTo(pos.x, pos.y); |
|
this.ctx.strokeStyle = `rgba(0,255,0,${target.signalStrength * 0.3})`; |
|
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'; |
|
const info = (target.type==='aircraft') |
|
? `${target.id} โข ${target.speed.toFixed(0)}kts โข ${target.altitude.toFixed(0)}ft` |
|
: `${target.id} โข ${target.speed.toFixed(0)}kts`; |
|
this.ctx.fillText(info, pos.x+10, pos.y+4); |
|
}); |
|
} |
|
|
|
|
|
updateDetections() { |
|
const detections = document.getElementById('detections'); |
|
detections.innerHTML = Array.from(this.targets) |
|
.map(t => ` |
|
<div class="detection"> |
|
${t.type==='aircraft' ? 'โ๏ธ' : '๐'} |
|
${t.id} |
|
${t.type==='aircraft' ? `${t.altitude.toFixed(0)}ft ` : ''} |
|
${t.speed.toFixed(0)}kts |
|
Sig: ${(t.signalStrength*100).toFixed(0)}% |
|
</div> |
|
`).join(''); |
|
} |
|
|
|
|
|
updateSignalStrengths() { |
|
sdrStations.forEach(st => { |
|
const bar = document.querySelector(`#rx-${st.url.split(':')[0]} .signal-bar`); |
|
if (bar) { |
|
const strength = 40 + Math.random() * 60; |
|
bar.style.width = `${strength}%`; |
|
} |
|
}); |
|
} |
|
|
|
|
|
toggleStorm() { |
|
this.stormActive = !this.stormActive; |
|
this.addEventLog(this.stormActive ? "ํญํ ๋ฐ์! ์ ํธ ๊ต๋ ์ฐ๋ ค" : "ํญํ ์๋ฉธ, ์ ์ํ"); |
|
} |
|
|
|
toggleJamming() { |
|
this.jammingActive = !this.jammingActive; |
|
this.addEventLog(this.jammingActive ? "์ฌ๋ฐ(Jamming) ์์!" : "์ฌ๋ฐ ์ข
๋ฃ"); |
|
} |
|
|
|
|
|
startTracking() { |
|
|
|
setInterval(() => { |
|
if (Math.random() < 0.2) { |
|
this.toggleStorm(); |
|
} |
|
if (Math.random() < 0.2) { |
|
this.toggleJamming(); |
|
} |
|
}, 10000); |
|
|
|
|
|
setInterval(() => { |
|
|
|
if (Math.random() < 0.15 && this.targets.size < 15) { |
|
const newT = this.generateTarget(); |
|
this.targets.add(newT); |
|
this.addEventLog(`์ ํ๊ฒ ๋ฑ์ฅ: ${newT.id}`); |
|
} |
|
|
|
if (Math.random() < 0.1 && this.targets.size > 0) { |
|
const first = Array.from(this.targets)[0]; |
|
this.targets.delete(first); |
|
this.addEventLog(`ํ๊ฒ ์๋ฉธ: ${first.id}`); |
|
} |
|
|
|
|
|
this.drawBackgroundAndStations(); |
|
this.drawSpecialEvents(); |
|
this.drawTargets(); |
|
|
|
|
|
this.updateDetections(); |
|
this.updateSignalStrengths(); |
|
}, 100); |
|
} |
|
} |
|
|
|
|
|
const radar = new RadarSystem(); |
|
</script> |
|
</body> |
|
</html> |
|
|