Использование Javascript при создании оформления Pano2VR
Самые читаемые статьи за всё время

Опрос:

С каким функционалом Pano2VR у вас возникают трудности?
Всего ответов: 1

 Групповой чат для пользователей Pano2VR

В своем сообществе ВКонтакте я недавно создал беседу для пользователей Pano2VR.

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

В беседе публикуются ссылки на новые материалы моего сайта, связанные с созданием панорам и виртуальных туров, а также в автоматическом режиме работает информатор о новых материалах блога Garden Gnome Software и релизах программы 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. Только при открытии в браузере.

Полезные ссылки

 Редактор оформления (Skin editor) |  86 |  28.10.2021  10:35 |
Теги: Pano2VR, Pano2VR6, skin editor, Pano2VR5, HTML, CSS
Рейтинг: 0.0 / 0 | Оцените материал:

Об авторе:

Сергей Дишук, фотограф-любитель. Занимаюсь пейзажной, архитектурной, интерьерной, репортажной фотосъемкой, а также другими видами фотосъемки. Связал жизнь с IT, увлекаюсь программированием и разработкой программного обеспечения. Занимаюсь панорамной фотосъемкой и созданием виртуальных 3D-туров более 5-ти лет. Имею опыт работы в программах Adobe Photoshop, Lightroom, PTGui, Pano2VR.

У Вас возникли вопросы по статье? Задайте их в комментариях ниже и получите развернутый ответ. Если данный материал не соответствует Вашему поисковому запросу, попробуйте воспользоваться поиском или найдите нужный материал в разделе статьи.

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

Возможно, вам будет интересно:

Популярные материалы за последние 3 дня:

Нет комментариев

Связь со мной и соцсети
 +375(29)738-38-38
 Telegram
 Viber
 ВКонтакте
 Одноклассники
 Instagram
 Facebook
 LinkedIn
 YouTube
 TikTok
Внешние ресурсы

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

Сообщество на ВКонтакте
Сообщество на Одноклассники
Сообщество на Facebook

Фотографии и панорамные изображения публикую на этих ресурсах:

Профиль на 360cities.net
Профиль на 1panorama.ru
Профиль на fotokto.ru
Профиль на photocentra.ru
Профиль на photosight.ru

Ссылки на мои проекты:

Проект «Мозырь 360°»
Популярные страницы