Павел Богданов

Список панорам с превьюшками

Да! Именно этого нам и не хватало, правда? Списка панорам с превьюшками. 21 сентября krpano обновил плагин combobox, и теперь не нужно колхозить какие-то собственные решения, а можно пользоваться этой фишкой «из коробки».

Чтобы добавить себе такой список, сделайте следующее:

1. Убедитесь, что в вашей папке plugins есть файл combobox.xml

2. Подключите в коде tour.xml плагин combobox.xml

<include url="%SWFPATH%/plugins/combobox.xml" />

3. Добавьте в код tour.xml вызов комбобокса:

<combobox name="cbscenes" design="vtour" align="lefttop" x="10" y="10" onloaded="add_scene_items();" />

Здесь вы можете менять дизайн. По умолчанию доступен default и vtour (последний на скришноте выше), но вы также можете оформить список на свой вкус. Например, можно добавить в код следующее:

	<combobox_design name="rounded" margin="3" open_close_speed="0.25">
		<style name="combobox_container_style"
			bgcolor="0xFFFFFF"
			bgalpha="0.95"
			bgborder="1 0xFFFFFF 0.5"
			bgroundedge="5"
			bgshadow="2 4 20 0x000000 0.5"
			/>
		<style name="combobox_marker_style"
			css="color:#999999;"
			bg="false"
			txtshadow=""
			/>
		<style name="combobox_item_style"
			css="color:#222222;"
			padding="4 4"
			bg="false"
			bgcolor="0xCCCCCC"
			bgalpha="1.0"
			bgroundedge="3"
			txtshadow=""
			onoveritem="set(css, 'color:#2277FF;');"
			onoutitem="set(css, 'color:#222222;');"
			/>
	</combobox_design>

Далее, указав design=»rounded» , вы получите следующее оформление списка панорам:

На настройках заострять внимание не буду, скажу лишь что они очень схожи с тем, что имеет в своём арсенале стандартный скин krpano.

4. Добавьте в код tour.xml функцию, которая создаёт список панорам с превьюшками:

	<action name="add_scene_items" scope="local">
		for(set(i,0), i LT scene.count, inc(i),
			caller.additem(calc('[img src=[dq]' + scene[get(i)].thumburl +  '[dq] style=[dq]border:1px solid rgba(255,255,255,0.5);width:64px;height:48px;vertical-align:middle;margin-right:8px;[dq]/] '+scene[get(i)].title), calc('loadscene('+i+',null,MERGE,BLEND(0.5))') );
		);
	</action>

Здесь вы также можете вносить изменения в соответствии с синтаксисом CSS. Вся эта строка редактируема:

border:1px solid rgba(255,255,255,0.5);width:64px;height:48px;vertical-align:middle;margin-right:8px;

Подробнее про CSS читайте в гугле.

5. Проделав всё это и не ошибившись ни разу, вы получите список панорам, и вот что вышло у меня.

Как вставить ваш логотип в krpano?

Не успели вы сделать тур, как хочется зарядить в него побольше ссылок на себя любимого? Что ж, постараюсь вам помочь в этом нелёгком деле.

Всё, что вам нужно знать — layer. Это переводится как «слой». Так в krpano называют контейнер, который:

• может иметь цвет, прозрачность, быть активным или неактивным, скрываться, показываться и менять размеры
• может реагировать на события (наведение, клик и т.д.)
• привязан к координатам окна с панорамой (X и Y), и позиционируется относительно его углов или центра
• может содержать в себе изображения

Вот последний пункт нас как раз интересует.

1. Подготовьте изображение с вашим логотипом. Желательно чтобы это был PNG файл с прозрачностью. Например, ваша компания Google. Отлично, можем взять её логотип и вставить в панораму. Если у вас пока что нет своей картинки, возьмите эту:

2. Положите это изображение в папку с туром. А чтобы был порядок, пусть это будет папка skin.

3. Создайте контейнер <layer></layer> в вашем tour.xml и добавьте в него несколько переменных:

<layer name="mylogo" url="%SWFPATH%/skin/logo.png" keep="true" />

Если вы забыли, плейсхолдер %SWFPATH% заставляет krpano отсчитывать иерархию папок начиная от корневого каталога, где лежит ваш swf файл. name — просто название контейнера, оно не должно начинаться с цифры, содержать пробелов, спецсимволов и кириллицы. keep — boolean атрибут, который отвечает за сохранность вашего логотипа при переходе от одной панорамы к другой. Ну что, давайте посмотрим что вышло…

А вышла какая-то дичь. Но так и должно было быть, мы ведь не уменьшили заранее картинку, не указали её место в панораме, ну и вообще.

4. Причешите внешний вид логотипа:

<layer name="mylogo" url="%SWFPATH%/skin/logo.png" keep="true" align="topright" x="10" y="10" edge="topright" alpha="0.8" scale="0.2" />

align — атрибут, указывающий на расположение объекта на экране. В нашем случае topright — выравнивание относительно правого верхнего угла. Есть также:

• x и y — отступы от точки привязки (в нашем случае правый верхний угол). Исчисляются в пикселях или в процентах.
• edge — до какой точки контейнера замерять отступы x|y. Или, иными словами, точка симметрии. Давайте представим, что изображение выровнено по центру (align=»center» x=»0″ y=»0″). Тогда:
  • edge=»center» — контейнер будет находиться строго в центре
  • edge=»topleft» — верхний левый угол контейнера в центре экрана, остальной контейнер правее и ниже
  • edge=»bottom» — середина нижней грани контейнера в центре экрана, весь контейнер выше середины
  • Возможны и другие варианты (top, topright, right, bottomright, bottom, bottomleft, left, topleft, center).
• alpha — непрозрачность контейнера. 1 — непрозрачный, 0 — полностью прозрачный
• scale — масштабирование контейнера. 1 — 100% размер, 0.5 — 50% размер, 0.1 — 10% размер.

5. Добавьте логотипу несколько событий

<layer name="mylogo" url="%SWFPATH%/skin/logo.png" keep="true" align="topright" x="10" y="10" edge="topright" alpha="0.8" scale="0.2" onclick="openurl(https://pavelbogdanov.ru,_blank);" onover="tween(scale,0.25); tween(alpha, 1);" onout="tween(scale,0.2); tween(alpha, 0.8);" />

• onover — при наведении мыши
• onout — мышка ушла за пределы объекта
• onclick — по щелчку

Что же значат эти конструкции onover=»tween(scale,0.25); ? Функция tween вызывается при наступлении события onover (наведение мыши). Будучи вызванной 1 раз, tween плавно приводит значение атрибута scale к 0.25, делая это в течение секунды. Поскольку событие вложено в контейнер mylogo, то и результат его действий распространяется только на этот контейнер. Если вы хотите, что бы при наведении мышки на логотип менялся какой-то другой контейнер, вы должны сделать так: onover=»tween(layer[xxx].scale,0.25);  где xxx — атрибут name того контейнера, к которому вы хотите применить это действие.

Функция tween может менять значения числовых переменных, точно так же она меняет прозрачность контейнера: tween(alpha, 1);

Если вы хотите, чтобы при наведении курсора на изображение выполнялось несколько функций, просто поместите их через точку с запятой: onover=»tween(scale,0.25); tween(alpha, 1);»

При вызове одиночной функции точка с запятой не обязательна: onover=»tween(scale,0.25)»

Так выглядит мой тур с логотипом.

Добавляем в виртуальный тур загрузчик

Давайте не будем всё усложнять. Просто откройте папку viewer\examples в вашем дистрибутиве krpano и найдите там всё необходимое. А именно, папку с названием loading-progress, в которой уже лежат рабочие примеры загрузчиков.

И ничего изобретать не нужно :) А вот как всё это работает на сайте krpano.

Чтобы сделать у себя полосу загрузки, просто добавьте в папку со своим туром один из трёх файлов или все три сразу:

• Анимированная загрузка
• Полоса загрузки
• Загрузка в процентах

Ну и не забудьте, что для анимированной загрузки нужно изображение в формате png.

Напомню! Эти файлы уже есть у вас в папке krpano\viewer\examples!

Подключаются файлы просто:

<include url="loading.xml" />

А вот что у меня получилось.

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