exoplanetas-kepler/index.html at main · felipeDev303/exoplanetas-kepler · GitHub

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
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Kepler Exoplanet</title>
    <link rel="stylesheet" href="/styles/ui.css" />
  </head>
  <body>
    <main class="exo-main">
      <h1>Kepler Exoplanet — Data processor</h1>
      <p>
        Abre la consola del navegador (F12) para ver la tabla de planetas
        procesados.
      </p>
      <p>
        Si no tienes <code>/data/exoplanets.json</code>, crea o guarda un
        archivo JSON con datos descargados.
      </p>
    </main>

    <section class="exo-panel">
      <div class="exo-row">
        <input
          id="exoSearch"
          class="exo-input"
          placeholder="buscar por nombre..."
          list="exoSuggestions"
        />
        <datalist id="exoSuggestions"></datalist>
        <button id="btnSearch" class="exo-btn">Buscar</button>
        <button id="btnVisualizeSelected" class="exo-btn">
          Visualizar seleccionado
        </button>
      </div>
      <div class="exo-row">
        <button id="btnTop10" class="exo-btn">Top 10 por radio</button>
        <button id="btnStats" class="exo-btn">Resumen</button>
        <button id="btnVisualize" class="exo-btn">Visualizar 3D</button>
      </div>
      <pre id="exoOutput" class="exo-output">Cargando datos...</pre>
      <div class="exo-row" style="margin-top: 1em">
        <label for="orbitSpeed">Velocidad órbita:</label>
        <input
          type="range"
          id="orbitSpeed"
          min="0.1"
          max="3"
          step="0.01"
          value="1"
          style="width: 120px"
        />
        <span id="orbitSpeedVal">1.00x</span>
      </div>
      <div class="exo-row" style="margin-top: 1em">
        <button id="btnSinglePlanet" class="exo-btn">
          Vista planeta único
        </button>
        <label for="textureSelect">Textura:</label>
        <select id="textureSelect">
          <option value="">Sin textura</option>
          <option value="/public/earth.jpg">Tierra</option>
          <option value="/public/jupiter.jpg">Júpiter</option>
          <option value="/public/mars.jpg">Marte</option>
        </select>
        <span style="margin: 0 0.5em">o</span>
        <input type="file" id="textureFile" accept="image/*" />
      </div>
    </section>

    <script type="module" src="/scripts/processPlanets.js"></script>
    <script>
      // Vista planeta único con textura
      document
        .getElementById("btnSinglePlanet")
        .addEventListener("click", async () => {
          const q = document
            .getElementById("exoSearch")
            .value.trim()
            .toLowerCase();
          if (!q)
            return show("Introduce un término de búsqueda para visualizar");
          const all = window.EXO_PLANETS || [];
          let planet = all.find((p) => p.name && p.name.toLowerCase() === q);
          if (!planet) {
            // Si no hay coincidencia exacta, buscar parcial
            planet = all.find(
              (p) => p.name && p.name.toLowerCase().includes(q)
            );
          }
          if (!planet) return show("No se encontró el planeta");

          // Determinar textura
          let textureUrl = document.getElementById("textureSelect").value;
          const fileInput = document.getElementById("textureFile");
          if (fileInput.files && fileInput.files[0]) {
            // Usar archivo local como textura
            textureUrl = URL.createObjectURL(fileInput.files[0]);
          }

          try {
            const m = await import("/scripts/visualizeThree.js");
            m.visualizeSinglePlanet(planet, textureUrl);
          } catch (err) {
            console.error("Error cargando el visualizador:", err);
            alert("No se pudo cargar el visualizador. Revisa la consola.");
          }
        });
    </script>

    <script>
      // UI bindings - llaman a EXO_UTILS (expuesto por processPlanets.js)
      const out = document.getElementById("exoOutput");
      function show(o) {
        out.textContent =
          typeof o === "string" ? o : JSON.stringify(o, null, 2);
      }

      document.getElementById("btnSearch").addEventListener("click", () => {
        const q = document.getElementById("exoSearch").value.trim();
        if (!q) return show("Introduce un término de búsqueda");
        const res = window.EXO_UTILS?.searchByName(q) ?? [];
        show(res.slice(0, 50));
      });

      document.getElementById("btnTop10").addEventListener("click", () => {
        const res = window.EXO_UTILS?.topNByRadius(10) ?? [];
        show(res);
      });

      document.getElementById("btnStats").addEventListener("click", () => {
        const res = window.EXO_UTILS?.statsSummary() ?? {};
        show(res);
      });

      // Actualizar el panel cuando los datos estén listos y poblar autocompletado
      const checkLoaded = setInterval(() => {
        if (window.EXO_PLANETS) {
          show(
            `${window.EXO_PLANETS.length} planetas cargados. Usa los botones para consultas.`
          );
          // Autocompletado de nombres
          const datalist = document.getElementById("exoSuggestions");
          datalist.innerHTML = window.EXO_PLANETS.map(
            (p) => `<option value="${p.name}">`
          ).join("");
          clearInterval(checkLoaded);
        }
      }, 200);

      // Visualizador 3D: carga dinámica del módulo y fallback
      document
        .getElementById("btnVisualize")
        .addEventListener("click", async () => {
          // Asegurar datos
          if (!window.EXO_PLANETS || !window.EXO_PLANETS.length) {
            const ok = confirm(
              "No hay datos cargados. ¿Generar datos de ejemplo?"
            );
            if (!ok) return;
            window.EXO_PLANETS = Array.from({ length: 8 }).map((_, i) => ({
              name: `Mock ${i + 1}`,
              radius: Math.round((Math.random() * 10 + 0.5) * 10) / 10,
              period: Math.round((Math.random() * 300 + 10) * 10) / 10,
            }));
          }
          try {
            const m = await import("/scripts/visualizeThree.js");
            m.visualize();
          } catch (err) {
            console.error("Error cargando el visualizador:", err);
            alert("No se pudo cargar el visualizador. Revisa la consola.");
          }
        });

      // Visualizar solo planetas seleccionados por búsqueda
      document.getElementById("orbitSpeed").addEventListener("input", (e) => {
        document.getElementById("orbitSpeedVal").textContent =
          parseFloat(e.target.value).toFixed(2) + "x";
      });

      document
        .getElementById("btnVisualizeSelected")
        .addEventListener("click", async () => {
          const q = document
            .getElementById("exoSearch")
            .value.trim()
            .toLowerCase();
          if (!q)
            return show("Introduce un término de búsqueda para visualizar");
          const all = window.EXO_PLANETS || [];
          // Buscar coincidencia exacta primero
          let planets = all.filter((p) => p.name && p.name.toLowerCase() === q);
          if (!planets.length) {
            // Si no hay coincidencia exacta, buscar parciales
            planets = all.filter(
              (p) => p.name && p.name.toLowerCase().includes(q)
            );
          }
          if (!planets.length)
            return show("No se encontraron planetas con ese nombre");
          const orbitSpeed =
            parseFloat(document.getElementById("orbitSpeed").value) || 1;
          try {
            const m = await import("/scripts/visualizeThree.js");
            m.visualize("threeContainer", planets, orbitSpeed);
          } catch (err) {
            console.error("Error cargando el visualizador:", err);
            alert("No se pudo cargar el visualizador. Revisa la consola.");
          }
        });
    </script>
  </body>
</html>