Hugging Face's logo

Spaces:
kolaslab
/
world-sdr
Running

App Files Community
world-sdr / index.html
kolaslab's picture
kolaslab
Update index.html
1e56734 verified
raw
history blame
17.7 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hyperscan: Global SDR Radar(Simul)</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);
}
/* μˆ˜μ‹ κΈ°(Receivers) λͺ©λ‘ μ˜μ—­ */
.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;
}
/* 탐지(Detections) λͺ©λ‘ */
.detection {
padding: 5px;
margin: 5px 0;
font-size: 12px;
border-left: 2px solid #0f0;
}
/* 이벀트 둜그 좜λ ₯ */
.alert {
background: #911;
padding: 5px;
margin: 5px 0;
border-left: 2px solid #f00;
color: #f66;
}
</style>
</head>
<body>
<div class="container">
<!-- μ‚¬μ΄λ“œλ°” -->
<div class="sidebar">
<h2>Hyperscan: Global SDR Radar(Simul)</h2>
<h3>SDR Receivers</h3>
<div id="receivers"></div>
<h3>Real-time Detections</h3>
<div id="detections"></div>
<h3>Events</h3>
<div id="events"></div>
</div>
<!-- μΊ”λ²„μŠ€ 지도 μ˜μ—­ -->
<canvas id="map"></canvas>
</div>
<script>
// μ˜ˆμ‹œ SDR μŠ€ν…Œμ΄μ…˜: μ›ν•˜λŠ” 만큼 μΆ”κ°€/μˆ˜μ • κ°€λŠ₯
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: "KiwiSDR Switzerland",
url: "hb9ryz.no-ip.org:8073",
location: [47.3769, 8.5417],
frequency: "0-30 MHz",
range: 160,
active: true
},
{
name: "SUWS WebSDR UK",
url: "websdr.suws.org.uk",
location: [51.2785, -0.7642],
frequency: "0-30 MHz",
range: 150,
active: true
}
];
class RadarSystem {
constructor() {
// Canvas μ€€λΉ„
this.canvas = document.getElementById('map');
this.ctx = this.canvas.getContext('2d');
// νƒ€κ²Ÿ 정보 μ €μž₯ (Set으둜 관리)
this.targets = new Set();
// νƒ€κ²Ÿμ˜ 이동 ꢀ적(trail)을 μ €μž₯ (key: νƒ€κ²ŸID, value: {x,y} λ°°μ—΄)
this.trails = new Map();
// 이벀트 둜그
this.eventsLog = [];
// 폭풍/κ΅λž€ 이벀트 μƒνƒœ
this.stormActive = false; // 폭풍 ν† κΈ€
this.stormCenter = { lat: 50.5, lon: 5.0 }; // 폭풍 쀑심
this.stormRadius = 200; // 폭풍 반경 (km)
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(st => `
<div class="receiver" id="rx-${st.url.split(':')[0]}">
<div class="status">
<div class="led ${st.active ? 'active' : 'inactive'}"></div>
<strong>${st.name}</strong>
</div>
<div>πŸ“‘ ${st.url}</div>
<div>πŸ“» ${st.frequency}</div>
<div>πŸ“ ${st.location.join(', ')}</div>
<div>Range: ${st.range}km</div>
<div class="signal-strength">
<div class="signal-bar"></div>
</div>
</div>
`).join('');
}
// μž„μ˜λ‘œ νƒ€κ²Ÿ ν•˜λ‚˜ 생성
generateTarget() {
const lat = 51.5 + (Math.random()-0.5)*4; // μž„μ˜ λ²”μœ„
const lon = 5.0 + (Math.random()-0.5)*8;
return {
id: Math.random().toString(36).substr(2, 6).toUpperCase(),
type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', // 30%ν™•λ₯  aircraft
lat,
lon,
speed: (Math.random()*200 + 100).toFixed(0),
altitude: (Math.random()*30000 + 1000).toFixed(0),
heading: Math.random()*360,
signalStrength: Math.random()
};
}
// νƒ€κ²Ÿ 이동(heading, speed 기반)
moveTarget(target) {
const speedKnots = parseFloat(target.speed);
// 1 knot μ•½ 0.0005 deg/sec κ°€μ • (λ‹¨μˆœν™”)
const speedFactor = 0.00005;
const rad = (target.heading * Math.PI) / 180;
// 뢁(μœ„λ„+), 남(μœ„λ„-), 동(경도+), μ„œ(경도-)
target.lat += Math.cos(rad) * speedKnots * speedFactor;
target.lon += Math.sin(rad) * speedKnots * speedFactor;
}
// 폭풍 On/Off
toggleStorm() {
this.stormActive = !this.stormActive;
const msg = this.stormActive
? "폭풍 λ°œμƒ! μˆ˜μ‹  κ΅λž€ 우렀"
: "폭풍 μ†Œλ©Έ. μƒνƒœ 정상화";
this.addEventLog(msg);
}
// 둜그 μΆ”κ°€
addEventLog(msg) {
this.eventsLog.push(msg);
const eventsDiv = document.getElementById('events');
// μΆ”κ°€
eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
// λ„ˆλ¬΄ λ§Žμ•„μ§€λ©΄ 였래된 기둝 제거
if (this.eventsLog.length > 10) {
this.eventsLog.shift();
eventsDiv.removeChild(eventsDiv.firstChild);
}
}
// μœ„λ„κ²½λ„λ₯Ό μΊ”λ²„μŠ€ μ’Œν‘œλ‘œ λ³€ν™˜ (λ‹¨μˆœλ„)
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 };
}
// 두 점(μœ„λ„κ²½λ„) 사이 거리(km)
distanceKm(lat1, lon1, lat2, lon2) {
const R = 6371;
const dLat = (lat2 - lat1) * Math.PI/180;
const dLon = (lon2 - lon1) * Math.PI/180;
const a = Math.sin(dLat/2)*Math.sin(dLat/2)
+ Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)
* Math.sin(dLon/2)*Math.sin(dLon/2);
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
}
// λ°°κ²½+κ·Έλ¦¬λ“œ 그리기
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() {
// 폭풍 λ²”μœ„ μ‹œκ°ν™”
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();
}
// μˆ˜μ‹ κΈ° μŠ€ν…Œμ΄μ…˜
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+8, pos.y+4);
});
}
// νƒ€κ²Ÿ 및 ꢀ적 그리기
drawTargets() {
this.targets.forEach(target => {
// νƒ€κ²Ÿ 이동
this.moveTarget(target);
// 폭풍 영ν–₯: λ²”μœ„ 내에 있으면 μ‹ ν˜Έκ°•λ„ κ°μ†Œ
if (this.stormActive) {
const distStorm = this.distanceKm(
target.lat, target.lon,
this.stormCenter.lat, this.stormCenter.lon
);
if (distStorm <= this.stormRadius) {
target.signalStrength = Math.max(0, target.signalStrength - 0.01);
}
}
// νƒ€κ²Ÿ μœ„μΉ˜
const pos = this.latLongToXY(target.lat, target.lon);
// ꢀ적 μ €μž₯
if (!this.trails.has(target.id)) {
this.trails.set(target.id, []);
}
const trail = this.trails.get(target.id);
trail.push({x: pos.x, y: pos.y});
if (trail.length > 100) {
trail.shift(); // 였래된 μ’Œν‘œ 제거
}
// μŠ€ν…Œμ΄μ…˜ μ—°κ²°μ„ 
sdrStations.forEach(st => {
if (st.active) {
const dist = this.distanceKm(
target.lat, target.lon,
st.location[0], st.location[1]
);
if (dist <= st.range) {
const sp = this.latLongToXY(st.location[0], st.location[1]);
this.ctx.beginPath();
this.ctx.moveTo(sp.x, sp.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.strokeStyle = (target.type==='aircraft')
? 'rgba(255,255,0,0.3)'
: 'rgba(0,255,255,0.3)';
for (let i=0; i<trail.length-1; i++) {
this.ctx.moveTo(trail[i].x, trail[i].y);
this.ctx.lineTo(trail[i+1].x, trail[i+1].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.type})`, pos.x+8, pos.y+4);
});
}
// μ‚¬μ΄λ“œλ°” 'Real-time Detections' μ—…λ°μ΄νŠΈ
updateDetections() {
const detections = document.getElementById('detections');
let html = '';
this.targets.forEach(t => {
html += `
<div class="detection">
${t.type==='aircraft' ? '✈️' : 'πŸš—'}
${t.id}
Speed: ${t.speed}kts
${t.type==='aircraft' ? 'Alt: '+t.altitude+'ft' : ''}
Sig: ${(t.signalStrength*100).toFixed(0)}%
</div>
`;
});
detections.innerHTML = html;
}
// μˆ˜μ‹ κΈ° μ‹ ν˜Έκ°•λ„ λ°” λ¬΄μž‘μœ„ μ—…λ°μ΄νŠΈ
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}%`;
}
});
}
// 메인 루프
startTracking() {
// 폭풍 ν† κΈ€(μ•½ 20% ν™•λ₯ λ‘œ 10μ΄ˆλ§ˆλ‹€ ν•œ 번 λ°œμƒ)
setInterval(() => {
if (Math.random() < 0.2) {
this.toggleStorm();
}
}, 10000);
// 100msλ§ˆλ‹€ κ°±μ‹ 
setInterval(() => {
// 10% ν™•λ₯ λ‘œ νƒ€κ²Ÿ μΆ”κ°€
if (Math.random() < 0.1 && this.targets.size < 15) {
const newT = this.generateTarget();
this.targets.add(newT);
this.addEventLog(`μƒˆ νƒ€κ²Ÿ μΆœν˜„: ${newT.id}`);
}
// 10% ν™•λ₯ λ‘œ νƒ€κ²Ÿ ν•˜λ‚˜ 제거
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.drawBackground();
this.drawStations();
this.drawTargets();
// μ‚¬μ΄λ“œλ°” κ°±μ‹ 
this.updateDetections();
this.updateSignalStrengths();
}, 100);
}
}
// νŽ˜μ΄μ§€ λ‘œλ“œ μ‹œ μ‹œμž‘
window.addEventListener('load', () => {
new RadarSystem();
});
</script>
</body>
</html>