Редактор оформления (Skin editor)

В панорамах и виртуальных турах, опубликованных на сайте, не так давно появилась функция, позволяющая делать скриншот панорамы. Сейчас я расскажу вам, как вы можете использовать такой функционал в своих проектах.

Функция создания скриншотов создает изображение всей области воспроизведения панорамы в оригинальном размере. Иными словами, размер изображения скриншота будет напрямую зависеть от размеров области, в которой воспроизводится панорамный контент или от разрешения монитора в случае воспроизведения в полноэкранном режиме.

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

Главное, чтобы применяемый эффект подходил под контекст: на панораме должны быть соответствующие погодные условия. Я не говорю, что панорамы должны быть сняты в снегопад или под проливным дождем. Эффект снега будет к месту, если на панораме присутствует лежащий снег и на небе облачность. С дождем аналогично – на земле лужи и мокрый асфальт или трава, а на небе тучи.

Представим такую ситуацию: пользователь увидел что-то необычное в конкретной панораме вашего виртуального тура и ему захотелось поделиться с другом. Он пишет ему сообщение: перейди по ссылке, найди в меню эскизов панораму с названием «Интересная панорама», кликни и поверни на 180 градусов с наклоном +45 градусов, и ты увидишь парящего зайца.

В Pano2VR уже есть то, что может значительно упростить жизнь пользователям и позволит им делиться адресной ссылкой, содержащей идентификатор панорамы и параметры её вида.

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

Сегодня вы узнаете, какие виды всплывающих подсказок можно создать средствами редактора оформления (Skin Editor) Pano2VR.

На многих сайтах установлены системы веб-трекинга, отслеживающие действия и поведения их пользователей. Такие системы позволяют понять, что вызывает интерес у пользователей, какие у них предпочтения, а также с какими элементами они взаимодействуют, а какие игнорируют. Всё это нужно для принятия решения по улучшению юзабилити и качества сайта и расширению его функциональных возможностей. Статистика ими собирается анонимно и не позволяет идентифицировать пользователя.

В данной статье речь пойдет не об аналитике сайта, а об аналитике взаимодействия пользователей с виртуальным туром на примере популярных систем веб-трекинга, как Яндекс.Метрика и Google Analytics.

Заполнители – это короткие текстовые шаблоны, используемые в редакторе оформления и самом проекте и служащие для подстановки определенных данных в месте нахождения заполнителя. С помощью заполнителей можно вывести заголовок и описание в шаблоне хотспота, показать процент загрузки контента, перейти в следующий, предыдущий и последний посещенный узел тура и еще многое другое.

Большинство заполнителей используются в основном текстовом компоненте. Остальные используются при создании сценариев к компонентам в экспертом режиме, например, с действиями «Go to URL», «Move to View» и «Open Next Panorama», в триггерах логических блоков и фильтров действий и в настройках проекта.

Функционал последних версий Pano2VR позволяет творить невероятные вещи. Сегодня речь пойдет о том, как использовать программу создания виртуальных туров по максимуму.

В рамках этой статьи я не буду затрагивать темы настройки данных панорам, установки вида, экспорта тура и др. Это рассматривалось в других статьях. В примерах использую настройки, которые дает программа по умолчанию.

Pano2VR JavaScript API – это внешний программный интерфейс приложения, который позволяет управлять проигрывателем извне с помощью кода написанного на JavaScript. API позволяет не только управлять просмотром панорамы/тура, но и сохранять и считывать значения переменных, рисовать поверх панорамы, отслеживать события происходящие при просмотре панорамы и даже создать собственную интерактивную оболочку (скин) для виртуального тура.

Это заключительная часть. Все предыдущие части были актуализированы в соответствии с новой документацией: часть 1, часть 2.

Javascript в редакторе оформления можно использовать в двух случаях: в текстовом компоненте и в качестве параметра в вызове метода «Go to URL». В коде скрипта можно использовать абсолютно любые действия, вычисления, и вызовы Pano2VR Javascript API.

При написании JS-кода необходимо руководствоваться следующими правилами:

При помощи CSS-стилей можно стилизовать интерактивное оформление виртуального тура. CSS значительно расширяет дизайнерские возможности редактора оформления.

Когда-то на заре создания виртуальных туров, используя четвертую версию Pano2VR я уже занимался стилизацией оформления с помощью CSS. Тогда в Pano2VR не существовало функционала для работы со стилями. Приходилось после экспорта открывать в редакторе файл skin.js и вставлять названия классов и встроенные стили в исходный код файла.