Данная статья является первой в серии, посвященной работе с проигрывателем панорам krpano.
В этой серии статей будет последовательно описано как работать со скритовым языком программирования krpano: как создать интерактивную 3d-панораму; как добавить логотипы, кнопки, точки перехода в панораму; как реализовать меню и различные интерактивные элементы.
В статье Редактирование проекций и создание 3d-панорамы было показано как создать 3d-панораму при помощи Autopano Tour. Данная программа также основана на функционале krpano, но использует лишь малую часть его возможностей. Весь спектр возможностей, позволяющий реализовать почти любую творческую идею, можно получить только используя скрипты krpano. В данном цикле статей и будет рассказано как использовать этот инструмент.
Скриптовой язык будет описан в формате “для НЕпрограммистов”, поэтому некоторые формулировки для IT-специалистов могу показаться соответственно “не программистскими”. Но все таки фотографов увлекающихся 3d-панорамами больше чем фотографирующих программистов, поэтому и был выбран такой формат.
Подготовка к работе
Для работы вам потребуется krpano
krpano представляет собой пакет программ:
* krpano Viewer – просмотрщик панорам. В данном архиве содержится flash-файл вьювера с конфигурационными файлами и примерами.
* krpano Tools – набор дополнительных программ и так называемых дроплетов. Дроплеты это специальные исполняемые файлы (bat-файлы) которые решают какую-то определенную задачу. Например, трансформация плоской панорамы из сферической проекции в кубическую и создание на основе этого интерактивной 3d-панорамы. Помимо этого в архиве содержится krpano Protect Tool, при помощи которого можно защитить вашу 3d-панораму от несанкционированного использования.
Скачайте krpano и krpano Tools для вашей операционной системы.
Помимо этого для комфортной работы желательно скачать еще несколько программ:
* Adobe Flash Player (программа бесплатна)
http://www.adobe.com/support/flashplayer/downloads.html
Панорамы быстрее и удобнее открывать в самом флеш-плеере, а не при помощи интернет-браузеров. Скачайте флеш-плеер, и укажите Windows чтобы она открывала swf-файлы при помощи скаченного плеера.
* Notepad++ (программа бесплатна)
http://notepad-plus-plus.org/download/
Данная программа потребуется при работе с xml файлами, в которых будем писать скрипты krpano. Конечно, можно было бы использовать обычный блокнот, но это сильно усложняет работу со скриптами. В notepad++, в отличие от блокнота, имеется удобная подсветка кода, работа с кодировками, поиском и т.д.
* TotalCommander
http://wincmd.ru/plugring/totalcmd.html
Удобный файловый менеджер. В частности будет применяться для работы с дроплетами.
Материалы для работы
Для данного урока вам потребуются ряд материалов. Вы можете их подготовить их самостоятельно или воспользоваться уже готовым набором.
В данном наборе материалов:
* Подопытная плоская панорама в сферической проекции.
* Изображение логотипа, которые мы разместим в углу панорамы.
Начало работы с krpano. Лицензия
Распакуйте архив krpano в отдельную папку и запустите krpano.swf.
Вы увидете вьювер панорамы со множеством кнопок. Каждая кнопка это один из множества примеров использования krpano. На этих примерах, при необходимости, удобно ознакамливаться со способом реализации тех или иных функций. Скрипты из примеров лежат в папке examples.
Можно заметить, что посередине экрана расположена надпись krpano demo version. Если вы приобрели лицензию, то поместите файл krpano.license в папку с krpano.swf. После этого надпись исчезнет.
Update
Для версии krpano 1.17 и выше изменена система лицензирования. Теперь, при покупке, вы получаете коды, которые необходимо ввести в программу krpano tools. После активации кодов, надпись о демо-версии исчезнет.
Если вы ранее покупали krpano, то теперь вместо файлов лицензии необходимо получить код. Это можно сделать на данной странице krpano указав email, на который вы регистрировали krpano
Принципы работы с krpano
У krpano все управление проигрывателем происходит посредством скриптов.
Создайте у себя на диске папку с проектом, скопируйте туда:
* krpano.swf
* файл лицензии, если он у вас есть
Сейчас при запуске krpano пишется ошибка “FATAL: krpano.xml – loading error (IO Error)”. Т.е. krpano не может найти файл со скриптами управление панорамой.
Данный файл должен иметь такое же название как и проигрыватель, но иметь разрешение xml.
Создадим в той же папке krpano.xml. Также в папку скопируем panorama.jpg
Получим следующий набор файлов:
Теперь при запуске проигрывателя ошибка не показывается, но и панорамы тоже не видно. Для того чтобы панорама начала проигрываться надо ее указать в скриптах.
Работа со скриптами krpano
Откройте krpano.xml в notepad++ и добавьте в файл следующие строчки:
<krpano>
<image>
<sphere url="panorama.jpg" />
</image>
</krpano>
Сохраните файл и попробуйте вновь запустить krpano.swf. Теперь уже стала видна панорама.
Что обозначают эти строчки?
Скрипты krpano весьма схожи с другими скриптовыми языками, и если вы уже пробовали программировать на таких языках, то и данные скрипты очень быстро освоите. Если же нет, то они достаточно просты даже для тех кто ранее не занимался программированием.
Вся структура скриптов krpano строится на основе так называемых тегов.
Теги бывают открывающие (обозначаются именем в треугольных скобках) и закрывающие (то же самое, но перед именем ставится слеш).
Открывающий тег:
<krpano>
Закрывающий тег:
</krpano>
У каждого открывающего тега должен быть и закрывающий. Но есть и исключения. Посмотрите на строчку:
<sphere url="panorama.jpg" />
Здесь тег открывается, описывается его атрибут (url=”panorama.jpg”) и сразу сам закрывается. У такого тега нет необходимости дополнительно производить закрытие.
У подобных тегов слеш находится перед закрывающей треугольной скобки.
Вся программа должна быть описана между тегами krpano.
Тег image определяет файл панорамы, которая будет демонстрироваться при запуске проигрывателя.
Тег sphere показывает, что у нас панорама в сферической проекции.
Обычно у тегов есть набор атрибутов, которые определяют как он должен обрабатываться. Атрибуты описываются между именем тега и слешем через пробел.
<sphere url="panorama.jpg" />
Здесь у нас только один атрибут url, который равен строчке “panorama.jpg”. Значение всех атрибутов всегда необходимо писать в двойных кавычках.
Данный атрибут определяет какой файл необходимо проигрывать в качестве панорамы. Если он лежит не в папке с krpano, то надо описать полный путь к нему.
У некоторых тегов может быть большое количество атрибутов. Например, у тега textstyle
<textstyle name="buttonstyle" font="Arial" fontsize="12" bold="false" border="false" background="false" textcolor="0xFFFFFF"/>
Необязательно их всех описывать, необходимо только обозначить только необходимые. Все остальные атрибуты примут значения заданные по умолчанию.
Итак, мы создали первую, самую простую программу для krpano.
Вместе с тем для krpano лучше использовать панорамы не в сферической, а в кубической проекции. Это повысит качество и скорость загрузки панорамы. Чтобы перевести панораму в кубическую проекцию, необходимо воспользоваться дроплетами.
Работа с дроплетами
Дроплеты, это набор исполняемых файлов, которые автоматизируют работу над панорамами и виртуальными турами.
Если вы приобрели лицензию на krpano то скопируйте krpanotools.license и krpano.license в папку, куда разархивировали krpanotools. В случае отсутствия лицензии krpanotools поставит ватермарки на изображение панорамы, но функциональность дроплетов сохранится.
Для того чтобы перевести панораму из сферической проекции в кубическую надо воспользоваться дроплетом MAKE PANO (NORMAL) droplet.bat
Скопируйте panorama.jpg в папку с krpanotools. Наведитесь в Total Commander-е на MAKE PANO (NORMAL) droplet.bat и нажмите Ctrl+Enter. Название этого файла появится в нижней части окна. Затем навидитесь на panorama.jpg и вновь нажмите Ctrl+Enter. В нижней части окна получится строчка:
MAKE PANO (NORMAL) droplet.bat panorama.jpg
Затем нажмите Enter.
Запустится трансформация панорамы из сферической в кубическую проекцию.
Если вы не используете в своей работе Total Comander, а предпочитаете работать с windows проводником, то тогда вышеописанную операцию можно совершить как описано тут
Итак, после того как отработает дроплет вы получите следующий набор файлов:
panorama.swf
panorama.xml
panorama.js
panorama.html
и папку panorama.tiles
Дроплет помимо трансформации панорамы из сферической в кубическую создал ряд дополнительных файлов для проигрывания панорамы и размещения ее в интернете. В настоящее время нам потребуются только:
panorama.swf
panorama.xml
папка panorama.tiles
Скопируйте эти данные в отдельную новую папку проекта .
Анализ новых файлов проекта
Если у вас была лицензия и вы ее скопировали в папку с krpanotools, то после преобразования, вам нет необходимости в папке проекта держать krpano.license. Она уже прошита внутриpanorama.swf.
Никогда не выкладывайте в интернете файлы лицензии. Воспользуйтесь дроплетами или krpano Protect Tool чтобы “прошить” лицензию в файл проигрывателя.
В папке panorama.tiles содержатся 6 файлов сторон кубической проекции и один файл с превью. Данное превью представляет собой уменьшенные 6 сторон куба в одном файле. Этот файл грузится в первую очередь, чтобы пользователь не скучал перед черным экраном пока грузятся большие 6 сторон куба.
Итак, текущая папка проекта выглядит следующим образом
Вы можете запустить panorama.swf и убедиться что панорама рабочая.
Перед тем как проанализировать содержимое panorama.xml необходимо сделать небольшое отступление о сферических координатах. Они часто будут встречаться в скриптах и необходимо понимать что они из себя представляют.
Сферические координаты
Сферические координаты описывают любую точку сферы (а 3d-панорама по сути и является сферой) при помощи двух углов.
h – горизонтальный угол. Может принимать значения от -1800 до +1800. Нулевой угол – это центр панорамы на графическом файле в сферической проекции.
v – вертикальный угол. Может принимать значения от -900 до +900 . Причем: -900 -зенит, 00 – горизонт, 900 -надир.
На изображении показана точка А, и какие у нее углы v и h.
Данные углы будут встречаться в названии атрибутов, когда необходимо задать координаты каких либо элементов на панораме (местоположение солнца для бликов, точек перехода в виртуальном туре и т.д.).
Анализ содержимого panorama.xml
Откроем файл panorama.xml
<krpano version="1.0.8.14">
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="panorama.tiles/preview.jpg" />
<image>
<cube url="panorama.tiles/pano_%s.jpg" />
</image>
</krpano>
Содержимое похоже на нашу первую программу
Все также используются теги krpano, между которыми написана программа.
Вместе с тем у данного тега появился атрибут version, который показывает номер используемой версии krpano.
Ниже прописан тег view. Данный тег описывает параметры обзора панорамы. Здесь он имеет ряд атрибутов (но на самом деле их больше):
hlookat, vlookat – с каких сферических координат начинать обзор панорамы. В названии участвуют названия углов v и h, поэтому легко можно определить, что hlookat – горизонтальный угол, vlookat – вертикальный.
fovtype – каким образом показывать поле обзора панорамы. В основном редактирование этого значения актуально когда панорама демонстрируется на сильно вытянутой области экрана. Лучше оставить текущее значение = MFOV
fov – поле обзора панорамы. Измеряется в градусах. Чем больше значение, тем больше пространства панорамы будет видно в кадре.
maxpixelzoom – максимальное значение так называемого пиксель зум фактора. Сейчас оно стоит значение равное 1.0. Это значит что пользователь может увеличивать фрагмент панорамы до тех пор пока 1 пиксель на панораме не станет равным одному пикселю на экране. После достижения этого значения увеличение фрагмента панорамы уже невозможно.
fovmax – максимально возможное поле обзора панорамы. Грубо говоря насколько пользователь может “отдалиться” в панораме.
limitview – установка угловых ограничений обзора панорамы. Данная панорама имеет полный угол обзора 3600х1800 поэтому нет необходимости устанавливать ограничения.
В дальнейшем, чтобы не загромождать текст будем останавливаться только на необходимых по уроку атрибутах. Описание всех атрибутов тега можно найти на krpano Quick Reference.
Также появился новый preview, который по атрибуту url показывает какое изображение надо грузить в качестве превью.
В теге image вместо тега sphere используется тег cube, так как у нас был изменен тип проекции панорамы. У тега cube используется уже знакомый атрибут url. Единственная особенность в имени файла pano_%s.jpg. В ранних версиях krpano необходимо было описывать каждую сторону куба, хотя имя файла у них отличается только в последней букве. В новых версиях это описание было упрощено до записи:
имя_файла_%s
Krpano в этом случае само разберется со сторонами куба, соорентировавшись по последней букве имени файла.
Update:
В версии крпано 1.0.8.15 при использовании дроплета добавляется дополнительная строка
<include url="skin/defaultskin.xml" />
Добавление логотипа
Одним из основных требований заказчика, при реализации коммерческого заказа, обычно является - добавление логотипа фирмы на панораме. При помощи скриптов krpano добавим его и здесь.
Скопируйте файл logo.png в папку проекта.
Все изображения в скриптах добавляются как плагины. Для этого существует тег plugin.
Добавим несколько строчек в скрипты:
<krpano version="1.0.8.14">
<view hlookat="0" vlookat="0" fovtype="MFOV" fov="90" maxpixelzoom="1.0" fovmax="120" limitview="auto" />
<preview url="panorama.tiles/preview.jpg" />
<image>
<cube url="panorama.tiles/pano_%s.jpg" />
</image>
<plugin name="logo"
align="righttop"
y="5"
x="5"
url="logo.png"
/>
</krpano>
У тега plugin атрибуты для удобства восприятия записаны в столбик. Но вы, как и ранее, можете описывать их в строку через пробел
У данного тега обязательно должно быть имя, которое задается через атрибут name.
Атрибут url, как уже известно, отвечает за имя и путь к файлу.
Атрибут align показывает как следует выровнять логотип, в данном случае – по правому верхнему углу.
X,Y – координаты логотипа в экранных (а не сферических) координатах, относительно точки выравнивания. В данном случае ось X идет справа налево, а ось Y сверху вниз. Более полное описание экранных координат krpano будет описано в одной из следующих статей.
Теперь если запустить панораму, то можно увидеть логотип в правом верхнем углу.
В данном уроке были показано как работать с проигрывателем панорам krpano и рассмотрены самые простые скрипты.
В следующих статьях продолжим работу со скриптами и рассмотрим реализацию основных задач, которые обычно стоят, когда необходимо создать виртуальный тур.
Удачных панорам.
Продолжение:
2. Анимация, плагины, события
Все статьи по работе с krpano