Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

kolaslab commited on Dec 24, 2024

Commit

182a04d

verified ·

1 Parent(s): da78557

Update index.html

Browse files

Files changed (1) hide show

index.html +257 -441

index.html CHANGED Viewed

@@ -2,11 +2,9 @@
 <html>
 <head>
     <meta charset="UTF-8">
-    <title>Hyperscan: Global SDR Radar(Simul)</title>
-    <!-- Leaflet CSS -->
-    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
     <style>
-        /* ====================== 공통 스타일 ====================== */
         body {
             margin: 0;
             padding: 20px;
@@ -28,29 +26,12 @@
             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;
@@ -95,7 +76,7 @@
             transition: width 0.3s;
         }
-        /* ====================== 탐지(Detections) 목록 ====================== */
         .detection {
             padding: 5px;
             margin: 5px 0;
@@ -103,27 +84,26 @@
             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>
@@ -131,28 +111,23 @@
     <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/[email protected]/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",
@@ -184,246 +159,59 @@
                 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>
@@ -431,239 +219,267 @@
                 `).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>

 <html>
 <head>
     <meta charset="UTF-8">
+    <title>Real SDR Network Monitor - Extended Events</title>
     <style>
+        /* 기본 스타일 */
         body {
             margin: 0;
             padding: 20px;
             overflow-y: auto;
         }
         #map {
             background: #111;
+            border-radius: 8px;
+            height: calc(100vh - 40px);
         }
+        /* 수신기(Receivers) 목록 */
         .receiver {
             margin: 10px 0;
             padding: 10px;
             transition: width 0.3s;
         }
+        /* 실시간 탐지 목록 */
         .detection {
             padding: 5px;
             margin: 5px 0;
             border-left: 2px solid #0f0;
         }
+        /* 이벤트 로그 (폭풍, 재밍 등) */
+        .events-area {
+            margin-top: 15px;
+        }
         .alert {
+            background: #511;
             border-left: 2px solid #f00;
+            margin: 5px 0;
+            padding: 5px;
             color: #f66;
         }
+        /* 캔버스 라인(신호선) 등 */
+        .signal-line {
+            position: absolute;
+            background: linear-gradient(90deg, rgba(0,255,0,0.2) 0%, rgba(0,255,0,0) 100%);
+            height: 1px;
+            transform-origin: 0 0;
+            pointer-events: none;
+            opacity: 0.5;
         }
     </style>
 </head>
     <div class="container">
         <!-- 사이드바 -->
         <div class="sidebar">
+            <h3>Active SDR Receivers</h3>
             <div id="receivers"></div>
             <h3>Real-time Detections</h3>
             <div id="detections"></div>
             <h3>Events</h3>
+            <div class="events-area" id="events"></div>
         </div>
+        <!-- Canvas 지도 -->
+        <canvas id="map"></canvas>
     </div>
     <script>
+        // 4개 예시 WebSDR 스테이션 (원하시면 추가 가능)
         const sdrStations = [
             {
                 name: "Twente WebSDR",
                 url: "websdr.ewi.utwente.nl:8901",
                 frequency: "0-30 MHz",
                 range: 160,
                 active: true
             }
         ];
         class RadarSystem {
             constructor() {
+                this.canvas = document.getElementById('map');
+                this.ctx = this.canvas.getContext('2d');
+                // 폭풍, 재밍 등 이벤트 상태
                 this.stormActive = false;
+                this.jammingActive = false;
+                // 폭풍, 재밍의 중심좌표 (51.5,5 근방)
+                this.stormCenter = { lat: 51.5, lon: 5.0 };
+                this.stormRadius = 150;  // 폭풍 반경(px 단위로 가정)
+                this.jamCenter = { lat: 51.5, lon: 5.0 };
+                this.jamRadius = 100;   // 재밍 반경(px)
+                // 이벤트 로그
+                this.events = [];
+                // 생성된 타겟(표적)
+                this.targets = new Set();
+                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;
                 });
             }
+            // 사이드바 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>
                 `).join('');
             }
+            // 지도(캔버스)의 중심(51.5, 5.0) 기준으로 lat/lon -> x,y 변환
+            latLongToXY(lat, lon) {
+                const centerLat = 51.5;
+                const centerLon = 5.0;
+                const scale = 100; // 1도 당 100px 정도
+                const x = (lon - centerLon) * scale + this.canvas.width / 2;
+                const y = (centerLat - lat) * scale + this.canvas.height / 2;
+                return { x, y };
             }
+            // 이벤트 로그 추가
+            addEventLog(msg) {
+                this.events.push(msg);
+                const evDiv = document.getElementById('events');
+                evDiv.innerHTML += `<div class="alert">${msg}</div>`;
+                // 너무 많으면 오래된 것 삭제 (최대 20개 유지)
+                if (this.events.length > 20) {
+                    this.events.shift();
+                    evDiv.removeChild(evDiv.firstChild);
                 }
             }
+            // 랜덤 타겟 생성
             generateTarget() {
+                // 2도 범위(약 200px 영역) 내
+                const lat = 51.5 + (Math.random() - 0.5)*4;
+                const lon = 5.0 + (Math.random() - 0.5)*8;
                 return {
                     type: (Math.random() > 0.7) ? 'aircraft' : 'vehicle',
+                    position: {
+                        lat,
+                        lon
+                    },
+                    speed: Math.random()*400 + 100,   // kts
+                    altitude: Math.random()*30000 + 1000,
                     heading: Math.random()*360,
+                    id: Math.random().toString(36).substr(2, 6).toUpperCase(),
                     signalStrength: Math.random()
                 };
             }
+            // 타겟 이동 (heading, speed 기반)
+            moveTarget(target) {
+                // heading(0=북,90=동,180=남,270=서) - 단순 처리
+                const speedFactor = 0.00005;
+                const rad = target.heading * Math.PI / 180;
+                target.position.lat += Math.cos(rad) * target.speed * speedFactor;
+                target.position.lon += Math.sin(rad) * target.speed * speedFactor;
             }
+            // 폭풍, 재밍 등 표시 / 효과
+            drawSpecialEvents() {
+                // 폭풍 표시
                 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();
+                }
+                // 재밍 표시
+                if (this.jammingActive) {
+                    const jc = this.latLongToXY(this.jamCenter.lat, this.jamCenter.lon);
+                    this.ctx.beginPath();
+                    this.ctx.arc(jc.x, jc.y, this.jamRadius, 0, Math.PI*2);
+                    this.ctx.fillStyle = 'rgba(255,255,0,0.1)';
+                    this.ctx.fill();
+                    this.ctx.strokeStyle = 'rgba(255,255,0,0.5)';
+                    this.ctx.stroke();
                 }
             }
+            // 배경(격자) + 스테이션 표시
+            drawBackgroundAndStations() {
+                // 배경
+                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();
+                }
+                // 스테이션
+                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+10, pos.y+4);
                 });
+            }
+            // 타겟 + 연결선 그리기
+            drawTargets() {
+                this.targets.forEach(target => {
+                    const pos = this.latLongToXY(target.position.lat, target.position.lon);
+                    // 이동
+                    this.moveTarget(target);
+                    // 폭풍 범위 안에 있으면 신호감소
+                    if (this.stormActive) {
+                        const sc = this.latLongToXY(this.stormCenter.lat, this.stormCenter.lon);
+                        const dist = Math.hypot(pos.x - sc.x, pos.y - sc.y);
+                        if (dist <= this.stormRadius) {
+                            target.signalStrength = Math.max(0, target.signalStrength - 0.01);
+                        }
                     }
+                    // 재밍 범위 안에 있으면 신호감소
+                    if (this.jammingActive) {
+                        const jc = this.latLongToXY(this.jamCenter.lat, this.jamCenter.lon);
+                        const dist = Math.hypot(pos.x - jc.x, pos.y - jc.y);
+                        if (dist <= this.jamRadius) {
+                            target.signalStrength = Math.max(0, target.signalStrength - 0.01);
+                        }
+                    }
+                    // 스테이션과의 연결선
                     sdrStations.forEach(st => {
                         if (st.active) {
+                            // 거리(픽셀)로 단순 비교
+                            const stPos = this.latLongToXY(st.location[0], st.location[1]);
+                            const dx = pos.x - stPos.x;
+                            const dy = pos.y - stPos.y;
+                            const distPx = Math.hypot(dx, dy);
+                            if (distPx <= st.range) {
+                                this.ctx.beginPath();
+                                this.ctx.moveTo(stPos.x, stPos.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.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';
+                    const info = (target.type==='aircraft')
+                        ? `${target.id} • ${target.speed.toFixed(0)}kts • ${target.altitude.toFixed(0)}ft`
+                        : `${target.id} • ${target.speed.toFixed(0)}kts`;
+                    this.ctx.fillText(info, pos.x+10, pos.y+4);
+                });
             }
+            // 우측 'Real-time Detections' 목록 업데이트
             updateDetections() {
+                const detections = document.getElementById('detections');
+                detections.innerHTML = Array.from(this.targets)
+                    .map(t => `
+                        <div class="detection">
+                            ${t.type==='aircraft' ? '✈️' : '🚗'}
+                            ${t.id}
+                            ${t.type==='aircraft' ? `${t.altitude.toFixed(0)}ft ` : ''}
+                            ${t.speed.toFixed(0)}kts
+                            Sig: ${(t.signalStrength*100).toFixed(0)}%
+                        </div>
+                    `).join('');
             }
+            // 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}%`;
                     }
                 });
             }
+            // 이벤트(폭풍, 재밍) 토글
+            toggleStorm() {
+                this.stormActive = !this.stormActive;
+                this.addEventLog(this.stormActive ? "폭풍 발생! 신호 교란 우려" : "폭풍 소멸, 정상화");
+            }
+            toggleJamming() {
+                this.jammingActive = !this.jammingActive;
+                this.addEventLog(this.jammingActive ? "재밍(Jamming) 시작!" : "재밍 종료");
             }
             // 메인 루프
             startTracking() {
+                // 일정 간격(10초)으로 폭풍·재밍 토글
                 setInterval(() => {
+                    if (Math.random() < 0.2) {
                         this.toggleStorm();
                     }
+                    if (Math.random() < 0.2) {
+                        this.toggleJamming();
+                    }
                 }, 10000);
+                // 매 100ms 마다 화면 갱신
                 setInterval(() => {
+                    // 15% 확률로 새 타겟 추가, 최대 15개
+                    if (Math.random() < 0.15 && 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.drawBackgroundAndStations();
+                    this.drawSpecialEvents();
+                    this.drawTargets();
+                    // 사이드바 UI 갱신
                     this.updateDetections();
                     this.updateSignalStrengths();
                 }, 100);
             }
         }
+        // 실행
+        const radar = new RadarSystem();
     </script>
 </body>
 </html>