Главная » Статьи » Pano2VR

Работаем с логическими блоками и переменными в редакторе шаблона Pano2VR5

Комментировать

Логические блоки в Pano2VR5 стоит использовать для того чтобы сделать оформление виртуального тура более функциональным, а также создать адаптивный дизайн.

1 5 5.0 1

Работаем с логическими блоками в Skin Editor Pano2VR5

Изображение

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

Логические блоки

Логические блоки применимы к таким свойствам объектов, как Position, Size, Scaling, Angle, Visible, Alpha, Background Color, Border Color, Text, Text Color, Cloner Vertical/Horizontal, External Image External URL. Для создания логического блока нужно выбрать элемент оформления и нажать на кнопку, имеющую вид раздваивающейся стрелки (рис. 1), находящуюся напротив наименования свойства элемента.

Рисунок 1. Кнопки вызова окна настроек логических блоков.

После нажатия такой кнопки появится окно настройки логического блока (рис. 2). В настройках блока уже будет присутствовать пустое выражение. Остается только определить логические условия.

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

После того, как с триггером определились, осталось выбрать операцию сравнения (Столбец Comparison) и значение (Столбец Value), с которым будет сравниваться триггер. Например, Player Width > 500 или Auto Rotating = true.

Если потребуется, можно создать еще несколько условий в одном выражении. В таком случае в столбце Operation необходимо будет выбрать логическую операцию, проводимую с условиями: AND (логическое И) или OR (логическое ИЛИ).

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

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

Рисунок 2. Окно настроек логических блоков.

Если необходимо, можно создать еще несколько выражений как на рис. 3. Для добавления нового выражения нужно нажать на кнопку «+» зеленого цвета, которая находится в правом верхнем углу окна настройки.

Для удаления выражения служит кнопка «×» красного цвета. Удаление всего логического блока осуществляется кнопкой Delete.

При необходимости можно скопировать логический блок, чтобы применить его к другому свойству элемента, не выполняя создание блока заново. Для выполнения таких операций служат кнопки Copy / Paste.

Рисунок 3. Несколько групп обработчиков.

Все триггеры,которые доступны к выбору в последней на данный момент версии приведены в следующей таблице.

Триггер

Описание триггера

Операция сравнения

Принимаемое значение

Player Width

Ширина окна воспроизведения

=, ≠, <, >, <=, >=

Целое число

Player Height

Высота окна воспроизведения

=, ≠, <, >, <=, >=

Целое число

Player Aspect Ratio

Пропорции (соотношение сторон) окна воспроизведения

(Добавлен в 5.1b)

Player Width > Player Height – Player Aspect Ratio > 1;

Player Width < Player Height – Player Aspect Ratio < 1;

Player Width = Player Height – Player Aspect Ratio = 1.

=, ≠, <, >, <=, >=

Вещественное число

Fullscreen

Полноэкранный режим

=

true / false

Mouse Over

Курсор мыши над элементом

=

true / false

Mouse Down

Нажатие курсора мыши на элемент

=

true / false

Mouse Over Parent

Курсор мыши над родительским элементом

=

true / false

Mouse Down Parent

Нажатие курсора мыши на родительский элемент

=

true / false

Pan

Угол поворота вида

=, ≠, <, >, <=, >=

Вещественное число

Tilt

Угол наклона вида

=, ≠, <, >, <=, >=

Вещественное число

FoV

Горизонтальный угол поля зрения

=, ≠, <, >, <=, >=

Вещественное число

 

Projection

Тип проекции

(Добавлен в 5.1b)

=

Rectilinear, Stereographic, Fisheye

Active

Элемент активен

=

true / false

Loading

Загрузка

=

true / false

Loading Tiles

Загрузка изображений тайлов (мультирезолюшн)

=

true / false

Visited

Посещение локации (узла тура)

=

true / false

Tags

Теги

contain, not contain

Строка

View Mode

Режим перетаскивания

=

Continuous Mode, Drag Mode

Poly Mode

Режим полигональной активной зоны

=

Always Hidden, Always Visible, Show Current, Show All, Disabled

Is Mobile

Просмотр с мобильного устройства

=

true / false

Auto Rotating

Автоматическое вращение

=

true / false

*user_variable

Пользовательская переменная

В зависимости от типа переменной

В зависимости от типа переменной

Переменные

Кроме стандартных триггеров свойства элементов могут быть зависимы от значения переменных, которые может определить пользователь, например, разработчик виртуального тура. Доступно создание переменных трех типов: числовой (Number), строковый (Text) и логический (True/False).

Рисунок 4. Список переменных.

Переменные создаются в группе Variables, в самой нижней группе под группой модификаторов.

При создании переменной нужно дать ей имя, выбрать требуемый тип и установить первоначальное значение. В графе Description можно создать описание переменной. Оно пригодится на случай, если вы забудете, для чего используется переменная. Это не обязательно.

Я рекомендую давать переменным осмысленные имена, например hotspots_state, shows_count, map_visible. Тогда вы сможете по имени переменной узнать ее предназначение.

После создания переменной она становится доступной для использования в логических блоках. Имена переменных помещаются в конец списка триггеров.

Рисунок 5. Использование переменной в логическом блоке.

Для проведения манипуляций по изменению значений переменой необходимо создать действия Set Variable Value, в котором нужно будет выбрать из списка переменную, указать операцию, проводимую над переменной, и значение, которое будет либо присвоено переменной, либо использовано в выбранной операции между текущим значением.

Рисунок 6. Изменение значения переменной.

В зависимости от типа переменной операции, проводимые с её значениями, различны.

Для числового типа характерны операции присваивания (=), сложения (+), вычитания (-), умножения (*), деления (/), остаток от деления (%), минимимум и максимум.

Для строкового типа характерны операции присваивания (=) и сложения (+).

Для логического типа характерны операция присваивания (=) и логические операции и (And), или (Or) и отрицание (Not).

Рисунок 7. Создание действия Set Varialbe Value.

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

Значение

Результат операции

AND

OR

NOT

True

False

True

False

True

True

False

True

True

False

False

False

False

True

False

True

 

Примеры использования логических блоков

Если вы еще не поняли принцип логических блоков, вот вам несколько примеров. На данный момент даю простые примеры, а сложные приберегу на следующие статьи.

Адаптивность текстового поля

Пример показывает реализацию адаптивности текстового элемента. Элемент изменяет свои размеры, подстраиваясь под размеры окна.

Создайте в области редактирования текстовый элемент и наполните его любым текстом.

Рисунок 8. Созданный текстовый элемент.

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

Рисунок 9. Настройки текстового элемента.

Перейдем к свойству Scaling и создадим для него логический блок. У меня получился такой набор выражений.

Рисунок 10. Настройка логического блока свойства «Scaling» текстового элемента.

После настройки логического блока нажмите на кнопку OK. Запустите Live Preview и, изменяя ширину его окна, смотрите на поведение текстового поля. При различных значениях ширины области воспроизведения будут устанавливаться определенные значения масштабирования.

Кнопки управления полноэкранным режимом

Рисунок 11. Изображения кнопок в дереве объектов.

Принцип работы кнопок управления полноэкранным режимом заключается в попеременном скрытии / отображении кнопок, находящихся одна под другой.

До появления логических блоков эти действия можно было описывать в сценариях обеих кнопок. С логическими блоками стало немного проще.

 
Рисунок 12. Кнопки в области редактора.

Создайте прямоугольник с двумя изображениями и кнопок как на рис. 11 и поместите его в верхний правый угол области редактирования (рис. 12).

Для обеих кнопок создайте следующие действия. Для кнопки с ID «fullscreen_enter»:

Рисунок 13. действия для кнопки входа в полноэкранный режим.

Для кнопки c ID «fullscreen_exit»:

Рисунок 14. Действия для кнопки выхода из полноэкранного режима.

Свойство «Visible» кнопки с ID «fullscreen_exit» отключиите. Она не должна быть видна изначально.

Для свойства «Visible» кнопки с ID «fullscreen_enter» создайте логический блок с триггером «Fullscreen» в условии, в котором это свойство будет менять значение на false.

Рисунок 15. Логический блок для свойства «Visible» кнопки входа в полноэкранный режим.

Для свойства «Visible» кнопки «fullscreen_exit» создайте логический блок с таким же условием, в котором это свойство будет изменяться на true.

Рисунок 16. Логический блок для свойства «Visible» кнопки выхода из полноэкранного режима.

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

Кнопки управления автовращением

По аналогии с кнопками управления полноэкранным режимом можно сделать кнопки пуска / остановки автоматического вращения, переключения режимов перетаскивания / вращения

Рисунок 17. Изображения кнопок в дереве объектов и в области редактирования.

Создайте две кнопки, которые будут играть роль переключателя автовращения (рис. 17).

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

Создайте для кнопки с ID «autorotate_on» действие «Start Auto Rotate» для события «Mouse Click».

Рисунок 18. Действия для запуска автоматического вращения.

Для свойства «Visible» кнопки создайте логический блок, выбрав в списке триггер «Auto Rotating», и определите операцию сравнения со значением true. Новое значение свойства (по умолчанию Visible=true) «Visibl»e установите в false.

Рисунок 19. Логический блок свойства «Visible» кнопки с ID «autorotate_on».

Создайте для кнопки с ID «autorotate_off» действие «Stop Auto Rotate» для события «Mouse Click».

Рисунок 20. Действия для остановки автоматического вращения.

Для свойства «Visible» кнопки создайте логический блок, выбрав в списке триггер «Auto Rotating», и определите операцию сравнения со значением true. Новое значение свойства (по умолчанию Visible=false) Visible установите в true.

Рисунок 21. Логический блок свойства «Visible» кнопки с ID «autorotate_off».

Кнопки управления режимом перетаскивания/вращения

Создайте две кнопки, которые будут играть роль переключателя режима перетаскивания вращения (рис. 17).

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

Режим вращения – это режим, отличающийся от режима перетаскивания тем, что панорама вращается постоянно с момента нажатия левой кнопки мыши и совершения перетаскивания в нужном направлении. Вращение прекращается после отпускания левой кнопки мыши.

Создайте для кнопки с ID «drag_mode» действие «Change Viewer Mode» для события «Mouse Click», выбрав параметр «Drag Mode» (0).

Рисунок 22. Действия включения режима перетаскивания (кнопка с ID «drag_mode»).

Для свойства «Visible» кнопки создайте логический блок, выбрав в списке триггер «View Mode», и определите операцию сравнения со значением «Continuous Mode». Новое значение свойства (по умолчанию Visible=true) Visible установите в false.

Рисунок 23. Логический блок свойства «Visible» кнопки с ID «drag_mode».

Создайте для кнопки с ID «move_mode» действие «Change Viewer Mode» для события «Mouse Click», выбрав параметр «Continuous Mode» (1).

Рисунок 24. Действия включения режима вращения (кнопка с ID «move_mode»).

Для свойства «Visible» кнопки создайте логический блок, выбрав в списке триггер «View Mode», и определите операцию сравнения со значением «Continuous Mode». Новое значение свойства (по умолчанию Visible=false) Visible установите в true.

Рисунок 25. Логический блок свойства «Visible» кнопки с ID «move_mode».

Скрытие и отображение активных зон (хостпотов)

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

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

Рисунок 26. Создание переменной «hsvisible».

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

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

Создайте для кнопки с ID «show_hotspots» действие «Set Variable Value» для события «Mouse Click», в котором для созданной ранее переменной будет присвоено значение true.

Рисунок 27. Сценарии кнопки с ID «show_hotspots».

Для свойства «Visible» создайте логический блок, выбрав в списке триггеров ранее созданную переменную, и определите операцию сравнения со значением true. Новое значение свойства (по умолчанию Visible=true) «Visible» установите в false.

Рисунок 28. Логический блок свойства «Visible» кнопки с ID «show_hotspots».

Когда пользователь нажмет на кнопку «show_hotspots», переменная «hsvisible» будет иметь значение true и в связи с этим кнопка скроется. Будет отображаться кнопка «hide_hotspots».

Создайте для кнопки с ID «hide_hotspots» действие «Set Variable Value» для события «Mouse Click», в котором для созданной ранее переменной будет присвоено значение false.

Рисунок 29. Сценарии кнопки с ID «hide_hotspots».

Для свойства «Visible» создайте логический блок, выбрав в списке триггеров ранее созданную переменную, и определите операцию сравнения со значением true. Новое значение свойства (по умолчанию Visible=false) «Visible» установите в true.

Рисунок 30. Логический блок свойства «Visible» кнопки с ID «hide_hotspots».

Когда пользователь нажмет на кнопку «hide_hotspots», переменная «hsvisible» будет иметь значение false и в связи с этим кнопка скроется. Будет отображаться кнопка «show_hotspots».

Для всех шаблонов активных зон, которые должны скрываться / отображаться создайте логический блок для свойства «Visible», выбрав в списке триггеров ранее созданную переменную, и определите операцию сравнения со значением false. Новое значение свойства (по умолчанию Visible= true) «Visible» установите в false.

Рисунок 31. Логический блок свойства «Visible» активной зоны.

Маркер посещения узла тура

Предназначение маркера посещения в том чтобы показывать пользователю, что он уже просматривал конкретный узел тура.

Чтобы сделать такой маркер понадобится элемент, например, «Rectangle», «Image» или «SVG».

Маркер лучше всего использовать в списках узлов, построенных на элементах «Cloner» и «Node Image»

Рисунок 32. Структура списка узлов тура, включающая в себя элементы подсветки активного узла и метки посещенного узла.

У элемента, выполняющего роль маркера, необходимо отключить видимость - свойство «Visible», а также создать логический блок для этого свойства с обработкой триггера «Visited».

При выполнении условия Visited=true свойство «Visible» также будет установлено в true.

Рисунок 33. Логический блок элемента с ID «VisitedMarker» для свойства «Visible».

Маркер активности узла тура

Если есть необходимость подсветить в списке узлов тура элемент, связанный с просматриваемым (активным) на данный момент узлом используется маркер, состояние которого должно зависеть от триггера Active в логическом блоке.

В данном примере в качестве маркера используется элемент «Rectangle» без фона, расположенный над элементом «Node Image». По умолчанию цвет границы белый, а в случае выполнения условия Active = true, цвет меняется на красный.

Рисунок 34. Логический блок элемента с ID «ActiveMarker» для свойства «Border Color».
Pano2VR | Добавил: СЕРГЕЙ ДИШУК (05.02.2017)
337 | Теги: Pano2VR5, редактор шаблона, дизайн, Pano2VR, триггер, адаптивность, операции сравнения, Логические блоки, переменные
Рейтинг: 5.0 / 1 | Оцените материал:

Поделиться в социальных сетях:

Не нашли ответа на свой вопрос? Попробуйте воспользоваться поиском или задайте ваш вопрос в комментариях ниже.

comments powered by HyperComments
Недавно добавленный тур

Последний опубликованный виртуальный тур

Сообщество для Мозырян
Опрос
Какие разделы сайта Вам интересны?
Всего ответов: 9
Случайная панорама
Недавние панорамы

Список последних опубликованных сферических панорам

Рубрикатор
Я в социальных сетях
  1. Вконтакте
  2. Одноклассники
  3. Facebook
Рекомендации