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

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

Сегодня вы узнаете, какие виды всплывающих подсказок можно создать средствами редактора оформления (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 и вставлять названия классов и встроенные стили в исходный код файла.

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

Pano2VR Javascript API – это набор методов, обеспечивающих взаимодействие пользователя с проигрывателем панорамного контента. При помощи этого API можно создать собственное оформление виртуального тура, без использования редактора оформления (Skin Editor). Вернее, оформление можно создать средствами HTML и CSS, а наделить его интерактивностью помогут методы Javascript API.

Ранее я уже писал о создании анимированных хотспотов здесь и здесь. Однако способы, описанные в статьях, требуют вмешательства в текст Javascript, написания css-сценария, а также создания gif-анимации, на которую после экспорта требовалось заменить статические изображения. Если способы создания анимации в Pano2VR, о которых писалось ранее, для вас слишком неудобны, то вот еще одно решение. С появлением в Pano2VR (в версии 5) элемента таймер и логических блоков, стала доступна возможность создавать анимацию для элементов.