Hugging Face's logo

Spaces:
kolaslab
/
world-sdr
Running

App Files Community
world-sdr / index.html
kolaslab's picture
kolaslab
Update index.html
4253062 verified
raw
history blame
16.1 kB
<!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;
}
.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 {
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: linear-gradient(to right, #0f0, #00ff00);
width: 0%;
transition: width 0.3s ease-in-out;
box-shadow: 0 0 5px #0f0;
border-radius: 2px;
}
.detection {
background: rgba(0, 255, 0, 0.1);
border-left: 3px solid #0f0;
padding: 8px;
margin: 5px 0;
font-size: 12px;
border-radius: 0 4px 4px 0;
}
.signal-line {
position: absolute;
background: linear-gradient(90deg, rgba(0,255,0,0.4) 0%, rgba(0,255,0,0) 100%);
height: 2px;
transform-origin: 0 0;
pointer-events: none;
opacity: 0.7;
animation: signalPulse 2s infinite;
}
@keyframes signalPulse {
0% { opacity: 0.7; }
50% { opacity: 0.3; }
100% { opacity: 0.7; }
}
</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>
// Global SDR stations data
const sdrStations = [
// Europe
{
name: "Twente WebSDR",
url: "websdr.ewi.utwente.nl:8901",
location: [52.2389, 6.8343],
frequency: "0-29.160 MHz",
range: 200,
active: true
},
// [이전과 λ™μΌν•œ λ‚˜λ¨Έμ§€ μŠ€ν…Œμ΄μ…˜ 데이터...]
];
class RadarSystem {
constructor() {
this.canvas = document.getElementById('map');
this.ctx = this.canvas.getContext('2d');
this.targets = new Set();
this.signalLines = 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 = 20;
const centerLon = 0;
const scale = 4;
const x = (lon - centerLon) * scale + this.canvas.width/2;
const y = (centerLat - lat) * scale + this.canvas.height/2;
return {x, y};
}
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(),
createdAt: Date.now()
};
}
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]);
const visualRange = station.range * 0.2;
const gradient = this.ctx.createRadialGradient(
pos.x, pos.y, 0,
pos.x, pos.y, visualRange
);
gradient.addColorStop(0, `rgba(0,255,0,${station.active ? 0.2 : 0.05})`);
gradient.addColorStop(1, 'rgba(0,255,0,0)');
this.ctx.beginPath();
this.ctx.arc(pos.x, pos.y, visualRange, 0, Math.PI * 2);
this.ctx.fillStyle = gradient;
this.ctx.fill();
this.ctx.strokeStyle = `rgba(0,255,0,${station.active ? 0.4 : 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();
if(station.active) {
this.ctx.beginPath();
this.ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
this.ctx.strokeStyle = 'rgba(0,255,0,0.5)';
this.ctx.stroke();
}
this.ctx.fillStyle = '#0f0';
this.ctx.font = 'bold 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]);
const dx = pos.x - stationPos.x;
const dy = pos.y - stationPos.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const maxDistance = station.range * 0.2;
if (distance <= maxDistance) {
const signalStrength = Math.max(0.1, 1 - (distance / maxDistance));
const gradient = this.ctx.createLinearGradient(
stationPos.x, stationPos.y, pos.x, pos.y
);
gradient.addColorStop(0, `rgba(0,255,0,${signalStrength * 0.7})`);
gradient.addColorStop(1, 'rgba(0,255,0,0)');
this.ctx.beginPath();
this.ctx.moveTo(stationPos.x, stationPos.y);
this.ctx.lineTo(pos.x, pos.y);
this.ctx.strokeStyle = gradient;
this.ctx.lineWidth = 2;
this.ctx.setLineDash([5, 15]);
this.ctx.stroke();
this.ctx.setLineDash([]);
}
}
});
const targetGlow = this.ctx.createRadialGradient(
pos.x, pos.y, 2,
pos.x, pos.y, 8
);
const targetColor = target.type === 'aircraft' ?
['rgba(255,255,0,0.8)', 'rgba(255,255,0,0)'] :
['rgba(0,255,255,0.8)', 'rgba(0,255,255,0)'];
targetGlow.addColorStop(0, targetColor[0]);
targetGlow.addColorStop(1, targetColor[1]);
this.ctx.beginPath();
this.ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
this.ctx.fillStyle = targetGlow;
this.ctx.fill();
this.ctx.beginPath();
this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI * 2);
this.ctx.fillStyle = target.type === 'aircraft' ? '#ff0' : '#0ff';
this.ctx.fill();
const info = `${target.id} β€’ ${target.speed.toFixed(0)}kts β€’ ${target.altitude.toFixed(0)}ft`;
this.ctx.font = 'bold 10px monospace';
const textWidth = this.ctx.measureText(info).width;
this.ctx.fillStyle = 'rgba(0,0,0,0.7)';
this.ctx.fillRect(pos.x + 10, pos.y - 8, textWidth + 4, 16);
this.ctx.fillStyle = target.type === 'aircraft' ? '#ff0' : '#0ff';
this.ctx.fillText(info, pos.x + 12, pos.y + 4);
});
}
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 stationPos = this.latLongToXY(station.location[0], station.location[1]);
const targetPos = this.latLongToXY(target.position.lat, target.position.lon);
const dx = targetPos.x - stationPos.x;
const dy = targetPos.y - stationPos.y;
const distance = Math.sqrt(dx * dx + dy * dy);
const maxDistance = station.range * 0.2;
if (distance <= maxDistance) {
const strength = Math.max(0.1, 1 - (distance / maxDistance));
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.boxShadow = maxSignalStrength > 0.5 ? '0 0 10px #0f0' : 'none';
bar.style.opacity = maxSignalStrength > 0 ? 1 : 0.3;
}
});
}
startTracking() {
setInterval(() => {
// Add new targets
if(Math.random() < 0.1 && this.targets.size < 20) {
const newTarget = this.generateTarget();
newTarget.createdAt = Date.now();
this.targets.add(newTarget);
}
// Remove old targets
const currentTime = Date.now();
Array.from(this.targets).forEach(target => {
if(currentTime - target.createdAt > 10000) { // 10초 ν›„ 제거
this.targets.delete(target);
}
});
// Update display
this.drawBackground();
this.drawStations();
this.drawTargets();
this.updateDetections();
this.updateSignalStrengths();
}, 50); // 50ms interval for smooth animation
}
}
// Initialize radar system when page loads
window.addEventListener('load', () => {
const radar = new RadarSystem();
});
</script>
</body>
</html>