Spaces:
Running
Running
| <html> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <title>Real SDR Network Monitor</title> | |
| <!-- Add Leaflet CSS --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.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: #0f0; | |
| width: 50%; | |
| transition: width 0.3s; | |
| } | |
| .detection { | |
| padding: 5px; | |
| margin: 5px 0; | |
| font-size: 12px; | |
| border-left: 2px solid #0f0; | |
| } | |
| /* Custom Leaflet styles */ | |
| .leaflet-tile-pane { | |
| filter: invert(1) hue-rotate(180deg); | |
| } | |
| .leaflet-container { | |
| background: #111 ; | |
| } | |
| /* Style the station and target markers */ | |
| .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; | |
| } | |
| .target-marker { | |
| width: 6px; | |
| height: 6px; | |
| background: #ff0; | |
| border-radius: 50%; | |
| border: 1px solid #fff; | |
| } | |
| </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> | |
| <!-- Add Leaflet JS --> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script> | |
| <script> | |
| // SDR stations data | |
| const sdrStations = [ | |
| { | |
| 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 | |
| } | |
| ]; | |
| class RadarSystem { | |
| constructor() { | |
| this.targets = new Set(); | |
| this.markers = new Map(); | |
| this.initializeMap(); | |
| this.renderReceivers(); | |
| this.startTracking(); | |
| } | |
| initializeMap() { | |
| // Initialize the map centered on Europe | |
| this.map = L.map('map', { | |
| center: [51.5, 5.0], | |
| zoom: 6, | |
| preferCanvas: true | |
| }); | |
| // Add dark-themed map tiles | |
| L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { | |
| maxZoom: 19, | |
| attribution: '© OpenStreetMap contributors' | |
| }).addTo(this.map); | |
| // Add SDR stations to the map | |
| sdrStations.forEach(station => { | |
| // Add station marker | |
| const marker = L.circleMarker(station.location, { | |
| radius: 5, | |
| color: '#0f0', | |
| fillColor: '#0f0', | |
| fillOpacity: 1 | |
| }).addTo(this.map); | |
| // Add range circle | |
| const range = L.circle(station.location, { | |
| radius: station.range * 1000, | |
| className: 'station-range' | |
| }).addTo(this.map); | |
| // Add tooltip | |
| marker.bindTooltip(station.name); | |
| }); | |
| } | |
| 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() { | |
| return { | |
| type: Math.random() > 0.7 ? 'aircraft' : 'vehicle', | |
| position: { | |
| lat: 51.5 + (Math.random() - 0.5) * 4, | |
| lon: 5.0 + (Math.random() - 0.5) * 8 | |
| }, | |
| 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() { | |
| // Update existing markers | |
| this.markers.forEach(marker => this.map.removeLayer(marker)); | |
| this.markers.clear(); | |
| // Add new markers for current targets | |
| this.targets.forEach(target => { | |
| const marker = L.circleMarker([target.position.lat, target.position.lon], { | |
| radius: 3, | |
| color: target.type === 'aircraft' ? '#ff0' : '#0ff', | |
| fillColor: target.type === 'aircraft' ? '#ff0' : '#0ff', | |
| fillOpacity: 1 | |
| }).addTo(this.map); | |
| marker.bindTooltip(`${target.id} • ${target.speed.toFixed(0)}kts • ${target.altitude.toFixed(0)}ft`); | |
| this.markers.set(target.id, marker); | |
| // Draw signal lines to active stations | |
| sdrStations.forEach(station => { | |
| if (station.active) { | |
| L.polyline([ | |
| [target.position.lat, target.position.lon], | |
| station.location | |
| ], { | |
| color: '#0f0', | |
| opacity: target.signalStrength * 0.3, | |
| weight: 1 | |
| }).addTo(this.map); | |
| } | |
| }); | |
| }); | |
| } | |
| 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)}% | |
| </div> | |
| `).join(''); | |
| } | |
| updateSignalStrengths() { | |
| sdrStations.forEach(station => { | |
| const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`); | |
| if(bar) { | |
| const strength = 40 + Math.random() * 60; | |
| bar.style.width = `${strength}%`; | |
| } | |
| }); | |
| } | |
| startTracking() { | |
| setInterval(() => { | |
| // Add/remove targets | |
| if(Math.random() < 0.1 && this.targets.size < 10) { | |
| 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 | |
| const radar = new RadarSystem(); | |
| </script> | |
| </body> | |
| </html> |