Hugging Face's logo

Spaces:
kolaslab
/
world-sdr
Running

App Files Community
world-sdr / index.html
kolaslab's picture
kolaslab
Update index.html
55962fe verified
raw
history blame
18.9 kB
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hyperscan: Global SDR Radar(Simul)</title>
<!-- Leaflet CSS -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/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;
}
/* ์ง€๋„ ์˜์—ญ */
#map {
height: calc(100vh - 40px);
border-radius: 8px;
background: #111;
}
/* 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;
}
/* =============== ์‚ฌ์ด๋“œ๋ฐ” ์ˆ˜์‹ ๊ธฐ ๋ชฉ๋ก =============== */
.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 {
padding: 5px;
margin: 5px 0;
font-size: 12px;
border-left: 2px solid #0f0;
}
/* =============== ์ด๋ฒคํŠธ ๋กœ๊ทธ =============== */
.alert {
background: #911;
padding: 5px;
margin: 5px 0;
border-left: 2px solid #f00;
color: #f66;
}
/* =============== ํญํ’ / ์Šคํ…Œ์ด์…˜ ๋ฒ”์œ„ ํ‘œ์‹œ =============== */
.station-range {
stroke: #0f0;
stroke-width: 1;
fill: #0f0;
fill-opacity: 0.1;
}
.storm-range {
stroke: #f00;
stroke-width: 1;
fill: #f00;
fill-opacity: 0.1;
}
/* ํƒ€๊ฒŸ ๋งˆ์ปค ์Šคํƒ€์ผ (marker ์ž์ฒด๋Š” circleMarker์˜ ์˜ต์…˜์œผ๋กœ ์ฒ˜๋ฆฌ) */
</style>
</head>
<body>
<div class="container">
<!-- ===== ์‚ฌ์ด๋“œ๋ฐ” ===== -->
<div class="sidebar">
<h2>Hyperscan: Global SDR Radar(Simul)</h2>
<h3>SDR Receivers</h3>
<div id="receivers"></div>
<h3>Real-time Detections</h3>
<div id="detections"></div>
<h3>Events</h3>
<div id="events"></div>
</div>
<!-- ===== Leaflet ์ง€๋„ ===== -->
<div id="map"></div>
</div>
<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script>
// ์ „ ์„ธ๊ณ„ SDR ์Šคํ…Œ์ด์…˜ ์˜ˆ์‹œ
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: "KiwiSDR Switzerland",
url: "hb9ryz.no-ip.org:8073",
location: [47.3769, 8.5417],
frequency: "0-30 MHz",
range: 160,
active: true
},
{
name: "SUWS WebSDR UK",
url: "websdr.suws.org.uk",
location: [51.2785, -0.7642],
frequency: "0-30 MHz",
range: 150,
active: true
}
];
// ============== RadarSystem ํด๋ž˜์Šค (Leaflet ๊ธฐ๋ฐ˜) ==============
class RadarSystem {
constructor() {
// ํญํ’ ์ƒํƒœ
this.stormActive = false;
// ํญํ’ ์ค‘์‹ฌ(๋Œ€์ถฉ ์œ ๋Ÿฝ ๊ทผ๋ฐฉ)
this.stormCenter = [50.5, 5.0];
// ํญํ’ ๋ฐ˜๊ฒฝ(km)
this.stormRadius = 200;
// ํƒ€๊ฒŸ ๋ชฉ๋ก
this.targets = new Map(); // key: targetId, value: { lat, lon, ... }
// ํƒ€๊ฒŸ๋ณ„ marker Layer
this.targetMarkers = new Map();
// ํƒ€๊ฒŸ๋ณ„ signal lines (ํƒ€๊ฒŸ-์Šคํ…Œ์ด์…˜ ์—ฐ๊ฒฐ์„ )
this.targetSignalLines = new Map();
// ์ด๋ฒคํŠธ ๋กœ๊ทธ
this.eventsLog = [];
this.initializeMap();
this.renderReceivers();
this.startTracking();
}
// ===== Leaflet ์ง€๋„ ์ดˆ๊ธฐํ™” =====
initializeMap() {
this.map = L.map('map', {
center: [51.5, 5.0],
zoom: 5,
worldCopyJump: true
});
// OSM Tile Layer
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: 'ยฉ OpenStreetMap contributors'
}).addTo(this.map);
// ๊ฐ ์Šคํ…Œ์ด์…˜ ํ‘œ์‹œ (๋งˆ์ปค + ๋ฒ”์œ„ ์›)
sdrStations.forEach(st => {
// ๋งˆ์ปค
const stationMarker = L.circleMarker(st.location, {
radius: 5,
color: '#0f0',
fillColor: '#0f0',
fillOpacity: 1
}).addTo(this.map);
// ๋ฒ”์œ„ ์›
const coverage = L.circle(st.location, {
radius: st.range * 1000,
className: 'station-range'
}).addTo(this.map);
// ํˆดํŒ
stationMarker.bindTooltip(`
<b>${st.name}</b><br/>
Frequency: ${st.frequency}<br/>
Range: ${st.range} km
`);
});
}
// ===== ์‚ฌ์ด๋“œ๋ฐ” Receivers ํ‘œ์‹œ =====
renderReceivers() {
const container = document.getElementById('receivers');
container.innerHTML = sdrStations.map(st => `
<div class="receiver" id="rx-${st.url.split(':')[0]}">
<div class="status">
<div class="led ${st.active ? 'active' : 'inactive'}"></div>
<strong>${st.name}</strong>
</div>
<div>๐Ÿ“ก ${st.url}</div>
<div>๐Ÿ“ป ${st.frequency}</div>
<div>๐Ÿ“ ${st.location.join(', ')}</div>
<div>Range: ${st.range}km</div>
<div class="signal-strength">
<div class="signal-bar"></div>
</div>
</div>
`).join('');
}
// ===== ์ด๋ฒคํŠธ ๋กœ๊ทธ ์ถœ๋ ฅ =====
addEventLog(msg) {
this.eventsLog.push(msg);
const eventsDiv = document.getElementById('events');
eventsDiv.innerHTML += `<div class="alert">${msg}</div>`;
// ์˜ค๋ž˜๋œ ๋กœ๊ทธ ์ œ๊ฑฐ
if (this.eventsLog.length > 15) {
this.eventsLog.shift();
eventsDiv.removeChild(eventsDiv.firstChild);
}
}
// ===== ํญํ’ ํ† ๊ธ€ =====
toggleStorm() {
this.stormActive = !this.stormActive;
const msg = this.stormActive
? "ํญํ’ ๋ฐœ์ƒ! (๊ต๋ž€ ๊ฐ€๋Šฅ)"
: "ํญํ’์ด ์†Œ๋ฉธ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.";
this.addEventLog(msg);
// ํญํ’ ์‹œ๊ฐํ™”
// ๊ธฐ์กด ํญํ’ ๋ ˆ์ด์–ด ์žˆ์œผ๋ฉด ์ œ๊ฑฐ
if (this.stormCircle) {
this.map.removeLayer(this.stormCircle);
}
// ํญํ’ ํ™œ์„ฑํ™” ์‹œ ์ƒˆ๋กœ ํ‘œ์‹œ
if (this.stormActive) {
this.stormCircle = L.circle(this.stormCenter, {
radius: this.stormRadius * 1000,
className: 'storm-range'
}).addTo(this.map);
}
}
// ===== ๋ฌด์ž‘์œ„ ํƒ€๊ฒŸ ์ƒ์„ฑ =====
generateTarget() {
const lat = 51.5 + (Math.random()-0.5)*6; // ยฑ3๋„
const lon = 5.0 + (Math.random()-0.5)*10; // ยฑ5๋„
return {
id: Math.random().toString(36).substr(2, 6).toUpperCase(),
type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
lat,
lon,
speed: Math.floor(Math.random()*200 + 100), // kts
altitude: Math.floor(Math.random()*30000 + 1000),
heading: Math.random()*360,
signalStrength: Math.random()
};
}
// ===== ํƒ€๊ฒŸ ์ด๋™ =====
moveTarget(t) {
// heading + speed โ†’ ๋Œ€๋žต์ ์ธ ์œ„๋„/๊ฒฝ๋„ ๋ณ€ํ™”
const speedFactor = 0.00005;
const rad = t.heading * Math.PI / 180;
t.lat += Math.cos(rad) * t.speed * speedFactor;
t.lon += Math.sin(rad) * t.speed * speedFactor;
// ํญํ’ ์•ˆ์ด๋ฉด signalStrength ๊ฐ์†Œ
if (this.stormActive) {
const distStorm = this.getDistance(
t.lat, t.lon,
this.stormCenter[0], this.stormCenter[1]
);
if (distStorm <= this.stormRadius) {
t.signalStrength = Math.max(0, t.signalStrength - 0.01);
}
}
}
// ===== ๋‘ ์ขŒํ‘œ ๊ฐ„ ๊ฑฐ๋ฆฌ(km) (Haversine) =====
getDistance(lat1, lon1, lat2, lon2) {
const R = 6371;
const dLat = (lat2 - lat1) * Math.PI/180;
const dLon = (lon2 - lon1) * Math.PI/180;
const a = Math.sin(dLat/2)*Math.sin(dLat/2)
+ Math.cos(lat1*Math.PI/180)*Math.cos(lat2*Math.PI/180)
* Math.sin(dLon/2)*Math.sin(dLon/2);
return R * 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
}
// ===== ํ‘œ์ ยท์—ฐ๊ฒฐ์„  ์ง€๋„์—์„œ ๊ฐฑ์‹  =====
updateTargetsOnMap() {
// 1) ๊ธฐ์กด์— ์žˆ๋˜ ๋ชจ๋“  ์—ฐ๊ฒฐ์„  ์ œ๊ฑฐ
this.targetSignalLines.forEach(line => {
this.map.removeLayer(line);
});
this.targetSignalLines.clear();
// 2) ๊ฐ ํƒ€๊ฒŸ ๋งˆ์ปค ์œ„์น˜ ๊ฐฑ์‹ 
this.targets.forEach((t, id) => {
// ๋งˆ์ปค๊ฐ€ ์ด๋ฏธ ์žˆ์œผ๋ฉด ์—…๋ฐ์ดํŠธ, ์—†์œผ๋ฉด ์ƒ์„ฑ
let marker = this.targetMarkers.get(id);
if (!marker) {
marker = L.circleMarker([t.lat, t.lon], {
radius: 4,
color: (t.type === 'aircraft') ? '#ff0' : '#0ff',
fillColor: (t.type === 'aircraft') ? '#ff0' : '#0ff',
fillOpacity: 1
}).addTo(this.map);
// ํˆดํŒ
marker.bindTooltip(this.makeTargetTooltip(t), { sticky: true });
this.targetMarkers.set(id, marker);
} else {
// ์ขŒํ‘œ, ํˆดํŒ ์—…๋ฐ์ดํŠธ
marker.setLatLng([t.lat, t.lon]);
marker.setTooltipContent(this.makeTargetTooltip(t));
// ์ƒ‰๊น” ์—…๋ฐ์ดํŠธ(ํƒ€๊ฒŸ ์ƒํƒœ๊ฐ€ ๋ณ€ํ–ˆ์„ ์ˆ˜๋„)
marker.setStyle({
color: (t.type === 'aircraft') ? '#ff0' : '#0ff',
fillColor: (t.type === 'aircraft') ? '#ff0' : '#0ff'
});
}
// 3) ์Šคํ…Œ์ด์…˜ ๋ฒ”์œ„ ๋‚ด๋ฉด ์—ฐ๊ฒฐ์„  ํ‘œ์‹œ
sdrStations.forEach(st => {
if (st.active) {
const dist = this.getDistance(t.lat, t.lon, st.location[0], st.location[1]);
if (dist <= st.range) {
const line = L.polyline([
[t.lat, t.lon],
st.location
], {
color: '#0f0',
opacity: t.signalStrength * 0.3,
weight: 1
}).addTo(this.map);
this.targetSignalLines.set(`${id}-${st.name}`, line);
}
}
});
});
}
// ===== ํƒ€๊ฒŸ ํˆดํŒ ๋ฌธ์ž์—ด =====
makeTargetTooltip(t) {
return `
<b>${t.id}</b><br/>
Type: ${t.type}<br/>
Speed: ${t.speed} kts<br/>
${t.type === 'aircraft' ? `Alt: ${t.altitude} ft<br/>` : ''}
Sig: ${(t.signalStrength*100).toFixed(0)}%
`;
}
// ===== ์‹ค์‹œ๊ฐ„ Detections ์‚ฌ์ด๋“œ๋ฐ” ํ‘œ์‹œ =====
updateDetections() {
const detections = document.getElementById('detections');
let html = '';
this.targets.forEach(t => {
html += `
<div class="detection">
${t.type === 'aircraft' ? 'โœˆ๏ธ' : '๐Ÿš—'}
${t.id}
${t.type === 'aircraft' ? `Alt: ${t.altitude}ft` : ''}
Speed: ${t.speed}kts
Sig: ${(t.signalStrength*100).toFixed(0)}%
</div>
`;
});
detections.innerHTML = html;
}
// ===== ์ˆ˜์‹ ๊ธฐ ์‹ ํ˜ธ ๋ฐ” ์—…๋ฐ์ดํŠธ =====
updateSignalStrengths() {
sdrStations.forEach(st => {
const bar = document.querySelector(`#rx-${st.url.split(':')[0]} .signal-bar`);
if (bar) {
const strength = 40 + Math.random() * 60; // 40~100
bar.style.width = `${strength}%`;
}
});
}
// ===== ๋ฉ”์ธ ์‹œ๋ฎฌ๋ ˆ์ด์…˜ ๋ฃจํ”„ =====
startTracking() {
// ํญํ’์„ 10์ดˆ ๊ฐ„๊ฒฉ์œผ๋กœ 20% ํ™•๋ฅ ๋กœ ํ† ๊ธ€
setInterval(() => {
if (Math.random() < 0.2) {
this.toggleStorm();
}
}, 10000);
// 100ms ๊ฐ„๊ฒฉ์œผ๋กœ ๋ฐ˜๋ณต
setInterval(() => {
// (10% ํ™•๋ฅ ) ์ƒˆ ํƒ€๊ฒŸ ์ถ”๊ฐ€, ์ตœ๋Œ€ 15๊ฐœ
if (Math.random() < 0.1 && this.targets.size < 15) {
const newT = this.generateTarget();
this.targets.set(newT.id, newT);
this.addEventLog(`ํƒ€๊ฒŸ ์ถœํ˜„: ${newT.id}`);
}
// (10% ํ™•๋ฅ ) ํƒ€๊ฒŸ ํ•˜๋‚˜ ์ œ๊ฑฐ
if (Math.random() < 0.1 && this.targets.size > 0) {
// ๋งจ ์ฒ˜์Œ ํƒ€๊ฒŸ ํ•˜๋‚˜ ๊บผ๋‚ด๊ธฐ
const firstKey = Array.from(this.targets.keys())[0];
this.removeTarget(firstKey);
}
// ๋ชจ๋“  ํƒ€๊ฒŸ ์ด๋™
this.targets.forEach((t, id) => {
this.moveTarget(t);
});
// ์ง€๋„/์—ฐ๊ฒฐ์„  ๊ฐฑ์‹ 
this.updateTargetsOnMap();
// ์‚ฌ์ด๋“œ๋ฐ” ํƒ์ง€ ๋ชฉ๋ก ๊ฐฑ์‹ 
this.updateDetections();
// ์ˆ˜์‹ ๊ธฐ ์‹ ํ˜ธ ๋ฐ” ๊ฐฑ์‹ 
this.updateSignalStrengths();
}, 100);
}
// ํƒ€๊ฒŸ ์ œ๊ฑฐ ์‹œ ๋งˆ์ปค ๋ฐ ์—ฐ๊ฒฐ์„  ์ •๋ฆฌ
removeTarget(id) {
const removed = this.targets.get(id);
if (!removed) return;
this.targets.delete(id);
this.addEventLog(`ํƒ€๊ฒŸ ์†Œ๋ฉธ: ${removed.id}`);
// ๋งˆ์ปค ์ œ๊ฑฐ
const marker = this.targetMarkers.get(id);
if (marker) {
this.map.removeLayer(marker);
this.targetMarkers.delete(id);
}
// ์—ฐ๊ฒฐ์„  ์ œ๊ฑฐ
[...this.targetSignalLines.keys()].forEach(k => {
if (k.includes(id)) {
this.map.removeLayer(this.targetSignalLines.get(k));
this.targetSignalLines.delete(k);
}
});
}
}
// ===== ํŽ˜์ด์ง€ ๋กœ๋“œ ํ›„ ์‹œ์ž‘ =====
window.addEventListener('load', () => {
const radar = new RadarSystem();
});
</script>
</body>
</html>