Construindo a navegação de um projeto

Preparar o início do tour.xml

				
						<include url="skin/vtourskin.xml" />
	<include url="%VIEWER%/plugins/garrows/garrows_settings.xml" />
	<include url="%VIEWER%/plugins/garrows/garrows.xml" />	
	<include url="%VIEWER%/ideia360/gps.xml" />
				
			

Se for um projeto de DRONE

Original

				
					onstart=""
				
			

Substituir por

				
					onstart="set(hotspot[nadir].visible,false);"
				
			

Original

				
					<control bouncinglimits="calc:image.cube ? true : false" />
				
			

Substituir por

				
					<control bouncinglimits="false" />
				
			

Original

				
					fov="120"
				
			

Substituir por

				
					fov="110.000"
				
			

Original

				
					fovmax="140" limitview="auto" />
				
			

Substituir por

				
					fovmax="120.0" limitview="range" hlookatmin="-180.0" hlookatmax="180.0" vlookatmin="-33.0" vlookatmax="90.0"/>
				
			

Se for um projeto de TERRESTRE

Original

				
					onstart=""
				
			

Substituir por

				
					onstart="set(hotspot[nadir].visible,true);"
				
			

Original

				
					fovmax="140"
				
			

Substituir por

				
					fovmax="120.0"
				
			

Abrir o tour.xml no Editor do Krpano

Posicionar todas as panos no melhor ângulo inicial e verificar o alinhamento:

Em cada uma das imagens é necessário posicionar a melhor visão do espaço e clicar no botão Set as startup view. E também verificar se a imagem não está torta (rotacionada), se estiver, é necessário alinhar através do botão Edit pano-type, depois clicar no botão Set North and Level the Pano, através dos simbulos de + e –, ajustar o alinhamento correto.

Depois para salvar, clicar em Apply Changes, Done e Apply Changes novamente.

Depois de realizado qualquer ajuste no projeto é necessário salvar o arquivo, através do botão Save tour.xml.

Incluir as setas no exato local onde foi posicionado o tripé da próxima imagem.

Código para o alinhamento da scene

Depois de identificar o valor a ser corrigido no alinhamento de transição, precisa substituir na scena.

				
					<image prealign="0|XXX|0">
				
			

Incluir os marcadores vermelhos nas panos.

O primeiro passo é copiar o código abaixo e incluir no local correto de cada scene que tiver vista para uma pano abaixo. 

				
							<hotspot name="target1" style="solo" ath="-111.69150614243185" atv="31.70560272231771" scale="0.194" rx="-50.1" ry="-33.54" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/, scene_40, null, MERGE, BLEND(1));" />
		<hotspot name="target2" style="solo" ath="-176.27441409576255" atv="40.53025860425745" scale="0.194" rx="-50.1" ry="-33.54" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/, scene_38, null, MERGE, BLEND(1));" />
		<hotspot name="target3" style="solo" ath="59.127490598909276" atv="34.98504732947671" scale="0.194" rx="-50.1" ry="-31.04" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/, scene_46, null, MERGE, BLEND(1));" />
		<hotspot name="target4" style="solo" ath="10.757232549841149" atv="22.143113355793723" scale="0.194" rx="-50.1" ry="-31.04" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/, scene_53, null, MERGE, BLEND(1));" />
		<hotspot name="target5" style="solo" ath="112.6545108282134" atv="14.32471495229407" scale="0.089" rx="-65.6" ry="-43.04" rz="-46.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/, scene_29, null, MERGE, BLEND(1));" />
		
				
			

Veja no código de exemplo abaixo o local para colar as informações dos marcadores:

				
					<scene name="scene_" title="" onstart="" thumburl="" lat="" lng="" heading="">
		
		<control bouncinglimits="" />

		<view hlookat="" vlookat="" fovtype="" fov="" maxpixelzoom="" fovmin="" fovmax="" limitview="" hlookatmin="" hlookatmax="" vlookatmin="" vlookatmax=""/>

		<preview url="panos/PANO00010.tiles/preview.jpg" />

		<image prealign="">
			<cube url="l%l_%s_%0v_%0h.jpg" multires="" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="" atv="" linkedscene="" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="" atv="" linkedscene=" />
		
		<hotspot name="target1" style="solo" ath="-111.69150614243185" atv="31.70560272231771" scale="0.194" rx="-50.1" ry="-33.54" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target2" style="solo" ath="-176.27441409576255" atv="40.53025860425745" scale="0.194" rx="-50.1" ry="-33.54" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target3" style="solo" ath="59.127490598909276" atv="34.98504732947671" scale="0.194" rx="-50.1" ry="-31.04" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target4" style="solo" ath="10.757232549841149" atv="22.143113355793723" scale="0.194" rx="-50.1" ry="-31.04" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target5" style="solo" ath="112.6545108282134" atv="14.32471495229407" scale="0.089" rx="-65.6" ry="-43.04" rz="-46.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		
	</scene>
				
			

Incluir o botão do drone e vincular o caminho

Antes de iniciar esta etapa é necessário ajustar o todo o arquivo xml e retirar a linha do GPS e colocar o SETUP:

				
						<include url="skin/vtourskin.xml" />
	<include url="ideia360/setup.xml" />
	<include url="%VIEWER%/plugins/garrows/garrows_settings.xml" />
	<include url="%VIEWER%/plugins/garrows/garrows.xml" />
				
			

Em cada uma das imagens que sejam de áreas externas e que tenha uma visão de drone em cima, é necessário identificar qual scene do drone é a melhor posição para vincular o botão.

Segue abaixo código do botão:

				
					<layer name="drone" parent="box1" type="image" style="icons" 
		url="ideia360/drone.svg" zorder="11" align="righttop" x="0" y="160" width="100%" height="prop" 
		onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXXXX, null, MERGE, BLEND(1));" />
				
			

Veja no código de exemplo abaixo o local para colar as informações dos marcadores:

				
					<scene name="scene_" title="" onstart="" thumburl="" lat="" lng="" heading="">
		
		<control bouncinglimits="" />

		<view hlookat="" vlookat="" fovtype="" fov="" maxpixelzoom="" fovmin="" fovmax="" limitview="" hlookatmin="" hlookatmax="" vlookatmin="" vlookatmax=""/>

		<preview url="panos/PANO00010.tiles/preview.jpg" />

		<image prealign="">
			<cube url="l%l_%s_%0v_%0h.jpg" multires="" />
		</image>
		<hotspot name="spot1" style="skin_hotspotstyle" ath="" atv="" linkedscene="" />
		<hotspot name="spot2" style="skin_hotspotstyle" ath="" atv="" linkedscene=" />
		
		<hotspot name="target1" style="solo" ath="-111.69150614243185" atv="31.70560272231771" scale="0.194" rx="-50.1" ry="-33.54" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target2" style="solo" ath="-176.27441409576255" atv="40.53025860425745" scale="0.194" rx="-50.1" ry="-33.54" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target3" style="solo" ath="59.127490598909276" atv="34.98504732947671" scale="0.194" rx="-50.1" ry="-31.04" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target4" style="solo" ath="10.757232549841149" atv="22.143113355793723" scale="0.194" rx="-50.1" ry="-31.04" rz="-40.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		<hotspot name="target5" style="solo" ath="112.6545108282134" atv="14.32471495229407" scale="0.089" rx="-65.6" ry="-43.04" rz="-46.25" onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXX, null, MERGE, BLEND(1));" />
		
		<layer name="drone" parent="box1" type="image" style="icons" 
		url="ideia360/drone.svg" zorder="11" align="righttop" x="0" y="160" width="100%" height="prop" 
		onclick="loadpanoscene(https://smartcitybr.s3.amazonaws.com/projetos/XXXXXXX, scene_XXXXX, null, MERGE, BLEND(1));" />
		
	</scene>
				
			

Preparar o arquivo index.html do projeto

Cada um dos ambientes que fazem parte do projeto, precisam estar vinculados no atalho do html. Para fazer este item primeiro é necessário identificar o nome de cada scene, que seja a melhor opção para iniciar um ambiente. 
Depois listar os ambientes em ordem alfabética e informar em cada linha o respectivo nome da scene, conforme exemplo abaixo:

				
					// Atalhos
			function academia() { if (krpano) { krpano.call("loadscene(scene_19, null, MERGE, BLEND(1));"); } }
			function bocha() { if (krpano) { krpano.call("loadscene(scene_42, null, MERGE, BLEND(1));"); } }
			function gourmet1() { if (krpano) { krpano.call("loadscene(scene_12, null, MERGE, BLEND(1));"); } }
			function gourmet2() { if (krpano) { krpano.call("loadscene(scene_18, null, MERGE, BLEND(1));"); } }
			function kids() { if (krpano) { krpano.call("loadscene(scene_57, null, MERGE, BLEND(1));"); } }
			function piscina() { if (krpano) { krpano.call("loadscene(scene_26, null, MERGE, BLEND(1));"); } }
			function playground() { if (krpano) { krpano.call("loadscene(scene_40, null, MERGE, BLEND(1));"); } }
			function tenis() { if (krpano) { krpano.call("loadscene(scene_22, null, MERGE, BLEND(1));"); } }
			function poly() { if (krpano) { krpano.call("loadscene(scene_53, null, MERGE, BLEND(1));"); } }
			function sinuca() { if (krpano) { krpano.call("loadscene(scene_11, null, MERGE, BLEND(1));"); } }
			function social() { if (krpano) { krpano.call("loadscene(scene_06, null, MERGE, BLEND(1));"); } }
			function futebol() { if (krpano) { krpano.call("loadscene(scene_50, null, MERGE, BLEND(1));"); } }