Spaces:

kolaslab
/

world-sdr

Running

App Files Files Community

world-sdr / index.html

kolaslab

Update index.html

3cfdd58 verified about 1 month ago

raw

history blame

19.6 kB

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

	/* 수신기(Receiver) 목록 스타일 */
	.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;
	}
	.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) 목록 스타일 */
	.detection {
	padding: 5px;
	margin: 5px 0;
	font-size: 12px;
	border-left: 2px solid #0f0;
	}

	/* Leaflet 지도 밤(다크) 테마 일부 보정 */
	.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-range {
	stroke: #0f0;
	stroke-width: 1;
	fill: #0f0;
	fill-opacity: 0.1;
	}
	</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>

	<!-- Leaflet 지도 영역 -->
	<div id="map"></div>
	</div>

	<!-- Leaflet JS -->
	<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
	<script>
	// 전 세계 SDR 스테이션 데이터 (첫 번째 코드 + 일부 예시 병합)
	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
	}
	];

	// Leaflet + 동적 타겟 추적을 통합한 RadarSystem
	class RadarSystem {
	constructor() {
	// 타겟(표적) 정보를 저장할 Set
	this.targets = new Set();
	// 타겟 마커와 신호 라인을 저장할 자료구조
	this.markers = new Map();
	this.signalLines = new Map();

	this.initializeMap();
	this.renderReceivers();
	this.startTracking();
	}

	// Leaflet 지도 초기화
	initializeMap() {
	this.map = L.map('map', {
	center: [20, 0],
	zoom: 3,
	preferCanvas: true,
	worldCopyJump: true
	});

	// OpenStreetMap 타일 레이어
	L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© OpenStreetMap contributors'
	}).addTo(this.map);

	// 각 SDR 스테이션을 지도에 표시
	sdrStations.forEach(station => {
	// 스테이션 위치 마커
	const marker = L.circleMarker(station.location, {
	radius: 5,
	color: '#0f0',
	fillColor: '#0f0',
	fillOpacity: 1
	}).addTo(this.map);

	// 스테이션의 가청 범위(coverage range)를 원으로 표시
	L.circle(station.location, {
	radius: station.range * 1000, // km -> m
	className: 'station-range'
	}).addTo(this.map);

	// 마커 툴팁(마우스 오버 시 정보)
	marker.bindTooltip(`
	${station.name}<br>
	Frequency: ${station.frequency}<br>
	Range: ${station.range}km
	`);
	});
	}

	// 사이드바에 수신기(Receivers) 목록 렌더링
	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)];
	// station 근처에 나타나도록 조정 (±5도 범위)
	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, // kts
	altitude: Math.random() * 35000 + 5000, // ft
	heading: Math.random() * 360,
	id: Math.random().toString(36).substr(2, 6).toUpperCase(),
	signalStrength: Math.random()
	};
	}

	// 현재 타겟들을 지도에 표시 / 업데이트
	updateTargets() {
	// 이전 프레임에서 그려진 신호 라인 제거
	this.signalLines.forEach(line => this.map.removeLayer(line));
	this.signalLines.clear();

	// 이전 마커들 제거
	this.markers.forEach(marker => this.map.removeLayer(marker));
	this.markers.clear();

	// 현재 타겟마다 새로 지도에 표시
	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}<br>
	Type: ${target.type}<br>
	Speed: ${target.speed.toFixed(0)}kts<br>
	${
	target.type === 'aircraft'
	? `Altitude: ${target.altitude.toFixed(0)}ft<br>`
	: ''
	}
	Signal: ${(target.signalStrength * 100).toFixed(0)}%
	`);

	// 레이어 관리용 저장
	this.markers.set(target.id, marker);

	// 타겟과 가까운(범위 안) 스테이션과의 신호 라인 표시
	sdrStations.forEach(station => {
	if (station.active) {
	const distance = this.map.distance(
	[target.position.lat, target.position.lon],
	station.location
	) / 1000; // m -> km

	if (distance <= station.range) {
	// 스테이션과 타겟 사이 라인
	const line = L.polyline([
	[target.position.lat, target.position.lon],
	station.location
	], {
	color: '#0f0',
	opacity: target.signalStrength * 0.3,
	weight: 1
	}).addTo(this.map);

	// 라인도 Map에 저장해두고, 다음 업데이트 때 제거
	this.signalLines.set(`${target.id}-${station.name}`, line);
	}
	}
	});
	});
	}

	// 사이드바 'Real-time Detections' 업데이트
	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('');
	}

	// 수신기(Receivers) 신호 강도 바(Bar) 동적 업데이트
	updateSignalStrengths() {
	sdrStations.forEach(station => {
	const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
	if (bar) {
	// 40% ~ 100% 사이의 랜덤값
	const strength = 40 + Math.random() * 60;
	bar.style.width = `${strength}%`;
	}
	});
	}

	// 일정 주기로 타겟 추가/제거 & 지도·UI 업데이트
	startTracking() {
	setInterval(() => {
	// (약 10% 확률) 타겟 하나 추가, 최대 20개까지
	if (Math.random() < 0.1 && this.targets.size < 20) {
	this.targets.add(this.generateTarget());
	}
	// (약 10% 확률) 존재하는 타겟 하나 제거
	if (Math.random() < 0.1 && this.targets.size > 0) {
	// Set을 Array로 만들어 첫 번째 요소 제거
	this.targets.delete(Array.from(this.targets)[0]);
	}

	// 지도 위 표적 및 UI 갱신
	this.updateTargets();
	this.updateDetections();
	this.updateSignalStrengths();
	}, 100); // 0.1초마다 갱신
	}
	}

	// 페이지 로드 완료 후 레이더 시스템 초기화
	window.addEventListener('load', () => {
	const radar = new RadarSystem();
	});
	</script>
	</body>
	</html>