Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

kolaslab commited on Dec 24, 2024

Commit

3eaa1f4

verified ·

1 Parent(s): fd6d094

Update index.html

Browse files

Files changed (1) hide show

index.html +227 -180

index.html CHANGED Viewed

@@ -3,7 +3,6 @@
 <head>
     <meta charset="UTF-8">
     <title>Global SDR Network Monitor</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
     <style>
         body {
             margin: 0;
@@ -67,9 +66,9 @@
         }
         #map {
-            height: calc(100vh - 40px);
-            border-radius: 8px;
             background: #111;
         }
         .signal-strength {
@@ -81,9 +80,10 @@
         .signal-bar {
             height: 100%;
-            background: linear-gradient(to right, #00ff00, #00ff00);
             width: 0%;
             transition: width 0.3s ease-in-out;
             border-radius: 2px;
         }
@@ -92,79 +92,24 @@
             border-left: 3px solid #0f0;
             padding: 8px;
             margin: 5px 0;
             border-radius: 0 4px 4px 0;
         }
-        .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-marker {
-            border: 2px solid #0f0;
-            border-radius: 50%;
-            width: 8px;
-            height: 8px;
-            background: transparent;
-        }
-        .station-range {
-            stroke: #0f0;
-            stroke-width: 1;
-            fill: #0f0;
-            fill-opacity: 0.1;
-        }
         .signal-line {
-            stroke: #0f0;
-            stroke-width: 2px;
-            stroke-opacity: 0.5;
             pointer-events: none;
             animation: signalPulse 2s infinite;
         }
         @keyframes signalPulse {
-            0% { stroke-opacity: 0.4; }
-            50% { stroke-opacity: 0.1; }
-            100% { stroke-opacity: 0.4; }
-        }
-        .target-marker {
-            width: 6px;
-            height: 6px;
-            background: #ff0;
-            border-radius: 50%;
-            border: 1px solid #fff;
-        }
-        /* Make signal lines more visible */
-        .leaflet-overlay-pane path {
-            stroke: #0f0 !important;
-            stroke-opacity: 0.4 !important;
-            stroke-width: 2px !important;
-            animation: signalPulse 2s infinite;
-        }
-        .custom-tooltip {
-            background: #111 !important;
-            border: 1px solid #0f0 !important;
-            border-radius: 4px !important;
-            padding: 5px !important;
-            color: #0f0 !important;
         }
     </style>
 </head>
@@ -178,12 +123,11 @@
             <div id="detections"></div>
         </div>
-        <div id="map"></div>
     </div>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
     <script>
-        // Global SDR stations data
         const sdrStations = [
             // Europe
             {
@@ -382,47 +326,22 @@
         class RadarSystem {
             constructor() {
                 this.targets = new Set();
-                this.markers = new Map();
-                this.signalLines = new Map();
-                this.initializeMap();
                 this.renderReceivers();
                 this.startTracking();
             }
-            initializeMap() {
-                this.map = L.map('map', {
-                    center: [20, 0],
-                    zoom: 3,
-                    preferCanvas: true,
-                    worldCopyJump: true
-                });
-                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
-                    maxZoom: 19,
-                    attribution: '© OpenStreetMap contributors'
-                }).addTo(this.map);
-                sdrStations.forEach(station => {
-                    const marker = L.circleMarker(station.location, {
-                        radius: 5,
-                        color: '#0f0',
-                        fillColor: '#0f0',
-                        fillOpacity: 1
-                    }).addTo(this.map);
-                    const range = L.circle(station.location, {
-                        radius: station.range * 1000,
-                        className: 'station-range'
-                    }).addTo(this.map);
-                    marker.bindTooltip(`
-                        ${station.name}<br>
-                        Frequency: ${station.frequency}<br>
-                        Range: ${station.range}km
-                    `, {
-                        className: 'custom-tooltip'
-                    });
                 });
             }
@@ -445,9 +364,23 @@
                 `).join('');
             }
             generateTarget() {
                 const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
-                const range = 5;
                 return {
                     type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
                     position: {
@@ -462,65 +395,138 @@
                 };
             }
-            updateTargets() {
-                // Clear existing signals and markers
-                this.signalLines.forEach(line => this.map.removeLayer(line));
-                this.signalLines.clear();
-                this.markers.forEach(marker => this.map.removeLayer(marker));
-                this.markers.clear();
-                // Add new markers and signal lines for current targets
-                this.targets.forEach(target => {
-                    // Create target marker
-                    const marker = L.circleMarker([target.position.lat, target.position.lon], {
-                        radius: 5,
-                        color: target.type === 'aircraft' ? '#ff0' : '#0ff',
-                        fillColor: target.type === 'aircraft' ? '#ff0' : '#0ff',
-                        fillOpacity: 1,
-                        weight: 2
-                    }).addTo(this.map);
-                    // Enhanced tooltip
-                    marker.bindTooltip(`
-                        <div style="color: #0f0;">
-                            <strong>${target.id}</strong><br>
-                            ${target.type === 'aircraft' ? '✈️' : '🚗'} ${target.type.toUpperCase()}<br>
-                            Speed: ${target.speed.toFixed(0)} kts<br>
-                            ${target.type === 'aircraft' ? `Altitude: ${target.altitude.toFixed(0)} ft<br>` : ''}
-                            Signal: ${(target.signalStrength * 100).toFixed(0)}%
-                        </div>
-                    `, {
-                        className: 'custom-tooltip'
-                    });
-                    this.markers.set(target.id, marker);
-                    // Draw signal lines to nearby active stations
                     sdrStations.forEach(station => {
-                        if (station.active) {
-                            const distance = this.map.distance(
-                                [target.position.lat, target.position.lon],
-                                station.location
-                            ) / 1000;
-                            if (distance <= station.range) {
-                                const signalStrength = Math.max(0.1, 1 - (distance / station.range));
-                                const line = L.polyline([
-                                    [target.position.lat, target.position.lon],
-                                    station.location
-                                ], {
-                                    color: '#00ff00',
-                                    opacity: signalStrength * 0.8,
-                                    weight: 2,
-                                    dashArray: '5, 10',
-                                    className: 'signal-line'
-                                }).addTo(this.map);
-                                this.signalLines.set(`${target.id}-${station.name}`, line);
                             }
                         }
                     });
                 });
             }
@@ -531,8 +537,8 @@
                         <div class="detection">
                             ${target.type === 'aircraft' ? '✈️' : '🚗'}
                             <strong>${target.id}</strong><br>
-                            Speed: ${target.speed.toFixed(0)} kts
-                            ${target.type === 'aircraft' ? `<br>Alt: ${target.altitude.toFixed(0)} ft` : ''}
                             <br>Signal: ${(target.signalStrength * 100).toFixed(0)}%
                         </div>
                     `).join('');
@@ -541,24 +547,25 @@
             updateSignalStrengths() {
                 sdrStations.forEach(station => {
                     const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
-                    if (bar) {
-                        // Calculate actual signal strength based on nearby targets
                         let maxSignalStrength = 0;
                         this.targets.forEach(target => {
-                            const distance = this.map.distance(
-                                [target.position.lat, target.position.lon],
-                                station.location
-                            ) / 1000;
-                            if (distance <= station.range) {
-                                const strength = Math.max(0.1, 1 - (distance / station.range));
                                 maxSignalStrength = Math.max(maxSignalStrength, strength);
                             }
                         });
-                        // Add some random fluctuation
                         const baseStrength = maxSignalStrength * 100;
-                        const fluctuation = Math.random() * 20 - 10; // ±10%
                         const finalStrength = Math.max(10, Math.min(100, baseStrength + fluctuation));
                         bar.style.width = `${finalStrength}%`;
@@ -567,20 +574,60 @@
                 });
             }
-            startTracking() {
                 setInterval(() => {
-                    // Add/remove targets
                     if(Math.random() < 0.1 && this.targets.size < 20) {
-                        this.targets.add(this.generateTarget());
-                    }
-                    if(Math.random() < 0.1 && this.targets.size > 0) {
-                        this.targets.delete(Array.from(this.targets)[0]);
                     }
-                    this.updateTargets();
                     this.updateDetections();
                     this.updateSignalStrengths();
-                }, 100);
             }
         }
@@ -590,4 +637,4 @@
         });
     </script>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <title>Global SDR Network Monitor</title>
     <style>
         body {
             margin: 0;
         }
         #map {
             background: #111;
+            border-radius: 8px;
+            height: calc(100vh - 40px);
         }
         .signal-strength {
         .signal-bar {
             height: 100%;
+            background: linear-gradient(to right, #0f0, #00ff00);
             width: 0%;
             transition: width 0.3s ease-in-out;
+            box-shadow: 0 0 5px #0f0;
             border-radius: 2px;
         }
             border-left: 3px solid #0f0;
             padding: 8px;
             margin: 5px 0;
+            font-size: 12px;
             border-radius: 0 4px 4px 0;
         }
         .signal-line {
+            position: absolute;
+            background: linear-gradient(90deg, rgba(0,255,0,0.4) 0%, rgba(0,255,0,0) 100%);
+            height: 2px;
+            transform-origin: 0 0;
             pointer-events: none;
+            opacity: 0.7;
             animation: signalPulse 2s infinite;
         }
         @keyframes signalPulse {
+            0% { opacity: 0.7; }
+            50% { opacity: 0.3; }
+            100% { opacity: 0.7; }
         }
     </style>
 </head>
             <div id="detections"></div>
         </div>
+        <canvas id="map"></canvas>
     </div>
     <script>
+        // Global SDR stations data with all 23 stations
         const sdrStations = [
             // Europe
             {
         class RadarSystem {
             constructor() {
+                this.canvas = document.getElementById('map');
+                this.ctx = this.canvas.getContext('2d');
                 this.targets = new Set();
+                this.signalLines = 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;
                 });
             }
                 `).join('');
             }
+            latLongToXY(lat, lon) {
+                // Adjusted scale for global view
+                const centerLat = 20;  // Moved center point south for better global coverage
+                const centerLon = 0;   // Centered on prime meridian
+                const scale = 30;      // Reduced scale to show more of the world
+                const x = (lon - centerLon) * scale + this.canvas.width/2;
+                const y = (centerLat - lat) * scale + this.canvas.height/2;
+                return {x, y};
+            }
             generateTarget() {
+                // Select random station as center point for target generation
                 const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
+                const range = 5; // Degrees of latitude/longitude range for target generation
                 return {
                     type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
                     position: {
                 };
             }
+            drawBackground() {
+                this.ctx.fillStyle = '#111';
+                this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+                // Enhanced grid with better visibility
+                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() {
+                sdrStations.forEach(station => {
+                    const pos = this.latLongToXY(station.location[0], station.location[1]);
+                    // Draw coverage area with gradient
+                    const gradient = this.ctx.createRadialGradient(
+                        pos.x, pos.y, station.range / 2
+                    );
+                    gradient.addColorStop(0, `rgba(0,255,0,${station.active ? 0.2 : 0.05})`);
+                    gradient.addColorStop(1, 'rgba(0,255,0,0)');
+                    // Draw enhanced coverage radius with gradient
+                    this.ctx.beginPath();
+                    this.ctx.arc(pos.x, pos.y, station.range / 2, 0, Math.PI * 2);
+                    this.ctx.fillStyle = gradient;
+                    this.ctx.fill();
+                    this.ctx.strokeStyle = `rgba(0,255,0,${station.active ? 0.4 : 0.1})`;
+                    this.ctx.stroke();
+                    // Draw improved station point with glow effect
+                    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();
+                    if(station.active) {
+                        this.ctx.beginPath();
+                        this.ctx.arc(pos.x, pos.y, 6, 0, Math.PI * 2);
+                        this.ctx.strokeStyle = 'rgba(0,255,0,0.5)';
+                        this.ctx.stroke();
+                    }
+                    // Draw enhanced station label
+                    this.ctx.fillStyle = '#0f0';
+                    this.ctx.font = 'bold 10px monospace';
+                    this.ctx.fillText(station.name, pos.x + 10, pos.y + 4);
+                });
+            }
+            drawTargets() {
+                this.targets.forEach(target => {
+                    const pos = this.latLongToXY(target.position.lat, target.position.lon);
+                    // Draw enhanced signal connections to stations
                     sdrStations.forEach(station => {
+                        if(station.active) {
+                            const stationPos = this.latLongToXY(station.location[0], station.location[1]);
+                            // Calculate distance for signal strength
+                            const dx = pos.x - stationPos.x;
+                            const dy = pos.y - stationPos.y;
+                            const distance = Math.sqrt(dx * dx + dy * dy);
+                            const maxDistance = station.range / 2;
+                            const signalStrength = Math.max(0.1, 1 - (distance / maxDistance));
+                            if (distance <= maxDistance) {
+                                // Create gradient for signal line
+                                const gradient = this.ctx.createLinearGradient(
+                                    stationPos.x, stationPos.y, pos.x, pos.y
+                                );
+                                gradient.addColorStop(0, `rgba(0,255,0,${signalStrength * 0.7})`);
+                                gradient.addColorStop(1, 'rgba(0,255,0,0)');
+                                // Draw animated signal line
+                                this.ctx.beginPath();
+                                this.ctx.moveTo(stationPos.x, stationPos.y);
+                                this.ctx.lineTo(pos.x, pos.y);
+                                this.ctx.strokeStyle = gradient;
+                                this.ctx.lineWidth = 2;
+                                this.ctx.setLineDash([5, 15]);
+                                this.ctx.stroke();
+                                this.ctx.setLineDash([]);
                             }
                         }
                     });
+                    // Draw enhanced target with glow effect
+                    const targetGlow = this.ctx.createRadialGradient(
+                        pos.x, pos.y, 2,
+                        pos.x, pos.y, 8
+                    );
+                    const targetColor = target.type === 'aircraft' ?
+                        ['rgba(255,255,0,0.8)', 'rgba(255,255,0,0)'] :
+                        ['rgba(0,255,255,0.8)', 'rgba(0,255,255,0)'];
+                    targetGlow.addColorStop(0, targetColor[0]);
+                    targetGlow.addColorStop(1, targetColor[1]);
+                    this.ctx.beginPath();
+                    this.ctx.arc(pos.x, pos.y, 8, 0, Math.PI * 2);
+                    this.ctx.fillStyle = targetGlow;
+                    this.ctx.fill();
+                    // Draw target point
+                    this.ctx.beginPath();
+                    this.ctx.arc(pos.x, pos.y, 4, 0, Math.PI * 2);
+                    this.ctx.fillStyle = target.type === 'aircraft' ? '#ff0' : '#0ff';
+                    this.ctx.fill();
+                    // Draw improved target info with background
+                    const info = `${target.id} • ${target.speed.toFixed(0)}kts • ${target.altitude.toFixed(0)}ft`;
+                    this.ctx.font = 'bold 10px monospace';
+                    const textWidth = this.ctx.measureText(info).width;
+                    this.ctx.fillStyle = 'rgba(0,0,0,0.7)';
+                    this.ctx.fillRect(pos.x + 10, pos.y - 8, textWidth + 4, 16);
+                    this.ctx.fillStyle = target.type === 'aircraft' ? '#ff0' : '#0ff';
+                    this.ctx.fillText(info, pos.x + 12, pos.y + 4);
                 });
             }
                         <div class="detection">
                             ${target.type === 'aircraft' ? '✈️' : '🚗'}
                             <strong>${target.id}</strong><br>
+                            Speed: ${target.speed.toFixed(0)}kts
+                            ${target.type === 'aircraft' ? `<br>Alt: ${target.altitude.toFixed(0)}ft` : ''}
                             <br>Signal: ${(target.signalStrength * 100).toFixed(0)}%
                         </div>
                     `).join('');
             updateSignalStrengths() {
                 sdrStations.forEach(station => {
                     const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
+                    if(bar) {
                         let maxSignalStrength = 0;
                         this.targets.forEach(target => {
+                            const stationPos = this.latLongToXY(station.location[0], station.location[1]);
+                            const targetPos = this.latLongToXY(target.position.lat, target.position.lon);
+                            const dx = targetPos.x - stationPos.x;
+                            const dy = targetPos.y - stationPos.y;
+                            const distance = Math.sqrt(dx * dx + dy * dy);
+                            const maxDistance = station.range / 2;
+                            if (distance <= maxDistance) {
+                                const strength = Math.max(0.1, 1 - (distance / maxDistance));
                                 maxSignalStrength = Math.max(maxSignalStrength, strength);
                             }
                         });
                         const baseStrength = maxSignalStrength * 100;
+                        const fluctuation = Math.random() * 20 - 10;
                         const finalStrength = Math.max(10, Math.min(100, baseStrength + fluctuation));
                         bar.style.width = `${finalStrength}%`;
                 });
             }
+startTracking() {
                 setInterval(() => {
                     if(Math.random() < 0.1 && this.targets.size < 20) {
+                        const newTarget = this.generateTarget();
+                        newTarget.createdAt = Date.now();
+                        this.targets.add(newTarget);
                     }
+                    // Remove old targets
+                    const currentTime = Date.now();
+                    Array.from(this.targets).forEach(target => {
+                        if(currentTime - target.createdAt > 10000) { // 10초 후 제거
+                            this.targets.delete(target);
+                        }
+                    });
+                    // Signal strength calculation
+                    sdrStations.forEach(station => {
+                        const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
+                        if(bar) {
+                            let maxSignalStrength = 0;
+                            this.targets.forEach(target => {
+                                const stationPos = this.latLongToXY(station.location[0], station.location[1]);
+                                const targetPos = this.latLongToXY(target.position.lat, target.position.lon);
+                                const dx = targetPos.x - stationPos.x;
+                                const dy = targetPos.y - stationPos.y;
+                                const distance = Math.sqrt(dx * dx + dy * dy);
+                                const maxDistance = station.range / 2;
+                                if (distance <= maxDistance) {
+                                    const strength = Math.max(0.1, 1 - (distance / maxDistance));
+                                    maxSignalStrength = Math.max(maxSignalStrength, strength);
+                                }
+                            });
+                            // Add random fluctuation to signal strength
+                            const baseStrength = maxSignalStrength * 100;
+                            const fluctuation = Math.random() * 20 - 10;
+                            const finalStrength = Math.max(10, Math.min(100, baseStrength + fluctuation));
+                            bar.style.width = `${finalStrength}%`;
+                            bar.style.boxShadow = maxSignalStrength > 0.5 ? '0 0 10px #0f0' : 'none';
+                            bar.style.opacity = maxSignalStrength > 0 ? 1 : 0.3;
+                        }
+                    });
+                    // Update display
+                    this.drawBackground();
+                    this.drawStations();
+                    this.drawTargets();
                     this.updateDetections();
                     this.updateSignalStrengths();
+                }, 50);  // 50ms interval for smooth animation
             }
         }
         });
     </script>
 </body>
+</html>