novosibpano@yandex.ru  

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


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

  • только HTML5.



  • Возможности редактора хотспота.

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





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

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

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

  • 2.Панель со стокой, в которой выводятся текущие параметры хотспота. В ней можно редактировать, копировать и вставлять данные. Ввод данных по нажатию клавиши "Enter".

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

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

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





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


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



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

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

    • on-off - отключение-включение режима редактирования.
    • type - выводит на кнопку тип активного хотспота (text, image).
    • url - если тип "image", то выводит в окно путь до изображения, который можно изменить прямо в окне.
    • style - выводит в окно стиль хотспота, который можно изменить прямо в окне.
    • 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 - при загрузке изображения хотспота.
    Создать, удалить, скопировать хотспот.
    • прицел - включение - выключение прицела для удобства размещения нового хотспота.
    • 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 -тень текста.

    • Ползунки изменения параметров цвета.
      • Тон - изменение тона цвета
      • Насыщенность - изменение насыщенности
      • Яркость - изменение яркости.
      • Прозрачность - изменение прозрачности.

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

    Вкладка изменения закругления углов (пиксели).
    • 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", нажимаем "сохранить" и подтверждаем "заменить файл".



    окно браузера Перезагружаем окно браузера - изменения приняты.
    По завершению работы над хотспотами нужно оставить в папке "edit_hotspot" файлы "param_set_hs.xml" и "Install_HS.xml" и удалить папаку "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+А" скопируйте "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.

    Потестируйте плагин по этой ссылке. Если вам понравился редактор хотспотов, Вы можете преобрести его оплатив через PayPal (кнопка Pay Nov).
    Не забудьте указать адрес электронной почты. После оплаты я вышлю на этот адрес ссылку на скачивание архива с файлами редактора хотспотов в течении одного дня.
    Обновления плагина бесплатно!

    Преобрести edit_hotspot (версия 1.3) 29 EUR.

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



    Изменения

    16.12.2017

    Версия 1.3

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

    19.10.2017

    Версия 1.2

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

    09.10.2017

    Версия 1.1

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




    Примеры.



    Лицензия

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