Spaces:

kolaslab
/

world-sdr

Running

File size: 23,356 Bytes

<!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>