Merge pull request #6 from Santiago13dev/santidev

botón para capturar el globo como PNG

Author: Santiago13dev

frontend/app/page.tsx

@@ -3,6 +3,8 @@
 import { useState, useMemo, useEffect } from "react";
 import dynamic from "next/dynamic";
 import Playback from "../components/Playback"; // timeline play/pause/slider
+import LayerToggles, { LayerOptions } from "../components/LayerToggles";
+import SnapshotButton from "../components/SnapshotButton";
 
 // Carga en cliente
 const Globe = dynamic(() => import("../components/Globe"), { ssr: false });
@@ -30,6 +32,14 @@ export default function Home() {
 
   // Timeline (minutos)
   const [liveT, setLiveT] = useState(0);
+  const [getPng, setGetPng] = useState<(() => string) | null>(null);
+  const [layers, setLayers] = useState<LayerOptions>({
+    atmosphere: true,
+    graticule: true,
+    equator: true,
+    stars: true,
+    stand: true,
+  });
 
   // Chequeo de texturas para evitar crash del loader
   const [texOk, setTexOk] = useState<boolean | null>(null);
@@ -227,6 +237,12 @@ export default function Home() {
                 liveMinutes={liveT}
                 liveVpKmS={vp}
                 liveVsKmS={vs}
+                showAtmosphere={layers.atmosphere}
+                showGraticule={layers.graticule}
+                showEquator={layers.equator}
+                showStars={layers.stars}
+                showStand={layers.stand}
+                onReadyCapture={(fn) => setGetPng(() => fn)}
               />
             )}
 
@@ -243,6 +259,10 @@ export default function Home() {
             arrivals={resp?.arrivals ?? []}
             intensity={resp?.intensity ?? null}
           />
+          {/* Panel de capas */}
+        <div className="mt-4">
+           <LayerToggles value={layers} onChange={setLayers} />
+        </div>
 
           {!resp && !error && (
             <p className="text-slate-400 text-sm mt-3">
@@ -251,7 +271,15 @@ export default function Home() {
           )}
           {error && <p className="text-red-400 text-sm mt-3 break-words">Error: {error}</p>}
         </aside>
+         <div className="flex flex-wrap items-end gap-2">
+            {/* inputs y botón Simular */}
+          <button className="btn-primary" onClick={simular} disabled={loading || !center || texOk === false}>
+            {loading ? "Simulando..." : "Simular"}
+          </button>
 
+        {/* ⬇︎ Botón de captura */}
+          <SnapshotButton getPng={getPng ?? undefined} />
+        </div>
         {/* Timeline debajo del globo, ocupando las mismas 3 columnas */}
         <div className="lg:col-span-3">
           <div className="mt-2">

frontend/components/Globe.tsx

@@ -4,6 +4,7 @@ import * as THREE from "three";
 import { Canvas, useFrame } from "@react-three/fiber";
 import { OrbitControls, Stars, useTexture } from "@react-three/drei";
 import { useMemo, useRef } from "react";
+import { useEffect } from "react";
 
 export type Center = { lat: number; lon: number };
 export type RingSet = { p?: number[]; s?: number[] };
@@ -13,7 +14,14 @@ type GlobeProps = {
   rings?: RingSet | null;
   liveMinutes?: number;   // minutos transcurridos para frentes vivos
   liveVpKmS?: number;     // velocidad P (km/s)
-  liveVsKmS?: number;     // velocidad S (km/s)
+  liveVsKmS?: number;  
+  showAtmosphere?: boolean;
+  showGraticule?: boolean;
+  showEquator?: boolean;
+  showStars?: boolean;
+  showStand?: boolean;   // velocidad S (km/s)
+  onReadyCapture?: (fn: () => string) => void; // NUEVO: entrega una función capture()
+
 };
 
 /* ------------------- utilidades geo ------------------- */
@@ -218,12 +226,20 @@ function World({
   liveMinutes,
   liveVpKmS,
   liveVsKmS,
+  showAtmosphere = true,
+  showGraticule = true,
+  showEquator = true,
 }: {
   center: Center;
   rings?: RingSet | null;
   liveMinutes?: number;
   liveVpKmS?: number;
   liveVsKmS?: number;
+  showAtmosphere?: boolean;
+  showGraticule?: boolean;
+  showEquator?: boolean;
+  showStars?: boolean;
+  showStand?: boolean;
 }) {
   const worldRef = useRef<THREE.Group>(null!);
 
@@ -275,24 +291,57 @@ function World({
   );
 }
 
+import { useThree } from "@react-three/fiber"; // ya lo tienes por Canvas/useFrame
+
+function CaptureProvider({
+  onReadyCapture,
+}: {
+  onReadyCapture?: (fn: () => string) => void;
+}) {
+  const { gl, scene, camera } = useThree();
+
+  // Registramos una función que renderiza y devuelve el PNG
+  React.useEffect(() => {
+    if (!onReadyCapture) return;
+    const capture = () => {
+      gl.render(scene, camera);
+      return gl.domElement.toDataURL("image/png");
+    };
+    onReadyCapture(capture);
+  }, [onReadyCapture, gl, scene, camera]);
+
+  return null;
+}
 /* ============================ GLOBE ============================ */
 export default function Globe({
   center,
   rings,
   liveMinutes,
   liveVpKmS,
   liveVsKmS,
+  onReadyCapture,
+  showAtmosphere = true,
+  showGraticule = true,
+  showEquator = true,
+  showStars = true,
+  showStand = true,
 }: GlobeProps) {
   if (!center) return null;
 
   return (
     <Canvas
-      camera={{ position: [0, 0, 3.1], fov: 42 }}
-      dpr={[1, 2]}
-      gl={{ antialias: true, alpha: true, toneMapping: THREE.ACESFilmicToneMapping }}
+     camera={{ position: [0, 0, 3.1], fov: 42 }}
+     dpr={[1, 2]}
+     gl={{
+      antialias: true,
+      alpha: true,
+      toneMapping: THREE.ACESFilmicToneMapping,
+      preserveDrawingBuffer: true, // ⬅︎ IMPORTANTE para toDataURL
+    }}
       style={{ width: "100%", height: "100%" }}
     >
       {/* Luces */}
+      <CaptureProvider onReadyCapture={onReadyCapture} />
       <hemisphereLight intensity={0.5} color={"#cde8ff"} groundColor={"#0b1220"} />
       <directionalLight position={[5, 3, 5]} intensity={1.2} />
       <pointLight position={[-4, -3, -4]} intensity={0.5} />
@@ -307,8 +356,13 @@ export default function Globe({
         liveMinutes={liveMinutes}
         liveVpKmS={liveVpKmS}
         liveVsKmS={liveVsKmS}
+        showAtmosphere={showAtmosphere}
+        showGraticule={showGraticule}
+        showEquator={showEquator}
+        showStars={showStars}
+        showStand={showStand}
       />
-      <Stand />
+      {showStand && <Stand />}
 
       {/* Controles */}
       <OrbitControls

frontend/components/LayerToggles.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+export type LayerOptions = {
+  atmosphere: boolean;
+  graticule: boolean;
+  equator: boolean;
+  stars: boolean;
+  stand: boolean;
+};
+
+export default function LayerToggles({
+  value,
+  onChange,
+}: {
+  value: LayerOptions;
+  onChange: (v: LayerOptions) => void;
+}) {
+  const set = (k: keyof LayerOptions) =>
+    (e: React.ChangeEvent<HTMLInputElement>) =>
+      onChange({ ...value, [k]: e.target.checked });
+
+  const reset = () =>
+    onChange({ atmosphere: true, graticule: true, equator: true, stars: true, stand: true });
+
+  return (
+    <div className="card p-3">
+      <div className="mb-2 font-semibold text-sm">Capas del globo</div>
+
+      <div className="grid grid-cols-2 gap-2 text-sm">
+        <label className="flex items-center gap-2">
+          <input type="checkbox" checked={value.atmosphere} onChange={set("atmosphere")} />
+          Atmósfera
+        </label>
+
+        <label className="flex items-center gap-2">
+          <input type="checkbox" checked={value.graticule} onChange={set("graticule")} />
+          Retícula
+        </label>
+
+        <label className="flex items-center gap-2">
+          <input type="checkbox" checked={value.equator} onChange={set("equator")} />
+          Ecuador
+        </label>
+
+        <label className="flex items-center gap-2">
+          <input type="checkbox" checked={value.stars} onChange={set("stars")} />
+          Estrellas
+        </label>
+
+        <label className="flex items-center gap-2">
+          <input type="checkbox" checked={value.stand} onChange={set("stand")} />
+          Base
+        </label>
+      </div>
+
+      <div className="mt-3">
+        <button className="input px-3 py-2" onClick={reset}>Reset</button>
+      </div>
+    </div>
+  );
+}

frontend/components/SnapshotButton.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+type Props = {
+  getPng?: () => string | Promise<string>;
+  fileName?: string;
+  className?: string;
+};
+
+export default function SnapshotButton({
+  getPng,
+  fileName,
+  className = "btn-primary",
+}: Props) {
+  const handleClick = async () => {
+    if (!getPng) return;
+    const data = await getPng();
+    const a = document.createElement("a");
+    a.href = data;
+    a.download =
+      fileName ??
+      `SismoView_${new Date().toISOString().replace(/[:.]/g, "-")}.png`;
+    document.body.appendChild(a);
+    a.click();
+    a.remove();
+  };
+
+  return (
+    <button className={className} onClick={handleClick} disabled={!getPng}>
+      Capturar PNG
+    </button>
+  );
+}