Hugging Face's logo

Spaces:
kolaslab
/
world-sdr
Running

App Files Community
world-sdr / index.html
kolaslab's picture
kolaslab
Update index.html
da78557 verified
raw
history blame
23.4 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hyperscan: Global SDR Radar(Simul)</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;
}
/* ====================== 탐지(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;
}
/* ====================== μŠ€ν…Œμ΄μ…˜ λ²”μœ„ & 폭풍 λ²”μœ„ μŠ€νƒ€μΌ ====================== */
.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;
}
</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>
// μ „ 세계 SDR μŠ€ν…Œμ΄μ…˜ 23개 (Europe, USA, Japan, Australia, Russia, China, S. Korea, Canada, Brazil)
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
}
];
// Leaflet 기반 RadarSystem
class RadarSystem {
constructor() {
// 폭풍 μƒνƒœ
this.stormActive = false;
// 폭풍 쀑심(유럽 κ·Όλ°©)
this.stormCenter = [50.5, 5.0];
// 폭풍 반경(km)
this.stormRadius = 200;
// νƒ€κ²Ÿ λͺ©λ‘ (key: targetID, value: 객체)
this.targets = new Map();
// νƒ€κ²Ÿ 마컀
this.targetMarkers = new Map();
// νƒ€κ²Ÿ-μŠ€ν…Œμ΄μ…˜ μ—°κ²°μ„ 
this.targetSignalLines = new Map();
// 이벀트 둜그 (μ΅œλŒ€ 30개 μœ μ§€)
this.eventsLog = [];
this.initializeMap();
this.renderReceivers();
this.startTracking();
}
// 지도 μ΄ˆκΈ°ν™”
initializeMap() {
this.map = L.map('map', {
center: [20, 0],
zoom: 3,
worldCopyJump: true
});
// 타일 λ ˆμ΄μ–΄ (OSM)
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'Β© OpenStreetMap contributors'
}).addTo(this.map);
// μŠ€ν…Œμ΄μ…˜ ν‘œμ‹œ
sdrStations.forEach(st => {
// μŠ€ν…Œμ΄μ…˜ 마컀
const stationMarker = L.circleMarker(st.location, {
radius: 5,
color: '#0f0',
fillColor: '#0f0',
fillOpacity: 1
}).addTo(this.map);
// λ²”μœ„ 원
L.circle(st.location, {
radius: st.range * 1000,
className: 'station-range'
}).addTo(this.map);
// 툴팁
stationMarker.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 eventsDiv = document.getElementById('events');
eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
if (this.eventsLog.length > 30) {
this.eventsLog.shift(); // κ°€μž₯ 였래된 둜그 제거
eventsDiv.removeChild(eventsDiv.firstChild);
}
}
// 폭풍 ν† κΈ€
toggleStorm() {
this.stormActive = !this.stormActive;
const msg = this.stormActive
? "폭풍 λ°œμƒ! (κ΅λž€ κ°€λŠ₯)"
: "폭풍이 μ†Œλ©Έλ˜μ—ˆμŠ΅λ‹ˆλ‹€.";
this.addEventLog(msg);
// 폭풍 λ²”μœ„ ν‘œμ‹œ/ν•΄μ œ
if (this.stormCircle) {
this.map.removeLayer(this.stormCircle);
}
if (this.stormActive) {
this.stormCircle = L.circle(this.stormCenter, {
radius: this.stormRadius * 1000,
className: 'storm-range'
}).addTo(this.map);
}
}
// λ¬΄μž‘μœ„ νƒ€κ²Ÿ 생성
generateTarget() {
const lat = 20 + (Math.random()-0.5)*40; // λ²”μœ„ λŒ€ν­ ν™•λŒ€, 전지ꡬ적
const lon = 0 + (Math.random()-0.5)*80;
return {
id: Math.random().toString(36).substr(2, 6).toUpperCase(),
type: (Math.random() > 0.7) ? 'aircraft' : 'vehicle',
lat,
lon,
speed: Math.floor(Math.random()*200 + 100),
altitude: Math.floor(Math.random()*30000 + 1000),
heading: Math.random()*360,
signalStrength: Math.random()
};
}
// 두 μ’Œν‘œ κ°„ 거리(km)
getDistance(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));
}
// νƒ€κ²Ÿ 이동(heading, speed)
moveTarget(t) {
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 dist = this.getDistance(t.lat, t.lon, this.stormCenter[0], this.stormCenter[1]);
if (dist < this.stormRadius) {
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);
marker.bindTooltip(this.makeTooltipHTML(t), { sticky: true });
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.setTooltipContent(this.makeTooltipHTML(t));
}
// μŠ€ν…Œμ΄μ…˜ λ²”μœ„ λ‚΄λ©΄ μ—°κ²°μ„  ν‘œμ‹œ
sdrStations.forEach(st => {
if (st.active) {
const dist = this.getDistance(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} kts<br/>
${
t.type === 'aircraft'
? `Alt: ${t.altitude} ft<br/>`
: ''
}
Sig: ${(t.signalStrength*100).toFixed(0)}%
`;
}
// μ‹€μ‹œκ°„ Detections λͺ©λ‘ μ—…λ°μ΄νŠΈ
updateDetections() {
const detDiv = document.getElementById('detections');
let html = '';
this.targets.forEach(t => {
html += `<div class="detection">
${t.type === 'aircraft' ? '✈️' : 'πŸš—'} ${t.id}
${t.type === 'aircraft' ? `Alt: ${t.altitude}ft ` : ''}
Speed: ${t.speed}kts
Sig: ${(t.signalStrength*100).toFixed(0)}%
</div>`;
});
detDiv.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}%`;
}
});
}
// νƒ€κ²Ÿ 제거
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();
}
}, 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 firstID = Array.from(this.targets.keys())[0];
this.removeTarget(firstID);
}
// λͺ¨λ“  νƒ€κ²Ÿ 이동
this.targets.forEach(t => {
this.moveTarget(t);
});
// 지도 κ°±μ‹ 
this.updateTargetsOnMap();
// μ‚¬μ΄λ“œλ°” Detections
this.updateDetections();
// μˆ˜μ‹ κΈ° μ‹ ν˜Έκ°•λ„
this.updateSignalStrengths();
}, 100);
}
}
// νŽ˜μ΄μ§€ λ‘œλ“œ ν›„ λ ˆμ΄λ” μ‹œμŠ€ν…œ μ‹œμž‘
window.addEventListener('load', () => {
new RadarSystem();
});
</script>
</body>
</html>