Изучаем Pano2VR Javascript API. Часть 2

 Работа в Pano2VR | Веб-кодинг в Pano2VR
 13.12.2018 |  08:00 |  3.7k |  0.0/0 |  12.04.2023
 Время на чтение: ... |  Комментировать |  Напечатать
Содержание статьи
 Пользователи Pano2VR
В своем сообществе ВКонтакте работает чат, созданный специально для пользователей конвертера панорамных изображений Pano2VR. В нем мы решаем проблемы, возникающие в работе с Pano2VR, обмениваемся опытом и просто общаемся.
 Нас уже ...
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Вторая часть из цикла статей о Pano2VR Javascript API, в которой затронуты методы работы с узлами виртуального тура и хотспотами.

Изучаем Pano2VR Javascript API. Часть 2

Изображение

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

Методы работы с узлами виртуального тура

pano.getIsTour();

Дополнено Определение, что просматривается в данный момент: тур или одиночная панорама. Метод возвращает true в случае, если открыт виртуальный тур.

pano.getNodeIds(): Array<String>;

Получение списка узлов. Метод возвращает результат в виде массива строк, например

["node1", "node2", "node3"]

pano.getNodeUserdata(id: String): Object;

Получение пользовательской информации, назначенной узлу. Если аргумент id не указан, будет возвращена информация для текущего узла. Метод возвращает объект вида:

{
 author: "Автор (строка)",
 comment: "Комментарий (строка)",
 copyright: "Копирайт (строка)",
 customnodeid: "Пользовательский ID узла (строка)",
 datetime: "Дата и время (строка)",
 description: "Описание узла (строка)",
 information: "Информация (строка)",
 latitude: Широта (число),
 longitude: Долгота (число),
 source: "Источник (строка)",
 tags: ["Тег_1", "Тег_2", "Тег_3", "...", "Тег_N"],
 title: "Заголовок узла (строка)"
}

pano.getNodeLatLng(id: String): Object;

Получение местоположения для узла. Если аргумент id не указан, будет возвращена информация для текущего узла. Метод возвращает объект с двумя полями (широта и долгота), например:

[52.05269994876664, 29.261403679847717]

Следующие примеры аналогичные:

//1
var node_lat = pano.getNodeLatLng()[0];
var node_lat = pano.getNodeLatLng()[1];
//2
var node_lat = pano.getNodeUserdata().latitude;
var node_lng = pano.getNodeUserdata().longitude;
//3
var user_data = pano.getNodeUserdata(); 
var node_lat = user_data.latitude;
var node_lng = user_data.longitude;

pano.getNodeDistance(fromId: String, toId: String):Number;

Дополнено Получение информации о расстоянии (в метрах) между текущим узлом и другим узлом при условии, что оба узла имеют данные GPS.

pano.getNodeTitle(id: String): String;

Получение заголовка для узла. Если аргумент id не указан, будет возвращена информация для текущего узла. Метод возвращает строку, определенную в пользовательской информации (поле "title").

Следующие примеры аналогичные:

//1
var node_title = pano.getNodeTitle();
//2
var node_title = pano.getNodeUserdata().title;
//3
var user_data = pano.getNodeUserdata(); 
var node_title = user_data.title;

pano.nodeVisited(id: String):Boolean;

Получение информации о посещении узла. Если метод вернул true, был узел посещен. Если false – не был посещен.

pano.getCurrentNode(): String;

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

pano.getNextNode();

Навигация по списку узлов. Получение идентификатора узла, следующего за текущим.

pano.getPrevNode();

Навигация по списку узлов. Получение идентификатора узла, находящегося перед текущим.

pano.openNext(url: String, parameter: String);

Открывает указанный узел в туре. Аргумент url принимает значение идентификатора открываемого узла, взятое в фигурные скобки.

Помимо идентификатора открываемого узла аргумент может принимать одно из следующих значений:

  • $(back) – идентификатор ранее посещенного узла;
  • $(prev) – идентификатор предыдущего узла относительно текущего, основанный на порядке браузера тура;
  • $(next) – идентификатор следующего узла относительно текущего, основанный на порядке браузера тура.
pano.openNext("{$(back)}");
pano.openNext("{$(next)}", "$(bwd)");

Второй аргумент принимает строку формата "pan/tilt/fov", определяющую вид в открываемом узле. Этот аргумент может быт опущен.

Также во втором аргументе можно указать одно из следующих значений для установки вида и положения панорамы:

  • $(cur) – переход с сохранением текущего вида;
  • $(fwd) – перехода с установкой вида панорамы по направлению перехода;
  • $(bwd) – аналогично $(fwd) + разворот на 180°
pano.openNext("{node1}", "55.332/0/100");
pano.openNext("{node20}", "$(cur)");

pano.getNodesWithTag(tag: String)::Array;

Дополнено Получение массива узлов, у которых есть определенный тег в пользовательской информации.

pano.getLastVisitedNode(): String;

Дополнено Получение идентификатора последнего посещенного узла.

pano.setTransition(v: Object);

Дополнено Установка параметров перехода между узлами.

В качестве аргумента v передается объект со следующими свойствами:

  • type – тип перехода строка (cut, crossdissolve, diptocolor, irisround, irisrectangular, wipeleftright, wiperightleft, wipetopbottom, wipebottomtop, wiperandom);
  • before – эффект до число (0 – нет (none); 2 – приближение (zoomin));
  • after – эффект после число (0 – нет (none); 2 – приближение (zoomin); 3 – отдаление (zoomout); 4 – полет (flyin))
  • transitiontime – время перехода число;
  • waitfortransition – если следует дождаться завершения перехода после завершения эффекта после логический: true/false;
  • zoomedfov – угол обзора, если выбрано приближение/отдаление число;
  • zoomspeed – скорость, если выбрано приближение/отдаление число;
  • dipcolor – цвет для перехода типа diptocolor строка (Например, "0xffffff");
  • softedge – смягчение границы число.

Пример:

new_transition = {
 type: "cut",
 before: 2,
 after: 0,
 transitiontime: 1,
 waitfortransition: true,
 zoomedfov: 20,
 zoomspeed: 2
}

pano.setTransition(new_transition);

//Или в одну строку
pano.setTransition({ type: "cut", before: 2, after: 0, transitiontime: 1, waitfortransition: true, zoomedfov: 20, zoomspeed: 2 });

pano.getZoomCenterCursor();

Дополнено Определение, включено ли зуммирование в позиции курсора / щипка (true / false).

pano.setZoomCenterCursor(value: Boolean);

Дополнено Включение/отключение зуммирование в позиции курсора / щипка.

Методы работы с хотспотами

pano.addHotspot(id: String, pan: Number, tilt: Number, div: DomElement);

Добавление хотспота в текущем узле.

//Создаем элемент хотспота
var hotspot = document.createElement("div");
//Назначаем ID для применения стилей CSS
hotspot.setAttribute("id", "hotspot");
//Добавляем на панораму
pano.addHotspot("Point01", 50, 0, hotspot);

Элемент hotspot имеет структуру:

<div id="hotspot"></div>

Внешний вид самого простого хотспота с изображением можно определить в правилах CSS, например, следующим образом:

#hotspot {
 position: absolute;
 top: 28px;
 left: -28px; 
 width: 55px;
 height: 55px;
 background: url(images/hotspot_default_image.png) 0 0 no-repeat;
 opacity: 0.8;
 cursor: pointer;
}

#hotspot:hover {
 opacity: 1;
}

pano.updateHotspot(id: String, pan: Number, tilt: Number);

Обновление положения хотспота (pan, tilt) в текущем узле.

pano.removeHotspot(id: String);

Удаление хотспота в текущем узле по его идентификатору.

pano.removeHotspots();

Удаление всех хотспотов в текущем узле.

pano.getPointHotspotIds(): Array<String>;

Получение списка хотспотов текущего узла. Метод возвращает массив строк с идентификаторами хотспотов.

pano.getCurrentPointHotspots():Array;

Дополнено Получение списка хотспотов текущего узла. Метод возвращает массив div-элементов хотспотов.

pano.getHotspot(id: String): Object;

Получение информации о хотспоте по его индентификатору. Метод возвращает объект вида:

{
 id: "Point01", //ID хотспота 
 pan: "150", //Позиция по горизонтали
 tilt: "10", //Позиция по вертикали
 div: div //HTML-объект (DOM), описывающий
 //структуру и поведение хотспота
}

pano.getPolygonMode(): Number;

Дополнено Получение текущего режима полигональной зоны.

pano.setPolygonMode(v: Number, toggle: Number);

Дополнено Установка текущего режима полигональной зоны. Если toggle = 1, он переключается между Off и режимом v.

pano.showOnePolyHotspot(id: String);

Дополнено Отображение конкретной полигональной зоны.

pano.hideOnePolyHotspot(id: String);

Дополнено Скрытие конкретной полигональной зоны.

pano.toggleOnePolyHotspot(id: String);

Дополнено Переключение между отображением / скрытием конкретной полигональной зоны.

pano.changePolyHotspotColor(id: String, bgColor: Number, bgAlpha: Number, borderColor: Number, borderAlpha: Number);

Дополнено Установка фона и цвета границы определенной полигональной зоны.

Параметры:

  • id – идентификатор полигональной зоны;
  • bgColor – цвет фона;
  • bgAlpha – прозрачность фона.
  • borderColor – цвет границы;
  • borderAlpha – прозрачность границы.

Примеры

В примерах назначение метода прописывается в событии "onclick" элемента управления (кнопки).

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

Если кому-то нужен код на чистом Javascript, пишите в комментарии.

Демонстрационные примеры не оптимизированы под мобильные устройства. Рекомендуется просмотр в браузерах на ПК.

Конечно не всё из примеров можно использовать как что-то полноценное. Они лишь служат для демонстрации работы методов Pano2VR Javascript API. У меня есть несколько идей для создания элементов управления, которые можно будет использовать в панорамах или виртуальных турах. Как только они будут реализованы, я об этом напишу в соцсетях. До встречи в следующей заключительной части!

Теги:  Виртуальный тур, javascript, API, Pano2VR, HTML5, Панорама, Оформление, skin editor
Об авторе

Сергей Дишук, фотограф-любитель и профессионал. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения.

Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 8-ми лет. Имею опыт работы в программах Pano2VR, PTGui, Photomatix, Adobe Photoshop, Lightroom и других.

Реализовал некоторые фичи в проектах Pano2VR задолго до их официального появления. За всё время помог разобраться с Pano2VR более 5k пользователям, из них более 200 лично.

Оцените материал
Поделитесь материалом в социальных сетях
Материалы по теме статьи

У Вас остались вопросы по статье? Задавайте. Буду рад ответить на них в комментариях.

Если этот материал совсем не то, куда Вас привел поисковик, попробуйте выполнить поиск по сайту или введите запрос в строку ниже. Также Вы можете посмотреть другие материалы в разделе статьи.

Нет комментариев
Сейчас просматривают
Связь со мной и соцсети
Telegram
Viber
LinkedIn
ВКонтакте
 
Одноклассники
 
Instagram
 
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 40
Онлайн всего: 8
Гостей: 8
Пользователей: 0