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

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

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

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

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

  • 09.11.2016 в 18:59
    Permalink

    Добрый день!

    Была задача — заменить стандартные стрелочки на кастомные. Я обратил внимание что элементы 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? Каковые рекомендации по разработке?

    Ответ
    • 09.11.2016 в 23:44
      Permalink

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

      Ответ
  • 15.03.2016 в 12:37
    Permalink

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

    Ответ
    • 17.03.2016 в 12:34
      Permalink

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

      Ответ

Добавить комментарий

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

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