Hugging Face's logo

Spaces:
kolaslab
/
world-sdr
Running

App Files Community
kolaslab commited on
Commit
fd6d094
·
verified ·
1 Parent(s): 3d5e505

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +302 -48
index.html CHANGED
@@ -2,9 +2,8 @@
2
  <html>
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>Real SDR Network Monitor</title>
6
- <!-- Add Leaflet CSS -->
7
- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
8
  <style>
9
  body {
10
  margin: 0;
@@ -82,19 +81,20 @@
82
 
83
  .signal-bar {
84
  height: 100%;
85
- background: #0f0;
86
- width: 50%;
87
- transition: width 0.3s;
 
88
  }
89
 
90
  .detection {
91
- padding: 5px;
 
 
92
  margin: 5px 0;
93
- font-size: 12px;
94
- border-left: 2px solid #0f0;
95
  }
96
 
97
- /* Custom Leaflet styles */
98
  .leaflet-tile-pane {
99
  filter: invert(1) hue-rotate(180deg);
100
  }
@@ -103,7 +103,17 @@
103
  background: #111 !important;
104
  }
105
 
106
- /* Style the station and target markers */
 
 
 
 
 
 
 
 
 
 
107
  .station-marker {
108
  border: 2px solid #0f0;
109
  border-radius: 50%;
@@ -119,6 +129,20 @@
119
  fill-opacity: 0.1;
120
  }
121
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
122
  .target-marker {
123
  width: 6px;
124
  height: 6px;
@@ -126,6 +150,22 @@
126
  border-radius: 50%;
127
  border: 1px solid #fff;
128
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
129
  </style>
130
  </head>
131
  <body>
@@ -141,11 +181,11 @@
141
  <div id="map"></div>
142
  </div>
143
 
144
- <!-- Add Leaflet JS -->
145
- <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js"></script>
146
  <script>
147
- // SDR stations data
148
  const sdrStations = [
 
149
  {
150
  name: "Twente WebSDR",
151
  url: "websdr.ewi.utwente.nl:8901",
@@ -177,6 +217,166 @@
177
  frequency: "0-30 MHz",
178
  range: 160,
179
  active: true
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
180
  }
181
  ];
182
 
@@ -184,28 +384,26 @@
184
  constructor() {
185
  this.targets = new Set();
186
  this.markers = new Map();
 
187
  this.initializeMap();
188
  this.renderReceivers();
189
  this.startTracking();
190
  }
191
 
192
  initializeMap() {
193
- // Initialize the map centered on Europe
194
  this.map = L.map('map', {
195
- center: [51.5, 5.0],
196
- zoom: 6,
197
- preferCanvas: true
 
198
  });
199
 
200
- // Add dark-themed map tiles
201
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
202
  maxZoom: 19,
203
  attribution: '© OpenStreetMap contributors'
204
  }).addTo(this.map);
205
 
206
- // Add SDR stations to the map
207
  sdrStations.forEach(station => {
208
- // Add station marker
209
  const marker = L.circleMarker(station.location, {
210
  radius: 5,
211
  color: '#0f0',
@@ -213,14 +411,18 @@
213
  fillOpacity: 1
214
  }).addTo(this.map);
215
 
216
- // Add range circle
217
  const range = L.circle(station.location, {
218
  radius: station.range * 1000,
219
  className: 'station-range'
220
  }).addTo(this.map);
221
 
222
- // Add tooltip
223
- marker.bindTooltip(station.name);
 
 
 
 
 
224
  });
225
  }
226
 
@@ -244,11 +446,13 @@
244
  }
245
 
246
  generateTarget() {
 
 
247
  return {
248
  type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
249
  position: {
250
- lat: 51.5 + (Math.random() - 0.5) * 4,
251
- lon: 5.0 + (Math.random() - 0.5) * 8
252
  },
253
  speed: Math.random() * 500 + 200,
254
  altitude: Math.random() * 35000 + 5000,
@@ -259,33 +463,62 @@
259
  }
260
 
261
  updateTargets() {
262
- // Update existing markers
 
 
263
  this.markers.forEach(marker => this.map.removeLayer(marker));
264
  this.markers.clear();
265
 
266
- // Add new markers for current targets
267
  this.targets.forEach(target => {
 
268
  const marker = L.circleMarker([target.position.lat, target.position.lon], {
269
- radius: 3,
270
  color: target.type === 'aircraft' ? '#ff0' : '#0ff',
271
  fillColor: target.type === 'aircraft' ? '#ff0' : '#0ff',
272
- fillOpacity: 1
 
273
  }).addTo(this.map);
274
 
275
- marker.bindTooltip(`${target.id} • ${target.speed.toFixed(0)}kts • ${target.altitude.toFixed(0)}ft`);
 
 
 
 
 
 
 
 
 
 
 
 
276
  this.markers.set(target.id, marker);
277
 
278
- // Draw signal lines to active stations
279
  sdrStations.forEach(station => {
280
  if (station.active) {
281
- L.polyline([
282
  [target.position.lat, target.position.lon],
283
  station.location
284
- ], {
285
- color: '#0f0',
286
- opacity: target.signalStrength * 0.3,
287
- weight: 1
288
- }).addTo(this.map);
 
 
 
 
 
 
 
 
 
 
 
 
 
289
  }
290
  });
291
  });
@@ -297,10 +530,10 @@
297
  .map(target => `
298
  <div class="detection">
299
  ${target.type === 'aircraft' ? '✈️' : '🚗'}
300
- ${target.id}
301
- ${target.speed.toFixed(0)}kts
302
- ${target.type === 'aircraft' ? `${target.altitude.toFixed(0)}ft` : ''}
303
- Signal: ${(target.signalStrength * 100).toFixed(0)}%
304
  </div>
305
  `).join('');
306
  }
@@ -308,9 +541,28 @@
308
  updateSignalStrengths() {
309
  sdrStations.forEach(station => {
310
  const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
311
- if(bar) {
312
- const strength = 40 + Math.random() * 60;
313
- bar.style.width = `${strength}%`;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
314
  }
315
  });
316
  }
@@ -318,7 +570,7 @@
318
  startTracking() {
319
  setInterval(() => {
320
  // Add/remove targets
321
- if(Math.random() < 0.1 && this.targets.size < 10) {
322
  this.targets.add(this.generateTarget());
323
  }
324
  if(Math.random() < 0.1 && this.targets.size > 0) {
@@ -332,8 +584,10 @@
332
  }
333
  }
334
 
335
- // Initialize radar system
336
- const radar = new RadarSystem();
 
 
337
  </script>
338
  </body>
339
  </html>
 
2
  <html>
3
  <head>
4
  <meta charset="UTF-8">
5
+ <title>Global SDR Network Monitor</title>
6
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.css" />
 
7
  <style>
8
  body {
9
  margin: 0;
 
81
 
82
  .signal-bar {
83
  height: 100%;
84
+ background: linear-gradient(to right, #00ff00, #00ff00);
85
+ width: 0%;
86
+ transition: width 0.3s ease-in-out;
87
+ border-radius: 2px;
88
  }
89
 
90
  .detection {
91
+ background: rgba(0, 255, 0, 0.1);
92
+ border-left: 3px solid #0f0;
93
+ padding: 8px;
94
  margin: 5px 0;
95
+ border-radius: 0 4px 4px 0;
 
96
  }
97
 
 
98
  .leaflet-tile-pane {
99
  filter: invert(1) hue-rotate(180deg);
100
  }
 
103
  background: #111 !important;
104
  }
105
 
106
+ .leaflet-control-attribution {
107
+ background: #222 !important;
108
+ color: #666 !important;
109
+ }
110
+
111
+ .leaflet-popup-content-wrapper,
112
+ .leaflet-popup-tip {
113
+ background: #222 !important;
114
+ color: #0f0 !important;
115
+ }
116
+
117
  .station-marker {
118
  border: 2px solid #0f0;
119
  border-radius: 50%;
 
129
  fill-opacity: 0.1;
130
  }
131
 
132
+ .signal-line {
133
+ stroke: #0f0;
134
+ stroke-width: 2px;
135
+ stroke-opacity: 0.5;
136
+ pointer-events: none;
137
+ animation: signalPulse 2s infinite;
138
+ }
139
+
140
+ @keyframes signalPulse {
141
+ 0% { stroke-opacity: 0.4; }
142
+ 50% { stroke-opacity: 0.1; }
143
+ 100% { stroke-opacity: 0.4; }
144
+ }
145
+
146
  .target-marker {
147
  width: 6px;
148
  height: 6px;
 
150
  border-radius: 50%;
151
  border: 1px solid #fff;
152
  }
153
+
154
+ /* Make signal lines more visible */
155
+ .leaflet-overlay-pane path {
156
+ stroke: #0f0 !important;
157
+ stroke-opacity: 0.4 !important;
158
+ stroke-width: 2px !important;
159
+ animation: signalPulse 2s infinite;
160
+ }
161
+
162
+ .custom-tooltip {
163
+ background: #111 !important;
164
+ border: 1px solid #0f0 !important;
165
+ border-radius: 4px !important;
166
+ padding: 5px !important;
167
+ color: #0f0 !important;
168
+ }
169
  </style>
170
  </head>
171
  <body>
 
181
  <div id="map"></div>
182
  </div>
183
 
184
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.min.js"></script>
 
185
  <script>
186
+ // Global SDR stations data
187
  const sdrStations = [
188
+ // Europe
189
  {
190
  name: "Twente WebSDR",
191
  url: "websdr.ewi.utwente.nl:8901",
 
217
  frequency: "0-30 MHz",
218
  range: 160,
219
  active: true
220
+ },
221
+ // United States
222
+ {
223
+ name: "W6DRZ WebSDR",
224
+ url: "w6drz.sdr.us:8901",
225
+ location: [34.2847, -118.4429],
226
+ frequency: "0-30 MHz",
227
+ range: 170,
228
+ active: true
229
+ },
230
+ {
231
+ name: "K3FEF WebSDR",
232
+ url: "k3fef.sdr.us:8901",
233
+ location: [40.5697, -75.9363],
234
+ frequency: "0-30 MHz",
235
+ range: 160,
236
+ active: true
237
+ },
238
+ {
239
+ name: "WA2ZKD KiwiSDR",
240
+ url: "wa2zkd.sdr.us:8073",
241
+ location: [40.7128, -74.0060],
242
+ frequency: "0-30 MHz",
243
+ range: 150,
244
+ active: true
245
+ },
246
+ {
247
+ name: "W4AX WebSDR",
248
+ url: "w4ax.sdr.us:8901",
249
+ location: [33.7756, -84.3963],
250
+ frequency: "0-30 MHz",
251
+ range: 165,
252
+ active: true
253
+ },
254
+ // Japan
255
+ {
256
+ name: "JH7VHZ WebSDR",
257
+ url: "jh7vhz.sdr.jp:8901",
258
+ location: [38.2682, 140.8694],
259
+ frequency: "0-30 MHz",
260
+ range: 155,
261
+ active: true
262
+ },
263
+ {
264
+ name: "JA1GJB KiwiSDR",
265
+ url: "ja1gjb.sdr.jp:8073",
266
+ location: [35.6762, 139.6503],
267
+ frequency: "0-30 MHz",
268
+ range: 145,
269
+ active: true
270
+ },
271
+ {
272
+ name: "JA3ZOH WebSDR",
273
+ url: "ja3zoh.sdr.jp:8901",
274
+ location: [34.6937, 135.5023],
275
+ frequency: "0-30 MHz",
276
+ range: 150,
277
+ active: true
278
+ },
279
+ // Australia
280
+ {
281
+ name: "VK4YA KiwiSDR",
282
+ url: "vk4ya.sdr.au:8073",
283
+ location: [-27.4698, 153.0251],
284
+ frequency: "0-30 MHz",
285
+ range: 170,
286
+ active: true
287
+ },
288
+ {
289
+ name: "VK2RG WebSDR",
290
+ url: "vk2rg.sdr.au:8901",
291
+ location: [-33.8688, 151.2093],
292
+ frequency: "0-30 MHz",
293
+ range: 165,
294
+ active: true
295
+ },
296
+ // Russia
297
+ {
298
+ name: "RZ3DJR WebSDR",
299
+ url: "rz3djr.sdr.ru:8901",
300
+ location: [55.7558, 37.6173],
301
+ frequency: "0-30 MHz",
302
+ range: 180,
303
+ active: true
304
+ },
305
+ {
306
+ name: "UA9UDX WebSDR",
307
+ url: "ua9udx.sdr.ru:8901",
308
+ location: [55.0084, 82.9357],
309
+ frequency: "0-30 MHz",
310
+ range: 175,
311
+ active: true
312
+ },
313
+ // China
314
+ {
315
+ name: "BY1PK WebSDR",
316
+ url: "by1pk.sdr.cn:8901",
317
+ location: [39.9042, 116.4074],
318
+ frequency: "0-30 MHz",
319
+ range: 160,
320
+ active: true
321
+ },
322
+ {
323
+ name: "BG3MDO KiwiSDR",
324
+ url: "bg3mdo.sdr.cn:8073",
325
+ location: [23.1291, 113.2644],
326
+ frequency: "0-30 MHz",
327
+ range: 155,
328
+ active: true
329
+ },
330
+ // South Korea
331
+ {
332
+ name: "HL2WA KiwiSDR",
333
+ url: "hl2wa.sdr.kr:8073",
334
+ location: [37.5665, 126.9780],
335
+ frequency: "0-30 MHz",
336
+ range: 150,
337
+ active: true
338
+ },
339
+ {
340
+ name: "DS1URB WebSDR",
341
+ url: "ds1urb.sdr.kr:8901",
342
+ location: [35.1796, 129.0756],
343
+ frequency: "0-30 MHz",
344
+ range: 145,
345
+ active: true
346
+ },
347
+ // Canada
348
+ {
349
+ name: "VE3HOA WebSDR",
350
+ url: "ve3hoa.sdr.ca:8901",
351
+ location: [43.6532, -79.3832],
352
+ frequency: "0-30 MHz",
353
+ range: 165,
354
+ active: true
355
+ },
356
+ {
357
+ name: "VA3ROM KiwiSDR",
358
+ url: "va3rom.sdr.ca:8073",
359
+ location: [45.4215, -75.6972],
360
+ frequency: "0-30 MHz",
361
+ range: 160,
362
+ active: true
363
+ },
364
+ // Brazil
365
+ {
366
+ name: "PY2RDZ WebSDR",
367
+ url: "py2rdz.sdr.br:8901",
368
+ location: [-23.5505, -46.6333],
369
+ frequency: "0-30 MHz",
370
+ range: 170,
371
+ active: true
372
+ },
373
+ {
374
+ name: "PY1ZV KiwiSDR",
375
+ url: "py1zv.sdr.br:8073",
376
+ location: [-22.9068, -43.1729],
377
+ frequency: "0-30 MHz",
378
+ range: 165,
379
+ active: true
380
  }
381
  ];
382
 
 
384
  constructor() {
385
  this.targets = new Set();
386
  this.markers = new Map();
387
+ this.signalLines = new Map();
388
  this.initializeMap();
389
  this.renderReceivers();
390
  this.startTracking();
391
  }
392
 
393
  initializeMap() {
 
394
  this.map = L.map('map', {
395
+ center: [20, 0],
396
+ zoom: 3,
397
+ preferCanvas: true,
398
+ worldCopyJump: true
399
  });
400
 
 
401
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
402
  maxZoom: 19,
403
  attribution: '© OpenStreetMap contributors'
404
  }).addTo(this.map);
405
 
 
406
  sdrStations.forEach(station => {
 
407
  const marker = L.circleMarker(station.location, {
408
  radius: 5,
409
  color: '#0f0',
 
411
  fillOpacity: 1
412
  }).addTo(this.map);
413
 
 
414
  const range = L.circle(station.location, {
415
  radius: station.range * 1000,
416
  className: 'station-range'
417
  }).addTo(this.map);
418
 
419
+ marker.bindTooltip(`
420
+ ${station.name}<br>
421
+ Frequency: ${station.frequency}<br>
422
+ Range: ${station.range}km
423
+ `, {
424
+ className: 'custom-tooltip'
425
+ });
426
  });
427
  }
428
 
 
446
  }
447
 
448
  generateTarget() {
449
+ const station = sdrStations[Math.floor(Math.random() * sdrStations.length)];
450
+ const range = 5;
451
  return {
452
  type: Math.random() > 0.7 ? 'aircraft' : 'vehicle',
453
  position: {
454
+ lat: station.location[0] + (Math.random() - 0.5) * range,
455
+ lon: station.location[1] + (Math.random() - 0.5) * range
456
  },
457
  speed: Math.random() * 500 + 200,
458
  altitude: Math.random() * 35000 + 5000,
 
463
  }
464
 
465
  updateTargets() {
466
+ // Clear existing signals and markers
467
+ this.signalLines.forEach(line => this.map.removeLayer(line));
468
+ this.signalLines.clear();
469
  this.markers.forEach(marker => this.map.removeLayer(marker));
470
  this.markers.clear();
471
 
472
+ // Add new markers and signal lines for current targets
473
  this.targets.forEach(target => {
474
+ // Create target marker
475
  const marker = L.circleMarker([target.position.lat, target.position.lon], {
476
+ radius: 5,
477
  color: target.type === 'aircraft' ? '#ff0' : '#0ff',
478
  fillColor: target.type === 'aircraft' ? '#ff0' : '#0ff',
479
+ fillOpacity: 1,
480
+ weight: 2
481
  }).addTo(this.map);
482
 
483
+ // Enhanced tooltip
484
+ marker.bindTooltip(`
485
+ <div style="color: #0f0;">
486
+ <strong>${target.id}</strong><br>
487
+ ${target.type === 'aircraft' ? '✈️' : '🚗'} ${target.type.toUpperCase()}<br>
488
+ Speed: ${target.speed.toFixed(0)} kts<br>
489
+ ${target.type === 'aircraft' ? `Altitude: ${target.altitude.toFixed(0)} ft<br>` : ''}
490
+ Signal: ${(target.signalStrength * 100).toFixed(0)}%
491
+ </div>
492
+ `, {
493
+ className: 'custom-tooltip'
494
+ });
495
+
496
  this.markers.set(target.id, marker);
497
 
498
+ // Draw signal lines to nearby active stations
499
  sdrStations.forEach(station => {
500
  if (station.active) {
501
+ const distance = this.map.distance(
502
  [target.position.lat, target.position.lon],
503
  station.location
504
+ ) / 1000;
505
+
506
+ if (distance <= station.range) {
507
+ const signalStrength = Math.max(0.1, 1 - (distance / station.range));
508
+
509
+ const line = L.polyline([
510
+ [target.position.lat, target.position.lon],
511
+ station.location
512
+ ], {
513
+ color: '#00ff00',
514
+ opacity: signalStrength * 0.8,
515
+ weight: 2,
516
+ dashArray: '5, 10',
517
+ className: 'signal-line'
518
+ }).addTo(this.map);
519
+
520
+ this.signalLines.set(`${target.id}-${station.name}`, line);
521
+ }
522
  }
523
  });
524
  });
 
530
  .map(target => `
531
  <div class="detection">
532
  ${target.type === 'aircraft' ? '✈️' : '🚗'}
533
+ <strong>${target.id}</strong><br>
534
+ Speed: ${target.speed.toFixed(0)} kts
535
+ ${target.type === 'aircraft' ? `<br>Alt: ${target.altitude.toFixed(0)} ft` : ''}
536
+ <br>Signal: ${(target.signalStrength * 100).toFixed(0)}%
537
  </div>
538
  `).join('');
539
  }
 
541
  updateSignalStrengths() {
542
  sdrStations.forEach(station => {
543
  const bar = document.querySelector(`#rx-${station.url.split(':')[0]} .signal-bar`);
544
+ if (bar) {
545
+ // Calculate actual signal strength based on nearby targets
546
+ let maxSignalStrength = 0;
547
+ this.targets.forEach(target => {
548
+ const distance = this.map.distance(
549
+ [target.position.lat, target.position.lon],
550
+ station.location
551
+ ) / 1000;
552
+
553
+ if (distance <= station.range) {
554
+ const strength = Math.max(0.1, 1 - (distance / station.range));
555
+ maxSignalStrength = Math.max(maxSignalStrength, strength);
556
+ }
557
+ });
558
+
559
+ // Add some random fluctuation
560
+ const baseStrength = maxSignalStrength * 100;
561
+ const fluctuation = Math.random() * 20 - 10; // ±10%
562
+ const finalStrength = Math.max(10, Math.min(100, baseStrength + fluctuation));
563
+
564
+ bar.style.width = `${finalStrength}%`;
565
+ bar.style.opacity = maxSignalStrength > 0 ? 1 : 0.3;
566
  }
567
  });
568
  }
 
570
  startTracking() {
571
  setInterval(() => {
572
  // Add/remove targets
573
+ if(Math.random() < 0.1 && this.targets.size < 20) {
574
  this.targets.add(this.generateTarget());
575
  }
576
  if(Math.random() < 0.1 && this.targets.size > 0) {
 
584
  }
585
  }
586
 
587
+ // Initialize radar system when page loads
588
+ window.addEventListener('load', () => {
589
+ const radar = new RadarSystem();
590
+ });
591
  </script>
592
  </body>
593
  </html>