world-sdr

Running

File size: 10,970 Bytes

<!DOCTYPE html>
<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 !important;
        }

        /* 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>