Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

kolaslab commited on Dec 24, 2024

Commit

1e56734

verified ·

1 Parent(s): 3cfdd58

Update index.html

Browse files

Files changed (1) hide show

index.html +285 -358

index.html CHANGED Viewed

@@ -2,11 +2,9 @@
 <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;
@@ -26,15 +24,14 @@
             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;
@@ -79,7 +76,7 @@
             transition: width 0.3s;
         }
-        /* 탐지(Detection) 목록 스타일 */
         .detection {
             padding: 5px;
             margin: 5px 0;
@@ -87,29 +84,13 @@
             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>
@@ -117,23 +98,25 @@
     <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",
@@ -142,22 +125,6 @@
                 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",
@@ -166,235 +133,64 @@
                 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>
@@ -402,145 +198,276 @@
                 `).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>
 <head>
     <meta charset="UTF-8">
+    <title>Hyperscan: Global SDR Radar(Simul)</title>
     <style>
+        /* 전체 배경 및 기본 스타일 */
         body {
             margin: 0;
             padding: 20px;
             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;
             transition: width 0.3s;
         }
+        /* 탐지(Detections) 목록 */
         .detection {
             padding: 5px;
             margin: 5px 0;
             border-left: 2px solid #0f0;
         }
+        /* 이벤트 로그 출력 */
+        .alert {
+            background: #911;
+            padding: 5px;
+            margin: 5px 0;
+            border-left: 2px solid #f00;
+            color: #f66;
         }
     </style>
 </head>
     <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",
                 range: 200,
                 active: true
             },
             {
                 name: "KiwiSDR Switzerland",
                 url: "hb9ryz.no-ip.org:8073",
                 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>
                 `).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>