Hugging Face's logo

Spaces:
kolaslab
/
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>