Update index.html

index.html

@@ -17,22 +17,33 @@
             display: grid;
             grid-template-columns: 300px 1fr;
             gap: 20px;
+            height: calc(100vh - 40px);
         }
 
         .sidebar {
             background: #111;
             padding: 15px;
             border-radius: 8px;
-            height: calc(100vh - 40px);
             overflow-y: auto;
         }
 
+        .map-container {
+            background: #111;
+            border-radius: 8px;
+            position: relative;
+            overflow: hidden;
+        }
+
         .receiver {
             margin: 10px 0;
             padding: 10px;
             background: #1a1a1a;
             border-radius: 4px;
-            position: relative;
+            transition: background-color 0.3s;
+        }
+
+        .receiver:hover {
+            background: #222;
         }
 
         .status {
@@ -65,9 +76,9 @@
         }
 
         #map {
-            background: #111;
-            border-radius: 8px;
-            height: calc(100vh - 40px);
+            width: 100%;
+            height: 100%;
+            cursor: move;
         }
 
         .signal-strength {
@@ -89,6 +100,69 @@
             margin: 5px 0;
             font-size: 12px;
             border-left: 2px solid #0f0;
+            background: #1a1a1a;
+            border-radius: 0 4px 4px 0;
+            transition: background-color 0.3s;
+        }
+
+        .detection:hover {
+            background: #222;
+        }
+
+        .controls {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            background: rgba(0, 0, 0, 0.7);
+            padding: 10px;
+            border-radius: 4px;
+            display: flex;
+            gap: 10px;
+        }
+
+        .control-btn {
+            background: #1a1a1a;
+            border: 1px solid #0f0;
+            color: #0f0;
+            padding: 5px 10px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all 0.3s;
+        }
+
+        .control-btn:hover {
+            background: #0f0;
+            color: #000;
+        }
+
+        h3, h4 {
+            color: #0f0;
+            margin-top: 15px;
+            margin-bottom: 10px;
+            border-bottom: 1px solid #0f0;
+            padding-bottom: 5px;
+        }
+
+        .region-label {
+            display: inline-block;
+            background: #1a1a1a;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-size: 0.8em;
+            margin-left: 10px;
+        }
+
+        .tooltip {
+            position: absolute;
+            background: rgba(0, 0, 0, 0.8);
+            border: 1px solid #0f0;
+            padding: 5px;
+            border-radius: 4px;
+            pointer-events: none;
+            display: none;
+            color: #0f0;
+            font-size: 12px;
+            z-index: 1000;
         }
     </style>
 </head>
@@ -102,11 +176,19 @@
             <div id="detections"></div>
         </div>
         
-        <canvas id="map"></canvas>
+        <div class="map-container">
+            <canvas id="map"></canvas>
+            <div class="controls">
+                <button class="control-btn" id="zoomIn">Zoom In</button>
+                <button class="control-btn" id="zoomOut">Zoom Out</button>
+                <button class="control-btn" id="resetView">Reset View</button>
+            </div>
+            <div class="tooltip" id="tooltip"></div>
+        </div>
     </div>
 
     <script>
-        // 전세계 WebSDR 스테이션 데이터
+        // SDR 스테이션 데이터
         const sdrStations = [
             // 유럽
             {
@@ -192,151 +274,230 @@
                 this.canvas = document.getElementById('map');
                 this.ctx = this.canvas.getContext('2d');
                 this.targets = new Set();
+                this.zoom = 1;
+                this.offset = { x: 0, y: 0 };
+                this.isDragging = false;
+                this.lastMousePos = { x: 0, y: 0 };
+                this.tooltip = document.getElementById('tooltip');
+                
                 this.setupCanvas();
+                this.setupControls();
+                this.setupEventListeners();
                 this.renderReceivers();
-                this.startTracking();
                 this.loadWorldMap();
+                this.startTracking();
             }
 
             setupCanvas() {
-                this.canvas.width = this.canvas.offsetWidth;
-                this.canvas.height = this.canvas.offsetHeight;
+                const resizeCanvas = () => {
+                    const container = this.canvas.parentElement;
+                    this.canvas.width = container.offsetWidth;
+                    this.canvas.height = container.offsetHeight;
+                    this.draw();
+                };
                 
-                window.addEventListener('resize', () => {
-                    this.canvas.width = this.canvas.offsetWidth;
-                    this.canvas.height = this.canvas.offsetHeight;
+                resizeCanvas();
+                window.addEventListener('resize', resizeCanvas);
+            }
+
+            setupControls() {
+                document.getElementById('zoomIn').addEventListener('click', () => {
+                    this.zoom *= 1.2;
+                    this.draw();
+                });
+
+                document.getElementById('zoomOut').addEventListener('click', () => {
+                    this.zoom /= 1.2;
+                    this.draw();
+                });
+
+                document.getElementById('resetView').addEventListener('click', () => {
+                    this.zoom = 1;
+                    this.offset = { x: 0, y: 0 };
+                    this.draw();
+                });
+            }
+
+            setupEventListeners() {
+                this.canvas.addEventListener('mousedown', (e) => {
+                    this.isDragging = true;
+                    this.lastMousePos = {
+                        x: e.clientX,
+                        y: e.clientY
+                    };
+                });
+
+                this.canvas.addEventListener('mousemove', (e) => {
+                    if (this.isDragging) {
+                        this.offset.x += (e.clientX - this.lastMousePos.x) / this.zoom;
+                        this.offset.y += (e.clientY - this.lastMousePos.y) / this.zoom;
+                        this.lastMousePos = {
+                            x: e.clientX,
+                            y: e.clientY
+                        };
+                        this.draw();
+                    }
+
+                    // 툴팁 업데이트
+                    const rect = this.canvas.getBoundingClientRect();
+                    const mouseX = e.clientX - rect.left;
+                    const mouseY = e.clientY - rect.top;
+                    this.showTooltip(mouseX, mouseY);
+                });
+
+                this.canvas.addEventListener('mouseup', () => {
+                    this.isDragging = false;
+                });
+
+                this.canvas.addEventListener('mouseleave', () => {
+                    this.isDragging = false;
+                    this.tooltip.style.display = 'none';
+                });
+
+                this.canvas.addEventListener('wheel', (e) => {
+                    e.preventDefault();
+                    const zoomFactor = e.deltaY > 0 ? 0.9 : 1.1;
+                    this.zoom *= zoomFactor;
+                    this.draw();
+                });
+            }
+
+            showTooltip(mouseX, mouseY) {
+                // 스테이션과 타겟에 대한 툴팁
+                let tooltipContent = null;
+
+                // 스테이션 확인
+                sdrStations.forEach(station => {
+                    const pos = this.latLongToXY(station.location[0], station.location[1]);
+                    const distance = Math.hypot(pos.x - mouseX, pos.y - mouseY);
+                    if (distance < 10) {
+                        tooltipContent = `
+                            ${station.name}<br>
+                            Frequency: ${station.frequency}<br>
+                            Location: ${station.location.join(', ')}<br>
+                            Range: ${station.range}km
+                        `;
+                    }
+                });
+
+                // 타겟 확인
+                this.targets.forEach(target => {
+                    const pos = this.latLongToXY(target.position.lat, target.position.lon);
+                    const distance = Math.hypot(pos.x - mouseX, pos.y - mouseY);
+                    if (distance < 10) {
+                        tooltipContent = `
+                            ID: ${target.id}<br>
+                            Type: ${target.type}<br>
+                            Speed: ${target.speed.toFixed(0)}kts<br>
+                            Altitude: ${target.altitude.toFixed(0)}ft<br>
+                            Position: ${target.position.lat.toFixed(2)}°, ${target.position.lon.toFixed(2)}°
+                        `;
+                    }
                 });
+
+                if (tooltipContent) {
+                    this.tooltip.style.display = 'block';
+                    this.tooltip.style.left = (mouseX + 10) + 'px';
+                    this.tooltip.style.top = (mouseY + 10) + 'px';
+                    this.tooltip.innerHTML = tooltipContent;
+                } else {
+                    this.tooltip.style.display = 'none';
+                }
             }
 
-            async loadWorldMap() {
-                // 간단한 세계지도 그리드 생성
+            loadWorldMap() {
                 this.worldGrid = {
                     latLines: [],
                     lonLines: []
                 };
 
-                // 위도선 (15도 간격)
                 for(let lat = -75; lat <= 75; lat += 15) {
                     this.worldGrid.latLines.push(lat);
                 }
 
-                // 경도선 (30도 간격)
                 for(let lon = -180; lon <= 180; lon += 30) {
                     this.worldGrid.lonLines.push(lon);
                 }
             }
 
             latLongToXY(lat, lon) {
-                // 메르카토르 투영법 사용
                 const mapWidth = this.canvas.width;
                 const mapHeight = this.canvas.height;
                 
-                const x = (lon + 180) * (mapWidth / 360);
+                // 메르카토르 투영 변환
+                const x = (lon + 180) * (mapWidth / 360) * this.zoom + this.offset.x;
                 const latRad = lat * Math.PI / 180;
                 const mercN = Math.log(Math.tan((Math.PI / 4) + (latRad / 2)));
-                const y = (mapHeight / 2) - (mapWidth * mercN / (2 * Math.PI));
+                const y = (mapHeight / 2 - (mapWidth * mercN / (2 * Math.PI))) * this.zoom + this.offset.y;
                 
                 return {x, y};
             }
 
+            draw() {
+                this.drawWorldMap();
+                this.drawStations();
+                this.drawTargets();
+            }
+
             drawWorldMap() {
                 // 배경
                 this.ctx.fillStyle = '#111';
                 this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
 
-                // 그리드 그리기
+                // 그리드
                 this.ctx.strokeStyle = '#1a1a1a';
                 this.ctx.lineWidth = 1;
 
                 // 위도선
                 this.worldGrid.latLines.forEach(lat => {
-                    this.ctx.beginPath();
                     const start = this.latLongToXY(lat, -180);
                     const end = this.latLongToXY(lat, 180);
+                    this.ctx.beginPath();
                     this.ctx.moveTo(start.x, start.y);
                     this.ctx.lineTo(end.x, end.y);
                     this.ctx.stroke();
+                    
+                    // 위도 레이블
+                    this.ctx.fillStyle = '#444';
+                    this.ctx.font = '10px monospace';
+                    this.ctx.fillText(`${lat}°`, end.x + 5, end.y);
                 });
 
                 // 경도선
                 this.worldGrid.lonLines.forEach(lon => {
-                    this.ctx.beginPath();
                     const start = this.latLongToXY(-75, lon);
                     const end = this.latLongToXY(75, lon);
+                    this.ctx.beginPath();
                     this.ctx.moveTo(start.x, start.y);
                     this.ctx.lineTo(end.x, end.y);
                     this.ctx.stroke();
+                    
+                    // 경도 레이블
+                    this.ctx.fillStyle = '#444';
+                    this.ctx.font = '10px monospace';
+                    this.ctx.fillText(`${lon}°`, start.x - 15, this.canvas.height - 5);
                 });
             }
 
-            renderReceivers() {
-                const container = document.getElementById('receivers');
-                const groupedStations = {};
-                
-                // 지역별로 스테이션 그룹화
-                sdrStations.forEach(station => {
-                    if (!groupedStations[station.region]) {
-                        groupedStations[station.region] = [];
-                    }
-                    groupedStations[station.region].push(station);
-                });
-
-                // 지역별로 HTML 생성
-                container.innerHTML = Object.entries(groupedStations).map(([region, stations]) => `
-                    <h4>${region}</h4>
-                    ${stations.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('')}
-                `).join('');
-            }
-
-            generateTarget() {
-                // 전 세계 범위의 타겟 생성
-                return {
-                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
-                    position: {
-                        lat: -75 + Math.random() * 150, // -75 to 75
-                        lon: -180 + Math.random() * 360 // -180 to 180
-                    },
-                    speed: Math.random() * 500 + 200,
-                    altitude: Math.random() * 35000 + 5000,
-                    heading: Math.random() * 360,
-                    id: Math.random().toString(36).substr(2, 6).toUpperCase(),
-                    signalStrength: Math.random()
-                };
-            }
-
             drawStations() {
                 sdrStations.forEach(station => {
                     const pos = this.latLongToXY(station.location[0], station.location[1]);
 
-                    // 커버리지 범위 그리기
+                    // 커버리지 범위
                     this.ctx.beginPath();
-                    this.ctx.arc(pos.x, pos.y, station.range / 10, 0, Math.PI * 2);
+                    this.ctx.arc(pos.x, pos.y, (station.range / 10) * this.zoom, 0, Math.PI * 2);
                     this.ctx.strokeStyle = `rgba(0,255,0,${station.active ? 0.2 : 0.1})`;
                     this.ctx.stroke();
 
-                    // 스테이션 포인트 그리기
+                    // 스테이션 포인트
                     this.ctx.beginPath();
                     this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI * 2);
                     this.ctx.fillStyle = station.active ? '#0f0' : '#f00';
                     this.ctx.fill();
 
-                    // 스테이션 레이블 그리기
+                    // 스테이션 레이블
                     this.ctx.fillStyle = '#0f0';
-                    this.ctx.font = '10px monospace';
+                    this.ctx.font = `${10 * this.zoom}px monospace`;
                     this.ctx.fillText(station.name, pos.x + 10, pos.y + 4);
                 });
             }
@@ -345,12 +506,12 @@
                 this.targets.forEach(target => {
                     const pos = this.latLongToXY(target.position.lat, target.position.lon);
                     
-                    // 타겟과 가까운 스테이션과의 연결선 그리기
+                    // 타겟과 스테이션 연결선
                     sdrStations.forEach(station => {
                         if(station.active) {
                             const stationPos = this.latLongToXY(station.location[0], station.location[1]);
                             const distance = Math.hypot(pos.x - stationPos.x, pos.y - stationPos.y);
-                            if(distance < station.range / 5) {
+                            if(distance < station.range * this.zoom / 5) {
                                 this.ctx.beginPath();
                                 this.ctx.strokeStyle = `rgba(0,255,0,${target.signalStrength * 0.3})`;
                                 this.ctx.moveTo(stationPos.x, stationPos.y);
@@ -360,15 +521,26 @@
                         }
                     });
 
-                    // 타겟 그리기
-                    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();
+                    // 타겟 아이콘
+                    const size = 3 * this.zoom;
+                    if(target.type === 'aircraft') {
+                        // 항공기 아이콘
+                        this.ctx.fillStyle = '#ff0';
+                        this.ctx.beginPath();
+                        this.ctx.moveTo(pos.x, pos.y - size);
+                        this.ctx.lineTo(pos.x + size, pos.y + size);
+                        this.ctx.lineTo(pos.x - size, pos.y + size);
+                        this.ctx.closePath();
+                        this.ctx.fill();
+                    } else {
+                        // 차량 아이콘
+                        this.ctx.fillStyle = '#0ff';
+                        this.ctx.fillRect(pos.x - size, pos.y - size, size * 2, size * 2);
+                    }
 
-                    // 타겟 정보 표시
+                    // 타겟 정보 레이블
                     this.ctx.fillStyle = '#666';
-                    this.ctx.font = '10px monospace';
+                    this.ctx.font = `${10 * this.zoom}px monospace`;
                     this.ctx.fillText(
                         `${target.id} • ${target.speed.toFixed(0)}kts • ${target.altitude.toFixed(0)}ft`,
                         pos.x + 10,
@@ -377,18 +549,6 @@
                 });
             }
 
-            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)}%
-                            Position: ${target.position.lat.toFixed(2)}°, ${target.position.lon.to
-                                                                            
             updateDetections() {
                 const detections = document.getElementById('detections');
                 detections.innerHTML = Array.from(this.targets)
@@ -414,6 +574,21 @@
                 });
             }
 
+            generateTarget() {
+                return {
+                    type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
+                    position: {
+                        lat: -75 + Math.random() * 150,
+                        lon: -180 + Math.random() * 360
+                    },
+                    speed: Math.random() * 500 + 200,
+                    altitude: Math.random() * 35000 + 5000,
+                    heading: Math.random() * 360,
+                    id: Math.random().toString(36).substr(2, 6).toUpperCase(),
+                    signalStrength: Math.random()
+                };
+            }
+
             startTracking() {
                 setInterval(() => {
                     // 타겟 추가/제거
@@ -424,10 +599,9 @@
                         this.targets.delete(Array.from(this.targets)[0]);
                     }
 
-                    // 기존 타겟 업데이트 (움직임 시뮬레이션)
+                    // 기존 타겟 업데이트
                     this.targets.forEach(target => {
-                        // 현재 방향으로 이동
-                        const speed = target.speed / 3600; // kts to degrees per second (approximate)
+                        const speed = target.speed / 3600;
                         const radians = target.heading * Math.PI / 180;
                         
                         target.position.lon += Math.sin(radians) * speed;
@@ -449,9 +623,7 @@
                         target.signalStrength = Math.max(0.1, Math.min(1, target.signalStrength + (Math.random() - 0.5) * 0.1));
                     });
 
-                    this.drawWorldMap();
-                    this.drawStations();
-                    this.drawTargets();
+                    this.draw();
                     this.updateDetections();
                     this.updateSignalStrengths();
                 }, 100);
@@ -459,7 +631,4 @@
         }
 
         // Initialize global radar system
-        const radar = new GlobalRadarSystem();
-    </script>
-</body>
-</html>
+        const radar = new GlobalRadarSystem();