поиск

KRPANO xml. Не знаете как пользоваться xml krpano?

Для начала скачиваем архив с примерами.

Тут я расскажу о структуре xml, что такое krpano xml, и с чем его едят ))


  И так, xml - это некий язык программирования чем то схожий с HTML. Состоит из тегов, параметров и данных. Теги это команды они обязательно пишутся внутри <...>. Тег(команда) имеет вид <krpano version="1.0.8">....</krpano> 1 Отрываем тег 2 закрываем! Тег закрывается так </...> Каждый тег должен быть закрыт! Есть исключение, тег может быть закрыт сам в себе, например <display details="22" /> слеш в конце говорит о том что тег закрыт! Между тегами могут быть данные или вложенные теги. Например :

<krpano version="1.0.8">
 

<display details="22" />
<preview url="pano1/preview.jpg" />
<image type="CUBE" multires="true" tilesize="768" progressive="false">

<level tiledimagewidth="191" tiledimageheight="191">

<left url="pano1/l1_l_%0v_%0h.jpg" />
<front url="pano1/l1_f_%0v_%0h.jpg" />
<right url="pano1/l1_r_%0v_%0h.jpg" />
<back url="pano1/l1_b_%0v_%0h.jpg" />
<up url="pano1/l1_u_%0v_%0h.jpg" />
<down url="pano1/l1_d_%0v_%0h.jpg" />

</level>

</image>

 

</krpano>

  В этом примере в первой строчке указываем, что xml для krpano и то что он версии 1.0.8. Во второй строчке задаём качество панорамы, точнее количество деталей сферы. В строчке 3 сообщаем где лежит файл предпросмотра панорамы, а дальше в теге image идёт сама панорама. В принципе это готовый xml для одной панорамы без каких либо настроек. Их потом можно будет добавлять во внутрь тега <krpano version="1.0.8">....</krpano>
Пример с таким xml лежит тут \Example\001

  Теперь приступим к рассмотрению настроек. Настраивать будем как в ручную в xml так и визуально. Для этого скопируем и вставим в наш предыдущий чистый xml, в конец, перед </krpano>, следующий текст :

<view hlookat ="0.00000"

vlookat ="0.00000"
camroll ="0.00000"
fovtype ="HFOV"
fov ="120.0000"
fovmin ="4.0000"
fovmax ="160.000000"
maxpixelzoom ="10.000000"
limitfov ="true"
fisheye ="0.00"
fisheyefovlink="0.00"
stereographic ="true"
pannini ="false"
architectural ="0.0"
architecturalonlymiddle="false"
limitview ="auto"
hlookatmin ="NaN"
hlookatmax ="NaN"
vlookatmin ="NaN"
vlookatmax ="NaN"
/>


<control usercontrol ="all"

mousetype ="moveto"
zoomtocursor ="false"
zoomoutcursor ="true"
mouseaccelerate="1.00"
mousespeed ="10.00"
mousefriction ="0.80"
headswing ="0.00"
keybaccelerate ="0.50"
keybspeed ="10.00"
keybfriction ="0.90"
keybinvert ="false"
mousefovchange ="1.00"
keybfovchange ="0.75"
fovspeed ="3.00"
fovfriction ="0.90"
movetocursor ="none"
cursorsize ="10.0"
keycodesleft ="37"
keycodesright ="39"
keycodesup ="38"
keycodesdown ="40"
keycodesin ="16,65,107"
keycodesout ="17,89,90,109"
/>


<plugin name="options" url="%SWFPATH%/plugins/options.swf" />
<plugin name="editor" url="%SWFPATH%/plugins/editor.swf" />


<include url="%SWFPATH%/dop/mouse_right_menu.xml" />
<include url="%SWFPATH%/dop/mouse_cursors.xml" />

<include url="%SWFPATH%/dop/style.xml" />

Первый Тег view - содержит настройки просмотра(вида) панорамы.

ОСНОВНЫЕ НАСТРОЙКИ:

vlookat, hlookat - Горизонтальное, Вертикальное смещение от точки по умолчанию. Задаётся в градусах, в тех случаях когда хочется, что бы панорама открывалась с видом отличным от того, что по умолчанию(грубо говоря поворачиваем по горизонтали и вертикали).

fov, fovmin, fovmax - Угол обзора, минимальный угол обзора и максимальные угол обзора. Задаётся в градусах. Грубо говоря регулируем зум. Кстати ещё один параметр влияет на зум maxpixelzoom - он указывает на сколько можно приближать относительно 100% увеличения пикселей. по умолчанию это 1 эквивалентно просмотру фотографии в оригинале, если поставить 2 то будет эквивалентно двукратному увеличению.


  Второй Тег control - содержит настройки мыши, скорости и плавности.
Тут, как бы всё по уже нормально настроено. В любом случае дальше будет возможность подобрать настройки!
Последующие две строчки подключают 2 плагина. (В них указываем путь до плагина, swf файл плагина.)

1) плагин options позволяет визуально крутить настройки для тега view и control смотреть значения и вносить их в xml в соответствующий параметр. Например h/v lookat соответствует двум параметрам hlookat, vlookat
2) плагин editor позволяет визуально вставлять hotspot(Активный полигон, картинка, кнопка), так же lensflare(солнечный блик), в нём же можно просматривать получившийся xml файл, тоесть после какого либо изменения виртуально изменяется xml и можно посмотреть, что изменилось и скопировать в свой на диске, вот только не всё нужно копировать.

%SWFPATH% так обозначается путь до места, где лежит swf файл панорамы. Соответственно %SWFPATH%/plugins/ означает папку plugins которая лежит вместе с swf файлом панорамы.

Последние 3 строчки include подключают дополнительные xml. Это я уже за раннее некоторые настройки написал, и если вы хотите, можете их использовать!

1) mouse_right_menu.xml В этом xml написал команды для управления всплывающем меню при клике правой кнопкой. Вы легко можете изменить текст в этом xml на свой

2) mouse_cursors.xml В этом xml написал команды для изменения вида курсора. Вы легко можете изменить вид курсора, изменив qtvr-cursors.png

3) style.xml В этом xml настроил стиль с названием "style1" для текста. Вы легко можете изменить все настройки, я всё расписал ТУТ.

Пример смотри тут \Example\002


Теперь немножко расскажу как сделать hotspot

  Теперь немножко расскажу как сделать hotspot(Активный полигон, картинка, кнопка), для перехода на другую панораму. Начну с простого визуального способа.

  Значит подключаем плагин editor. Запускаем панораму, запускаем не pano1.swf, а pano1.html, жмём снизу по центру панорамы кнопку editor => hotspots => add poligonal hotspot, экран побледнеет, это значит можно рисовать. Для на чала в нужном месте дважды кликаем мышкой, далее одинарными кликами расставляем точки полигона. Для того, что бы закончить рисование опять двойной клик. Что бы удалить полигон нужно выделить его и двойной клик по нему. Что бы передвинуть вершину, тыкнуть мышкой в точку и передвинуть мышку в нужное место, после опять одинарный клик. Что бы передвинуть весь полигон надо вернуться на один уровень в верх, нажав снизу панорамы кнопку back после чего можно двигать полигон.
После того как проделаем данную процедуру, надо все наши изменения перенести в xml.
В этом не ничего сложного. Жмём снизу кнопку Back И жмём кнопку XML. Открылось окошко с виртуальным, новым xml. проматываем его в низ, почти до самого конца, ищем <hotspot name=... Выделяем от <hotspot name=... до самого конца этого тега тоесть так
<hotspot name="..."
           url=".."  
           keep="false"  
           ...  
           ...  
           editor=""  
     >  
     <point ath=".." atv=".." />  
     <point ath=".." atv=".." />  
     ...  
</hotspot>  

Копируем и вставляем в наш xml, в самый конец перед закрытием тега </krpano>
Если вы нарисовали несколько полигонов, найди все следующие <hotspot name=... и тоже скопируй в наш xml. Их количество соответствует количеству нарисованных полигонов. Про настройки hotspot напишу ниже.
А теперь самое интересное, добавление изображения(анимации или swf) в качестве hotspot(кнопки), в панораму. Подготавливаем изображение (jpg, png, gif, swf) и кладём их в папку с нашей панорамой точнее рядом с sfw файлом панорамы, можно вложить в папку как это сделал я в
\Example\003

  Я поместил анимацию в папку plugins\hotspot_ani_white.swf
После чего открываем нашу панораму через html, точнее запускаем не pano1.swf,а pano1.html. Жмём снизу по центру панорамы кнопку editor => hotspots => add image hotspot, И если у тебя установлен Flash10 то откроется окно выбора изображения, выбираем наше изображение и оно сразу добавляется и отображается. Тут же мы его перемещаем туда куда следует. Жмём снизу кнопку Back И жмём кнопку XML. Открылось окошко с виртуальным, новым xml. проматываем его в низ, почти до самого конца, ищем <hotspot name=... Выделяем от <hotspot name=... до самого конца этого тега тоесть так
<hotspot name="..."
           url=".."  
           keep="false"  
           ...  
           ...  
           editor=""  
     />  

Копируем и вставляем в наш xml, в самый конец перед закрытием тега </krpano> Если вы вставили несколько изображений, найдите все следующие <hotspot name=... и тоже скопируй в наш xml. Их количество соответствует количеству вставленных изображений. В случае если Flash10 не установлен придётся в ручную вписать в xml следующий текст
<hotspot name="hs1"

url="%SWFPATH%/plugins/hotspot_ani_white.swf"
keep="false"
ath="101.08340841462301" atv="1.916213564048363"
zoom="false" distorted="false" details="8" flying="0"
width="120" height="120"
scale="0.3" scale9grid="" scalechildren="false" rotate="0"
rx="0" ry="0" rz="0"
edge="center"
visible="true" enabled="true" usecontentsize="false" handcursor="true" capture="true" children="true"
zorder="0"
alpha="1.00" blendmode="normal" effect="" smoothing="true"
refreshrate="auto"
onhover="showtext('Всплывающая Надпись')"
onclick="looktohotspot(hs1);loadpano(pano2.xml, null, MERGE, ZOOMBLEND(1,2));"
devices="all"
editor=""
/>


Что здесь к чему в hotspot...
  Расскажу только про основные настройки, они почти одинаковые у полигонов и у изображений.

- name="hs1" - тут название хотспота, оно должно быть уникальным(не должно повторяться в пределах одной панорамы). Автоматически ставиться hs1, hs2, hs2, hs..
- ath=".." atv=".." - Горизонтальное и Вертикальное смещение от нулевой координаты(центр простыни)
- width="120" height="120" - ширина и высота изображения, задаётся только для изображений!
- scale="0.3" - масштаб от оригинального размера, задаётся только для изображений!
- alpha="1.00" - прозрачность. 1 не прозрачный, 0.5 прозрачный на 50%, 0 не видимый, задаётся только для изображений!
- onhover=".." - событие вызываемое при наведении курсора на изображение или полигон. В данном случае сделаем всплывающий текст showtext('тут любой текст'). Так же showtext('..') можно использовать на событие загрузки панорамы, тоесть показывать после загрузки панорамы, для этого достаточно главный тег (<krpano version="1.0.8">) заменить на <krpano version="1.0.8" onstart="showtext('..')"> - onclick="" - событие вызываемое при клике на изображение или полигон. В данном случае поворачиваем и приближаем панораму в то место, где тыкнули. Команда looktohotspot(hs1); поворачивает панораму так что бы хотспот(в данном случае hs1 - это название хотспота) был по центру экрана. Команда loadpano(pano2.xml, null, MERGE, ZOOMBLEND(1,2)); - начинает загрузку нового xml(тоесть панорамы, в данном случае pano2.xml), в первом параметре указываем путь до xml другой панорамы. Например так "pano2.xml" или так '%SWFPATH%/pano2.xml' или так '../%SWFPATH%/pano2.xml', вобщем зависит от того где находится требуемый xml. Подробнее почитай ТУТ.

У полигона тоже много разных настроек, вот они
fillcolor="0xffffff" - цвет заливки, (задаётся ХЕШ цвета, написал ниже)
fillalpha="0.00" - прозрачность заливки, от нуля до единицы
borderwidth="0.0" - толщина рамки
bordercolor="0xffffff" - цвет рамки
borderalpha="0.00" - прозрачность рамки от нуля до единицы
fillcolorhover="0xffffff" - цвет заливки при наведении мышки
fillalphahover="0.10" - прозрачность заливки, от нуля до единицы при наведении мышки
borderwidthhover="4.0" - толщина рамки при наведении мышки
bordercolorhover="0xffffff" - цвет рамки при наведении мышки
borderalphahover="0.80" - прозрачность рамки от нуля до единицы при наведении мышки
fadeintime="0.150" - скорость анимации при показе
fadeouttime="0.300" - скорость анимации при скрытии
fadeincurve="1.100" - скорость анимации, сами по тестируйте
fadeoutcurve="0.700" - скорость анимации, сами по тестируйте


  Цвета задаются в ХЕШ виде, ffffff это ХЕШ, в фотошопе можно выбрать цвет и там же видим его ХЕШ он состоит из шести букв и цифр.

Получение ХЕШа цвета в фотошопе

Пример смотри тут \Example\003

Теперь рассмотрим как настраивать стили текста. Причём таких стилей может быть любое количество.
<textstyle name="style1" - Тег задания стиля в параметре name пишем название стиля

font="verdana" - Название шрифта возможны варианты (tahoma, verdana, arial, sans-serif и другие стандартные шрифты)
fontsize="10" - размер шрифта
bold="true" - жирный (true) не жирный (false)
italic="false" - наклонный (true) не наклонный (false)
textcolor="0xffffff" - цвет текста
background="false" - фон под текстом вкл/выкл (true/false)
backgroundcolor="0xffffff" - цвет фона
border="false" - рамка вокруг текста вкл/выкл (true/false)
bordercolor="0xcccccc" - цвет рамки
alpha="1" - прозрачность текста от 0 до 1
blendmode="normal" - тип наложения(смешивания) возможные варианты (add, alpha, darken, difference, erase, hardlight, invert, lighten, multiply, normal, overlay, screen, shader, subtract)
effect="dropshadow(3,45,0x333333,2,0.6);" - тень от текста, всякие размеры и это 0x333333 цвет тени, в конце прозрачность от 0 до 1
origin="cursor" - какой курсор отображать
edge="bottom" - выравнивание, возможные варианты (top, bottom)
textalign="none" - выравнивание, возможные варианты (none, left, center, right)
xoffset="0" - смещение по оси x
yoffset="-10" - смещение по оси y
showtime="0.2" - задержка показа
fadetime="0.2" - задержка анимации
fadeintime="0.1" - скорость анимации
/>


  В дальнейшем этот стиль можно применить к показываемому тексту, например так showtext('тут любой текст', style1); Задание стиля я записал в .\dop\style.xml и подключил его к основному!

  На этом вроде можно было бы закончить... Но напишу ещё про то, как добавить Эффект солнечного блика. Подключаем плагин editor. Запускаем панораму, запускаем не pano1.swf, а pano1.html, жмём снизу по центру панорамы кнопку editor => lensflares и делаем двойной клик в нужном месте. Ставится блик, его можно переместить, для этого кликнуть в него и передвинуть в нужное место мышку, и опять кликнуть. Что бы удалить блик, дважды кликни в него. После установки блика жмём BACK => xml и ищем строчку <lensflare name="lf0" set="DEFAULT" visible="true" ath=".." atv=".." size="0.80" blind="0.60" blindcurve="4.00" />, копируем её в наш xml файл.

name - уникальное название блика, автоматически назначается так (lf0, lf1, lf2, lf..)
ath и atv - Горизонтальное и Вертикальное положение на панораме
size - размер блика
blind - яркость
blindcurve - что то связанное с отдельными бликами.

Я добавил блик только к первой панораме, смотри .\Example\003\pano1.xml

Да чуть не забыл обязательно положить файл krpano_default_flares.jpg в ту же папку, что и swf панорамы.
Файл krpano_default_flares.jpg можно изменять в фотошопе как душе угодно.

Файл маски бликов

После того как все настройки сделаны, не забудьте из xml удаить подключенные плагины editor и options

Ну вот, вроде как про всё основное написал. Удачи в экспериментах!

 

 

статья написана Сысоевым Александром
DESIGN STUDIO FOTKAI.RU

при копировании статьи обязательно указывайте источник www.fotkai.ru



Комментарии посетителей: [6]

Alan
21/09/2011 в 04:29:17

Внятно и информативно. Спасибо за материал. И, как говорится, афтар пеши есчо :)
Шепета Юрий Борисович
29/03/2013 в 00:46:37

Добрый день! Есть хотспоты (палегоны). При нажатии на хотспот всплывает текстовое окно со скролом. Таких хотспотов много. Какой акшен может упростить работу? А то прописывать надо каждый хотспот и к нему атрибут текста. Спасибо.
ShuM
29/03/2013 в 02:23:46

Можно сделать массив с текстовыми переменными в отдельном месте xml файла, а в событие клик выводить нужную переменную, название которой будет совпадать с названием хотспота... Но это только усложнит код...
Например так...
[img]http://fotkai.ru/blog/upimg/gettext.gif[/img]
Это позволит все текстовые подсказки держать в одном месте, но ни чуть не упростит написание кода...
Возможно ещё помогут упростит написание хотспотов. Когда все повторяющиеся настройки хотспота(например zorder, keep и т.д.) будут заданы в стиле, а те которые уникальны(например позиция) придётся прописывать в хотспоте.
Других вариантов я не могу предложить, у меня пока ещё не встречалось таких задач.
Разве что на панораме Питера http://fotkai.ru/?str=panorams&id=piter1 , но тут я все хотспоты вынес в отдельный xml файл и в начале основного xml файла подключал его.
Надеюсь хоть чем то помог.))
khot
25/05/2013 в 13:36:53

А как правильно прописать в хотпост чтобы при наведении всплывало изображение, а не текст (в принципе все понятно, просто интересует правильный синтаксис). Спасибо
ShuM
25/05/2013 в 17:26:04

khot, конструкция следующая, но можно обойтись без создания актионс, просто разместив содержимое актионс в соответствующем событии хотспота. В данном примере я решил  сделать к каждому хотспоту своё изображение, настройки положения слоёв и хотспотов упустил, придумайте сами ))
[img]http://fotkai.ru/blog/upimg/untitled-1.gif[/img]
khot
25/05/2013 в 18:33:38

Спасибо. все ясно

- *ФИО
- *Ваш E-mail
- *КОД С КАРТИНКИ
Ваш комментарий:

Поисковые фразы по которым приходят к нам с поисковиков:
krpano, урокиkrpano, ZOOMBLEND, fovmax, krpanow, crpano, _krpano, scalechildren, limitview, fisheyefovlink
Вся информация принадлежит компании
©2007-2014 DESIGN STUDIO FOTKAI.RU
Любое использование без разрешения и указания имени автора - ЗАПРЕЩЕНО!
Авторы : ShuM & Ann