Differences

This shows you the differences between two versions of the page.

--- informatica:linux:tour360 [2024/03/08 22:08] – jose
+++ informatica:linux:tour360 [2025/10/14 09:45] (current) – [Comparativa entre dos tour] jose
@@ Line 5: / Line 5: @@
 https://www.marzipano.net/tool/
+====== Importación fotos ======
+Para importar fotos primero las tenemos que hacer rectangulares. En el caso de la insta360 se le da a export y selecciona esta oción:
+{{:informatica:linux:marzipano_01.png|}}
+La foto queda tal que así
+{{:informatica:linux:marzipano_02.png|}}
 ====== Instalación ======
@@ Line 18: / Line 27: @@
 ===== Parámetros =====
+El fichero data.js tiene todos los parámetros de las fotos.
 <code>
       "initialViewParameters": {
@@ Line 57: / Line 68: @@
 ====== Modificaciones ======
-===== Girar escena de un hotspor =====
+===== Girar escena de un hotspot =====
 Cuando clickamos en un hotspot la escena viene con la orientación por defecto, pero no es lo mismo si venimos por la izquierda que por la derecha o si vamos de adelante hacía atrás.
@@ Line 106: / Line 117: @@
 </code>
+===== Añadir mapa con la posición y orientación =====
+Copiamos el fichero mapa.png con capas transparentes en el directorio raiz donde está index.js
+En el fichero index.js, entre
+    // Initialize viewer.
+y
+  // Create scenes,
+Añadimos el minimapa
+<code>
+// Crear un contenedor para el mini-mapa
+var miniMapContainer = document.createElement('div');
+miniMapContainer.style.position = 'absolute';
+miniMapContainer.style.right = '10px';
+miniMapContainer.style.bottom = '10px';
+miniMapContainer.style.width = '200px'; // Ajusta según necesites, igual que el mini-mapa
+miniMapContainer.style.height = 'auto';
+miniMapContainer.style.zIndex = '100';
+// Añadir el mini-mapa al contenedor
+var miniMap = document.createElement('img');
+miniMap.src = 'mapa2.png'; // Asegúrate de usar la ruta correcta
+miniMap.style.width = '100%'; // Hace que el mini-mapa ocupe todo el contenedor
+miniMap.style.height = 'auto';
+miniMap.style.pointerEvents = 'none'; // Esto permite que los eventos del ratón pasen a través de la imagen
+// Añadir el marcador al contenedor
+var marker = document.createElement('div');
+marker.style.position = 'absolute';
+marker.style.width = '10px'; // Tamaño del marcador
+marker.style.height = '10px';
+marker.style.backgroundColor = 'red';
+marker.style.borderRadius = '50%'; // Hace que el marcador sea un círculo
+marker.style.zIndex = '101'; // Se muestra sobre el mini-mapa
+// Posicionamiento inicial del marcador dentro del contenedor del mini-mapa
+marker.style.transition = 'top 0.5s ease-out, left 0.5s ease-out';
+marker.style.left = '50px'; // Ajusta según la ubicación inicial deseada sobre el mini-mapa
+marker.style.top = '50px';
+// Añadir el mini-mapa y el marcador al contenedor
+miniMapContainer.appendChild(miniMap);
+miniMapContainer.appendChild(marker);
+// Finalmente, añadir el contenedor del mini-mapa al body o al contenedor principal
+document.body.appendChild(miniMapContainer);
+</code>
+Creamos la función actualizarPosicionDelMarcador al final del documento antes de estas líneas:
+  // Display the initial scene.
+  switchScene(scenes[0]);
+Función actualizarPosicionDelMarcador
+<code>
+function actualizarPosicionDelMarcador(nuevaX, nuevaY) {
+    // Suponiendo que 'marker' es el marcador cuya posición quieres cambiar,
+    // y 'miniMapContainer' es el contenedor del mapa y del marcador.
+    // 'nuevaX' y 'nuevaY' son las nuevas posiciones del marcador en píxeles,
+    // relativas al contenedor del mini-mapa.
+    marker.style.left = nuevaX + 'px';
+    marker.style.top = nuevaY + 'px';
+}
+</code>
+La función la llamamos dentro de la función switchScene:
+<code>
+  function switchScene(scene) {
+    stopAutorotate();
+    scene.view.setParameters(scene.data.initialViewParameters);
+    scene.scene.switchTo();
+    startAutorotate();
+    updateSceneName(scene);
+    updateSceneList(scene);
+  }
+</code>
+La ponemos al final del todo después de updateSceneList
+<code>
+  function switchScene(scene) {
+    stopAutorotate();
+    scene.view.setParameters(scene.data.initialViewParameters);
+    scene.scene.switchTo();
+    startAutorotate();
+    updateSceneName(scene);
+    updateSceneList(scene);
+    actualizarPosicionDelMarcador(scene.data.initialViewParameters.x,scene.data.initialViewParameters.y);
+  }
+</code>
+Ahora en cada escena tenemos que poner los valores x,y de la posición que están en el mapa en la sección initialViewParameters. El punto 0,0 es la esquina superior izquierda
+<code>
+      "initialViewParameters": {
+        "yaw": -1.9068445548687052,
+        "pitch": 0.1964205885417094,
+        "fov": 1.306532538376576,
+        "x" : 125,
+        "y" : 190
+      },
+</code>
 ====== Añadir nuevas fotos sin Marzipano tool ======
+Hay que hacer 3 pasos:
+<code>
+. Convertir foto en directorios y copiar en directorio tiles
+. Modificar data.js
+. Modificar index.html
+</code>
 Descargamos la foto en formato rectangular. Por ejemplo si la tenemos subida a kuula y la editamos, abajo a la derecha está la opción download
 Para convertir las fotos en formato Marzipano usamos este repositorio nodejs y este repo:
   https://github.com/jessehhydee/marzipano-pano-tiler.git
-  node index.js
-  npm install
-  node index.js
 Por ejemplo tenemos nuestra foto en la ruta:
@@ Line 130: / Line 247: @@
 Convertimos la foto:
   node index.js
+Tarda un poco, unos 2 minutos, pone "..images fetched" y luego acaba:
 <code>
 ..cubemap created
@@ Line 268: / Line 387: @@
 Copiamos el directorio dentro de la instalación de marzipano en el directorio tiles
+Por ejemplo si hemos añadido planta2_01 se suele poner el ID: 3-planta2_01 para tenerlos ordenados.
+El directorio tiles nos quedaría mas o menos así
+<code>
+└── tiles
+    ├── 0-portalon_01
+    ├── 1-portalon_02
+    ├── 2-patio_01
+    └── 3-planta2_01
+</code>
+Modificamos el fichero data.js añadiendo otra entrada al vector json de Scenes. Podemos copiar otro tal cual y después ir cambiando los parámetros, solo tenemos que cambiar ID para que coincida con el que tenemos:
+<code>
+    {
+      "id": "3-planta2_01",
+      "name": "planta2_01",
+      "levels": [
+        {
+          "tileSize": 256,
+          "size": 256,
+          "fallbackOnly": true
+        },
+        {
+          "tileSize": 512,
+          "size": 512
+        },
+        {
+          "tileSize": 512,
+          "size": 1024
+        },
+        {
+          "tileSize": 512,
+          "size": 2048
+        }
+      ],
+      "faceSize": 1368,
+      "initialViewParameters": {
+        "pitch": 0,
+        "yaw": 0,
+        "fov": 1.5707963267948966
+      },
+      "linkHotspots": [],
+      "infoHotspots": []
+    }
+</code>
+Y por último tenemos que añadir el DIV en el fichero index.html:
+<code>
+<div id="sceneList">
+  <ul class="scenes">
+      <a href="javascript:void(0)" class="scene" data-id="0-portalon_01">
+        <li class="text">portalon_01</li>
+      </a>
+      <a href="javascript:void(0)" class="scene" data-id="1-portalon_02">
+        <li class="text">portalon_02</li>
+      </a>
+      <a href="javascript:void(0)" class="scene" data-id="2-patio_01">
+        <li class="text">patio_01</li>
+      </a>
+      <a href="javascript:void(0)" class="scene" data-id="3-planta2_01">
+        <li class="text">planta2_01</li>
+      </a>
+  </ul>
+</div>
+</code>
+====== Comparativa entre dos tour ======
+Comparativa a dos pantallas de 2 tours, como por ejemplo la obra
+Hay dos ficheros data.js
+<code>
+- data.js
+- data2.js
+</code>