world-sdr / index.html
kolaslab's picture
Update index.html
fd6d094 verified
raw
history blame
20.2 kB
<!DOCTYPE html>
<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 !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>
<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>