Рубрики
Дополнения krpano

Расширенная настройка интерфейса 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"

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

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

Уроки по созданию виртуальных туров
Уроки по созданию виртуальных туров

10 ответов к “Расширенная настройка интерфейса krpano”

Добрый день!

Была задача — заменить стандартные стрелочки на кастомные. Я обратил внимание что элементы hotspots имеют атрибут style=»skin_hotspotstyle». Далее залез в skin/vtourskin.xml, который подключен к туру с помощью строки и внес в него изменения, а именно в строке
<style name="skin_hotspotstyle" url="green_arrow_small.png" scale="0.7" edge="top" distorted="true"
указал ссылку url на мою новую стрелочку. Всё хорошо работает.

Вопрос, насколько правильно вносить изменения в vtourskin.xml? Может быть стоит все изменения стараться вносить в xml своего тура и не трогать vtourskin.xml? Каковые рекомендации по разработке?

Добрый день. В принципе, ничего кринимального в таких изменениях нет, но более корректно было бы поступить так:
1. создайте файл myskin.xml
2. подключите его к tour.xml при помощи строки
3. в созданном файле добавьте новый стиль:

С появлением превьюшек, надписей — все отлично работает. Но когда я пытаюсь изменить, предположим, значение design_bgcolor=»0x000000″ на другой цвет, то ничего с панелью управления не происходит. Такая же ситуация с оформлением превьюшек.Уточню — я имею в виду под «Панелью управления» нижнюю панель, на которой располагаются превью и элементы управления (больше/меньше, следующая/предыдущая и т.п.)

Дело в том, что у вас, скорее всего, подключен скин. Откройте ваш файл tour.html и найдите в нем строку initvars:{design:»flat»}. Там не обязательно будет именно flat, если вы уже изменили скин.
Так вот, посмотрите название, откройте вашу папку skin и найдите в ней соответствующий xml файл. Например, vtourskin_design_flat.xml — именно в нем нужно производить эти изменения.

Добавить комментарий для Руслан Отменить ответ

Ваш адрес email не будет опубликован.

Этот сайт использует Akismet для борьбы со спамом. Узнайте, как обрабатываются ваши данные комментариев.