Расширенная настройка интерфейса krpano

В этом материале собрана информация, так или иначе разбросанная по разным статьям. В ней вы найдёте много полезного, если ищете справку по определённым функциям krpano.

Откройте файл tour.xml в выбранном вами редакторе, и увидите примерно такой код:

<krpano version="1.19" title="Virtual Tour">

	<include url="skin/vtourskin.xml" />

	<skin_settings maps="false"
	               maps_type="bing"
	               maps_bing_api_key=""
	               maps_zoombuttons="false"
	               gyro="true"
	               littleplanetintro="false"
	               title="true"
	               thumbs="true"
	               thumbs_width="120" thumbs_height="80" thumbs_padding="10" thumbs_crop="0|40|240|160"
	               thumbs_opened="false"
	               thumbs_text="false"
	               thumbs_dragging="true"
	               thumbs_onhoverscrolling="false"
	               thumbs_scrollbuttons="false"
	               thumbs_scrollindicator="false"
	               thumbs_loop="false"
	               tooltips_buttons="false"
	               tooltips_thumbs="false"
	               tooltips_hotspots="false"
	               tooltips_mapspots="false"
	               deeplinking="false"
	               loadscene_flags="MERGE"
	               loadscene_blend="OPENBLEND(0.5, 0.0, 0.75, 0.05, linear)"
	               loadscene_blend_prev="SLIDEBLEND(0.5, 180, 0.75, linear)"
	               loadscene_blend_next="SLIDEBLEND(0.5,   0, 0.75, linear)"
	               loadingtext="loading..."
	               layout_width="100%"
	               layout_maxwidth.normal="900"
	               layout_maxwidth.mobile=""
	               controlbar_width.normal="-44"
	               controlbar_width.mobile="100%"
	               controlbar_height.normal="38"
	               controlbar_height.mobile="34"
	               controlbar_offset.normal="22"
	               controlbar_offset.mobile="0"
	               controlbar_offset_closed="-40"
	               controlbar_overlap.normal="7"
	               controlbar_overlap.mobile="2"
	               design_skin_images="vtourskin.png"
	               design_bgcolor="0x000000"
	               design_bgalpha="0.5"
	               design_bgborder="0 0xFFFFFF 1.0"
	               design_bgroundedge.normal="9"
	               design_bgroundedge.mobile="1"
	               design_bgshadow="0 0 9 0xFFFFFF 0.5"
	               design_thumbborder_bgborder="4 0xFFFFFF 1.0"
	               design_thumbborder_padding="2"
	               design_thumbborder_bgroundedge="5"
	               design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"
	               design_text_shadow="1"
	               />

<!--Здесь будет еще много строк кода-->
</krpano>

Давайте внесем некоторые изменения в наш виртуальный тур, но сначала разберемся в наиболее полезных переменных.

Подробнее об элементах tour.xml

Открывающий тег krpano сообщает движку, что код предназначен для krpano, имя тура Virtual Tour, а версия программы, в которой создан документ, — 1.19. Title можно менять, это подпись вашего тура.

<krpano version="1.19" title="Virtual Tour">

Оператор skin_settings содержит переменные, с помощью которых настраивается оформление виртуального тура:

<skin_settings />

Еще несколько операторов include «подключают» к туру различные стили оформления, если выполнено некоторое условие. Об этом будем говорить в следующих материалах.

 <include url="skin/vtourskin_design_glass.xml" if="design === 'glass'" />
 <include url="skin/vtourskin_design_flat.xml" if="design === 'flat'" />
 <include url="skin/vtourskin_design_flat_light.xml" if="design === 'flat_light'" />
 <include url="skin/vtourskin_design_ultra_light.xml" if="design === 'ultra_light'" />
 <include url="skin/vtourskin_design_117.xml" if="design === '117'" />

Action — это сценарий. Здесь описаны действия, которые выполняются при первом запуске тура. К ним мы вернемся в следующих частях.

 <action name="startup" autorun="onstart">
  if(startscene === null OR !scene[get(startscene)], copy(startscene,scene[0].name); );
  loadscene(get(startscene), null, MERGE);
  if(startactions !== null, startactions() );
 </action>

Оператор scene обрамляет данные, описывающие панораму. Для каждой панорамы используется свой оператор Scene с уникальными данными:

<scene>
</scene>

Закрывающий тег, который обозначает окончание кода, относящегося к krpano:

</krpano>

Прежде всего, подпишем наши сцены, чтобы они могли отображаться красиво. Взгляните на оператор scene.

Все дальнейшие изменения мы будем вносить в верхней части файла, в операторе skin_settings.

Некоторые переменные, влияющие на оформление интерфейса krpano:

Включить/выключить гироскоп:

gyro="true"

Маленькая планета при запуске первой панорамы

littleplanetintro="false" <!--  (true|false) -->

Выводить заголовок панорамы над превьюшками?

title="true"

Показывать превьюшки?

thumbs="true"

Превьюшки по умолчанию открыты?

thumbs_opened="false"

Подписи на превьюшках (true|false).

thumbs_text="false"

Включить перетаскивание превьюшек мышкой? (true|false).

thumbs_dragging="true"

Включить прокрутку превьюшек при наведении мыши? (true|false).

thumbs_onhoverscrolling="false"

Включить кнопки прокрутки превьюшек? (true|false).

thumbs_scrollbuttons="false"

Включить индикатор прокрутки превьюшек? (true|false).

thumbs_scrollindicator="false"

Зацикливание превьюшек при прокручивании (true|false).

thumbs_loop="false"

Показать подсказки на кнопках в панели управления? (true|false).

tooltips_buttons="false"

Показать подсказки на превьюшках? (true|false).

tooltips_thumbs="false"

Показать подсказки на хотспотах? (true|false).

tooltips_hotspots="false"

Включить запись текущей сцены и параметров просмотра в адресную строку? (true|false).

deeplinking="false"

Текст, который отображается при загрузке панорам (любой текст)

loadingtext="loading..."

Ширина интерфейса (числа или проценты)

layout_width="100%"

Максимальная ширина панели управления (числа или проценты)

layout_maxwidth.normal="900"

Максимальная ширина панели управления для мобильных (числа или проценты)

layout_maxwidth.mobile=""

Ссылка на png файл с кнопками (название файла)

design_skin_images="vtourskin.png"

Фоновый цвет панели управления в формате hex (например, 0xff0000 — красный)

design_bgcolor="0x000000"

Прозначность фона панели управления (числа от 0 до 1)

design_bgalpha="0.5"

Оформление границ панели управления

design_bgborder="0 0xFFFFFF 1.0"

Скругление углов панели управления (числа)

design_bgroundedge.normal="9"

Скругление углов панели для мобильных (числа)

design_bgroundedge.mobile="1"

Оформление тени, которую отбрасывает панель

design_bgshadow="0 0 9 0xFFFFFF 0.5"

Оформление рамки превьюшки

design_thumbborder_bgborder="4 0xFFFFFF 1.0"

Отступ рамки превьюшки (числа)

design_thumbborder_padding="2"

Скругление углов рамки превьюшки (числа)

design_thumbborder_bgroundedge="5"

Оформление текста, появляющегося при наведении мыши на элементы интерфейса, в заголовках и т.д. (css)

design_text_css="color:#FFFFFF; font-family:Arial; font-weight:bold;"

Размер тени текста  (числа)

design_text_shadow="1"

Здесь приведены не все параметры, которые вы можете менять. Многое из того, что не вошло в эту статью, вы увидите в следующих материалах. Когда придет время.

Вот и все. Изменив несколько строк, вы можете изменить оформление тура если не полностью, то очень сильно. Давайте поговорим о некоторых типовых параметрах подробнее.