Spaces:
Running
Running
| <html> | |
| <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; | |
| padding: 20px; | |
| background: #000; | |
| color: #0f0; | |
| font-family: monospace; | |
| overflow: hidden; | |
| } | |
| .container { | |
| display: grid; | |
| grid-template-columns: 300px 1fr; | |
| gap: 20px; | |
| } | |
| .sidebar { | |
| background: #111; | |
| padding: 15px; | |
| border-radius: 8px; | |
| height: calc(100vh - 40px); | |
| overflow-y: auto; | |
| z-index: 1000; | |
| } | |
| .receiver { | |
| margin: 10px 0; | |
| padding: 10px; | |
| background: #1a1a1a; | |
| border-radius: 4px; | |
| position: relative; | |
| } | |
| .status { | |
| display: flex; | |
| align-items: center; | |
| margin-bottom: 5px; | |
| } | |
| .led { | |
| width: 8px; | |
| height: 8px; | |
| border-radius: 50%; | |
| margin-right: 8px; | |
| } | |
| .active { | |
| background: #0f0; | |
| box-shadow: 0 0 10px #0f0; | |
| animation: pulse 2s infinite; | |
| } | |
| @keyframes pulse { | |
| 0% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| 100% { opacity: 1; } | |
| } | |
| .inactive { | |
| background: #f00; | |
| } | |
| #map { | |
| height: calc(100vh - 40px); | |
| border-radius: 8px; | |
| background: #111; | |
| } | |
| .signal-strength { | |
| height: 4px; | |
| background: #222; | |
| margin-top: 5px; | |
| border-radius: 2px; | |
| } | |
| .signal-bar { | |
| height: 100%; | |
| background: linear-gradient(to right, #00ff00, #00ff00); | |
| width: 0%; | |
| transition: width 0.3s ease-in-out; | |
| border-radius: 2px; | |
| } | |
| .detection { | |
| background: rgba(0, 255, 0, 0.1); | |
| 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 ; | |
| } | |
| .leaflet-control-attribution { | |
| background: #222 ; | |
| color: #666 ; | |
| } | |
| .leaflet-popup-content-wrapper, | |
| .leaflet-popup-tip { | |
| background: #222 ; | |
| color: #0f0 ; | |
| } | |
| .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 ; | |
| stroke-opacity: 0.4 ; | |
| stroke-width: 2px ; | |
| animation: signalPulse 2s infinite; | |
| } | |
| .custom-tooltip { | |
| background: #111 ; | |
| border: 1px solid #0f0 ; | |
| border-radius: 4px ; | |
| padding: 5px ; | |
| color: #0f0 ; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="sidebar"> | |
| <h3>Active SDR Receivers</h3> | |
| <div id="receivers"></div> | |
| <h3>Real-time Detections</h3> | |
| <div id="detections"></div> | |
| </div> | |
| <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 | |
| { | |
| name: "Twente WebSDR", | |
| url: "websdr.ewi.utwente.nl:8901", | |
| location: [52.2389, 6.8343], | |
| frequency: "0-29.160 MHz", | |
| range: 200, | |
| active: true | |
| }, | |
| { | |
| name: "TU Delft WebSDR", | |
| url: "websdr.tudelft.nl:8901", | |
| location: [51.9981, 4.3731], | |
| frequency: "0-29.160 MHz", | |
| range: 180, | |
| active: true | |
| }, | |
| { | |
| name: "SUWS WebSDR UK", | |
| url: "websdr.suws.org.uk", | |
| location: [51.2785, -0.7642], | |
| frequency: "0-30 MHz", | |
| range: 150, | |
| active: true | |
| }, | |
| { | |
| name: "KiwiSDR Switzerland", | |
| url: "hb9ryz.no-ip.org:8073", | |
| location: [47.3769, 8.5417], | |
| 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 | |
| } | |
| ]; | |
| 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' | |
| }); | |
| }); | |
| } | |
| 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> | |
| </div> | |
| `).join(''); | |
| } | |
| generateTarget() { | |
| const station = sdrStations[Math.floor(Math.random() * sdrStations.length)]; | |
| const range = 5; | |
| return { | |
| type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', | |
| position: { | |
| lat: station.location[0] + (Math.random() - 0.5) * range, | |
| lon: station.location[1] + (Math.random() - 0.5) * range | |
| }, | |
| speed: Math.random() * 500 + 200, | |
| altitude: Math.random() * 35000 + 5000, | |
| heading: Math.random() * 360, | |
| id: Math.random().toString(36).substr(2, 6).toUpperCase(), | |
| signalStrength: Math.random() | |
| }; | |
| } | |
| 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); | |
| } | |
| } | |
| }); | |
| }); | |
| } | |
| updateDetections() { | |
| const detections = document.getElementById('detections'); | |
| detections.innerHTML = Array.from(this.targets) | |
| .map(target => ` | |
| <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) { | |
| // 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}%`; | |
| bar.style.opacity = maxSignalStrength > 0 ? 1 : 0.3; | |
| } | |
| }); | |
| } | |
| 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); | |
| } | |
| } | |
| // Initialize radar system when page loads | |
| window.addEventListener('load', () => { | |
| const radar = new RadarSystem(); | |
| }); | |
| </script> | |
| </body> | |
| </html> |