novosibpano@yandex.ru  

Плагин "редактор хотспотов" v1.31


только HTML5.



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

  • Изменение основных параметров хотспота с визуальным контролем результата.
  • Перемещение хотспота мышкой.
  • Оригинальная система изменения параметров "нажать и перемещать".
  • Вывод параметров в окно для редактирования, копирования, вставки. Ввод параметров прямо на функциональных кнопках.
  • Изменение всех параметров текстового хотспота - цвета, тени, бордюры, радиусы, прозрачность, ввод и редактирование текста HTML, редактирование стиля CSS.
  • Внесение действий в атрибуты onover, onhover, onclick, ondown, onnout, onup, onloaded.
  • Создание, удаление, копирование хотспотов.
  • Редактирование и сохранение изменений без открытия файлов xml.



Редактирование текстовых хотспотов (версия 1.3).
YouTube



Описание панелей редактора.

Редактор состоит из трех панелей:

1. Панель с расположенными внутри кнопками для изменения основных параметров хотспота, создания, копирования и удаления хотспотов. Для удобства работы панель перемещается мышкой, раздвигается по высоте и имеет прокрутку кнопок колесом мыши и смещение внутри окна, ухватившись за ползунок с правой стороны. Щелчок на верхней части панели сворачивает ее.
2. Панель со строкой, в которую выводятся текущие параметры хотспота. В строке можно редактировать, копировать и вставлять данные. Ввод данных по нажатию клавиши "Enter".
3. Панель для редактирования всех параметров текстового хотспота. В нижней части расположены две справочные кнопки по
текстовому хотспоту на сайте krpano и описание редактора хотспота со ссылкой на текущую страницу. Внешний вид такой же как у первой панели.

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





Строка ввода/вывода.


Нажатие на кнопку в панели редактирования выводит в строку параметр соответствующего элемента. Над строкой появляется название редактируемого параметра.
Доступны операции выделения, копирования, вставки, удаления. Для ввода параметров нужно нажать клавишу "Enter".



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

Посмотреть документацию по хотспоту на сайте krpano.

  • on-off - отключение/включение режима редактирования.
  • type - выводит на кнопку тип активного хотспота (text, image).
  • url - если тип "image", то выводит в окно путь до изображения, который можно изменить прямо в окне.
  • style - выводит в окно стиль хотспота, который можно изменить прямо в окне.

    Внимание!
    Параметры "enabled","visible" активируются при выключенном режиме редактирования кнопка"on-off". В режиме редактирования на кнопки выводится их статус, который будет активен после отключения редактора.

  • enabled - включен или выключен (true, false).
  • visible - видимость (true, false).
  • scale - изменение масштаба..
  • width - изменение ширины (в пикс.).
  • height - изменение высоты (в пикс.).
  • alpha - изменение прозрачности (от 0 до 1).
  • rotate - вращение(в градусах).
  • ath - горизонтальные координаты (в градусах).
  • atv - вертикальные координаты (в градусах).
  • edge - позиционирование точки привязки в хотспоте (9 вариантов).

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

  • rx - вращение вокруг собственной оси x (в градусах).
  • ry - вращение вокруг собственной оси y (в градусах).
  • rz - вращение вокруг собственной оси z (в градусах).
  • ox - смещение по оси х (в пикс.).
  • oy - смещение по оси y (в пикс.).
  • depth - Внутренняя глубина 3D-рендеринга - это расстояние 3D-объекта до экрана. Для 2D-просмотра видимого эффекта нет, но для просмотра стерео 3D / VR это может быть важная настройка.
  • zorder - упорядочение элементов "горячих точек" (от 0 до 100).
  • distorted - включение/выключение искажения (true, false).
  • capture - захват мыши (true, false).
  • keep - показать на всех панорамах или только на текущей (true, false).
  • handcursor - вид курсора в виде руки при наведении на хотспот (true, false).
  • maskchildren - обрезать дочерние элементы (true, false).
  • mipmapping - сглаживание (true, false).

Нажатие на ниже перечисленные кнопки активирует окно со строкой ввода, в которой можно прописать или отредактировать действия или функции.

действия/функции, которые будут вызываться когда:
  • onover - пользователь навел курсор мыши.
  • onhover - пользователь навел курсор мыши, вызываются 15 раз в секунду пока курсор над хотспотом.
  • onout - пользователь убрал курсор с хотспота.
  • ondown - пользователь нажал хотспота.
  • onup - пользователь отпустил хотспот.
  • onclick - пользователь щелкнул по хотспоту.
  • onloaded - при загрузке изображения хотспота.
Создать, удалить, скопировать хотспот.
  • aim - включение - выключение прицела для удобства размещения нового хотспота.
  • add hotspot text - создать хотспот тип "text".
  • add hotspot image - создать хотспот тип "image".
  • remove "Delete" - удалить хотспот. Когда активна кнопка, удаление возможно по нажатию клавиши "Delete".
  • copy hotspot "+" - копировать хотспот. Если не выбран ни один хотспот то клавиша "+" создает новый текстовый. При выбранном хотспоте клавиша "+" создает его копию.
  • Drag - заблокировать перемещение выбранного хотспота (on-off).
  • Speed - изменение скорости регулировки основных параметров от 0 до 10.
  • Display all attributes - открыть окно с текущими параметрами хотспота для копирования.
  • Save XML - сохранить изменения в файл param_set_hs.xml.


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

Посмотреть документацию по текстовому хотспоту на сайте krpano.

  • HTML - выводит в окно текст HTML который можно редактировать.
  • CSS - выводит в окно стиль CSS для текста HTML который можно редактировать.
Вкладка редактирования цвета "Color".

Нажатие на кнопку активирует выбранный элемент и становится возможным изменение параметров цвета ползунками ниже.

  • bgcolor - заливкa.
  • border - бордюр.
  • shadow - тень хотспота.
  • text - текст.
  • txtshadow - тень текста.
  • Ползунки изменения параметров цвета.
    • Tone - изменение тона цвета.
    • Saturation - изменение насыщенности.
    • Brightness - изменение яркости.
    • Transparency - изменение прозрачности.

Внимание!
Если насыщенность равна нулю (серый цвет) нельзя регулировать тон. Сначала нужно вывести из "серого" поднятием насыщенности.

  • Width border - Изменение ширины бордюра (в пикс.).
>Вкладка изменения закругления углов (пиксели).
  • all - изменение радиуса одновременно всех углов.
  • lefttop - левый верхний угол.
  • righttop - правый верхний угол.
  • rightbottom - правый нижний угол.
  • leftbottom - левый нижний угол.
Вкладка изменения тени хотспота (пиксели).
  • xoffset - отступ тени по оси x.
  • yoffset - отступ тени по оси y.
  • blur - размытие тени.
Вкладка изменения тени текста (пиксели).
  • xoffset - отступ тени по оси x.
  • yoffset - отступ тени по оси y.
  • blur - размытие тени.
Вкладка отступ текста (пиксели).
  • all - изменение отступа одновременно от всех сторон.
  • top - отступ сверху.
  • right - отступ справа.
  • bottom - отступ снизу.
  • left - отступ слева.

  • oversampling - качество рендеринга текста (от 1 до 4).
  • vcenter - вертикальное центрирование текста (true, false).
  • wordwrap - авто перенос текста по словам на новую строку (true, false).
  • bg - изменение ширины (в пикс.).
  • mergedalpha - По умолчанию альфа-прозрачность фона будет применяться также к границе и тени, но, отключив этот параметр, можно будет отобразить границу и тень с их собственной и независимой альфа-прозрачностью (true, false).


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

После подключения редактора все хотспоты становятся доступны для редактирования.
Для подключения редактора поместить папку "edit_hotspot" в корневую папку с туром и прописать в основном файле xml:


    <krpano .... >
    <include url="edit_hotspot /edit_hotspot.xml" />
    <include url="edit_hotspot /param_set_hs.xml" />
    .
    .
    </krpano>
	

Если редактор будет использоваться без сохранения в файл XML, то можно прописать только


    <include url="edit_hotspot /edit_hotspot.xml" />
	



Сохранение.

Есть три варианта сохранения измененных параметров.

Для хотспотов прописанных в основном файле tour.xml подходят все три варианта сохранения. Если хотспоты созданы с помощью редактора, то для них возможен только первый вариант сохранения.


1. Сохранение без редактирования файлов xml.
Подключите в основном файле XML файл "param_set_hs.xml".
После редактирования хотспотов нажать кнопку в панели "Save XML".


Откроется окно проводника, в котором нужно указать папку "edit_hotspot" для сохранения файла "param_set_hs.xml".
Выбираем в окне файл "param_set_hs.xml", нажимаем "сохранить" и подтверждаем "заменить файл".



Перезагружаем окно браузера - изменения приняты.
По завершению работы над хотспотами нужно оставить файлы "param_set_hs.xml" and "Install_HS.xml" в папке "edit_hotspot" и удалить папку "picture" и файлы "edit_hotspot.xml", "edit_HText.xml". В файле "tour.xml" оставить включенным только "param_set_hs.xml"

    <krpano .... >
	<include url="edit_hotspot /param_set_hs.xml" />
    .
    .
    </krpano>
	
2. Копирование из окна со строкой редактирования. Нажать кнопку "Display all attributes" - все атрибуты хотспота выведутся в окно. Выделите текст выборочно или полностью "Ctrl + A", скопируйте "Ctrl + C" и в файле tour.xml замените параметры хотспота на скопированные.

3. Копирование из консоли.
Открыть консоль (клавиша "О"). Нажать на отредактированный хотспот - в консоли отобразятся текущие параметры хотспота.



Выделите мышкой необходимые параметры, скопируйте и в файле tour.xml замените параметры хотспота на скопированные.


Важно!

В файле "param_set_hs.xml" хранятся параметры созданных хотспотов и параметры измененных хотспотов. При старте из этого файла устанавливаются изменения существующих хотспотов, создаются новые хотспоты. Основной "tour.xml" не изменяется. Обновляются все параметры, которые правятся в редакторе даже если они не редактировались. Остальные параметры хотспотов из "tour.xml" не затрагиваются и редактируются в файле "tour.xml".
Изменения, внесенные в хотспот в файле "tour.xml" и измененные редактором при перезагрузке, примут установки редактора из файла "param_set_hs.xml" !

Если удалить файл "param_set_hs.xml", то хотспоты примут значения из файла "tour.xml".
Важно сохранить настройки перед переходом на другую сцену, иначе настройки не сохранятся. Нужно проверить параметры сохранения браузера. По умолчанию сохранение может быть в папку "download". Измените настройки.

Пример:
браузер "chrome"






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

Стоимость плагина 29 EUR.

Протестируйте плагин по этой ссылке. Не забудьте указать адрес вашей электронной почты. Я вышлю ссылку на скачивание архива с файлами редактора хотспотов в течение 24 часов после оплаты.
Обновления плагина бесплатно!

Также вы можете воспользоваться формой обратной связи (значок в левом нижнем углу сайта), либо оставить информацию в разделе "Комментарий".

Архив включает в себя:
Рабочий пример использования. В примере папка ""edit_hotspot"" с файлами галереи в которой:
  • picture (папка с иконками и файлом edhssan.js).
  • edit_hotspot.xml (исполняющий файл с закрытым кодом).
  • edit_HText.xml (исполняющий файл с закрытым кодом).
  • Install_HS.xml (исполняющий файл с закрытым кодом).
  • param_set_hs.xml (для сохранения параметров).



Изменения.

26.04.2018

Версия 1.31

Исправлены ошибки работы в версии krpano-1.19-pr16.
Добавилось ограничение перемещения и растягивания панелей редактора в пределах экрана.

16.12.2017

Версия 1.3

Это - кардинально измененный редактор, в котором расширен функционал.
1. Добавилась панель для ввода/вывода информации с возможностью копирования и вставки параметров.
2. Добавилась панель для редактирования всех параметров текстового хотспота - цвета, тени, бордюры, радиусы, прозрачность, ввод и редактирование текста HTML, редактирование стиля CSS.
3. Изменен внешний вид основной панели, добавлена прокрутка кнопок
4. Добавлено растягивание панелей – можно тянуть, ухватив за нижний правый угол.
5. Добавились к редактированию атрибуты хотспота: depth, zorder, distorted, capture, keep, handcursor, maskchildren, mipmapping.
6. Добавились все атрибуты действий: onover, onhover, onclick, ondown, onout, onup, onloaded.
7. Добавился блок для создания, копирования и удаления хотспотов.
8. Добавилась кнопка «вкл/выкл» режима перетаскивания для каждого хотспота.
9. Добавились кнопки открытия справочной информации (переход на сайт) по текстовым хотспотам и по редактору хотспота.
10. Кнопка "Display all attributes" выводит все параметры редактируемого хотспота в новую панель ввода и редактирования информации.


19.10.2017

Версия 1.2

1. Изменение метода подключения. Не нужно в каждый хотспот прописывать действия для редактирования. После подключения плагина все хотспоты автоматически становятся доступными для редактирования.
2. Добавлена кнопка в панели "on-off" - отключает/включает режим редактирования.


09.10.2017

Версия 1.1

Изменение метода сохранения. Добавилось сохранение без редактирования файлов xml. Исправлены ошибки с редактированием хотспотов с одинаковыми именами в разных сценах.


01.09.2017

Версия 1.0




Примеры.

Редактирование текстовых хотспотов (версия 1.3).
YouTube



Cохранения параметров в XML файл (версия 1.2).
YouTube



>Пример на YouTube (версия 1.2).
Раскрыть на полный экран.



Пример на YouTube (версия 1.1).





Примечание.

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





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