Использование Javascript при создании оформления Pano2VR

 Работа в Pano2VR | Веб-кодинг в Pano2VR, Редактор оформления (Skin editor)
 28.10.2021    10:35    1.4k    02.11.2023
 Время на чтение: ...    Комментировать    Напечатать
Содержание статьи
 Пользователи Pano2VR

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

 Нас уже ...
Javascript в редакторе оформления можно использовать в двух случаях: в текстовом компоненте и в качестве параметра в вызове метода Go to URL.

Использование Javascript при создании оформления Pano2VR

Изображение

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

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

  • javascript:""; Здесь ваш код...
    – код выполнится после загрузки скина (может понадобиться управление выводом результата);
  • javascript: Здесь ваш код...
    – код выполниться немедленно, а результат будет записан во внутренний элемент (innerHTML).

Javascript в текстовом компоненте

Создадим текстовый компонент и назовем его «info_text».

Текстовый компонент «info_text».

В свойстве «Text» введем следующий код. Он будет отображать версию текущей операционной системы и браузера. В коде используются 2 вызова Pano2VR Javascript API. Продолжение темы API выйдет совсем скоро.

javascript:"";
//Предустановленные массивы данных в соответствии с документацией API
var os = ["Unknown", "Windows", "Mac", "Linux", "iOS", "Android"];
var browsers = ["Unknown", "Chrome", "Firefox", "Safari", "Edge", "IE"];
var os_id=player.getOS(); //Получение номера операционной системы
var browser_id=player.getBrowser(); //Получение номера текущего браузера
//Вывод результата
this._info_text__text.innerHTML="<p>OS: " + os[os_id] + "</p><p>Browser: " + browsers[browser_id] + "</p>";

Поскольку скрипт начался с объявления javascript:"", то необходима последняя строчка для записи результата в тело компонента. Разберем эту строку.

  • this – указатель на объект оформления (скина);
  • _info_text__text – внутренний элемент текстового компонента (Внешний имеет имя _info_text);
  • innerHTML – свойство, используемое для записи текста или html-структуры.

Запустим предпросмотр оформления в Live Preview и увидим вот такой результат работы.

Предпросмотр оформления в Live Preview.

Если бы скрипт выглядел следующим образом

javascript: 100 + 426;

то он бы выполнился сразу, а в текстовом компоненте мы увидели бы число 526.

Javascript в качестве параметра URL действия «Go to URL»

Окно добавления/редактирования обработчика/действия.

Как правило действие «Go to URL» предназначено для создания переходов по ссылке или между узлами виртуального тура. Кроме этого оно может применяться для вызова пользовательских скриптов, которые указываются в параметре «URL».

Простой пример – кнопка или другой компонент со следующим кодом при в обработчике «Mouse Click»:

javascript: alert("Hello world!");

А вот, что вы увидите, когда нажмете на кнопку:

Результат выполнения скрипта в Live Preview.

Это на мой взгляд бесполезный пример, хотя показывает принцип работы скрипта. А вот вам пример полезный. Сделайте его сами или скачайте файл по ссылке ниже.

Для примера создадим кнопку, которая будет открывать окно для репоста ссылки во ВКонтакте. Для этого добавим обработчик «Mouse Click» с действием «Go to URL», а в параметре URL напишем следующий скрипт.

javascript:
var params = 'toolbar=0, menubar=0, location=0, resizable=1, scrollbars=0, status=0, width=600, height=350';
window.open('https:\/\/vk.com\/share.php?url=' + document.location + '&noparse=false', '', params);

К сожалению, нельзя увидеть результат работы в Live Preview. Только при открытии в браузере.

Как вам материал?

0 реакции
👍
0
👎
0
😂
0
😱
0
😡
0
😢
0
Поделитесь материалом в социальных сетях

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

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

ТЕГИ МАТЕРИАЛА:
Об авторе

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

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

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

Материалы по теме статьи
Возможно, Вас заинтересуют эти материалы
Самое читаемое
Нет комментариев

Ранний доступ к материалам, эксклюзивный контент и другие бонусы от меня по подписке от 200 ₽ в месяц.

VK Donut
 
Платные темы OK
 
Boosty
 
Patreon
 
Сейчас просматривают
Опрос
Оцените ваши впечатления от сайта?
Всего проголосовавших: 49
Последние новости
Фотомарафон «Октябрь в объективе»

Объявляю о начале осеннего фотомарафона «Октябрь в объективе». Данный проект направлен на объединени...

 События
 07.10.2025    18:30    64    0
Мой сайт теперь можно установить, как приложение

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

 Обновления сайта
 21.09.2025    08:10    83    0
Охота на лунное затмение провалилась и почему я все равно не жалею

Вчера, 7 сентября, должно было случиться лунное затмение. Я, как и многие фотографы, готовился его с...

 События
 08.09.2025    19:20    127    0
Последние статьи
Как я сделал виртуальный тур для музея академика П.Ф. Ракицкого

Иногда самые интересные проекты приходят неожиданно. Так случилось и с этим виртуальным туром: предл...

 О создании панорам
 04.10.2025    08:35    142    0
10 советов для начинающих фотографов

Фотография – это не только техника, но и умение видеть мир иначе. Для новичка путь к сильным кадрам ...

 Статьи по фотографии
 28.09.2025    12:32    80    0
30 вопросов и комментариев, которые бесят фотографа

В этой статье я привел десятки реальных примеров тех самых «болевых» вопросов, которые фотографы слы...

 Статьи по фотографии
 24.09.2025    10:32    85    0
Онлайн всего: 2
Гостей: 2
Пользователей: 0