Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

world-sdr / index.html

kolaslab

Update index.html

3eaa1f4 verified 3 months ago

raw

history blame

24.5 kB

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<title>Global SDR Network Monitor</title>
	<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 {
	background: #111;
	border-radius: 8px;
	height: calc(100vh - 40px);
	}

	.signal-strength {
	height: 4px;
	background: #222;
	margin-top: 5px;
	border-radius: 2px;
	}

	.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;
	}

	.detection {
	background: rgba(0, 255, 0, 0.1);
	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>
	<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>

	<canvas id="map"></canvas>
	</div>

	<script>
	// Global SDR stations data with all 23 stations
	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.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;
	});
	}

	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('');
	}

	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: {
	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()
	};
	}

	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);
	});
	}

	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) {
	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}%`;
	bar.style.opacity = maxSignalStrength > 0 ? 1 : 0.3;
	}
	});
	}

	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
	}
	}

	// Initialize radar system when page loads
	window.addEventListener('load', () => {
	const radar = new RadarSystem();
	});
	</script>
	</body>
	</html>