Spaces:

kolaslab
/

world-sdr

Running

File size: 17,700 Bytes

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hyperscan: Global SDR Radar(Simul)</title>
    <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 {
            background: #111;
            border-radius: 8px;
            height: calc(100vh - 40px);
        }

        /* 수신기(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;
        }
    </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>
        
        <!-- 캔버스 지도 영역 -->
        <canvas id="map"></canvas>
    </div>

    <script>
        // 예시 SDR 스테이션: 원하는 만큼 추가/수정 가능
        const sdrStations = [
            {
                name: "Twente WebSDR",
                url: "websdr.ewi.utwente.nl:8901",
                location: [52.2389, 6.8343],
                frequency: "0-29.160 MHz",
                range: 200,
                active: true
            },
            {
                name: "KiwiSDR Switzerland",
                url: "hb9ryz.no-ip.org:8073",
                location: [47.3769, 8.5417],
                frequency: "0-30 MHz",
                range: 160,
                active: true
            },
            {
                name: "SUWS WebSDR UK",
                url: "websdr.suws.org.uk",
                location: [51.2785, -0.7642],
                frequency: "0-30 MHz",
                range: 150,
                active: true
            }
        ];

        class RadarSystem {
            constructor() {
                // Canvas 준비
                this.canvas = document.getElementById('map');
                this.ctx = this.canvas.getContext('2d');

                // 타겟 정보 저장 (Set으로 관리)
                this.targets = new Set();

                // 타겟의 이동 궤적(trail)을 저장 (key: 타겟ID, value: {x,y} 배열)
                this.trails = new Map();

                // 이벤트 로그
                this.eventsLog = [];

                // 폭풍/교란 이벤트 상태
                this.stormActive = false;              // 폭풍 토글
                this.stormCenter = { lat: 50.5, lon: 5.0 }; // 폭풍 중심
                this.stormRadius = 200;               // 폭풍 반경 (km)

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

            // 캔버스 크기 맞추기
            setupCanvas() {
                this.canvas.width = this.canvas.offsetWidth;
                this.canvas.height = this.canvas.offsetHeight;
                window.addEventListener('resize', () => {
                    this.canvas.width = this.canvas.offsetWidth;
                    this.canvas.height = this.canvas.offsetHeight;
                });
            }

            // 사이드바에 수신기 리스트 렌더링
            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('');
            }

            // 임의로 타겟 하나 생성
            generateTarget() {
                const lat = 51.5 + (Math.random()-0.5)*4; // 임의 범위
                const lon = 5.0 + (Math.random()-0.5)*8; 
                return {
                    id: Math.random().toString(36).substr(2, 6).toUpperCase(),
                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', // 30%확률 aircraft
                    lat,
                    lon,
                    speed: (Math.random()*200 + 100).toFixed(0),
                    altitude: (Math.random()*30000 + 1000).toFixed(0),
                    heading: Math.random()*360,
                    signalStrength: Math.random()
                };
            }

            // 타겟 이동(heading, speed 기반)
            moveTarget(target) {
                const speedKnots = parseFloat(target.speed);
                // 1 knot 약 0.0005 deg/sec 가정 (단순화)
                const speedFactor = 0.00005; 
                const rad = (target.heading * Math.PI) / 180;
                // 북(위도+), 남(위도-), 동(경도+), 서(경도-)
                target.lat += Math.cos(rad) * speedKnots * speedFactor;
                target.lon += Math.sin(rad) * speedKnots * speedFactor;
            }

            // 폭풍 On/Off
            toggleStorm() {
                this.stormActive = !this.stormActive;
                const msg = this.stormActive
                  ? "폭풍 발생! 수신 교란 우려"
                  : "폭풍 소멸. 상태 정상화";
                this.addEventLog(msg);
            }

            // 로그 추가
            addEventLog(msg) {
                this.eventsLog.push(msg);
                const eventsDiv = document.getElementById('events');
                // 추가
                eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
                // 너무 많아지면 오래된 기록 제거
                if (this.eventsLog.length > 10) {
                    this.eventsLog.shift();
                    eventsDiv.removeChild(eventsDiv.firstChild);
                }
            }

            // 위도경도를 캔버스 좌표로 변환 (단순도)
            latLongToXY(lat, lon) {
                const centerLat = 51.5;
                const centerLon = 5.0;
                const scale = 100;
                const x = (lon - centerLon) * scale + this.canvas.width / 2;
                const y = (centerLat - lat) * scale + this.canvas.height / 2;
                return { x, y };
            }

            // 두 점(위도경도) 사이 거리(km)
            distanceKm(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));
            }

            // 배경+그리드 그리기
            drawBackground() {
                this.ctx.fillStyle = '#111';
                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);

                this.ctx.strokeStyle = '#1a1a1a';
                this.ctx.lineWidth = 1;
                // 세로 그리드
                for (let i=0; i<this.canvas.width; i+=50) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(i, 0);
                    this.ctx.lineTo(i, this.canvas.height);
                    this.ctx.stroke();
                }
                // 가로 그리드
                for (let i=0; i<this.canvas.height; i+=50) {
                    this.ctx.beginPath();
                    this.ctx.moveTo(0, i);
                    this.ctx.lineTo(this.canvas.width, i);
                    this.ctx.stroke();
                }
            }

            // 스테이션 + 폭풍 표시
            drawStations() {
                // 폭풍 범위 시각화
                if (this.stormActive) {
                    const sc = this.latLongToXY(this.stormCenter.lat, this.stormCenter.lon);
                    this.ctx.beginPath();
                    this.ctx.arc(sc.x, sc.y, this.stormRadius, 0, Math.PI*2);
                    this.ctx.fillStyle = 'rgba(255,0,0,0.1)';
                    this.ctx.fill();
                    this.ctx.strokeStyle = 'rgba(255,0,0,0.5)';
                    this.ctx.stroke();
                }

                // 수신기 스테이션
                sdrStations.forEach(st => {
                    const pos = this.latLongToXY(st.location[0], st.location[1]);
                    // 범위 원
                    this.ctx.beginPath();
                    this.ctx.arc(pos.x, pos.y, st.range, 0, Math.PI*2);
                    this.ctx.strokeStyle = st.active
                        ? 'rgba(0,255,0,0.2)'
                        : 'rgba(255,0,0,0.2)';
                    this.ctx.stroke();

                    // 중심 점
                    this.ctx.beginPath();
                    this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI*2);
                    this.ctx.fillStyle = st.active ? '#0f0' : '#f00';
                    this.ctx.fill();

                    // 라벨
                    this.ctx.fillStyle = '#0f0';
                    this.ctx.font = '10px monospace';
                    this.ctx.fillText(st.name, pos.x+8, pos.y+4);
                });
            }

            // 타겟 및 궤적 그리기
            drawTargets() {
                this.targets.forEach(target => {
                    // 타겟 이동
                    this.moveTarget(target);

                    // 폭풍 영향: 범위 내에 있으면 신호강도 감소
                    if (this.stormActive) {
                        const distStorm = this.distanceKm(
                            target.lat, target.lon,
                            this.stormCenter.lat, this.stormCenter.lon
                        );
                        if (distStorm <= this.stormRadius) {
                            target.signalStrength = Math.max(0, target.signalStrength - 0.01);
                        }
                    }

                    // 타겟 위치
                    const pos = this.latLongToXY(target.lat, target.lon);

                    // 궤적 저장
                    if (!this.trails.has(target.id)) {
                        this.trails.set(target.id, []);
                    }
                    const trail = this.trails.get(target.id);
                    trail.push({x: pos.x, y: pos.y});
                    if (trail.length > 100) {
                        trail.shift(); // 오래된 좌표 제거
                    }

                    // 스테이션 연결선
                    sdrStations.forEach(st => {
                        if (st.active) {
                            const dist = this.distanceKm(
                                target.lat, target.lon,
                                st.location[0], st.location[1]
                            );
                            if (dist <= st.range) {
                                const sp = this.latLongToXY(st.location[0], st.location[1]);
                                this.ctx.beginPath();
                                this.ctx.moveTo(sp.x, sp.y);
                                this.ctx.lineTo(pos.x, pos.y);
                                this.ctx.strokeStyle = `rgba(0,255,0,${target.signalStrength*0.3})`;
                                this.ctx.stroke();
                            }
                        }
                    });

                    // 타겟 궤적
                    this.ctx.beginPath();
                    this.ctx.strokeStyle = (target.type==='aircraft')
                        ? 'rgba(255,255,0,0.3)'
                        : 'rgba(0,255,255,0.3)';
                    for (let i=0; i<trail.length-1; i++) {
                        this.ctx.moveTo(trail[i].x, trail[i].y);
                        this.ctx.lineTo(trail[i+1].x, trail[i+1].y);
                    }
                    this.ctx.stroke();

                    // 현재 타겟 점
                    this.ctx.beginPath();
                    this.ctx.arc(pos.x, pos.y, 3, 0, Math.PI*2);
                    this.ctx.fillStyle = (target.type==='aircraft') ? '#ff0' : '#0ff';
                    this.ctx.fill();

                    // 식별 정보
                    this.ctx.fillStyle = '#666';
                    this.ctx.font = '10px monospace';
                    this.ctx.fillText(`${target.id} (${target.type})`, pos.x+8, pos.y+4);
                });
            }

            // 사이드바 'Real-time Detections' 업데이트
            updateDetections() {
                const detections = document.getElementById('detections');
                let html = '';
                this.targets.forEach(t => {
                    html += `
                        <div class="detection">
                            ${t.type==='aircraft' ? '✈️' : '🚗'} 
                            ${t.id}
                            Speed: ${t.speed}kts
                            ${t.type==='aircraft' ? 'Alt: '+t.altitude+'ft' : ''}
                            Sig: ${(t.signalStrength*100).toFixed(0)}%
                        </div>
                    `;
                });
                detections.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}%`;
                    }
                });
            }

            // 메인 루프
            startTracking() {
                // 폭풍 토글(약 20% 확률로 10초마다 한 번 발생)
                setInterval(() => {
                    if (Math.random() < 0.2) {
                        this.toggleStorm();
                    }
                }, 10000);

                // 100ms마다 갱신
                setInterval(() => {
                    // 10% 확률로 타겟 추가
                    if (Math.random() < 0.1 && this.targets.size < 15) {
                        const newT = this.generateTarget();
                        this.targets.add(newT);
                        this.addEventLog(`새 타겟 출현: ${newT.id}`);
                    }
                    // 10% 확률로 타겟 하나 제거
                    if (Math.random() < 0.1 && this.targets.size > 0) {
                        const first = Array.from(this.targets)[0];
                        this.targets.delete(first);
                        this.addEventLog(`타겟 소멸: ${first.id}`);
                    }

                    // 매 프레임 화면 그리기
                    this.drawBackground();
                    this.drawStations();
                    this.drawTargets();

                    // 사이드바 갱신
                    this.updateDetections();
                    this.updateSignalStrengths();
                }, 100);
            }
        }

        // 페이지 로드 시 시작
        window.addEventListener('load', () => {
            new RadarSystem();
        });
    </script>
</body>
</html>