Hotspot Kit

Un aspecto, un orden y un filtro para el visitante en cada hotspot de tu tour de krpano: en 2D y en VR.

69 € Pago único, IVA no incluido

Compatibilidad

Verificado para krpano 1.23.2–1.24

Cómo funciona.

Paso 1 de 7 **Un aspecto para cada marcador** Cada hotspot de la escena lleva el mismo marcador con tu imagen; su categoría decide el color, el icono y la forma.

Apunta a un marcador — Paso 1 de 7 **Un aspecto para cada marcador** Cada hotspot de la escena lleva el mismo marcador con tu imagen; su categoría decide el color, el icono y la forma.

Prueba la demo

Un tour con decenas de hotspots no tiene ni un aspecto común ni un orden: cada escena se diseña a mano y un panorama lleno no le da al visitante ninguna forma de ver solo lo que le interesa. Hotspot Kit le da a cada hotspot el mismo marcador con tu imagen —icono, color, forma, estados, tooltip y rótulo—, los reparte en categorías que el visitante puede encender y apagar, y pone hasta seis acciones detrás de un solo marcador. Los marcadores se dibujan igual que el panorama, así que el mismo hotspot con estilo sigue ahí cuando el visitante se pone unas gafas.

Instalación.

1
Copia una carpeta

Pon la carpeta cifrada del plugin en tu tour y añade un elemento plugin a tu XML.
2
Da nombre a tus categorías

Declara una vez las categorías de tu tour, con su color, icono y forma, y dale a cada hotspot la suya.
3
Cambia todo el tour en una línea

Un tema, un estilo o una categoría cambia todos los marcadores de todas las escenas a la vez: ninguna escena se edita a mano.

Por qué marca la diferencia.

Un aspecto para todo el tour

Seis temas, cinco formas, 69 iconos propios y colores libres dan a cada hotspot de cada escena el mismo marcador con tu imagen.

El visitante decide qué ve

Las categorías con panel de filtro dejan que el visitante oculte lo que no le interesa, con recuento por escena y la elección guardada.

Los hotspots con estilo sobreviven a la VR

El marcador, su etiqueta y su filtro se dibujan dentro del panorama, así que siguen ahí con unas gafas, donde HTML y CSS nunca llegan.

Tu tour actual, sin tocarlo

Una regla rediseña un tour que ya existe; el kit añade sus eventos junto a los tuyos y, al apagarlo, cada valor vuelve a su sitio.

Capturas de pantalla.

Prueba la demo

**Ordenador** Cuatro marcadores de tres categorías en una sala, con un rótulo abierto sobre el león.

**Móvil** En el móvil el panel de filtro se abre como una lista completa con filas grandes y el recuento por categoría.

**Detalle** El marcador bajo el puntero crece y muestra su texto.

Ajustes.

Se configuran como atributos en el XML de tu tour.

Ajuste	Tipo	Predeterminado	Descripción
`active`	Sí / No	`true`	Activa o desactiva el kit en tiempo de ejecución; false devuelve a cada hotspot su aspecto y sus eventos originales (por defecto true).
`theme`	Lista	`solid`	El nivel más amplio del aspecto: los seis temas son conjuntos de valores por defecto para cada clave de estilo (por defecto solid). `solidglassoutlineminimaldarklight`
`default_style`	Texto	—	Nombre de un elemento <z360_hotspot_kit_style> que usan todos los marcadores sin estilo propio (por defecto: ninguno).
`adopt`	Lista	`marked`	marked solo toma los hotspots con un atributo z360_hotspot_kit_*; rules toma además lo que coincide con una <z360_hotspot_kit_rule> (por defecto marked). `markedrules`
`debug`	Sí / No	`false`	Escribe en la consola del navegador cuántos hotspots se han tomado y restaurado (por defecto false).
`animation_max`	Número	`20`	Cuántos marcadores pueden ejecutar su animación en reposo a la vez, primero los más cercanos al centro de la vista (0–200, por defecto 20).
`visited_memory`	Lista	`session`	session recuerda los marcadores visitados durante la sesión del navegador, none los olvida enseguida (por defecto session). No se guarda nada más allá de la sesión. `sessionnone`
`reduced_motion`	Lista	`auto`	auto sigue el ajuste del sistema «reducir movimiento», on desactiva siempre el movimiento, off anima siempre (por defecto auto). `autoonoff`
`keyboard`	Lista	`auto`	auto da marcadores enfocables con el teclado a los dispositivos con ratón y marcadores WebGL a los táctiles; true fuerza marcadores de teclado en todas partes, false marcadores WebGL (por defecto auto). `autotruefalse`
`panel`	Sí / No	`true`	Muestra el panel de filtro para el visitante; false mantiene las categorías pero no muestra panel (por defecto true).
`panel_slot`	Lista	`middle-left`	Dónde se sitúa el panel de filtro en la pantalla; el núcleo común evita que nuestros plugins se solapen allí (por defecto middle-left). `top-lefttop-centertop-rightmiddle-leftmiddle-rightbottom-leftbottom-centerbottom-right`
`panel_offset`	Texto	`12\|0`	Distancia del panel de filtro al borde de su ranura, como x\|y en píxeles de escenario (por defecto 12\|0).
`panel_start`	Lista	`collapsed`	Si el panel de filtro empieza como un botón pequeño o ya abierto (por defecto collapsed). `collapsedopen`
`panel_counts`	Lista	`scene`	scene muestra cuántos marcadores de una categoría hay en la escena actual, none no muestra recuentos; solo decide si se dibuja el número, nunca lo que sabe panel_empty (por defecto scene). `scenenone`
`panel_empty`	Lista	`disable`	Qué ocurre con una categoría sin marcadores en la escena: ocultarla, mostrarla en gris o mostrarla normal — la fila compacta de fichas en VR sigue la misma regla (por defecto disable). `hidedisableshow`
`panel_show_all`	Sí / No	`true`	Muestra los botones «Mostrar todo» y «Ocultar todo» al final del panel de filtro (por defecto true).
`panel_max_height`	Número	`60`	Altura máxima del panel abierto en porcentaje de la pantalla; una lista más larga se desplaza por dentro (20–100, por defecto 60).
`text_panel_title`	Texto	`Filter`	El título del panel de filtro y el texto de su botón plegado; con lang_keys es una clave, y sin entrada aparece «Filter» (por defecto «Filter»).
`text_show_all`	Texto	`Show all`	El texto del botón «mostrar todas las categorías»; con lang_keys es una clave, y sin entrada aparece «Show all» (por defecto «Show all»).
`text_hide_all`	Texto	`Hide all`	El texto del botón «ocultar todas las categorías»; con lang_keys es una clave, y sin entrada aparece «Hide all» (por defecto «Hide all»).
`remember`	Lista	`session`	session conserva el filtro durante la visita y lo lee de un enlace, url solo lo lee del enlace, none no recuerda nada (por defecto session). El kit nunca escribe la dirección de la página. `sessionurlnone`
`tooltip`	Lista	`hover`	hover muestra el texto de un marcador al apuntarlo, always los textos de los marcadores a la vista, zoomed solo por debajo de labels_fov_below, none nunca (por defecto hover). `hoveralwayszoomednone`
`tooltip_touch`	Lista	`first-tap`	En pantalla táctil: first-tap muestra el texto y el segundo toque ejecuta la acción, long-press lo muestra tras medio segundo, direct ejecuta de inmediato (por defecto first-tap). `first-taplong-pressdirect`
`tooltip_delay`	Número	`0.15`	Segundos entre apuntar a un marcador y la aparición del tooltip (0–2, por defecto 0.15).
`tooltip_max_width`	Número	`260`	Ancho máximo de un tooltip en píxeles de escenario; el texto más largo se ajusta (80–600, por defecto 260).
`tooltip_position`	Lista	`auto`	auto elige el lado que cabe y mantiene el tooltip en pantalla; un lado indicado se conserva y solo se desplaza (por defecto auto). `autotopbottomleftright`
`callout_line`	Texto	`1\|#FFFFFFCC`	La línea guía de un rótulo como ancho\|color, o none para ninguna línea (por defecto 1\|#FFFFFFCC).
`labels_fov_below`	Número	`0`	Campo de visión en grados por debajo del cual aparecen las etiquetas permanentes y los tooltips zoomed; 0 significa sin umbral (0–179, por defecto 0).
`navigate_mode`	Lista	`event`	event deja la transición de escena a la visita y a nuestros otros plugins, native deja que el kit elija la mezcla de navigate_blend (por defecto event). `eventnative`
`navigate_blend`	Texto	`BLEND(0.6)`	La expresión de mezcla de krpano usada cuando navigate_mode es native (por defecto BLEND(0.6)).
`send_track`	Sí / No	`true`	Envía un evento z360_track al hacer clic en un marcador, al ejecutar una acción del menú y al cambiar el filtro, para las estadísticas de la visita (por defecto true).
`pause_on_media`	Sí / No	`true`	Detiene las animaciones en reposo mientras se reproduce un vídeo o sonido de otro plugin z360, y reanuda solo lo que detuvo (por defecto true).
`scale_mode`	Lista	`fixed`	fixed mantiene cada marcador del mismo tamaño en todos los zooms, zoom hace que crezca y se reduzca con el zoom dentro de size_limits (por defecto fixed). `fixedzoom`
`size_limits`	Texto	`16\|72`	Tamaño mínimo\|máximo del marcador en píxeles de pantalla para scale_mode="zoom" (por defecto 16\|72).
`hide_fov_above`	Número	`0`	Por encima de este campo de visión en grados, los marcadores con priority="low" se ocultan y desactivan; 0 desactiva la regla (0–179, por defecto 0).
`declutter`	Número	`0`	Número máximo de etiquetas permanentes a la vez, primero las más cercanas al centro; 0 las muestra todas (0–50, por defecto 0).
`distance_fade`	Texto	`0\|0`	Atenúa los marcadores según su distancia a la cámara, como inicio\|fin en unidades de krpano —no centímetros—; 0\|0 lo desactiva. Requiere una escena con depthmap o 3D, o un depth propio en cada hotspot (por defecto 0\|0).
`vr_scale`	Número	`1.6`	Cuánto crecen los marcadores cuando el visitante se pone unas gafas (1–4, por defecto 1.6).
`vr_hit_padding`	Número	`0.5`	Zona de acierto invisible adicional alrededor de cada marcador en VR, como múltiplo de su tamaño; 0 la desactiva (0–2, por defecto 0.5).
`vr_dwell`	Lista	`auto`	auto añade una selección por mirada solo si la configuración de VR de la visita no la tiene, on siempre, off nunca (por defecto auto). `autoonoff`
`vr_dwell_time`	Número	`1.5`	Segundos que la mirada debe permanecer en un marcador antes de seleccionarlo (0.5–5, por defecto 1.5).
`vr_labels`	Lista	`gaze`	En VR: gaze muestra el tooltip de un marcador al mirarlo, always los de los marcadores a la vista, none ninguno (por defecto gaze). `gazealwaysnone`
`vr_panel`	Lista	`hide`	hide deja el filtro fuera de la VR, compact dibuja bajo el horizonte una fila de fichas de categoría a las que el visitante mira hacia abajo, cada una con la etiqueta y el recuento de su fila en pantalla (por defecto hide). `hidecompact`
`lang_keys`	Sí / No	`false`	Lee cada texto del kit como una clave de las tablas <languages> de la visita, para que los marcadores cambien de idioma con ella; los tres textos del kit — el título del panel y sus dos botones — vuelven a un inglés legible cuando las tablas no responden a su clave, mientras que sus propios textos (nombres de categoría, descripciones emergentes, llamadas y nombres de acción) se dibujan exactamente como los escribió, por lo que una clave sin entrada se le muestra al visitante como esa clave (por defecto false).
`hide_on_compare`	Sí / No	`true`	Oculta y desactiva los marcadores mientras nuestro plugin Compare Views muestra una comparación, y los restaura después (por defecto true).
`search_reveal`	Sí / No	`true`	Vuelve a mostrar una categoría cuando el visitante encuentra uno de sus marcadores con la búsqueda de nuestro Tour Navigator, para que ningún resultado quede muerto (por defecto true).
`icon`	Texto	`dot`	Cuál de los 69 iconos muestra un marcador, por ejemplo info, star, door, wc o plane (por defecto dot).
`shape`	Lista	`circle`	La forma de la placa tras el icono; un pin apoya su punta en la posición del hotspot, cualquier otra forma se centra en ella (por defecto circle). `circleroundedsquarepinnone`
`size`	Número	`36`	Tamaño del marcador en píxeles de pantalla (16–128, por defecto 36; el tema minimal usa 28).
`color`	Color	`#FFFFFF`	Color del icono dentro de la placa (por defecto #FFFFFF, del tema).
`bg_color`	Color	`#1E88E5E6`	Color de la placa, con transparencia opcional como #RRGGBBAA (por defecto #1E88E5E6, del tema).
`border`	Texto	`2\|#FFFFFF`	El borde de la placa como ancho\|color, o none (por defecto 2\|#FFFFFF, del tema).
`shadow`	Sí / No	`true`	Dibuja una sombra suave bajo el marcador para que siga siendo legible sobre un panorama claro (por defecto true, del tema).
`label`	Lista	`none`	Dónde se coloca la etiqueta permanente de un marcador, o none para ninguna (por defecto none). En un hotspot la posición es z360_hotspot_kit_label_pos. `nonerightleftabovebelow`
`text_css`	Texto	—	CSS adicional para la etiqueta, el tooltip y el rótulo, por ejemplo una tipografía o un tamaño mayor (por defecto: ninguno).
`animation`	Lista	`ring`	La animación en reposo que hace notar un marcador: un pulso, un anillo que se expande, un pequeño rebote, un fundido respirando o un brillo suave (por defecto ring). `nonepulseringbouncebreatheglow`
`animation_interval`	Número	`4`	Segundos de pausa entre dos pasadas de la animación en reposo; 0 no pausa nunca (0–60, por defecto 4).
`hover_scale`	Número	`1.15`	Cuánto crece un marcador al apuntarlo o cuando tiene el foco del teclado (1–2, por defecto 1.15).
`hover_bg_color`	Color	—	Color de la placa al apuntar el marcador; vacío mezcla su propio color un 18 % hacia el blanco (por defecto: vacío).
`active_mode`	Lista	`ring`	Cómo muestra un marcador que la ventana que abrió está abierta: un anillo, la placa rellena o nada (por defecto ring). `ringfillnone`
`visited_mode`	Lista	`dim`	Cómo se ve un marcador ya abierto: atenuado, con una pequeña marca de verificación o igual (por defecto dim). `dimchecknone`

Ejemplo

<!-- hotspotkit.xml, included once by your tour.xml -->
<plugin name="z360_hotspot_kit"
        url="plugins/z360_hotspot_kit/z360_hotspot_kit.js"
        keep="true"
        theme="solid"
        declutter="4"
        vr_panel="compact" />

<z360_hotspot_kit_category name="exhibits" label="Exhibits" order="1" icon="star" bg_color="#1E88E5E6" />
<z360_hotspot_kit_category name="rooms"    label="Rooms"    order="2" icon="door" bg_color="#7C3AEDE6" shape="pin" />

<z360_hotspot_kit_action name="go_hall" type="navigate" label="Mammal hall" icon="door" scene="scene_hall_of_mammals" />

<!-- in your scene: an ordinary krpano hotspot, with no image of its own -->
<hotspot name="poi_lion" ath="-30" atv="12.7"
         z360_hotspot_kit_category="exhibits"
         z360_hotspot_kit_tooltip="Lion diorama, mounted 1904"
         z360_hotspot_kit_callout="-7|-15" />

Características

Seis temas, cinco formas, colores y bordes libres y 69 iconos dibujados para este producto
Estados de puntero, foco de teclado, activo y visitado, cada uno con un fundido real
Cinco animaciones en reposo con presupuesto y respeto total por «reducir movimiento»
Categorías con panel de filtro, recuento por escena y elección guardada durante la visita o llevada en un enlace
Tooltips que respetan los bordes con tres modos táctiles, y rótulos anclados en el panorama con línea guía
De una a seis acciones detrás de un marcador: cambiar de escena, mirar, abrir una página, llamar a una acción o hablar con otro plugin
Tamaño según el zoom, presupuesto de etiquetas y atenuación por distancia para escenas con depthmap y 3D
VR: marcadores más grandes, zona de acierto invisible mayor, selección por mirada, etiquetas por mirada y fila de filtro compacta — verificado en el modo VR simulado de krpano, aún no en unas gafas VR
Navegación con teclado con un orden de foco real y un menú para lectores de pantalla
Adopta por regla los hotspots de un tour existente y restaura cada valor al apagarse
Funciona junto a nuestros otros plugins de krpano: Tour Navigator, Floor Plan, Info Cards, Media Gallery, Compare Views, Walk Navigation y Detail Loupe