Hugging Face's logo

Spaces:
belisso
/
world-sdr
Running

App Files Community
world-sdr / index.html
kolaslab's picture
kolaslab
Update index.html
25521e3 verified
raw
history blame contribute delete
22.1 kB
 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hyperscan: Global SDR Radar(Simul) - Extended Events</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.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;
}
#map {
height: calc(100vh - 40px);
border-radius: 8px;
background: #111;
}
/* Leaflet ๋‹คํฌํ…Œ๋งˆ(ํƒ€์ผ ๋ฐ˜์ „) */
.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;
}
/* ===== 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;
}
/* ===== ์‹ค์‹œ๊ฐ„ ํƒ์ง€ ๋ชฉ๋ก ===== */
.detection {
padding: 5px;
margin: 5px 0;
font-size: 12px;
border-left: 2px solid #0f0;
}
/* ===== ์ด๋ฒคํŠธ ๋กœ๊ทธ ===== */
.alert {
background: #611;
border-left: 2px solid #f00;
margin: 5px 0;
padding: 5px;
color: #f66;
}
/* ===== ์Šคํ…Œ์ด์…˜/ํญํ’/์žฌ๋ฐ ๋ฒ”์œ„ ํ‘œ์‹œ ===== */
.station-range {
stroke: #0f0;
stroke-width: 1;
fill: #0f0;
fill-opacity: 0.1;
}
.storm-range {
stroke: #f00;
stroke-width: 1;
fill: #f00;
fill-opacity: 0.1;
}
.jam-range {
stroke: #ff0;
stroke-width: 1;
fill: #ff0;
fill-opacity: 0.1;
}
</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>
<!-- Leaflet ์ง€๋„ ์˜์—ญ -->
<div id="map"></div>
</div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// 23๊ฐœ ์ „ ์„ธ๊ณ„ SDR ์Šคํ…Œ์ด์…˜
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 },
{ 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 },
// United States
{ 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 },
// Japan
{ 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 },
// Australia
{ 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 },
// Russia
{ 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 },
// China
{ 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 },
// South Korea
{ 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 },
// Canada
{ 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 },
// Brazil
{ 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 }
];
// ํƒ€๊ฒŸ(ํ‘œ์ ) ๊ตฌ์กฐ:
// { id, type:'aircraft'|'vehicle', lat, lon, heading, speed, altitude, signalStrength }
class RadarSystem {
constructor() {
// ํญํ’/์žฌ๋ฐ ์ƒํƒœ
this.stormActive = false;
this.jamActive = false;
// ํญํ’/์žฌ๋ฐ ์ค‘์‹ฌ (์œ ๋Ÿฝ ์ชฝ)
this.stormCenter = [50.5, 5.0];
this.stormRadius = 500; // km
this.jamCenter = [52.0, 5.0];
this.jamRadius = 300; // km
// ์ด๋ฒคํŠธ ๋กœ๊ทธ (์ตœ๋Œ€ 30๊ฐœ)
this.eventsLog = [];
// ํƒ€๊ฒŸ ๋ชฉ๋ก
this.targets = new Map(); // key: targetId, value: object
// Leaflet ์š”์†Œ
this.map = null;
this.targetMarkers = new Map();
this.targetSignalLines = new Map();
// ํญํ’/์žฌ๋ฐ Circle
this.stormCircle = null;
this.jamCircle = null;
this.initMap();
this.renderReceivers();
this.startTracking();
}
// ์ง€๋„ ์ดˆ๊ธฐํ™”
initMap() {
this.map = L.map('map', {
center: [20, 0], // ์ „ ์„ธ๊ณ„๊ฐ€ ๋ณด์ด๋„๋ก
zoom: 3,
worldCopyJump: true
});
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'ยฉ OpenStreetMap contributors'
}).addTo(this.map);
// ์Šคํ…Œ์ด์…˜ ํ‘œ์‹œ
sdrStations.forEach(st => {
// ๋ฒ”์œ„ ์› (leaflet circle)
L.circle(st.location, {
radius: st.range * 1000,
className: 'station-range'
}).addTo(this.map);
// ๋งˆ์ปค
const marker = L.circleMarker(st.location, {
radius: 5,
color: '#0f0',
fillColor: '#0f0',
fillOpacity: 1
}).addTo(this.map);
// ํˆดํŒ
marker.bindTooltip(`
<b>${st.name}</b><br/>
Frequency: ${st.frequency}<br/>
Range: ${st.range} km
`);
});
}
// ์‚ฌ์ด๋“œ๋ฐ” Receivers ํ‘œ์‹œ
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('');
}
// ์ด๋ฒคํŠธ ๋กœ๊ทธ ์ถ”๊ฐ€ (์ตœ๋Œ€ 30๊ฐœ)
addEventLog(msg) {
this.eventsLog.push(msg);
const evDiv = document.getElementById('events');
evDiv.innerHTML += `<div class="alert">${msg}</div>`;
if (this.eventsLog.length > 30) {
this.eventsLog.shift();
evDiv.removeChild(evDiv.firstChild);
}
}
// ํญํ’ ํ† ๊ธ€
toggleStorm() {
this.stormActive = !this.stormActive;
const msg = this.stormActive ? "ํญํ’ ๋ฐœ์ƒ! (๊ต๋ž€ ๊ฐ€๋Šฅ)" : "ํญํ’์ด ์†Œ๋ฉธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.";
this.addEventLog(msg);
// ๊ธฐ์กด ์Šคํ†ฐ ์„œํด ์ œ๊ฑฐ
if (this.stormCircle) {
this.map.removeLayer(this.stormCircle);
this.stormCircle = null;
}
if (this.stormActive) {
this.stormCircle = L.circle(this.stormCenter, {
radius: this.stormRadius * 1000,
className: 'storm-range'
}).addTo(this.map);
}
}
// ์žฌ๋ฐ(Jamming) ํ† ๊ธ€
toggleJamming() {
this.jamActive = !this.jamActive;
const msg = this.jamActive ? "์žฌ๋ฐ(Jamming) ์‹œ์ž‘!" : "์žฌ๋ฐ์ด ์ข…๋ฃŒ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.";
this.addEventLog(msg);
// ๊ธฐ์กด ์žฌ๋ฐ ์„œํด ์ œ๊ฑฐ
if (this.jamCircle) {
this.map.removeLayer(this.jamCircle);
this.jamCircle = null;
}
if (this.jamActive) {
this.jamCircle = L.circle(this.jamCenter, {
radius: this.jamRadius * 1000,
className: 'jam-range'
}).addTo(this.map);
}
}
// ๋‘ ์ขŒํ‘œ๊ฐ„ ๊ฑฐ๋ฆฌ (km) haversine
getDistanceKm(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));
}
// ํƒ€๊ฒŸ ์ด๋™
moveTarget(t) {
// heading+speed => lat/lon ๋ณ€ํ™” (๋‹จ์ˆœ ํ™˜์‚ฐ)
const speedFactor = 0.00005;
const rad = t.heading * Math.PI/180;
t.lat += Math.cos(rad)*t.speed*speedFactor;
t.lon += Math.sin(rad)*t.speed*speedFactor;
// ํญํ’ ๋ฒ”์œ„ ์•ˆ์ด๋ฉด ์‹ ํ˜ธ๊ฐ•๋„ ๊ฐ์†Œ
if (this.stormActive) {
const distStorm = this.getDistanceKm(t.lat, t.lon, this.stormCenter[0], this.stormCenter[1]);
if (distStorm <= this.stormRadius) {
t.signalStrength = Math.max(0, t.signalStrength - 0.01);
}
}
// ์žฌ๋ฐ ๋ฒ”์œ„ ์•ˆ์ด๋ฉด ์‹ ํ˜ธ๊ฐ•๋„ ๊ฐ์†Œ
if (this.jamActive) {
const distJam = this.getDistanceKm(t.lat, t.lon, this.jamCenter[0], this.jamCenter[1]);
if (distJam <= this.jamRadius) {
t.signalStrength = Math.max(0, t.signalStrength - 0.01);
}
}
}
// ํƒ€๊ฒŸ ๋งˆ์ปค/์—ฐ๊ฒฐ์„  ์ง€๋„ ๊ฐฑ์‹ 
updateTargetsOnMap() {
// ๊ธฐ์กด ์—ฐ๊ฒฐ์„  ์ œ๊ฑฐ
this.targetSignalLines.forEach(line => this.map.removeLayer(line));
this.targetSignalLines.clear();
// ํƒ€๊ฒŸ๋ณ„ ๋งˆ์ปค ์ƒ์„ฑ/์—…๋ฐ์ดํŠธ
this.targets.forEach((t, id) => {
// ๋งˆ์ปค
let marker = this.targetMarkers.get(id);
if (!marker) {
// ์ƒˆ ๋งˆ์ปค ์ƒ์„ฑ
marker = L.circleMarker([t.lat, t.lon], {
radius: 4,
color: (t.type==='aircraft') ? '#ff0' : '#0ff',
fillColor: (t.type==='aircraft') ? '#ff0' : '#0ff',
fillOpacity: 1
}).addTo(this.map);
this.targetMarkers.set(id, marker);
} else {
// ์ด๋ฏธ ์žˆ์œผ๋ฉด ์ขŒํ‘œ/์ƒ‰์ƒ ๊ฐฑ์‹ 
marker.setLatLng([t.lat, t.lon]);
marker.setStyle({
color: (t.type==='aircraft') ? '#ff0' : '#0ff',
fillColor: (t.type==='aircraft') ? '#ff0' : '#0ff'
});
}
// ํˆดํŒ
marker.bindTooltip(this.makeTooltipHTML(t), { sticky: true });
// ์Šคํ…Œ์ด์…˜ ๋ฒ”์œ„ ๋‚ด๋ฉด ์—ฐ๊ฒฐ์„ 
sdrStations.forEach(st => {
if (st.active) {
const dist = this.getDistanceKm(t.lat, t.lon, st.location[0], st.location[1]);
if (dist <= st.range) {
const line = L.polyline([
[t.lat, t.lon],
st.location
], {
color: '#0f0',
opacity: t.signalStrength*0.3,
weight: 1
}).addTo(this.map);
this.targetSignalLines.set(`${id}-${st.name}`, line);
}
}
});
});
}
// ํƒ€๊ฒŸ ํˆดํŒ
makeTooltipHTML(t) {
return `
<b>${t.id}</b><br/>
Type: ${t.type}<br/>
Speed: ${t.speed.toFixed(0)} kts<br/>
${
t.type==='aircraft' ? `Alt: ${t.altitude.toFixed(0)} ft<br/>` : ''
}
Sig: ${(t.signalStrength*100).toFixed(0)}%
`;
}
// ์‹ค์‹œ๊ฐ„ Detections ๋ชฉ๋ก
updateDetections() {
const div = document.getElementById('detections');
let html = '';
this.targets.forEach(t => {
html += `<div class="detection">
${t.type==='aircraft'?'โœˆ๏ธ':'๐Ÿš—'}
${t.id}
${t.type==='aircraft'? `Alt: ${t.altitude.toFixed(0)}ft ` : ''}
Speed: ${t.speed.toFixed(0)}kts
Sig: ${(t.signalStrength*100).toFixed(0)}%
</div>`;
});
div.innerHTML = html;
}
// Receivers ์‹ ํ˜ธ๊ฐ•๋„ ๋ฐ”(๋ฌด์ž‘์œ„)
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}%`;
}
});
}
// ๋ฌด์ž‘์œ„ ํƒ€๊ฒŸ ์ƒ์„ฑ
generateTarget() {
const lat = 20 + (Math.random()-0.5)*40; // ยฑ20๋„
const lon = 0 + (Math.random()-0.5)*80; // ยฑ40๋„
return {
id: Math.random().toString(36).substr(2, 6).toUpperCase(),
type: (Math.random()>0.7) ? 'aircraft' : 'vehicle',
lat,
lon,
heading: Math.random()*360,
speed: Math.random()*200+100,
altitude: Math.random()*30000+5000,
signalStrength: Math.random()
};
}
// ํƒ€๊ฒŸ ์ œ๊ฑฐ
removeTarget(id) {
const t = this.targets.get(id);
if (!t) return;
this.targets.delete(id);
this.addEventLog(`ํƒ€๊ฒŸ ์†Œ๋ฉธ: ${t.id}`);
// ๋งˆ์ปค ์ œ๊ฑฐ
const marker = this.targetMarkers.get(id);
if (marker) {
this.map.removeLayer(marker);
this.targetMarkers.delete(id);
}
// ์—ฐ๊ฒฐ์„  ์ œ๊ฑฐ
[...this.targetSignalLines.keys()].forEach(k => {
if (k.includes(id)) {
this.map.removeLayer(this.targetSignalLines.get(k));
this.targetSignalLines.delete(k);
}
});
}
// ๋ฉ”์ธ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ๋ฃจํ”„
startTracking() {
// 10์ดˆ ๊ฐ„๊ฒฉ์œผ๋กœ ํญํ’/์žฌ๋ฐ 20% ํ™•๋ฅ ๋กœ ํ† ๊ธ€
setInterval(() => {
if (Math.random() < 0.2) {
this.toggleStorm();
}
if (Math.random() < 0.2) {
this.toggleJamming();
}
}, 10000);
// 100ms ๊ฐ„๊ฒฉ
setInterval(() => {
// (10% ํ™•๋ฅ ) ์ƒˆ ํƒ€๊ฒŸ ์ถ”๊ฐ€, ์ตœ๋Œ€ 20๊ฐœ
if (Math.random()<0.1 && this.targets.size<20) {
const newT = this.generateTarget();
this.targets.set(newT.id, newT);
this.addEventLog(`์ƒˆ ํƒ€๊ฒŸ ๋“ฑ์žฅ: ${newT.id}`);
}
// (10% ํ™•๋ฅ ) ํƒ€๊ฒŸ ์ œ๊ฑฐ
if (Math.random()<0.1 && this.targets.size>0) {
const firstKey = Array.from(this.targets.keys())[0];
this.removeTarget(firstKey);
}
// ํƒ€๊ฒŸ ์ด๋™
this.targets.forEach((t, id) => {
this.moveTarget(t);
});
// ์ง€๋„ ์—…๋ฐ์ดํŠธ
this.updateTargetsOnMap();
// Detections ์—…๋ฐ์ดํŠธ
this.updateDetections();
// Receivers ์‹ ํ˜ธ ๋ฐ”
this.updateSignalStrengths();
}, 100);
}
}
// ํŽ˜์ด์ง€ ๋กœ๋“œ ํ›„ ์‹คํ–‰
window.addEventListener('load', () => {
new RadarSystem();
});
</script>
</body>
</html>