novosibpano@yandex.ru  

Add hotspot v1.8


HTML5. krpano-1.20.5 и выше. 2panel

Возможности.

  • Создавать, удалять, копировать хотспоты.
  • Позиционировать хотспот мышкой, выбирать изображение хотспота в открывающемся окне проводника.
  • Вводить название хотспота (появляется при наведении мыши на хотспот).
  • Расширенные настройки - возможность изменять масштаб, прозрачность, повороты по осям x,y,z, вносить свои действия в onover, onhover, onclick, onout.
  • Назначать хотспоту открытие фотографии.
  • Назначать хотспоту открытие видеофайла с панелью управления (тайм линия, отображение текущего и общего времени).
  • Создавать видеохотспот. Включение направленного 3D-звука относительно хотспота.
  • Назначать хотспоту открытия youtube.
  • Назначать хотспоту открытия аудио файла. Включение направленного 3D-звука относительно хотспота.
  • Назначать хотспоту открытия ссылки URL в новом окне, в текущем, во фрейме.
  • Создавать список url ссылок на определенные места в туре с заданным углом обзора. Дает возможность перехода на конкретное место в туре с внешних ресурсов.
  • Вставлять часть изображения, извлеченного в PTGui. Не требует редактирования кода, координаты пересчитываются автоматически.
  • Создавать текстовые хотспоты.
  • Создавать полигональные хотспоты.
  • Наличие в редакторе выпадающего списка созданных хотспотов, клик по названию открывает вид с этим хотспотом.
  • Наличие строки поиска хотспота по его названию.
  • Легкое подключение.
  • Редактирование и сохранение без правки кода в файле xml.



Как подключить.

Поместите папку "add_hotspot" в корневую папку с туром и пропишите в файле "tour.xml":


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

Для создания нового проекта замените файл add_hotspot/save_hotspot.xml на чистый, который лежит в папке "add_hotspot/new project/save_hotspot.xml" или удалите хотспоты из файла save_hotspot.xml

Внимание!
Плагин работает при открытии тура в интернет-браузере. Не будет работать при открытии с помощью "krpano Tools"!



Изменение расположения плагина и имени основного файла XML file.

Например, ваш основной файл test.xml, а папку с плагином вы хотите разместить в папке skin. Поместите папку "add_hotspot" в папку skin и пропишите в файле "test.xml":


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

In the add_hotspot/save_hotspot.xml file, write:


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

FIRSTXML - имя основного файла XML.
path - путь до расположения папки с плагином.




PIN код и сохранение проекта.

Откройте файл "add_hotspot/save_hotspot.xml", введите 4-х значный пин код в строку pin_cod="****". pin
Откройте тур в браузере - плагин будет подключен.
При повторном открытии тура панель редактора плагина будет доступна.
Сохраняйте проект (кнопка "Save") и перезагружайте браузер - панель редактора плагина будет доступна.
По завершении работ нажмите клавишу "Delete PIN" - откроется окно, сохраните файл "save_hotspot.xml", редактор будет отключен.


Внимание!
Плагин создает глобальные хотспоты (не внутри сцены!) и устанавливает их видимость в той сцене, в которой был создан. Имя сцены прописывается в атрибуте плагина. При создании хотспотов и назначении им иных действий учитывайте этот момент!



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

panel_1

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


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

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

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

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

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

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

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

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

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

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

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

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

save

Save - сохранение всех созданных хотспотов и изменений в файл save_hotspot.xml. Откроется окно проводника, укажите путь для сохранения "add_hotspot/save_hotspot.xml".



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

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

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



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

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


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

closeZ - заблокировать хотспот от редактирования.



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


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


Расширив панель вы увидите дополнительные кнопки:
drag_hs

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

Paste attributes - выберите другой хотспот, вставьте скопированные атрибуты (Ctrl+V).


select_atrib



Select attributes - выбор атрибутов для вставки. При нажатии этой кнопки откроется список атрибутов. В нем можно выбрать те атрибуты, которые необходимы для копирования.

Delete PIN - удаление пин кода и сохранение проекта.







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






Поиск.

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


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

advanced_setting

По умолчанию создается хотспот-изображение без назначения ему каких либо действий. Во вкладке "Manual setings (direct input)" вы можете настроить его параметры вручную.

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

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

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

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

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

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

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

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

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


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.



Открыть сцену.

scen Создайте и настройте хотспот.
Активируйте вкладку, нажав Open scene.
Нажмите на миниатюру и в раскрывшемся списке выберите нужную сцену, щелкнув по миниатюре сцены.
Теперь созданный хотспот при щелчке откроет выбранную сцену.
  • Template - шаблон открытия сцены. По умолчанию "loadscene (scene_name,null,MERGE,BLEND(0.5));". Вы можете задать свои значения открытия сцены введя их в строке. Нельзя изменять переменную имени сцены "scene_name".
  • Info - справка о действии "loadscene" на сайте krpano .
  • Default transition - при нажатии устанавливается шаблон по умолчанию.
  • Krpano default transition - установите переход как по умолчанию в "krpano" при создании тура.



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

(Flash, HTML5)

photo Предварительно поместите фотографии в папку add_hotspot/photo/.
Создайте и настройте хотспот. Активируйте вкладку, нажав Open photo.
Нажмите на миниатюру и в открывшемся окне проводника выберите изображение из папкиadd_hotspot/photo/.
Щелчок по созданному хотспоту откроет выбранное изображение.
crop_ph При наведении курсора на изображение оно зуммируется вращением колеса мыши. Зум происходит относительно места наведения курсора. Если фотография больше окна просмотра, то в нижнем правом углу появится миниатюра фото с выделенной областью просмотра. При смещении области просмотра соответственно смещается фотография. Фотография перемещается мышью или пальцем на мобильных устройствах.
В режиме VR изображение открывается как хотспот.
  • Text below photo - введите подпись к фотографии (отображается под открытой фотографией).
    Стиль текста подписи можно настроить в файле "add_hotspot/plugins_l/style_ed_L.xml"
  • Height relative to window - высота окна относительно экрана в процентах (указывать без значка "%"). Фотография откроется не больше своего истинного размера!
  • Clicking on an empty space closes window - закрыть окно по щелчку в пустом месте экрана.
Вы можете индивидуально использовать экшн открытия фотографии даже при отключенном редакторе. Установите его на какое-либо действие. Код:
OpenPhotoSM (путь, подпись, высота в %);
  • path - полный путь до расположения изображения, например:
  • signature - подпись изображения (отображается под открытой фотографией).
  • height in % - высота окна относительно экрана в процентах (указывать без значка "%"). Фотография откроется не больше своего истинного размера!
Например:
OpenPhotoSM (%SWFPATH%/photo/test.jpg, TEST, 50);



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

(Flash, HTML5)

video Предварительно поместите видеофайл в папку add_hotspot/video/.
Создайте и настройте хотспот. Активируйте вкладку, нажав Open video.
Нажмите на миниатюру "Play" и в открывшемся окне проводника выберите видео файл из папки "add_hotspot/video/".
sound4
  • 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 (имя видео, имя постера, громкость, цикл, высота видео);
  • имя видео - например: test.mp4
  • имя постера - например: test.jpg (рекомендуемо)
  • громкость -значение от 0 до 1 (необязательно, по умолчанию 1).
  • цикл - воспроизводить видео по циклу - true/false (необязательно, по умолчанию-false).
  • высота видео - высота видео относительно высоты окна браузера в процентах без знака "%" - 0/100 (не обязательно, по умолчанию - 90).
Например:
VideoPlaySM(test.mp4, test.jpg, 0.5, true, 80);



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

(Flash, HTML5)

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

Активируйте вкладку, нажав Video hotspot.
Нажмите на иконку и в открывшемся окне проводника выберите видео файл из папки "add_hotspot/video/" .
Volume at start - установите необходимую громкость видеоролика при воспроизведении с помощью бегунка или введя числовое значение от 0 (min) до 1 (max). По умолчанию - 0.5.
Loop - выберите режим воспроизведения. Зеленый индикатор - цикличное повторение, серый - воспроизведение один раз.
Select a poster image - изображения (типичный снимок экрана первого видеокадра), который должен отображаться до тех пор, пока видео не будет загружено и не будет готово к воспроизведению.

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

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)

youtube Создайте и настройте хотспот. Активируйте вкладку, нажав 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);



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

(Flash, HTML5)

sound Создайте парные аудиофайлы, например "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 - диапазон звука в градусах. При отклонении от хотспота на эту величину громкость уменьшается до нуля.
Щелчок по хотспоту начнет воспроизводить файл, изображение хотспота сменится на иконку динамика. Щелчок по динамику останавливает звук и устанавливает прежнее изображение.

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




Назначить открытие ссылки URL.

open_url

Есть три варианта открытия ссылки:

  • New window - открыть ссылку в новом окне (Flash, HTML5)
  • Here - открыть ссылку в этом окне(только HTML5).
  • In frame - открыть ссылку во фрейме (окно в окне). К сожалению, пока не работает на IOS (только HTML5).

Для выбора нажмите на нужный вариант, индикатор станет зеленого цвета.
Выберите хотспот и введите в строку адрес открываемого сайта (или скопируйте"Ctrl+C" и вставьте в строку "Ctrl+V"), нажмите "Enter".
Старайтесь сокращать длинные ссылки, не все ссылки могут быть открыты "In frame". Вы можете попробовать вводить ссылки здесь.

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



Вставить заплатку из PTGui.

(HTML5)

PTGui Эта вкладка дает возможность идеально разместить часть изображения (пиксель в пиксель), извлеченного из панорамы.
Как извлечь часть изображения подробно описано на форуме krpano . Рекомендую внимательно ознакомиться! Далее отредактируйте его на свое усмотрение (вставьте открытую дверь, поменяйте цвет предмета и т.д.). Вставить изображение можно с помощью данной вкладки без правки кода xml.
Вставка изображения:
  • Разместите отредактированное изображение по пути add_hotspot/picture/.
  • Выберите созданное раннее изображение нажав на иконку "Select image" Создайте хотспот, нажав "Add hotspot".
  • Активируйте вкладку, нажав Patgh PTGui.
  • Во вкладке "Image:" появится имя выбранного файла.
  • Если изображение большого размера, создайте уменьшеную копию для мобильной версии, нажмите на"Mobile image" и выберите это изображение.
  • Если вы извлекали изображение как описано на форуме krpano , то у вас должны быть сохранены эти параметры: "hfov","yaw","pitch","roll". Введите эти параметры в соответствующие ячейки, каждый раз нажимая "Enter".
Если вы все сделали правильно, изображение четко совместится со своим местом в панораме.

При необходимости выберите нужные предустановленные действия, которые активируются нажатием на название (индикатор станет зеленым):
  • onover-show - при наведении мыши изображение плавно появилось.
  • onout-hide - убрали мышь - изображение плавно исчезло.
  • show/hide - щелчок по изображению будет переключать видимость.
Button action code - для создания кнопки управления видимостью изображения нужно сгенерировать код управления видимостью изображения и вставить его в кнопку:
  • show - показать изображение.
  • hide - спрятать изображение.
  • show/hide - переключить видимость.
При активации выбранного действия в строке будет появляться соответствующий код, используйте его для своей кнопки.
Copy to clipboard - скопируйте содержимое строки в буфер обмена для последующей вставки.



Создать текстовый хотспот.


Эта вкладка позволяет создавать и редактировать текстовые хотспоты. Подробная информация о назначении атрибутов текстового хотспота здесь.
Все окошки с цифровыми значениями позволяют вводить параметры с клавиатуры, вставлять, копировать. По вводу нужно нажать "Enter".

  • Create text hotspot - создать текстовый хотспот с настройками по умолчанию.
Панель изменения радиуса углов и толщины бордюров.
radius
  • Изменение всех радиусов - наведите на верхнюю среднюю круглую точку, появится подсказка "all round " и кнопка станет зеленого цвета. Нажмите на кнопку и перемещайте курсор вправо (увеличение радиуса всех углов) или влево (уменьшение радиусов всех углов). Значение радиуса угла будет отображаться рядом с кнопкой.
  • Изменение каждого радиуса - напротив каждого угла расположена подобная кнопка. Она изменяет радиус соответствующего угла по тому же принципу.
  • Изменение толщины бордюра - кнопка расположена внизу на бордюре. Принцип изменения толщины бордюра такой же как изменение радиуса углов.
Панель изменения параметров тени хотспота.
scadow_hs
  • Shadow hotspot - нажмите на кнопку и не отпуская перемещайте мышь - тень хотспота будет смещаться соответственно.
  • X offset - выводится значение смещения тени по оси x.
  • Y offset - выводится значение смещения тени по оси у.
  • Blur - нажмите на кнопку и не отпуская перемещайте мышь вправо (увеличение размытия тени), влево (уменьшение размытия тени).
Изменения цвета и прозрачности.
color_hs
  • Color fill - цвет заливки хотспота.
  • Color border - цвет бордюра хотспота.
  • Color shadow - цвет тени хотспота.

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

css Текст.
  • Html - введите в строку текст, отображаемый в хотспоте. Для формирования текста можно использовать несколько HTML-тегов, простые CSS-стили или теги.
  • Css - стиль текста. Между двоеточием и параметрами "color" и "font-size" оставляйте один пробел!
  • Size text - изменение высоты текста.
  • Shadw text - аналог панели. Shadw hotspot - параметры применяются к тени текста.
padding Изменения отступа текста.
  • Padding - четыре кнопки для изменения отступа текста с четырех сторон.
Изменение цвета текста и тени.
color_text
  • Color text - изменение цвета текста.
  • Text shadow color - изменение цвета тени.
Дополнительные настройки.
dop_param Расширьте панель, ухватившись мышкой за правый нижний угол. Откроются кнопки дополнительных параметров.
  • oversampling - повысить масштабирование внутренней цели рендеринга растрового изображения с помощью данного коэффициента избыточной выборки для текста с более высоким разрешением (четким).
  • vcenter - вертикально центрируйте текст в пределах данной высоты плагина.
  • wordwrap - установите, должен ли текст автоматически переноситься в новые строки (ниже), если он не помещается в текущую строку.
  • bg - включить/выключить фон.
  • mergedalpha - по умолчанию альфа-прозрачность фона будет применяться также к границе и тени. Отключив этот параметр, можно отобразить границу и тень с их собственной и независимой альфа-прозрачностью.
  • mipmapping - включить mipmapping - позволяет минимизировать эффекты сглаживания при отображении текста в виде уменьшенного элемента.



Создать полигональный хотспот.


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

polig_4

Create and edit - режим создания и редактирования полигональных хотспотов. Активный - красная кнопка
Что бы включить или выключить режим, нажмите на кнопку или клавишу "E", начать и закончить рисовать хотспот - нажмите "пробел", создать точку - щелчок левой кнопкой мыши.
В режиме редактирования щелкните по хотспоту - появятся узловые точки по углам. Ухватившись за точку можно переместить угол. При наведении на точку появляются две кнопки "+" (создать точку) и "х" (удалить точку).



В панели присутствуют две закладки: Default settings и Hotspot.

Закладка "Default settings".

polig_1

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

  • Show text - всплывающий текст при наведении на хотспот. Введите при необходимости. По умолчанию выводится имя хотспота. Если текст не нужен - удалите из строки.
  • Polyline - режим создания полигонов или полигональных линий.
  • Blendmode - режим смешивания.

Нижеприведенные параметры имеют два состояния и разделены на две колонки. Первое состояние - по умолчанию. Второе состояние может применяться к хотспоту при наведении, щелчку по нему и т.д. и, соответственно, имеют код установки set_pol_1(); и set_pol_2();. По умолчанию вторые параметры устанавливаются при наведении мыши onover="set_pol_2();" и когда убрали мышь c хотспота onout="set_pol_1();"
Settings 1 - параметры хотспота1. Код установки set_pol_1();

  • Color fill - цвет заливки. Щелкните по цветному индикатору - откроется панель настройки цвета и прозрачности.
  • Color border - цвет бордюра.
  • Width border - ширина бордюра (пикс.).
  • Alpha - прозрачность хотспота (0-1).

Settings 2 - параметры хотспота 2. Код установки set_pol_2();
  • Параметры те же что и в Settings 1.


Закладка"Hotspot"
polig_2

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

  • Copy "Ctrl+C" - копировать параметры выделенного хотспота. Клавиши "Ctrl+C".
  • Paste "Ctrl+V" - вставить параметры в выделенный хотспот. Клавиши "Ctrl+V".
  • Reset to default - сброс настроек до настроек по умолчанию.
  • Set to default - установить настройки хотспота как настройки по умолчанию.




Группировка хотспотов.

group_0

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

group_2

group - Открыть панель для назначение группы хотспоту.

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

Если хотспот уже принадлежит группе, то при нажатии на этот хотспот имя группы выводится в строку.


group_1

Раскройте вкладку группировки, нажав на треугольник справа во вкладке.

  • Insert a group - нажмите на хотспот или выберите группу в списке в панели назначения группы, потом нажмите эту кнопку, соответствующая группа появится в строке напротив.
    Вы можете добавлять в список несколько групп.
    Можно ввести название группы вручную в этой строке.
  • Show selected groups - показать хотспоты группы.
  • Hide selected groups - спрятать хотспоты группы.
  • Enable group - выключить хотспоты группы .
  • Hide unselected groups - спрятать хотспоты других групп.
  • Clear - очистить строку ввода групп.

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

  • Copy to clipboard - копировать код в буфер обмена.
  • Checking - проверка. Нажмите, чтобы проверит как работает код.
  • Enable group - выключить хотспоты группы .
  • Show all - показать все хотспоты всех групп.
Внимание!

Имя группы не должно содержать в себе имя другой группы!
gr_1...gr_12 - не правильно.
gr_01...gr_12 - правильно.




Встроенные функции.

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

FlyoutSM(); - плавно выводит хотспот на центр экрана без искажения. Установите на какое либо действие в хотспоте, например - onclick="flyoutSM();"

Пример:

OpenFrame(html,get(data[data_html].content),400,300,true); - открыть HTML из данных. Пример.


Для использования размытия у вас должен быть плагин "Blur".


Протестировать в 3D панораме.


Раскрыть на полный экран.




Демо версия.

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



Приобрести плагин.

Стоимость плагина составляет 36 евро.
Для уточнения способа оплаты вы можете написать мне по адресу novosibpano@yandex.ru.
Так же вы можете воспользоваться формой обратной связи (значок в левом нижнем углу сайта).
Пришлите мне желаемый 4-х значный пин код и после оплаты я вышлю вам ссылку на скачивание архива с плагином.

Архив включает в себя:
  • Рабочий пример использования.
  • Папка с плагином "add_hotspot".
  • Описание плагина.



Примечание

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





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

24 hours