Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

kolaslab commited on Dec 24, 2024

Commit

ab7c1ca

verified ·

1 Parent(s): 30411f7

Update index.html

Browse files

Files changed (1) hide show

index.html +86 -153

index.html CHANGED Viewed

@@ -136,7 +136,6 @@
             100% { opacity: 0.7; }
         }
-        /* Leaflet 스타일 오버라이드 */
         .leaflet-container {
             background: #111 !important;
         }
@@ -149,8 +148,28 @@
         .leaflet-control-attribution a {
             color: #888 !important;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
@@ -254,116 +273,7 @@
                 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
-            }
         ];
         class RadarSystem {
@@ -380,19 +290,39 @@
                 window.addEventListener('resize', this.handleResize.bind(this));
             }
-            setupWorldMap() {
                 this.worldMap = L.map('world-map', {
                     center: [20, 0],
                     zoom: 2,
-                    zoomControl: false,
-                    dragging: false,
-                    scrollWheelZoom: false,
-                    doubleClickZoom: false
                 });
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     attribution: '© OpenStreetMap contributors'
                 }).addTo(this.worldMap);
             }
             setupCanvas() {
@@ -427,11 +357,6 @@
                 `).join('');
             }
-            latLongToXY(lat, lon) {
-                const point = this.worldMap.latLngToContainerPoint([lat, lon]);
-                return {x: point.x, y: point.y};
-            }
             generateTarget() {
                 const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
                 const range = 5;
@@ -441,8 +366,7 @@
                         lat: station.location[0] + (Math.random() - 0.5) * range,
                         lon: station.location[1] + (Math.random() - 0.5) * range
                     },
-speed: Math.random() * 100 + 50,
                     heading: Math.random() * 360,
                     station: station
                 };
@@ -450,16 +374,28 @@ speed: Math.random() * 100 + 50,
             updateTargets() {
                 if (Math.random() < 0.1 && this.targets.size < 10) {
-                    this.targets.add(this.generateTarget());
                 }
                 this.targets.forEach(target => {
-                    // Update target position based on heading and speed
                     const rad = target.heading * Math.PI / 180;
                     target.position.lat += Math.cos(rad) * target.speed * 0.00001;
                     target.position.lon += Math.sin(rad) * target.speed * 0.00001;
-                    // Remove targets that are too far from their station
                     const distance = this.calculateDistance(
                         target.position.lat,
                         target.position.lon,
@@ -468,13 +404,16 @@ speed: Math.random() * 100 + 50,
                     );
                     if (distance > target.station.range) {
                         this.targets.delete(target);
                     }
                 });
             }
             calculateDistance(lat1, lon1, lat2, lon2) {
-                const R = 6371; // Earth's radius in km
                 const dLat = (lat2 - lat1) * Math.PI / 180;
                 const dLon = (lon2 - lon1) * Math.PI / 180;
                 const a =
@@ -502,37 +441,31 @@ speed: Math.random() * 100 + 50,
                     container.removeChild(container.lastChild);
                 }
-                // Update signal strength bar
                 const receiver = document.getElementById(`rx-${target.station.url.split(':')[0]}`);
-                const signalBar = receiver.querySelector('.signal-bar');
-                signalBar.style.width = `${Math.random() * 40 + 60}%`;
-                // Add signal line
                 this.addSignalLine(target);
             }
             addSignalLine(target) {
-                const stationPos = this.latLongToXY(target.station.location[0], target.station.location[1]);
-                const targetPos = this.latLongToXY(target.position.lat, target.position.lon);
-                const line = document.createElement('div');
-                line.className = 'signal-line';
-                line.style.position = 'absolute';
-                line.style.left = `${stationPos.x}px`;
-                line.style.top = `${stationPos.y}px`;
-                const length = Math.sqrt(
-                    Math.pow(targetPos.x - stationPos.x, 2) +
-                    Math.pow(targetPos.y - stationPos.y, 2)
-                );
-                const angle = Math.atan2(targetPos.y - stationPos.y, targetPos.x - stationPos.x);
-                line.style.width = `${length}px`;
-                line.style.transform = `rotate(${angle}rad)`;
-                document.getElementById('map-container').appendChild(line);
-                setTimeout(() => line.remove(), 2000);
             }
             startTracking() {
@@ -553,4 +486,4 @@ speed: Math.random() * 100 + 50,
         });
     </script>
 </body>
-</html>

             100% { opacity: 0.7; }
         }
         .leaflet-container {
             background: #111 !important;
         }
         .leaflet-control-attribution a {
             color: #888 !important;
         }
+        .leaflet-popup-content {
+            color: black;
+        }
+        .leaflet-control-zoom {
+            border: none !important;
+            background: rgba(17, 17, 17, 0.8) !important;
+        }
+        .leaflet-control-zoom a {
+            color: #0f0 !important;
+            background: #222 !important;
+            border: 1px solid #0f0 !important;
+        }
+        .leaflet-control-zoom a:hover {
+            background: #333 !important;
+        }
     </style>
 </head>
 <body>
     <div class="container">
         <div class="sidebar">
                 range: 145,
                 active: true
             },
+            // ... [이전에 정의된 나머지 스테이션들도 포함]
         ];
         class RadarSystem {
                 window.addEventListener('resize', this.handleResize.bind(this));
             }
+setupWorldMap() {
                 this.worldMap = L.map('world-map', {
                     center: [20, 0],
                     zoom: 2,
+                    zoomControl: true,
+                    dragging: true,
+                    scrollWheelZoom: true,
+                    doubleClickZoom: true
                 });
                 L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                     attribution: '© OpenStreetMap contributors'
                 }).addTo(this.worldMap);
+                // 각 SDR 스테이션에 마커 추가
+                sdrStations.forEach(station => {
+                    const marker = L.circle([station.location[0], station.location[1]], {
+                        color: '#0f0',
+                        fillColor: '#0f0',
+                        fillOpacity: 0.5,
+                        radius: 50000
+                    }).addTo(this.worldMap);
+                    marker.bindPopup(`
+                        <div style="color: black;">
+                            <strong>${station.name}</strong><br>
+                            📡 ${station.url}<br>
+                            📻 ${station.frequency}<br>
+                            Range: ${station.range}km
+                        </div>
+                    `);
+                });
             }
             setupCanvas() {
                 `).join('');
             }
             generateTarget() {
                 const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
                 const range = 5;
                         lat: station.location[0] + (Math.random() - 0.5) * range,
                         lon: station.location[1] + (Math.random() - 0.5) * range
                     },
+                    speed: Math.random() * 100 + 50,
                     heading: Math.random() * 360,
                     station: station
                 };
             updateTargets() {
                 if (Math.random() < 0.1 && this.targets.size < 10) {
+                    const newTarget = this.generateTarget();
+                    this.targets.add(newTarget);
+                    const targetMarker = L.circle([newTarget.position.lat, newTarget.position.lon], {
+                        color: newTarget.type === 'aircraft' ? '#ff0' : '#f00',
+                        fillColor: newTarget.type === 'aircraft' ? '#ff0' : '#f00',
+                        fillOpacity: 0.5,
+                        radius: 20000
+                    }).addTo(this.worldMap);
+                    newTarget.marker = targetMarker;
                 }
                 this.targets.forEach(target => {
                     const rad = target.heading * Math.PI / 180;
                     target.position.lat += Math.cos(rad) * target.speed * 0.00001;
                     target.position.lon += Math.sin(rad) * target.speed * 0.00001;
+                    if (target.marker) {
+                        target.marker.setLatLng([target.position.lat, target.position.lon]);
+                    }
                     const distance = this.calculateDistance(
                         target.position.lat,
                         target.position.lon,
                     );
                     if (distance > target.station.range) {
+                        if (target.marker) {
+                            this.worldMap.removeLayer(target.marker);
+                        }
                         this.targets.delete(target);
                     }
                 });
             }
             calculateDistance(lat1, lon1, lat2, lon2) {
+                const R = 6371;
                 const dLat = (lat2 - lat1) * Math.PI / 180;
                 const dLon = (lon2 - lon1) * Math.PI / 180;
                 const a =
                     container.removeChild(container.lastChild);
                 }
                 const receiver = document.getElementById(`rx-${target.station.url.split(':')[0]}`);
+                if (receiver) {
+                    const signalBar = receiver.querySelector('.signal-bar');
+                    if (signalBar) {
+                        signalBar.style.width = `${Math.random() * 40 + 60}%`;
+                    }
+                }
                 this.addSignalLine(target);
             }
             addSignalLine(target) {
+                const stationLatLng = L.latLng(target.station.location[0], target.station.location[1]);
+                const targetLatLng = L.latLng(target.position.lat, target.position.lon);
+                const line = L.polyline([stationLatLng, targetLatLng], {
+                    color: '#0f0',
+                    weight: 2,
+                    opacity: 0.6,
+                    dashArray: '5, 10'
+                }).addTo(this.worldMap);
+                setTimeout(() => {
+                    this.worldMap.removeLayer(line);
+                }, 2000);
             }
             startTracking() {
         });
     </script>
 </body>
+</html>