<krpano .... >
    <include url="add_hotspot/plugins_l/add_hotspot.xml" />     
    <include url="add_hotspot/plugins_l/editor/add_hotspot_2.xml" />  	
    .
    .
    </krpano>
	

  <include url="add_hotspot/plugins_l/editor/add_hotspot_2.xml" />

  <krpano>
    <include url="%SWFPATH%/skin/add_hotspot/plugins_l/add_hotspot_2.xml" />  
    <include url="%SWFPATH%/skin/add_hotspot/plugins_l/editor/add_hotspot_2.xml" /> 		
  </krpano>

  <addhs_settings FIRSTXML="test" 
		path="%SWFPATH%/skin/"
	/>

Активация плагина.

Плагин будет работать только с Вашей лицензии krpano.

Вам нужно выслать мне электронную почту, которая указана при регистрации Вашего krpano. Ее можно увидеть в "krpano Tools".

После этого на почту вы получите ссылку на скачивание плагина и файл-ключ с инструкцией активации.

Панель для создания хотспотов.

Для удобства работы панель перемещается мышкой. Щелчок по треугольной кнопке сворачивает и разворачивает панель.

Назначение кнопок:

- Открыть панель с настройками атрибутов хотспота.

- Открыть окно с кодом хотспота.

- Обновить хотспоты. Если хотспот создан динамически, то после обновления он доступен к редактированию.

Title - при необходимости введите описание хотспота (по умолчанию выводится имя хотспота). Щелкните по круглой кнопке (или по "Title"). Она станет зеленой - описание будет появляться при наведении курсора на хотспот.

Image icon - щелкните по иконке, откроется проводник для выбора изображения хотспота. Изображения должны быть размещены по пути "add_hotspot/picture".

Duplicate"+" - создает копию выделенного хотспота. Горячая клавиша "+".

Delete - удалить выделенный хотспот. Горячая клавиша "Delete".

Add hotspot - создать хотспот. Хотспот появится по центру окна с предварительно выбранным изображением

Image - нажмите на копку, если хотспоту не будет назначено действий из других вкладок ниже.

Drag - блокировка/разблокировка перемещения активного хотспота.

Drag all - блокировка/разблокировка перемещения всех созданных хотспотов.

Cохранение хотспотов.
Если включено сохранение резервной копии, то сначала будет предложено сохранить копию "tour.xml - backup-2021.12.14-12.20.52.xml" где будет указана дата и время, следом будет предложено сохранить "tour.xml" с созданными хотспотами. Замените существующий файл "tour.xml" на предложенный. Если имя файла другое, то подставится то, которое вы указали


Вы можете отключить сохранение резервной копии в файле add_hotspot/plugins_l/plugin_a/style_addhs.xml установив backup="false"

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

- показать/спрятать все хотспоты созданные плагином.

- показать/спрятать джойстик на хотспоте.

Джойстик появляется на узловой точке хотспота. Нажмите и смещайте курсор влево/вправо - вращение по оси "х" (атрибут "rx"). Смещение курсора вверх/вниз - вращение по оси "у" (атрибут "ry").
Под джойстиком кнопка вращения по оси "z". Для изменения нажмите и смещайте курсор влево/вправо (атрибут "rz").
Над джойстиком кнопка изменения масштаба - нажмите и смещайте курсор влево/вправо (атрибут "scale").

Пример работы джойстика. YouTube.

- включить/выключить искажение.

- заблокировать хотспот от редактирования. Хотспот не будет перетаскиваться мышкой. Изменения параметров хотспота будут отключены.

- временно отключает действия всех хотспотов (onover, onout, onclick, ondown, onup,onhover), что позволет спокойно работать с хотспотами (например, при нажатии он не отправит вас на другую сцену). Не отключает атрибуты прописанные в стиле как ".addevent"

- устанавливает в хотспоте enabled=false . Хотспот отключен и не реагирует на мышь. Если свернуть и развернуть панель редактирования, то enabled установится в true и хотсеот опять будет доступен для редактирования.

- Выборочное копирование атрибутов.

- копировать атрибуты выбранного хотспота (Ctrl+C).

- вставьте скопированные атрибуты (Ctrl+V).

- выбор атрибутов для вставки. При нажатии этой кнопки откроется список атрибутов. Включите/отключите необходимые атрибуты для копирования.

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

Поиск.

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

• List of hotspots - раскрывающийся список хотспотов.
  Наведение курсора на название в списке переводит взгляд на этот хотспот. Клик по названию в списке активирует его и название появляется в строке поиска.
• Search - строка поиска хотспота.
  Введите название и нажмите "Enter". Хотспот станет активным для редактирования.
  При нажатии на хотспоты (активации) в поисковой строке появится имя хотспота. Оно доступно для копирования через быстрые клавиши (Ctrl+C).

Расширенные параметры.

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

Как изменять параметры:

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

Изменение параметра происходит путем нажатия левой клавиши мыши на кнопке и смещения в нажатом состоянии влево (уменьшение параметра), вправо (увеличение параметра). Чем дальше отводится мышь от места нажатия, тем быстрее изменяется параметр. Изменения сразу применяются к хотспоту и визуально можно контролировать результат.
Параметры, имеющие два состояния (вкл/выкл) переключаются щелчком по кнопке.
Щелчок по кнопке выделяет ее зеленой рамкой, становится доступен прямой ввод с клавиатуры - цифры (справа на клавиатуре), процент (кнопка "5" верхнего ряда клавиатуры).
Клавиша "Backspace" очищает цифровое значение на кнопке.
Выбранный параметр так же отображается в строке над кнопками, в которой доступно редактирование - удаление, копирование, вставка. Для ввода нужно нажать "Enter".

- открыть окно для вывода параметров активного хотспота.

Выбрать хотспот нажав на него - его атрибуты отобразятся в этом окне. Вы можете выделять и копировать параметры нажав клавиши "Ctrl+C". Размеры окна можно изменять ухватившись за нижний правый уголок. Текст внутри окна автоматически распределяется по ширине. Окно можно перемещать, ухватившись за верхнюю часть. Ввод параметров в окне невозможен.

Action list - открыть окно со списком часто используемых действий.

Вы можете использовать его как черновик, можно копировать (Ctrl+C) и вставлять (Ctrl+C) действия.
Список находится по пути add_hotspot/plugins_l/actionSM.html - вы можете внести в него необходимую информацию.

Info "action" - открывает сайт Krpano со справочной информацией о действиях и функциях.

Info "hotspot" - oткрывает сайт Krpano со справочной информацией о настройках хотспота.

- показать 3D координаты и инвертировать контроль управления.

Этот инструмент стоит использовать с работой в 3D модели или с картами глубины. При запуске изменится вид снаружи на центр модели. Установятся оси координат X, Y, Z. При создании хотспотов в этом режиме устанавливаются его атрибуты в следующее значение:
ath=0
atv=0
depth=0
distorted=true
Блокируется перетаскивание хотспота мышкой, изменение позиции хотспота в пространстве происходит в декартовой системе координат путем изменения параметров tx, ty, tz. На осях есть круглые кнопки, нажмите на кнопку и тяните - хотспот будет смещаться по этой оси.

В 3D модели создаются хотспоты с 3д координатами, при этом атрибут depth=0
Перетаскивание хотспота мышкой в 3D модели происходит по координатам tx ty tz, если depth=0

Пример работы в 3D модели.

ath - горизонтальные координаты (-180...180).
atv - вертикальные координаты (-90...90).
alpha - изменение прозрачности (0 - 1).
rotate - вращение (-360...360).
speed - изменение скорости регулировки основных параметров от 0.1 до 10.
rx - вращение вокруг собственной оси x (в градусах).
ry - вращение вокруг собственной оси y (в градусах).
rz - вращение вокруг собственной оси z (в градусах).

ВНИМАНИЕ!
параметры "rx", "ry", rz " изменяются только при включенном параметре "distorted".

ox - смещение по оси "x" (в пикселях).
oy - oy - смещение по оси "y" (в пикселях).
width - изменение ширины (пиксели). Значение "prop" - пропорционально (по умолчанию пиксели).
height - изменение высоты (пиксели). Значение "prop" - пропорционально (по умолчанию "prop"). Для ввода значения "prop" нажмите клавишу "p".
scale - изменение масштаба хотспота. Нажмите и смещайте мышку в нажатом состоянии влево (уменьшение масштаба), вправо(увеличение масштаба).
edge - позиционирование (9 вариантов).
zorder - порядковый номер отображения (видимость). Более высокое значение выводит на передний план (1-100).
capture - захват мыши. При значении "falce" нажатие на хотспот и смещение в сторону не мешает перемещать панораму (true/falce).
distorted - включает/выключает искажение хотспота.
zoom - размер масштабируемого изображения изменяется вместе с панорамой при масштабировании.
flying - эта настройка автоматически интерполирует значения ath/atv и scale на текущие значения просмотра. Диапазон значений от 0.0 до 1.0. В 1.0 изображение hotspot будет заблокировано всегда до середины экрана, и размер будет относительно 1000 пикселей в высоте экрана.

действия/функции, которые будут вызываться когда:

• onover - пользователь навел курсор мыши.
• onhover - пользователь навел курсор мыши, вызываются 15 раз в секунду пока курсор над хотспотом.
• onout - пользователь убрал курсор с хотспота.
• onclick - пользователь щелкнул по хотспоту.
• onloaded - хотспот загрузился.

handcursor - показ руки при наведении мыши на хотспот (true/falce).
enabled2 - все создаваемые хотспоты являются глобальными и значения "enabled" и "visible" становятся активными в сцене, которая указана в хотспоте. Если enabled2="falce", то независимо от прописанной сцены хотспот будет выключен. В режиме редактирования enabled2="true" (true/falce).
visible2 - если visible2="falce", то независимо от прописанной сцены хотспот будет невидимым. В режиме редактирования visible2="true" (true/falce).
depth - внутренняя глубина 3D-рендеринга - это расстояние 3D-объекта до экрана. Для 2D-просмотра опция не имеет видимого эффекта, но для просмотра стерео 3D/VR может быть важной настройкой. Например, используйте более низкие значения для более сильного эффекта «всплывающих окон». Когда изображение точки доступа должно быть бесконечно удалено (например, само изображение панорамы, например, для точного совпадения пикселей с фоном панорамы), то для настройки глубины следует использовать «недопустимое» значение (например, String like «off») например depth = "off" .

url - путь/URL к файлу изображения слоя/плагина.
html - текст (в текстовом хотспоте).
tx - смещения 3D по оси x (доступно только для искаженных горячих точек).
ty - смещения 3D по оси y (доступно только для искаженных горячих точек).
tz - смещения 3D по оси z (доступно только для искаженных горячих точек).
renderer - средство визуализации для хотспота (webgl/css3d). По умолчанию - "webgl"
torigin - положение точки доступа.

world - положение хотспота является «глобальным»/«мировым». Это означает, что позиция всегда будет одинаковой, независимо от панорамы или позиции просмотра пользователя
image - положение хотспота будет относительно текущей позиции панорамного изображения.
view - положение хотспота будет относительно текущей позиции просмотра.
По умолчанию - "world".
depthbuffer - когда эта опция включена, горячие точки могут пересекать другие горячие точки (с deepbuffer=true) или геометрию карты глубины в 3D-пространстве (true/falce).
alphachannel - настройка использования и источника альфа-канала/канала прозрачности. Для изображений и видео. Пример использования: в настоящее время нет поддержки браузером прозрачных видео, поэтому в качестве альтернативы можно использовать видео с альфа-каналом в качестве дополнительного изображения справа (Side-by-Side) или внизу (Top-Bottom). Посмотрите Пример.
chromakey - с помощью chromakey, устанавливающего определенный цвет в изображении или видео хотспота, можно использовать в качестве альфа-маски/маски прозрачности. Типичное использование - это видео с зеленым или синим экраном. Пример.
Нажатие на кнопку откроет панель цвета для настройки параметров.
Более подробную информацию о назначении атрибутов хотспота можно получит на сайте krpano.
group - присвойте или измените группу хотспота .
keep - сделайте хотспот локальным или глобальным. При установке "true" хотспот появится в той панораме, где он прописан и не исчезнет при переключении на другие панорамы.

Открыть фотографию.

Предварительно поместите фотографии в папку add_hotspot/photo/.
Создайте и настройте хотспот. Активируйте вкладку, нажав Open photo.
Нажмите на миниатюру и в открывшемся окне проводника выберите изображение из папки add_hotspot/photo/.
Щелчок по созданному хотспоту откроет выбранное изображение.

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

• Text below photo - введите подпись к фотографии (отображается под открытой фотографией).
  Стиль текста подписи можно настроить в файле "add_hotspot/plugins_l/plugin_a/style_addhs.xml"
• Height relative to window - высота окна относительно экрана в процентах (указывать без значка "%"). Фотография откроется не больше своего истинного размера!
• Clicking on an empty space closes window - закрыть окно по щелчку в пустом месте экрана.

Вы можете индивидуально использовать экшн открытия фотографии даже при отключенном редакторе. Установите его на какое-либо действие. Код:
OpenPhotoSM (путь, подпись, высота в %);

• path - полный путь до расположения изображения, например:
• signature - подпись изображения (отображается под открытой фотографией).
• height in % - высота окна относительно экрана в процентах (указывать без значка "%"). Фотография откроется не больше своего истинного размера!

Например:
OpenPhotoSM (%SWFPATH%/photo/test.jpg, TEST, 50);

Открыть видео файл.

Предварительно поместите видеофайл в папку add_hotspot/video/.
Создайте и настройте хотспот. Активируйте вкладку, нажав Open video.
Нажмите на миниатюру "Play" и в открывшемся окне проводника выберите видео файл из папки "add_hotspot/video/".

• Volume at start - установите необходимую громкость видеоролика при воспроизведении с помощью бегунка или введя числовое значение от 0 (min) до 1 (max). По умолчанию - 0.5.
• Loop - выберите режим воспроизведения. Зеленый индикатор - цикличный, серый - воспроизведение один раз.
• Select a poster image - изображения (типичный снимок экрана первого видеокадра), который должен отображаться до тех пор, пока видео не будет загружено и не будет готово к воспроизведению.
• Height relative to window - высота окна относительно экрана в процентах.
• Clicking on an empty space closes window - закрыть окно по щелчку в пустом месте экрана.

В момент запуска видеофайла справа (в окне воспроизведения видео) на несколько секунд появляется подсказка. На время воспроизведения 15% от ширины окна справа - зона регулировки громкости. На мобильных устройствах проведите пальцем вверх-вниз для регулировки громкости.

Очень рекомендуется добавление постера! Изображение постера должно иметь тот же размер пикселя, что и сам видеоролик!
Все выставляемые параметры локальные и привязаны к редактируемому хотспоту. Для другого хотспота установите свои настройки. Щелчок по созданному хотспоту откроет выбранный видео файл.
Для воспроизведения видео используется видеоплеер krpano.
В режиме VR видео открывается как видео-хотспот.

Вы можете индивидуально использовать экшн открытия видео файла, даже при отключенном редакторе. Установите его на какое-либо действие. Видео и постер должны находиться в папке add_hotspot/video. Код:
VideoPlaySM (имя видео, имя постера, громкость, цикл, высота видео);

• video file name - например: test.mp4
• poster file name - например: test.jpg (рекомендуемо)
• volume -значение от 0 до 1 (необязательно, по умолчанию 1).
• loop - воспроизводить видео по циклу - true/false (необязательно, по умолчанию-false).
• video window height - высота видео относительно высоты окна браузера в процентах без знака "%" - 0/100 (не обязательно, по умолчанию - 90).

Например:
VideoPlaySM(test.mp4, test.jpg, 0.5, true, 80);

Создать видео хотспот.

Предварительно поместите видеофайл в папку add_hotspot/video/ .

Активируйте вкладку, нажав Video hotspot.
Нажмите на иконку и в открывшемся окне проводника выберите видео файл из папки "add_hotspot/video/" .
Volume at start - установите необходимую громкость видеоролика при воспроизведении с помощью бегунка или введя числовое значение от 0 (min) до 1 (max). По умолчанию - 0.5.
Loop - выберите режим воспроизведения. Зеленый индикатор - цикличное повторение, серый - воспроизведение один раз.
Select a poster image - изображения (типичный снимок экрана первого видеокадра), который должен отображаться до тех пор, пока видео не будет загружено и не будет готово к воспроизведению.
Очень рекомендуется добавление постера! Изображение постера должно иметь тот же размер пикселя, что и сам видеоролик!
pausedonstart - Приостановлено в начале.
Automatically pause the video when the browser tab/window gets hidden - автоматически приостанавливать видео, когда скрывается вкладка/окно браузера.
Automatically resume the video when it was paused before by hiding the browser tab/window - автоматически возобновлять видео, когда оно было приостановлено, скрывая вкладку/окно браузера.

Все выставляемые параметры локальные и привязаны к редактируемому хотспоту. Для другого хотспота установите свои настройки.

Пример создания видео хотспота.
YouTube

Открыть YouTube link.

(HTML5)

Создайте и настройте хотспот. Активируйте вкладку, нажав Open YouTube.
Выберите ролик на YouTube и нажмите "поделиться". Появится ссылка, например https://youtu.be/mMpWL8XM2-k.
Скопируйте код после слеша mMpWL8XM2-k и вставьте в строку, нажмите "Enter"
По нажатию на хотспот откроется окно с роликом с Youtube.
В режиме VR окно с роликом с youtube не будет открываться!
Height relative to window - высота окна относительно экрана в процентах.
Clicking on an empty space closes window - закрыть окно по щелчку в пустом месте экрана.
Вы можете индивидуально использовать экшн открытия youtube, даже при отключенном редакторе. Установите его на какое-либо действие. Код:
YoutubOpenSM (ссылка, высота окна YouTube);

• ссылка - ссылка на YouTube. Используйте код ссылки как описано выше!
• высота окна YouTube - высота окна относительно экрана в процентах без знака "%" (необязательно, по умолчанию - 90).

Например: YoutubOpenSM(i92-cHzRNTI, 70);

Воспроизвести аудио файл.

Внимание! Если у вас не подключен плагин звука, убедитесь в наличии файла soundinterface.js в папке plugins и подключите:

 <plugin name="soundinterface" keep="true" url="%FIRSTXML%/plugins/soundinterface.js" />

Создайте парные аудиофайлы, например "sound1.mp3" и "sound1.ogg", браузер автоматически выберет нужный. Предварительно поместите аудио файлы в папку add_hotspot/sound/.
Создайте и настройте хотспот. Активируйте вкладку, нажав Play sound.
Нажмите на иконку "sound" в открывшемся окне проводника выберите аудио файл с расширением "mp3" из папки "add_hotspot/sound/"
Volume at start - Установите стартовую громкость звука с помощью бегунка или введя числовое значение от 0 (min) до 1 (max). По умолчанию - 0.5.
В режим "3D sound" это значение является максимальной громкостью.

Loops - цикличное повторение.
Directional 3D sound - включение направленного 3D-звука относительно хотспота. При повороте от хотспота по вертикали и горизонтали громкость уменьшается.
Range of the sound - диапазон звука в градусах. При отклонении от хотспота на эту величину громкость уменьшается до нуля.
Щелчок по хотспоту начнет воспроизводить файл, изображение хотспота сменится на иконку динамика. Щелчок по динамику останавливает звук и устанавливает прежнее изображение.

Во время воспроизведения аудио, появляется панель управления звуком.
Play/pause - остановить/воспроизвести звук.
Speaker - щелчок - включает/выключает звук. Наведение курсора открывает панель с бегунком для регулировки громкости.
Time line - iинформирует о текущем времени воспроизведения. Ухватившись за полоску можно перемещать момент воспроизведения.
Time - показывает текущее и общее время воспроизведения. В момент запуска аудиофайла справа в окне на несколько секунд появляется подсказка. На время воспроизведения 20% от ширины экрана справа - зона регулировки громкости. На мобильных устройствах проведите пальцем вверх-вниз для регулировки громкости.

Вы можете индивидуально использовать код открытия звука с панелью управления, Установите его на какое-либо событие. Код:
play_soundSM(имя звука, URL, громкость, цикл);

• имя звука - используйте имя "sound_hs_addhs" и при воспроизведении другого звука этот будет отключаться. Если вы выберите другое имя, то звук будет воспроизводиться одновременно с другими запущенными и для отключения нужно будет использовать действие с указанием этого имени, например: stopsound(name).
• URL - полный путь до аудиофайла
• громкость - громкость при воспроизведении(0-1).
• цикл - воспроизведение непрерывно(true) или один раз(false).

Например: play_soundSM(sound_hs_addhs, 'add_hotspot/sound/2.mp3',0.5, false);

Вы можете сгенерить код прямо во вкладке, но аудио файл должен быть в папке add_hotspot/sound/ и по умолчанию используется имя "sound_hs_addhs":

• Выберите аудиофайл, нажав на иконку звука во вкладке.
• Установите путь
• Установите громкость
• Установите цикл
• Раздвиньте панель редактора по ширине и появится строка с кодом.
• Нажмите на кнопку копирования в буфер обмена и вставьте код в ваше событие.

Дополнительные настройки в файле add_hotspot/plugins_l/plugin_a/style_addhs.xml

<sound_hs 
	sound_bar="true"
	volume_icon_right="true"
	speaker_icon="true"
/> 

• sound_bar - показать/спрятать панель управления звуком.(true/false).
• volume_icon_right - показать/спрятать управление громкостью справа на экране(пальцм или мышкой).(true/false).
• speaker_icon - показать/спрятать иконку динамика на хотспоте при воспроизведении звука. (true/false).

---

Пример создания хотспотов открывающих URL ссылки.
YouTube

---

---

---

---

---

---

Демо версия.

Вы можете попробовать демонстрационную версию плагина со своими проектами. Это полностью рабочая версия, которая имеет ограничение по времени.
Отправьте на электронную почту novosibpano@yandex.ru запрос и я вышлю ссылку на скачивание архива с примером и плагином.

---

---

---

Комментарии.