≡ Menu
Plantilla personalizada en PanoTour Pro sí es posible

Las barras de control de PanoTour son feas. Muy feas. La verdad, siempre me ha parecido que Kolor pudo hacer un mejor trabajo en las plantillas de la interfaz, contratar a algún Diseñador de Interfaz de Usuario y lograr un mejor nivel en el diseño en general, no solo del tour virtual, sino de la misma interfaz de PanoTour.

Pero como toca trabajar con lo que hay —y para ser honestos PanoTour es una muy buena herramienta que ahorra una cantidad enorme de trabajo al fotógrafo que no está acostumbrado al código XML— existe la opción de cambiar los horrorosos íconos de la barra de control de PanoTour. En este tutorial te enseñaré cómo hacerlo de una manera muy sencilla.

Si quieres ver una interfaz personalizada, puedes entrar a ver una de mis más recientes visitas virtuales, una Vista Aérea de Caño Cristales en Colombia. En ella, me he basado en una plantilla de PanoTour y he podido cambiar la interfaz fea por unos iconos mucho más decentes.

Vista aérea de Caño Cristales en La Macarena Colombia

Te cuento cómo lo hice.

Ubica la carpeta de plantillas de PanoTour

Lo primero que debes hacer es ubicar la carpeta donde se encuentran los archivos de los plugins de PanoTour Pro. Esta carpeta en computadores MAC se encuentra en la siguiente dirección:

Macintosh HD (o como se nombre tu disco duro) > Aplicaciones > PanoTour Pro 2.3.app > Contents > Resources > plugins

Una manera de acceder, es a través del Finder entrando al icono lateral “Aplicaciones” o desde el menú “Ir > Aplicaciones“. Ahí buscas el icono de la versión de PanoTour que estés usando. Si haces clic, notarás que aparentemente no hay nada en el interior. Sin embargo, debes hacer clic secundario (botón derecho) y seleccionar la opción “Mostrar contenido del paquete“.

Una manera muy fácil de acceder a esta carpeta (tanto para usuarios de Windows como Mac) es a través de la interfaz de PanoTour Pro, a través de la opción del menú “Edit > Open Template System Directory“.

abrir-carpeta-de-plantillas-panotour-pro

Escoge una plantilla de PanoTour como base

Una vez ubiques la carpeta “Plugins”, puedes basarte en alguna de las plantillas que vienen preestablecidas en PanoTour:

  • Classic Control Bar (classicControlBar)
  • D-Pad Control Bar (crossCornerBar)
  • Docked Thumbnail & Control Bar (dockedThumbsControlBar)
  • Rounded Control Bar (roundCornerBar)
  • iControl Bar (iControlBar)
  • Urban Control Bar (urbanControlBar)

Si te basas en ellas, la tendrás más sencillo, ya que te ahorrarás cantidad de trabajo escribiendo código.

Copia y pega la plantilla base

Como lo que se necesita en algunas ocasiones es simplemente cambiar la apariencia gráfica, pues estará más que bien un “copy / paste“. Así que copia esta carpeta y pégala en la carpeta de personalizaciones propias del usuario, que puedes encontrar en Mac en la siguiente dirección:

Macintosh HD (o como se nombre tu disco duro) > Usuarios > mariocarvajal (o como se llame tu usuario) > Documentos > Kolor > PanoTourPro 2 > plugins

O un atajo de teclado tanto para Windows como Mac es desde la interfaz de PanoTour, en el menú “Edit > Open User Directory“.

Bien, entonces en la carpeta plugins de este directorio, pega la carpeta de la barra de control que vas a personalizar y ponle un nuevo nombre a este directorio, para mi ejercicio puse “nuevaBarraControl” (te recomiendo sin espacios ni caracteres especiales).

Modifica el archivo XML

Al interior de esta carpeta encontrarás los elementos gráficos que la componen y además un archivo XML que contiene información importante que debes modificar.

Abre el archivo “plugin_info.xml” en un bloc de notas o en un editor como Dreamweaver. Modifica las primeras líneas de código, así (las he puesto en negrilla):

<plugin
 id="nuevaBarraControl"
 category="tr:Control Bar"
 name="tr:Nueva Barra de Control"
 description="tr:Esta es la nueva barra de control con iconos mejorados, disenados de forma personalizada"
 version="1.0"
 isGraphical="true"
 multipleInstance="true"
 >

Como notarás, el ID debe coincidir con el nombre de la nueva carpeta. Esto es súper importante, de lo contrario no funcionará cuando cargues el programa PanoTour Pro.

Además de estos valores, podrás modificar cualquiera de los valores establecidos en este archivo XML. Es una de las grandes ventajas de trabajar con este sistema de marcado: la flexibilidad, ¿verdad? Por ejemplo, yo escogí basarme en la plantilla iControl Bar. Pude cambiar desde el archivo XML la opción del color de la fuente del tooltip para que sea blanca de forma preestablecida. Con esto ahorro tiempo pues no tendré que personalizarla desde PanoTour cada vez que la utilice.

Date gusto cambiando los archivos gráficos

Viene la diversión: a cambiar los archivos PNG que se encuentran en el interior de la carpeta. Esto lo puedes hacer en tu programa de edición de imagen favorito. En mi caso, utilizo Photoshop. Guárdalo en formato PNG (muy importante que actives la transparencia). No es necesario que cambies todos los botones, solo los que vas a utilizar en tu interfaz.

También puedes cambiar el archivo de previsualización que se encuentra en la carpeta “ptpreview” y que se llama “ptpreview.png”.

¡Hora de utilizarlo!

Cuando termines de editar tus botones, es hora de probar. Si tenías abierto PanoTour, debes cerrarlo y abrirlo nuevamente. Notarás que en la pestaña “Style”, en la Biblioteca de Plugins y en el grupo “Control Bar” aparecerá nuestro nuevo y flamante diseño. Si haces doble clic en él, se cargará en tu espacio de trabajo y podrás personalizarlo según tu necesidad.

barra-de-control-personalizada-panotour-pro

¡Y eso es todo!

Espero que este tutorial te ayude. Si tienes dudas o si notas algún error en el tutorial, házmelo saber en los comentarios.

{ 12 comentarios… add one }
  • javierinho1993 11 Enero, 2015, 9:11 pm

    Eso fue lo que mas o menos hice, la diferencia es que yo modifique la plantilla original, porque no encontraba forma de añadir otro a partir de uno preestablecido (falle en la parte del nombre de la catpeta)
    Buen tutorial! Sos un capo!

  • Js Mora 8 Abril, 2015, 10:22 am

    Hola Mario, todo listo!! hace tiempo queríamos cambiar esos controles, gracias, pero ahora surge un problema y es que no aparece la casilla de personalizar la fuente y obvio cada vez que se pasa el cursor encima de un icono o de una miniatura sale esa fuente desagradable, tenemos la versión portable PTP 2.0.0 en 64bits pues es la única que nos “funciona” te agradecemos si nos puedes sacar de este apuro! Gracias

    • Mario Carvajal 8 Abril, 2015, 10:38 am

      Realmente el problema aquí tiene que ver con un asunto de fuentes universales. Si le pones un tipo de fuente que tienes en tu computador, puede que exportes el tour e inclusive lo visualices bien en tu propio computador. Sin embargo, si lo visualizas en un dispositivo diferente que no tenga esta fuente, el navegador la reemplazará por una fuente similar. Entonces te sugiero utilizar tipografía universal, como Arial, o Helvética y así asegurarás que cualquiera vea lo mismo que tú. Saludos

      • Js Mora 8 Abril, 2015, 3:10 pm

        Hola Mario, te envío una imagen de la casilla que no aparece en PTP 2.0…esa es mi duda. Gracias

        • Mario Carvajal 8 Abril, 2015, 3:13 pm

          Disculpa la pregunta… ¿este PanoTour es licenciado?

          • Js Mora 8 Abril, 2015, 9:55 pm

            No, es una versión portable

          • Mario Carvajal 9 Abril, 2015, 5:00 am

            Mmmm… es posible que sea por esta razón. Ya varias personas que usan una versión no licenciada de PanoTour han encontrado diferencias de elementos que no les aparecen en la interfaz y que sí aparecen en una versión licenciada. A mí se me hace que este tipo de versiones son una estrategia comercial que liberan los fabricantes para hacer que la gente use el software, con limitaciones que les limitarán y les harán sentir la necesidad de comprar la licencia… No sé, es algo que me viene dando vueltas en la cabeza desde hace un tiempo, porque se me hace increíble que desaparezcan elementos de la interfaz. Saludos!!!

  • Mauricio Poveda Gómez 15 Abril, 2015, 10:12 pm

    Mario, como puedo modificar la imagen de preload en el xml, saludos

  • Luis Escobar 14 Marzo, 2016, 11:25 pm

    Buenas Mario, gracias por todo el tiempo que dedicas a compartir tus conocimientos. Tengo la siguiente duda ¿Cómo puedo hacer para que los spots no se vuelvan pequeñitos en los dispositivos moviles?

    De antemano gracias.

    • Mario Carvajal 11 Abril, 2016, 10:17 am

      Es muy complejo manejar los tamaños en los distintos dispositivos, sabes… entonces no queda más que a partir de un solo tamaño, que diseñes y hagas la revisión de cómo se te ve tanto en pantalla como en móviles, para que puedas evaluar cuál sería el tamaño ideal en ambos casos. Pero de poderse manipular de forma “responsiva” los elementos de interfaz, te digo, es complicado, al menos en estas versiones de PanoTour, ojalá esto se corrigiera. Saludos

  • Adriana 24 Junio, 2016, 4:51 pm

    Hola Mario, me llamo Adriana, soy una estudiante italiana; estoy haciendo un trabajo por el fin de carrera que trata de Virtual Reality. Estoy intentando hacer un tour con Panotour pro, pero tengo un problema, el video funciona perfectamente hasta que le doy a las gafas VR, pinchando ahi se bloquea y me dice que no se puede activar la modalidad VR.

    • Mario Carvajal 21 Julio, 2016, 4:12 pm

      Hola Adriana. Dame un URL para poder ayudarte, si aún puedo hacerlo. Con la dirección de tu tour virtual podré recrear el error y darte una respuesta apropiada. Saludos

Dejar un comentario