Spaces:

kolaslab
/

world-sdr

Running

File size: 19,550 Bytes

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Global SDR Network Monitor</title>
    <!-- Leaflet CSS -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.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;
            z-index: 1000;
        }
        #map {
            height: calc(100vh - 40px);
            border-radius: 8px;
            background: #111;
        }

        /* 수신기(Receiver) 목록 스타일 */
        .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) 목록 스타일 */
        .detection {
            padding: 5px;
            margin: 5px 0;
            font-size: 12px;
            border-left: 2px solid #0f0;
        }

        /* 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;
        }

        /* 스테이션 범위 원 표시 */
        .station-range {
            stroke: #0f0;
            stroke-width: 1;
            fill: #0f0;
            fill-opacity: 0.1;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 사이드바 -->
        <div class="sidebar">
            <h3>Active SDR Receivers</h3>
            <div id="receivers"></div>
            
            <h3>Real-time Detections</h3>
            <div id="detections"></div>
        </div>
        
        <!-- Leaflet 지도 영역 -->
        <div id="map"></div>
    </div>

    <!-- Leaflet JS -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
    <script>
        // 전 세계 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
            }
        ];

        // Leaflet + 동적 타겟 추적을 통합한 RadarSystem
        class RadarSystem {
            constructor() {
                // 타겟(표적) 정보를 저장할 Set
                this.targets = new Set();
                // 타겟 마커와 신호 라인을 저장할 자료구조
                this.markers = new Map();
                this.signalLines = new Map();

                this.initializeMap();
                this.renderReceivers();
                this.startTracking();
            }

            // Leaflet 지도 초기화
            initializeMap() {
                this.map = L.map('map', {
                    center: [20, 0],
                    zoom: 3,
                    preferCanvas: true,
                    worldCopyJump: true
                });

                // OpenStreetMap 타일 레이어
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                    maxZoom: 19,
                    attribution: '© OpenStreetMap contributors'
                }).addTo(this.map);

                // 각 SDR 스테이션을 지도에 표시
                sdrStations.forEach(station => {
                    // 스테이션 위치 마커
                    const marker = L.circleMarker(station.location, {
                        radius: 5,
                        color: '#0f0',
                        fillColor: '#0f0',
                        fillOpacity: 1
                    }).addTo(this.map);

                    // 스테이션의 가청 범위(coverage range)를 원으로 표시
                    L.circle(station.location, {
                        radius: station.range * 1000, // km -> m
                        className: 'station-range'
                    }).addTo(this.map);

                    // 마커 툴팁(마우스 오버 시 정보)
                    marker.bindTooltip(`
                        ${station.name}<br>
                        Frequency: ${station.frequency}<br>
                        Range: ${station.range}km
                    `);
                });
            }

            // 사이드바에 수신기(Receivers) 목록 렌더링
            renderReceivers() {
                const container = document.getElementById('receivers');
                container.innerHTML = sdrStations.map(station => `
                    <div class="receiver" id="rx-${station.url.split(':')[0]}">
                        <div class="status">
                            <div class="led ${station.active ? 'active' : 'inactive'}"></div>
                            <strong>${station.name}</strong>
                        </div>
                        <div>📡 ${station.url}</div>
                        <div>📻 ${station.frequency}</div>
                        <div>📍 ${station.location.join(', ')}</div>
                        <div>Range: ${station.range}km</div>
                        <div class="signal-strength">
                            <div class="signal-bar"></div>
                        </div>
                    </div>
                `).join('');
            }

            // 랜덤 표적(타겟)을 하나 생성
            // (두 번째 코드의 아이디어와, 첫 번째 코드의 '스테이션 근처' 방식을 결합)
            generateTarget() {
                // 임의 스테이션 하나 선택
                const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
                // station 근처에 나타나도록 조정 (±5도 범위)
                const range = 5;
                return {
                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
                    position: {
                        lat: station.location[0] + (Math.random() - 0.5) * range,
                        lon: station.location[1] + (Math.random() - 0.5) * range
                    },
                    speed: Math.random() * 500 + 200,     // kts
                    altitude: Math.random() * 35000 + 5000, // ft
                    heading: Math.random() * 360,
                    id: Math.random().toString(36).substr(2, 6).toUpperCase(),
                    signalStrength: Math.random()
                };
            }

            // 현재 타겟들을 지도에 표시 / 업데이트
            updateTargets() {
                // 이전 프레임에서 그려진 신호 라인 제거
                this.signalLines.forEach(line => this.map.removeLayer(line));
                this.signalLines.clear();

                // 이전 마커들 제거
                this.markers.forEach(marker => this.map.removeLayer(marker));
                this.markers.clear();

                // 현재 타겟마다 새로 지도에 표시
                this.targets.forEach(target => {
                    // 타겟 마커
                    const marker = L.circleMarker([target.position.lat, target.position.lon], {
                        radius: 3,
                        color: target.type === 'aircraft' ? '#ff0' : '#0ff',
                        fillColor: target.type === 'aircraft' ? '#ff0' : '#0ff',
                        fillOpacity: 1
                    }).addTo(this.map);

                    // 마우스 오버 시 툴팁
                    marker.bindTooltip(`
                        ${target.id}<br>
                        Type: ${target.type}<br>
                        Speed: ${target.speed.toFixed(0)}kts<br>
                        ${
                            target.type === 'aircraft'
                            ? `Altitude: ${target.altitude.toFixed(0)}ft<br>`
                            : ''
                        }
                        Signal: ${(target.signalStrength * 100).toFixed(0)}%
                    `);

                    // 레이어 관리용 저장
                    this.markers.set(target.id, marker);

                    // 타겟과 가까운(범위 안) 스테이션과의 신호 라인 표시
                    sdrStations.forEach(station => {
                        if (station.active) {
                            const distance = this.map.distance(
                                [target.position.lat, target.position.lon],
                                station.location
                            ) / 1000; // m -> km

                            if (distance <= station.range) {
                                // 스테이션과 타겟 사이 라인
                                const line = L.polyline([
                                    [target.position.lat, target.position.lon],
                                    station.location
                                ], {
                                    color: '#0f0',
                                    opacity: target.signalStrength * 0.3,
                                    weight: 1
                                }).addTo(this.map);
                                
                                // 라인도 Map에 저장해두고, 다음 업데이트 때 제거
                                this.signalLines.set(`${target.id}-${station.name}`, line);
                            }
                        }
                    });
                });
            }

            // 사이드바 'Real-time Detections' 업데이트
            updateDetections() {
                const detections = document.getElementById('detections');
                detections.innerHTML = Array.from(this.targets)
                    .map(target => `
                        <div class="detection">
                            ${target.type === 'aircraft' ? '✈️' : '🚗'} 
                            ${target.id} 
                            ${target.speed.toFixed(0)}kts 
                            ${
                                target.type === 'aircraft'
                                ? `${target.altitude.toFixed(0)}ft `
                                : ''
                            }
                            Signal: ${(target.signalStrength * 100).toFixed(0)}%
                        </div>
                    `).join('');
            }

            // 수신기(Receivers) 신호 강도 바(Bar) 동적 업데이트
            updateSignalStrengths() {
                sdrStations.forEach(station => {
                    const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
                    if (bar) {
                        // 40% ~ 100% 사이의 랜덤값
                        const strength = 40 + Math.random() * 60;
                        bar.style.width = `${strength}%`;
                    }
                });
            }

            // 일정 주기로 타겟 추가/제거 & 지도·UI 업데이트
            startTracking() {
                setInterval(() => {
                    // (약 10% 확률) 타겟 하나 추가, 최대 20개까지
                    if (Math.random() < 0.1 && this.targets.size < 20) {
                        this.targets.add(this.generateTarget());
                    }
                    // (약 10% 확률) 존재하는 타겟 하나 제거
                    if (Math.random() < 0.1 && this.targets.size > 0) {
                        // Set을 Array로 만들어 첫 번째 요소 제거
                        this.targets.delete(Array.from(this.targets)[0]);
                    }

                    // 지도 위 표적 및 UI 갱신
                    this.updateTargets();
                    this.updateDetections();
                    this.updateSignalStrengths();
                }, 100); // 0.1초마다 갱신
            }
        }

        // 페이지 로드 완료 후 레이더 시스템 초기화
        window.addEventListener('load', () => {
            const radar = new RadarSystem();
        });
    </script>
</body>
</html>