Примеры.

YouTube

Пример в 3D туре
Раскрыть на полный экран

Панель управления.

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

scale - изменение масштаба.
width - изменение ширины (пиксeли,проценты, prop).
height - изменение высоты (пиксeли,проценты, prop).
alpha - изменение прозрачности (от 0 до 1).
alight - позиционирование точки привязки в окне просмотра (9 позиций).
edge - позиционирование точки привязки в самом слое (контейнере, изображении) (9 позиций).
x - смещение от точки привязки в окне просмотра по оси x (пиксeли, проценты).
y - смещение от точки привязки в окне просмотра по оси у (пиксeли, проценты).
ox - смещение по собственной оси х (пиксeли).
oy - смещение по собственной оси y (пиксeли).
rotate - вращение (в градусах).
Последние 4-е кнопки выделенные белой рамкой это расскрывающиеся вкладки.. При раскрытии вкладок кнопки прокручиваются колесом мыши или смещаются бегунком справа от панели.

Раскрывающаяся кнопка изменения цвета.

Выберите элемент для редактирования параметров его цвета и прозрачности, нажав на соответствующую кнопку:

bgcolor - выбор фона контейнера (FFFFFF).
border - выбор бордюра (FFFFFF).
shadow - выбор тени слоя (FFFFFF).

После выбора становятся доступнми для редактирования следующие параметры:

Кнопки изменения параметров цвета. Имеют метки, показывающие относительное значение параметра.
1. Изменение цвета (тона).
2. Изменение насыщенности. Сдвиг влево меняет насыщенность до 0, т.е. цвет становится серым (R=G=B). По умолчанию выход из серого происходит путем уменьшения значения R, значения G и B остаются неизменными. После появления разницы между R и G, B становится возможным изменение цвета (тона).
3. Изменение яркости. От 0 до максимальной. При нулевой яркости (000000) ннужно ее поднять сдвигая вправо. Полученный серый цвет можно вывести в цветность путем поднятия насыщенности.
4. Изменение прозрачности.
Щелчок по соответствующей кнопке выбирает элемент редактирования (фон, бордюр, тень). После выбора можно настраивать параметры элемента (цвет, насыщенность, яркость, прозрачность).

Раскрывающаяся кнопка ширины бордюра.

all - меняет одновременно ширину бордюров по четырем сторонам. Если изначально стороны разного размера, то за основу берется ширина бордюра с левой стороны (ширина остальных бордюров становится равной левой). Остальные кнопки меняют ширину бордюров индивидуально (соответственно сторонам).
left - бордюр слева (пиксeли).
right - бордюр справа (пиксeли).
top - бордюр сверху (пиксeли).
bottom - бордюр снизу (пиксeли).

Раскрывающаяся кнопка радиуса бордюра.

all - меняет одновременно все закругления углов контейнера. Если изначально радиусы разного размера, за основу берется закругление левого верхнего угла (радиус остальных углов становится равным левому верхнему). Остальные кнопки меняют радиус закругления индивидуально. lefttop - радиус слева (пиксeли).
righttop - радиус справа (пиксeли).
rightbottom - радиус сверху (пиксeли).
leftbottom - радиус снизу (пиксeли).

Раскрывающаяся кнопка тень.

xoffset - отступ тени по оси х (пиксeли).
yoffset - отступ тени по оси у (пиксeли).
blur - размытие тени.
spread - размер тени.

Три нижние кнопки:

Speed - изменение скорости регулировки основных параметров от 0 до 10.
Save settings - сохранение измененных параметров слоя для последующего копирования.
Copy settings - вывод модального окна с данными параметров сохраненных слоев для копирования (Ctrl+C) и вставки в файл настроек Param_set.xml.

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

В редактируемом слое или в стиле слоя нужно прописать: ondown="editLSM();" или добавить editLSM(); в существующий ondown.
Пример:

    <layer name="container_2"  type="container" keep="true"  enabled="true" handcursor="true"  bgcapture="true"  
	       align="left" edge="center" alpha="1" scale="1" width="80.00" height="80.00" x="50" y="0" 
	       ondown="editLSM();"
    />
	

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

Для подключения редактора поместить папку "edit_layer" в корневую папку с туром.

Пример подключения плагина в основном xml:

    <krpano .... >
    <include url="edit_layer/edit_layer.xml" />
    <include url="edit_layer/Param_set.xml" />
    .
    .
    </krpano>
	

---

Работа с редактором слоев.

Как редактировать слой.

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

Сохранение измененных параметров.

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


Выделить мышкой необходимые параметры, скопировать и заменить измененные параметры слоя на скопированные в файле tour.xml.
2.
Нажать на отредактированный слой, нажать на кнопку "Save settings" в панели. На кнопке выводится количество слоев с сохраненными параметрами.
После сохранения всех редактируемых слоев нажать кнопку в панели "Copy settings". Откроется модальное окно с уже выделенным содержимым.
Копируем содержимое окна "Ctrl + C" и вставляем в файл Param_set.xml

Перезагружаем окно просмотра тура - изменения приняты.

При сохранении параметров по второму варианту нельзя изменять те же параметры в файле "tour.xml", они перезапишутся на сохраненные раннее. Новые изменения нужно сохранять по такому же принципу. Если удалить файл "Param_set.xml" все настройки примут первоначальное значение.

Важно!
Для отображения в консоли последних измененных параметров, нужно нажать на соответствующий слой.
В файле "param_set.xml" хранятся параметры измененных слоев. При старте из этого файла устанавливаются новые значения слоев, основной "tour.xml" не изменяется. Обновляются все параметры, которые регулируются в редакторе,
даже если они не редактировались. Остальные параметры слоя ("enabled", "keep", "handcursor" и т.д.) не затрагиваются и редактируются в файле "tour.xml".
Слои, отредактированные в файле "tour.xml", при запуске изменятся на настройки из файл "param_set.xml"! Если удалить файл "param_set.xml", то хотспоты примут значения из файла "tour.xml".
It is important to save the settings before exiting the scene, otherwise the settings will not be saved.
Если использовался файл "param_set.xml", то, по завершению работы над слоями, его нужно оставить вместе с папкой "edit_layer".

---

---

---

Изменения

1.09.2017

Версия 1.0

Пример