Repository navigation
Expand file tree
/
Copy pathindex.html
More file actions
727 lines (694 loc) · 46.3 KB
/
Copy pathindex.html
File metadata and controls
727 lines (694 loc) · 46.3 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="description" content="Gerador de Layouts de Antenas BINGO - Ferramenta online gratuita para design, simulação e análise de arranjos de antenas para rádio astronomia. Crie layouts grid, espiral, hexagonal, visualize padrões de feixe 2D/3D, analise PSF e exporte para OSKAR.">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1, max-video-preview:-1">
<meta name="author" content="Geovanni Fernandes Garcia">
<meta name="keywords" content="BINGO, antenas, layout generator, design de antenas, simulação de antenas, rádio astronomia, PSF, padrão de feixe, OSKAR, BAO, tiles de antena, rádio telescópio, cosmologia, phased array, beam pattern, array factor">
<meta name="theme-color" content="#2c3e50">
<meta name="color-scheme" content="light dark">
<meta name="generator" content="BINGO Layout Generator v1.0.3">
<link rel="canonical" href="https://geovannisz.github.io/LayoutGeneratorBINGO/">
<title>Gerador de Layouts de Antenas BINGO | Design e Simulação de Arranjos | Rádio Astronomia</title>
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website">
<meta property="og:url" content="https://geovannisz.github.io/LayoutGeneratorBINGO/">
<meta property="og:title" content="Gerador de Layouts de Antenas BINGO | Design e Simulação de Arranjos">
<meta property="og:description" content="Ferramenta online gratuita para design, simulação e análise de arranjos de antenas para o projeto BINGO de rádio astronomia. Visualize padrões de feixe, analise PSF e exporte para OSKAR.">
<meta property="og:image" content="https://geovannisz.github.io/LayoutGeneratorBINGO/BINGO-ABDUS.png">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="BINGO Layout Generator - Ferramenta de design de antenas">
<meta property="og:locale" content="pt_BR">
<meta property="og:site_name" content="BINGO Layout Generator">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:url" content="https://geovannisz.github.io/LayoutGeneratorBINGO/">
<meta name="twitter:title" content="Gerador de Layouts de Antenas BINGO | Design e Simulação de Arranjos">
<meta name="twitter:description" content="Ferramenta online gratuita para design, simulação e análise de arranjos de antenas para o projeto BINGO de rádio astronomia.">
<meta name="twitter:image" content="https://geovannisz.github.io/LayoutGeneratorBINGO/BINGO-ABDUS.png">
<meta name="twitter:image:alt" content="BINGO Layout Generator - Ferramenta de design de antenas">
<meta name="twitter:creator" content="@geovannisz">
<!-- Preconnect for performance -->
<link rel="preconnect" href="https://cdn.plot.ly" crossorigin>
<link rel="preconnect" href="https://unpkg.com" crossorigin>
<link rel="preconnect" href="https://cdnjs.cloudflare.com" crossorigin>
<link rel="dns-prefetch" href="https://dweb.link">
<link rel="dns-prefetch" href="https://ipfs.io">
<link rel="stylesheet" href="css/styles.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="favicon.ico">
<script src='https://cdn.plot.ly/plotly-2.27.0.min.js'></script>
<!-- Structured Data - WebApplication -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "WebApplication",
"name": "Gerador de Layouts de Antenas BINGO",
"alternateName": "BINGO Layout Generator",
"description": "Ferramenta online interativa e gratuita para design, simulação e análise de layouts de antenas (tiles) para o projeto de rádio astronomia BINGO. Gere diversos tipos de arranjos (grid, espiral, hexagonal, phyllotaxis), visualize padrões de feixe 2D/3D, analise a PSF (Point Spread Function), explore em mapa interativo e exporte configurações para OSKAR.",
"applicationCategory": "DesignApplication",
"applicationSubCategory": "Scientific Software",
"operatingSystem": "Web-based",
"url": "https://geovannisz.github.io/LayoutGeneratorBINGO/",
"browserRequirements": "HTML5-compatible browser with JavaScript and Canvas support",
"softwareVersion": "1.0.3",
"releaseNotes": "https://github.com/Geovannisz/LayoutGeneratorBINGO/releases",
"screenshot": "https://geovannisz.github.io/LayoutGeneratorBINGO/BINGO-ABDUS.png",
"featureList": [
"Geração de layouts Grid, Espiral, Anéis, Losango, Hexagonal, Phyllotaxis",
"Visualização de padrão de feixe 2D e 3D",
"Análise de PSF (Point Spread Function)",
"Mapa interativo com coordenadas WGS84",
"Exportação para formato OSKAR",
"Suporte a WebGPU para cálculos acelerados"
],
"author": {
"@type": "Person",
"name": "Geovanni Fernandes Garcia",
"url": "https://github.com/Geovannisz"
},
"publisher": {
"@type": "Person",
"name": "Geovanni Fernandes Garcia"
},
"license": "https://opensource.org/licenses/MIT",
"isAccessibleForFree": true,
"inLanguage": "pt-BR",
"keywords": "BINGO, antenas, layout, design de antenas, simulação de antenas, rádio astronomia, PSF, padrão de feixe, OSKAR, BAO, gerador de layouts de antenas, software BINGO, análise de arranjo de antenas, rádio telescópio, cosmologia BINGO, simulação OSKAR, visualização científica de dados, ferramenta de design de antena, tiles de antena, phased array, beam pattern"
}
</script>
<!-- Structured Data - SoftwareApplication for broader reach -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "SoftwareApplication",
"name": "BINGO Layout Generator",
"applicationCategory": "Scientific Software",
"operatingSystem": "Any (Web Browser)",
"offers": {
"@type": "Offer",
"price": "0",
"priceCurrency": "USD"
}
}
</script>
<!-- Structured Data - Organization/Project -->
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "ResearchProject",
"name": "BINGO Telescope",
"alternateName": "Baryon Acoustic Oscillations from Integrated Neutral Gas Observations",
"url": "https://bingotelescope.org/",
"description": "Projeto de rádio telescópio para estudar oscilações acústicas de bárions através de observações de gás neutro integrado."
}
</script>
</head>
<body>
<a href="#main-content" class="skip-link sr-only">Pular para o conteúdo principal</a>
<header role="banner">
<h1>Gerador de Layouts de Antenas BINGO</h1>
<nav aria-label="Controles do site">
<div class="theme-toggle">
<label for="dark-mode-toggle">Modo Escuro</label>
<input type="checkbox" id="dark-mode-toggle">
</div>
</nav>
</header>
<main id="main-content" class="container" role="main">
<!-- Navegação por Abas -->
<nav class="tab-navigation" role="tablist" aria-label="Seções principais">
<button class="tab-btn active" data-tab="tab-layout" role="tab" aria-selected="true" aria-controls="tab-layout">
<i class="fas fa-satellite-dish"></i> Layout Principal
</button>
<button class="tab-btn" data-tab="tab-oskar-config" role="tab" aria-selected="false" aria-controls="tab-oskar-config">
<i class="fas fa-cogs"></i> Configuração OSKAR
</button>
<button class="tab-btn" data-tab="tab-sky-model" role="tab" aria-selected="false" aria-controls="tab-sky-model">
<i class="fas fa-star"></i> Modelo de Céu
</button>
<button class="tab-btn" data-tab="tab-uv-coverage" role="tab" aria-selected="false" aria-controls="tab-uv-coverage">
<i class="fas fa-project-diagram"></i> Cobertura UV
</button>
</nav>
<!-- === ABA 1: LAYOUT PRINCIPAL === -->
<div id="tab-layout" class="tab-content active" role="tabpanel">
<!-- Stations + Mapa Interativo em layout lado-a-lado -->
<section class="station-map-row">
<!-- Coluna ESQUERDA: Gerador de Stations -->
<div class="station-generator-panel">
<h3><i class="fas fa-broadcast-tower"></i> Gerador de Posições de Stations</h3>
<div class="form-group">
<label for="station-layout-type">Tipo de Layout:</label>
<select id="station-layout-type">
<option value="grid">Grid Regular</option>
<option value="circular">Circular (Anel)</option>
<option value="spiral">Espiral</option>
<option value="y_shape">Forma em Y</option>
<option value="cross">Cruz</option>
<option value="random">Aleatório</option>
<option value="logarithmic">Logarítmico</option>
<option value="sunflower">Girassol (Fibonacci)</option>
<option value="dual_ring">Anéis Duplos</option>
<option value="elliptical">Elíptico</option>
</select>
</div>
<div class="form-group">
<label for="station-count">Número de Stations:</label>
<input type="number" id="station-count" value="7" min="2" max="100" step="1">
</div>
<div class="form-group">
<label for="station-spacing">Espaçamento (m): <span id="station-spacing-value">300</span></label>
<input type="range" id="station-spacing" min="0" max="1" step="0.001" value="0.565"
title="Escala logarítmica: 15m — 3000m">
<small class="slider-hint">Escala log: 15m — 3km (~30× a escala dos tiles)</small>
</div>
<!-- Parâmetros extras por tipo de layout -->
<div id="station-extra-params" class="station-extra-params"></div>
<div class="button-group">
<button id="station-generate-btn" class="primary"><i class="fas fa-sync-alt"></i> Gerar Stations</button>
<button id="station-random-btn" class="secondary"><i class="fas fa-random"></i> Randomizar</button>
</div>
<div id="station-stats" class="info-box" style="margin-top: 12px;">
<h4>Estatísticas do Array</h4>
<div class="stat-grid">
<div class="stat-item"><span class="stat-label">Stations:</span> <span id="stat-station-count">0</span></div>
<div class="stat-item"><span class="stat-label">Baselines:</span> <span id="stat-baseline-count">0</span></div>
</div>
</div>
<div id="angular-resolution-display" class="info-box highlight-box" style="margin-top: 8px;">
<h4><i class="fas fa-crosshairs"></i> Resolução Angular</h4>
<div class="resolution-values">
<div>θ ≈ λ/D<sub>max</sub></div>
<div id="resolution-arcmin" class="resolution-main">-- arcmin</div>
<div id="resolution-arcsec" class="resolution-sub">-- arcsec</div>
</div>
</div>
<div id="baseline-info" class="info-box" style="margin-top: 8px;">
<h4>Baselines</h4>
<div class="stat-grid">
<div class="stat-item"><span class="stat-label">Mín:</span> <span id="baseline-min">--</span></div>
<div class="stat-item"><span class="stat-label">Máx:</span> <span id="baseline-max">--</span></div>
<div class="stat-item baseline-short"><span class="stat-label">Curtas (<50m):</span> <span id="baseline-short-count">0</span></div>
<div class="stat-item baseline-long"><span class="stat-label">Longas (>1km):</span> <span id="baseline-long-count">0</span></div>
</div>
</div>
</div>
<!-- Coluna CENTRAL: Mapa Interativo -->
<div class="map-center-column">
<h3>Mapa Interativo</h3>
<div id="map" class="map"></div>
</div>
<!-- Coluna DIREITA: Informações do Mapa -->
<div class="map-info-panel">
<h3>Informações</h3>
<p>Coordenadas selecionadas:</p>
<p><span id="selected-coords">Nenhuma</span></p>
<p>Distância ao BINGO: <span id="distance-to-bingo">0 km</span></p>
<p>Distância do cursor ao BINGO: <span id="dynamic-distance">0 km</span></p>
<p>Clique no mapa ou escolha um arranjo:</p>
<div class="form-group">
<label for="arranjo-select">Arranjo:</label>
<select id="arranjo-select"><option value="0">Selecione um arranjo</option></select>
</div>
<div id="coordinates-list" class="coordinates-list"></div>
</div>
</section>
<div class="generator-beam-row">
<section class="layout-generator">
<h2>Gerador de Layout</h2>
<div class="layout-controls">
<div class="control-panel">
<div class="form-group">
<label for="layout-type">Tipo de Layout:</label>
<select id="layout-type">
<option value="grid">Grid</option>
<option value="spiral">Espiral</option>
<option value="ring">Anéis</option>
<option value="rhombus">Losango</option>
<option value="hex_grid">Grade Hexagonal</option>
<option value="phyllotaxis">Phyllotaxis</option>
<option value="manual_circular">Circular Manual</option>
<option value="random">Aleatório</option>
<option value="advanced_density">Densidade Avançada</option>
</select>
</div>
<!-- Tile Grouping Configuration -->
<div class="form-group tile-group-config">
<label>Agrupamento de tiles:</label>
<div class="tile-group-inputs">
<div class="tile-group-field">
<input type="number" id="tile-group-cols" min="1" max="10" value="1" step="1" title="Tiles horizontais">
<span class="tile-group-label">×</span>
<input type="number" id="tile-group-rows" min="1" max="10" value="1" step="1" title="Tiles verticais">
<span class="tile-group-label">tiles</span>
</div>
<span class="tile-group-hint" id="tile-group-hint">1×1 = tile individual</span>
</div>
</div>
<div id="dynamic-params" class="dynamic-params-container">
</div>
<div id="profile-specific-params-container" class="profile-specific-params" style="display: none;"></div>
<div class="form-group">
<label for="show-collisions">Mostrar Colisões:</label>
<input type="checkbox" id="show-collisions">
</div>
<div class="button-group">
<button id="generate-btn" class="primary">Gerar Layout</button>
<button id="random-btn" class="secondary">Gerar Aleatório</button>
</div>
<div class="config-management-group">
<button id="export-config-btn" class="secondary"><i class="fas fa-download"></i> Exportar</button>
<label for="import-config-input" class="secondary file-input-label">
<i class="fas fa-upload"></i> Importar
</label>
<input type="file" id="import-config-input" accept=".json" style="display: none;">
</div>
</div>
<div class="visualization">
<canvas id="layout-canvas" role="img" aria-label="Visualização do layout de antenas gerado"></canvas>
<div class="stats">
<div>Tiles: <span id="tile-count">0</span></div>
<div>Antenas: <span id="antenna-count">0</span></div>
</div>
</div>
</div>
<div class="analysis-download-row">
<div class="download-image-section">
<h3>Baixar Imagem do Layout</h3>
<div class="download-image-options">
<div class="option-group">
<label>Tema da Imagem:</label>
<div class="radio-group">
<label><input type="radio" name="imageTheme" value="light" checked> Claro</label>
<label><input type="radio" name="imageTheme" value="dark"> Dracula</label>
</div>
</div>
<div class="option-group">
<label>Incluir Eixos:</label>
<div class="radio-group">
<label><input type="radio" name="imageAxes" value="yes" checked> Sim</label>
<label><input type="radio" name="imageAxes" value="no"> Não</label>
</div>
</div>
<div class="option-group">
<label for="image-filename-input">Nome da Imagem:</label>
<input type="text" id="image-filename-input" placeholder="bingo_layout (opcional)" maxlength="100" aria-describedby="image-filename-hint">
<small id="image-filename-hint" class="sr-only">Nome personalizado para o arquivo. Caracteres especiais serão removidos.</small>
</div>
</div>
<div class="download-image-button-container">
<button id="download-image-btn" class="primary small-btn"><i class="fas fa-camera"></i> Baixar Imagem</button>
</div>
</div>
<div class="psf-analysis-section">
<h3>Análise da PSF (Point Spread Function)</h3>
<div class="psf-controls">
<button id="calculate-psf-volume-btn" class="primary small-btn">Calcular Volume da PSF</button>
<span id="psf-total-volume-display" class="psf-value-display" style="display: none;">Volume Total: <span id="psf-total-volume-value">--</span> | Θ<sub>pico</sub>: <span id="theta-pico-value">--</span> °</span>
</div>
<table class="psf-table">
<thead>
<tr>
<th>Métrica</th>
<th>Input</th>
<th>Volume</th>
<th>Resultado</th>
</tr>
</thead>
<tbody>
<tr>
<td>SLL (Side Lobe Level)</td>
<td>
<div class="input-with-unit">
<span>Θ<sub>SLL</sub>:</span>
<input type="number" id="sll-theta-input" value="3" min="0.1" max="90" step="0.1" title="Theta para cálculo do SLL">
<span>°</span>
</div>
</td>
<td><span id="sll-cone-volume" class="psf-value-display">--</span></td>
<td><span id="sll-percentage" class="psf-value-display">--</span> %</td>
</tr>
<tr>
<td>EE (Encircled Energy)</td>
<td>
<div class="input-with-unit">
<span>EE:</span>
<input type="number" id="ee-percentage-input" value="60" min="1" max="99" step="1" title="Porcentagem de Energia Circunscrita">
<span>%</span>
</div>
</td>
<td><span id="ee-fractional-volume" class="psf-value-display">--</span></td>
<td>Θ<sub>EE</sub>: <span id="ee-theta-result" class="psf-value-display">--</span> °</td>
</tr>
</tbody>
</table>
<div id="psf-analysis-status" class="status-message">Aguardando cálculo do volume da PSF...</div>
</div>
</div>
</section>
<section class="beam-pattern-container">
<div class="beam-pattern-main-plot-area">
<h2>Padrão de Feixe Simulado</h2>
<div class="beam-controls">
<div class="control-group">
<label for="beam-phi-input">Ângulo Phi (0°-90°):</label>
<div class="slider-group">
<input type="range" id="beam-phi-slider" name="beamPhiSlider" min="0" max="90" value="90" step="1">
<input type="number" id="beam-phi-input" name="beamPhiInput" min="0" max="90" value="90" step="1">
</div>
</div>
<div class="control-group">
<label for="beam-scale-select">Escala de Magnitude:</label>
<select id="beam-scale-select">
<option value="dB">dB (Logarítmica)</option>
<option value="linear">Linear (Normalizada)</option>
<option value="sqrt" selected>Sqrt (Raiz Quadrada)</option>
<option value="quadratic">Quadrática (x²)</option>
<option value="fourth_root">Raiz Quarta (x^0.25)</option>
</select>
</div>
<div class="control-group button-group-2d-3d">
<label>Modo de Visualização:</label>
<div class="view-mode-buttons">
<button id="visualize-heatmap-btn" class="primary" title="Visualizar Mapa de Calor Planar (Top-down)."><i class="fas fa-map"></i> Mapa de Calor</button>
<button id="visualize-3d-btn" class="secondary" title="Visualizar padrão de feixe em 3D (varredura completa)."><i class="fas fa-cube"></i> 3D</button>
<button id="visualize-2d-btn" class="secondary" title="Visualizar padrão de feixe em 2D para o Phi selecionado."><i class="fas fa-chart-line"></i> 2D</button>
</div>
</div>
</div>
<div id="plot-container-wrapper" class="plot-area" style="position: relative; overflow: hidden; flex: 1;">
<div id="beam-pattern-plot" style="width: 100%; height: 100%;"></div>
<div id="heatmap-container" style="width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background-color: white; position: absolute; top: 0; left: 0; z-index: 10;">
<canvas id="beam-heatmap-canvas" style="max-width: 100%; max-height: 100%; object-fit: contain;"></canvas>
<div id="heatmap-tooltip" style="position: absolute; background: rgba(0,0,0,0.8); color: white; padding: 5px 10px; border-radius: 4px; pointer-events: none; display: none; font-size: 12px; white-space: nowrap; z-index: 20;"></div>
</div>
</div>
<div id="beam-status">Aguardando geração do layout inicial...</div>
</div>
<div class="psf-ee-theta-graph-section">
<!-- Título e botão removidos. O gráfico ocupará este espaço. -->
<div id="psf-ee-theta-plot" class="plot-area">
<div class="plot-placeholder">
<!-- Mensagem alterada, pois a geração será automática -->
Aguardando cálculo da PSF para gerar a curva EE(Θ)...
</div>
</div>
<div id="psf-ee-theta-status" class="status-message">Aguardando dados da PSF...</div>
</div>
</section>
</div>
<section class="export-container" aria-labelledby="export-heading">
<h2 id="export-heading">Exportação (Estrutura OSKAR)</h2>
<div class="export-fields">
<div class="export-field">
<label for="export-position">position.txt:</label>
<textarea id="export-position" readonly title="Coordenadas WGS84 fixas do BINGO"></textarea>
</div>
<div class="export-field">
<label for="export-station-layout">station/layout.txt:</label>
<textarea id="export-station-layout" readonly title="Coordenadas XY relativas dos centros dos tiles"></textarea>
</div>
<div class="export-field">
<label for="export-tile-layout">station/tile/layout.txt:</label>
<textarea id="export-tile-layout" readonly title="Coordenadas XY relativas das 64 antenas no tile"></textarea>
</div>
<!-- Seletor de formato de coordenadas (WGS84 / ECEF / ENU) -->
<div class="export-field coord-format-section">
<div class="coord-format-header">
<span class="coord-format-title">Formato alternativo de coordenadas:</span>
<span class="coord-help-icon" title="Selecione o formato de coordenadas para visualização e exportação. WGS84 é o formato padrão do OSKAR para layout_wgs84.txt.">ⓘ</span>
</div>
<div class="coord-format-selector" role="radiogroup" aria-label="Formato de coordenadas">
<label class="coord-radio-label">
<input type="radio" name="coord-format" value="wgs84" checked>
<span>WGS84</span>
<span class="coord-help-icon" title="WGS84 (lon, lat, alt): Sistema geodésico padrão. Formato nativo do OSKAR para layout_wgs84.txt. Ideal para interferômetros de longa baseline onde a curvatura da Terra é relevante.">ⓘ</span>
</label>
<label class="coord-radio-label">
<input type="radio" name="coord-format" value="ecef">
<span>ECEF</span>
<span class="coord-help-icon" title="ECEF (Earth-Centered Earth-Fixed): Coordenadas cartesianas geocêntricas (X,Y,Z em metros) com origem no centro da Terra. Usado pelo OSKAR para definir posições absolutas das estações no espaço 3D. Ideal quando se precisa de precisão absoluta na geometria do arranjo.">ⓘ</span>
</label>
<label class="coord-radio-label">
<input type="radio" name="coord-format" value="enu">
<span>ENU</span>
<span class="coord-help-icon" title="ENU (East-North-Up): Coordenadas locais topocêntricas (Leste,Norte,Cima em metros) relativas ao centro do BINGO. Usado pelo OSKAR como sistema de referência local para layouts de estações. Ideal para visualizar e editar distâncias relativas entre estações.">ⓘ</span>
</label>
</div>
<div id="coord-format-wgs84" class="coord-format-panel">
<label for="export-layout-wgs84-alt">layout_wgs84.txt (Lon, Lat, Alt):</label>
<textarea id="export-layout-wgs84-alt" readonly title="Coordenadas WGS84 das estações (lon, lat, alt)"></textarea>
</div>
<div id="coord-format-ecef" class="coord-format-panel" style="display:none;">
<label for="export-layout-ecef">layout_ecef.txt:</label>
<textarea id="export-layout-ecef" readonly title="Coordenadas ECEF (Earth-Centered Earth-Fixed) das estações"></textarea>
</div>
<div id="coord-format-enu" class="coord-format-panel" style="display:none;">
<label for="export-layout-enu">layout_enu.txt:</label>
<textarea id="export-layout-enu" readonly title="Coordenadas ENU (East-North-Up) relativas ao BINGO Central"></textarea>
</div>
</div>
</div>
<div class="download-zip-group">
<label for="zip-filename-input" class="sr-only">Nome do arquivo ZIP</label>
<input type="text" id="zip-filename-input" placeholder="Nome do arquivo ZIP (opcional)">
<button id="download-zip-btn" class="primary"><i class="fas fa-file-archive" aria-hidden="true"></i> Baixar Layout (ZIP)</button>
</div>
</section>
<!-- Atalhos rápidos -->
<div class="quick-access-bar">
<button class="quick-btn" data-target="tab-oskar-config"><i class="fas fa-cogs"></i> Gerar .ini</button>
<button class="quick-btn" data-target="tab-sky-model"><i class="fas fa-star"></i> Modelo de Céu</button>
<button class="quick-btn" data-target="tab-uv-coverage"><i class="fas fa-project-diagram"></i> Cobertura UV</button>
</div>
</div><!-- Fim #tab-layout -->
<!-- === ABA 2: CONFIGURAÇÃO OSKAR (.ini) === -->
<div id="tab-oskar-config" class="tab-content" role="tabpanel">
<section class="ini-generator-section">
<h2><i class="fas fa-cogs"></i> Gerador de Arquivo do Interferometer (.ini)</h2>
<p class="section-description">Monte o arquivo <code>.ini</code> de configuração do <strong>oskar_sim_interferometer</strong>. Preencha os parâmetros abaixo — campos essenciais estão destacados. Todos os valores possuem tooltips com a documentação detalhada em PT-BR.</p>
<div class="ini-layout">
<div class="ini-params-area">
<div class="ini-toolbar">
<button id="ini-fill-from-layout-btn" class="primary small-btn" title="Preenche os campos do telescópio com os dados do layout e mapa atuais">
<i class="fas fa-magic"></i> Preencher a partir do Layout Atual
</button>
<button id="ini-use-sky-model-btn" class="secondary small-btn" title="Usa o modelo de céu gerado na aba Sky Model como entrada. Ambos serão baixados juntos.">
<i class="fas fa-star"></i> Usar Modelo de Céu Gerado
</button>
</div>
<div id="ini-params-container" class="ini-params-container">
<!-- Parâmetros renderizados dinamicamente por ini_generator.js -->
<p class="placeholder-text">Carregando parâmetros OSKAR...</p>
</div>
<div id="ini-validation-messages" class="validation-messages"></div>
</div>
<div class="ini-preview-area">
<h3>Preview do arquivo .ini</h3>
<textarea id="ini-preview" readonly placeholder="O conteúdo do arquivo .ini aparecerá aqui..."></textarea>
<div class="ini-actions">
<button id="ini-copy-btn" class="secondary small-btn"><i class="fas fa-copy"></i> Copiar</button>
<button id="ini-download-btn" class="primary small-btn"><i class="fas fa-download"></i> Baixar .ini</button>
</div>
</div>
</div>
</section>
<!-- === BLOCO 2: OSKAR IMAGER (.ini) === -->
<section class="ini-generator-section" style="margin-top: 30px;">
<h2><i class="fas fa-image"></i> Gerador de Arquivo do Imager (.ini)</h2>
<p class="section-description">Monte o arquivo <code>.ini</code> de configuração do <strong>oskar_imager</strong>. Configura a geração de imagens a partir dos dados de visibilidade simulados.</p>
<div class="ini-layout">
<div class="ini-params-area">
<div class="ini-toolbar">
<button id="imager-use-interf-output-btn" class="secondary small-btn" title="Usa o mesmo caminho do arquivo .vis definido no bloco do interferômetro como entrada para o imager.">
<i class="fas fa-link"></i> Usar saída do Interferômetro
</button>
</div>
<div id="imager-params-container" class="ini-params-container">
<p class="placeholder-text">Carregando parâmetros do imager...</p>
</div>
<div id="imager-validation-messages" class="validation-messages"></div>
</div>
<div class="ini-preview-area">
<h3>Preview do arquivo oskar_imager.ini</h3>
<textarea id="imager-preview" readonly placeholder="O conteúdo do arquivo .ini do imager aparecerá aqui..."></textarea>
<div class="ini-actions">
<button id="imager-copy-btn" class="secondary small-btn"><i class="fas fa-copy"></i> Copiar</button>
<button id="imager-download-btn" class="primary small-btn"><i class="fas fa-download"></i> Baixar oskar_imager.ini</button>
</div>
</div>
</div>
</section>
<!-- === BLOCO 3: OSKAR SIM BEAM PATTERN (.ini) === -->
<section class="ini-generator-section" style="margin-top: 30px;">
<h2><i class="fas fa-satellite-dish"></i> Gerador de Arquivo do Beam Pattern (.ini)</h2>
<p class="section-description">Monte o arquivo <code>.ini</code> de configuração do <strong>oskar_sim_beam_pattern</strong>. Simula o padrão de feixe (beam pattern) de stations do telescópio.</p>
<div class="ini-layout">
<div class="ini-params-area">
<div id="beam-pattern-ini-params-container" class="ini-params-container">
<p class="placeholder-text">Carregando parâmetros do beam pattern...</p>
</div>
<div id="beam-pattern-ini-validation-messages" class="validation-messages"></div>
</div>
<div class="ini-preview-area">
<h3>Preview do arquivo oskar_sim_beam_pattern.ini</h3>
<textarea id="beam-pattern-ini-preview" readonly placeholder="O conteúdo do arquivo .ini do beam pattern aparecerá aqui..."></textarea>
<div class="ini-actions">
<button id="beam-pattern-ini-copy-btn" class="secondary small-btn"><i class="fas fa-copy"></i> Copiar</button>
<button id="beam-pattern-ini-download-btn" class="primary small-btn"><i class="fas fa-download"></i> Baixar oskar_sim_beam_pattern.ini</button>
</div>
</div>
</div>
</section>
</div><!-- Fim #tab-oskar-config -->
<!-- === ABA 3: MODELO DE CÉU === -->
<div id="tab-sky-model" class="tab-content" role="tabpanel">
<section class="sky-model-section">
<h2><i class="fas fa-star"></i> Gerador de Modelo de Céu (Sky Model)</h2>
<p class="section-description">Crie modelos de céu para simulações OSKAR. Use o modo simples para fontes pontuais e grids, ou o modo avançado para distribuições complexas.</p>
<div class="sky-model-layout">
<div class="sky-controls-area">
<div class="form-group">
<label for="sky-mode-select">Modo:</label>
<select id="sky-mode-select">
<option value="simple">Simples</option>
<option value="advanced">Avançado</option>
</select>
</div>
<div class="form-group">
<label for="sky-generation-type">Tipo de Geração:</label>
<select id="sky-generation-type">
<option value="single">Fonte Pontual Individual</option>
<option value="grid">Grid de Fontes</option>
<option value="random">Distribuição Aleatória</option>
<option value="power_law">Distribuição Power-Law</option>
</select>
</div>
<div id="sky-params-container" class="sky-params-container">
<!-- Parâmetros renderizados dinamicamente por sky_model.js -->
</div>
<div class="button-group">
<button id="sky-add-btn" class="primary"><i class="fas fa-plus"></i> Adicionar Fontes</button>
<button id="sky-clear-btn" class="secondary"><i class="fas fa-trash"></i> Limpar Tudo</button>
</div>
</div>
<div class="sky-preview-area">
<div class="sky-source-info">
<span>Total de fontes: <strong id="sky-source-count">0</strong></span>
</div>
<div id="sky-source-table-container" class="source-table-container">
<table id="sky-source-table" class="source-table">
<thead>
<tr>
<th>RA (°)</th>
<th>Dec (°)</th>
<th>I (Jy)</th>
<th>Spix</th>
<th>Tipo</th>
<th>Freq₀ (Hz)</th>
</tr>
</thead>
<tbody>
<tr><td colspan="6" class="empty-msg">Nenhuma fonte adicionada</td></tr>
</tbody>
</table>
</div>
<h3>Preview (formato OSKAR)</h3>
<textarea id="sky-preview" readonly placeholder="O modelo de céu em formato OSKAR aparecerá aqui..."></textarea>
<div class="sky-actions">
<button id="sky-copy-btn" class="secondary small-btn"><i class="fas fa-copy"></i> Copiar</button>
<button id="sky-download-btn" class="primary small-btn"><i class="fas fa-download"></i> Baixar sky_model.txt</button>
</div>
</div>
</div>
</section>
</div><!-- Fim #tab-sky-model -->
<!-- === ABA 4: COBERTURA UV === -->
<div id="tab-uv-coverage" class="tab-content" role="tabpanel">
<section class="uv-coverage-section">
<h2><i class="fas fa-project-diagram"></i> Visualização de Cobertura UV</h2>
<p class="section-description">Simule e visualize a cobertura UV baseada no arranjo atual e nos parâmetros de observação. Modifique parâmetros para ver o impacto em tempo real.</p>
<div class="uv-layout">
<div class="uv-controls-area">
<div class="form-group">
<label for="uv-dec-input">Declinação (°):</label>
<input type="number" id="uv-dec-input" value="-7.04" min="-90" max="90" step="0.01">
</div>
<div class="form-group">
<label for="uv-duration-input">Duração da Observação (h):</label>
<input type="number" id="uv-duration-input" value="4" min="0.1" max="24" step="0.1">
</div>
<div class="form-group">
<label for="uv-timesteps-input">Passos de Tempo:</label>
<input type="number" id="uv-timesteps-input" value="60" min="1" max="1000" step="1">
</div>
<div class="form-group">
<label for="uv-freq-input">Frequência (MHz):</label>
<input type="number" id="uv-freq-input" value="1000" min="1" max="100000" step="1">
</div>
<div class="form-group">
<label for="uv-latitude-input">Latitude do Observatório (°):</label>
<input type="number" id="uv-latitude-input" value="-7.04" min="-90" max="90" step="0.01">
</div>
<div class="button-group">
<button id="uv-generate-btn" class="primary"><i class="fas fa-play"></i> Gerar Cobertura UV</button>
<button id="uv-export-btn" class="secondary"><i class="fas fa-image"></i> Exportar PNG</button>
</div>
<div id="uv-resolution-display" class="info-box highlight-box" style="margin-top: 15px;">
<h3><i class="fas fa-crosshairs"></i> Resolução Angular</h3>
<div id="uv-resolution-text" class="resolution-values">
<div>Gere a cobertura UV para calcular</div>
</div>
</div>
</div>
<div class="uv-plot-area">
<div id="uv-plot-container" class="uv-plot-container">
</div>
<div id="uv-status" class="status-message">Aguardando geração...</div>
</div>
</div>
</section>
</div><!-- Fim #tab-uv-coverage -->
</main>
<footer role="contentinfo">
<p style='text-align: center; opacity: 0.7;'>Versão 1.0.3</p>
<p>Gerador de Layouts de Antenas BINGO - Ferramenta para design e simulação no projeto de rádio astronomia BINGO.</p>
<nav class="footer-links" aria-label="Links externos">
<a href="https://github.com/Geovannisz/LayoutGeneratorBINGO/tree/main" target="_blank" rel="noopener noreferrer" title="Documentação do Projeto (README)">
<i class="fab fa-github" aria-hidden="true"></i> <span class="sr-only">README do projeto no GitHub</span>
</a>
<a href="https://github.com/Geovannisz" target="_blank" rel="noopener noreferrer" title="Perfil do Desenvolvedor no GitHub">
<i class="fab fa-github-alt" aria-hidden="true"></i> <span class="sr-only">Perfil de Geovanni Garcia no GitHub</span>
</a>
<a href="https://bingotelescope.org/" target="_blank" rel="noopener noreferrer" title="Site Oficial do BINGO Telescope">
<i class="fas fa-satellite-dish" aria-hidden="true"></i> <span class="sr-only">Site oficial do BINGO Telescope</span>
</a>
</nav>
<p class="copyright">© 2026 Geovanni Fernandes Garcia. Código aberto sob licença MIT.</p>
</footer>
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<script src="js/constants.js"></script>
<script src="js/bingo_layouts.js"></script>
<script src="js/generator.js"></script>
<script src="js/map.js"></script>
<script src="js/export.js"></script>
<script src="js/beam_pattern.js"></script>
<script src="js/psf_analyzer.js"></script>
<script src="js/psf_ee_theta_plot.js"></script>
<script src="js/tabs.js"></script>
<script src="js/stations.js"></script>
<script src="js/ini_generator.js"></script>
<script src="js/sky_model.js"></script>
<script src="js/uv_coverage.js"></script>
<script src="js/main.js"></script>
</body>
</html>