novosibpano@yandex.ru  

Создание поэтажных планов v1.46.


HTML5. krpano-1.20

Возможности

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


Редактирование точек с радарами на плане.
YouTube


Пример в 3D туре.




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

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

<krpano .... >
    <include url="floorplan_SM/editor/floorplan_SM.xml" />
    .
    .
</krpano>



PIN-код.

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



Создаем план.

Разместите изображения планов в папке floorplan_SM/plan.


Select an image - Щелкните по миниатюре с изображением плана - откроется окно проводника. Выберите изображение плана из папки floorplan_SM/plan и оно появится в окне с планом

Add plan - Чтобы добавить план, нажмите кнопку "Add plan". Появится изображение плана по умолчанию с именем plansm_№, где № - порядковый номер плана. Установите свое изображение и введите имя созданного плана.
В левом верхнем углу создается выпадающий список имен. Щелчок по треугольнику расскрывает список, щелчок по имени из списка открывает соответствующий план.

Add dct - Добавить документ (рисунок, изображение и т. Д.). Разместите в документе значки со ссылками, чтобы показать конкретные места в туре с определенным углом зрения. Подробнее…

Assign an open scene - Выбор сцены, которая запустится при открытии плана. Откройте план, запустите нужную сцену, принадлежащую данному плану. Нажмите кнопку "Assign an open scene"и рядом с ней появится имя текущей сцены. При последующем открытии этого плана будет запускаться выбранная сцена.

Open start - Зеленый индикатор - окно плана при запуске тура раскрыто, серый индикатор - окно свернуто.

Close plan on click in empty space - Зеленый индикатор - сворачивать плана по щелчку в пустом месте экрана.

Open plan when you hover over plan button - Зеленый индикатор - развернуть план при наведении на кнопку открытия плана.

Align left - Окно позиционируется относительно левого верхнего угла. Щелчок по кнопке меняет позиционирование на правый верхний угол. На кнопке выводится надпись "align right".

Plan window position and size - Перед сохранением проекта разместите окно с планом в нужном месте, перетаскивая его мышкой за верхнюю часть. Наведите курсор на правый нижний угол окна - выделится треугольник, ухватившись за него измените размер окна.
Сохраните проект и перезагрузите браузер - окно с планом раскроется с внесенными изменениями.

Delete plan - Удаляет текущий план.

Editor design - Открывает дополнительную панель для редактирования дизайна окна. Более подробная информация здесь.




Создаем точки, настраиваем компас и радар.

Start - выбор изображения точки до просмотра сцены. Щелчок по миниатюре изображения точки откроет проводник, выберите изображениеbв папке floorplan_SM/iconPoint.
Onclick - выбор изображения точки после просмотра сцены в этой же папке.
Active - изображение активной точки (с радаром).
Active spot - показывать или нет изображение активной точки.
Scale - изменяет масштаб изображения точки. Нажмите на кнопку и смещайте в нажатом состоянии влево (уменьшение масштаба), вправо (увеличение масштаба).

• Открываем сцену, принадлежащую текущему плану.

• Включаем режим редактирования - кнопка "Editor on", появятся пересекающиеся красные линии (для удобства позиционирования).

• Поворачиваем сцену в направлении (например на юг).
• Ухватившись за полоску компаса в верхней части экрана сдвигаем ее до совмещения направления (юг) с вертикальной красной линией.


• Нажимаем кнопку "Add spot" - на плане (верхний левый угол) появится точка с радаром с иконкой "замок" и красной линией (направление радара).
Замок рядом с точкой блокирует ее перемещение, поправку радара, удаление.
Мышкой перемещаем точку в расположение сцены на плане. Ухватившись за красную точку на линии разворачиваем радар на плане в соответствии с выбранным направлением (юг).
Для каждой сцены можно создать только одну точку. На кнопке "Add spot" button, индикатор красного цвета обозначает что сцене уже принадлежит точка, зеленого цвета - сцена свободна и можно создать для нее точку.
Последующие создаваемые точки не требуют настройки компаса, если они принадлежат текущему плану.

• Не смещая направления взгляда текущей сцены открываем новую сцену плана и поворачиваем в выбранном направлении (юг). Смысл в том, что новый спот создается с таким же направлением как и на предыдущей сцене (на юг). If you turn the current scene, the new spot radar Если вы повернете текущую сцену, радар нового спота в новой сцене тоже соответственно развернется и его нужно будет корректировать. Иногда это удобней. Поверните сцену, совместив мишень с окном, дверью, углом или другим четко позиционированным местом на сцене. Ухватившись за точку на красной линии радара разверните его на плане в соответствии с местом на сцене.

• Нажимаем кнопку "Add spot". Радар уже направлен на юг. Перемещаем появившуюся точку в расположение сцены на плане.
Аналогично создаем остальные точки текущего плана.
Рекомендую посмотреть видеоролик по созданию планов и точек.


Title scene- введите название сцены. Если выставлены настройки показа, название будет отображаться в баре миниатюр. Если кнопка активна (зеленая точка), то при наведении курсора на точку будет показан всплывающий текст.

Clicking a point closes the plan - активна - щелчок по точке свернет окно с планом.

Delete spot-удаляет выбранную точку. "Замочек" должен быть открыт.

Compass:
  • enabled - выключение компаса. Убирается кнопка раскрытия компаса и компас на планах этажей.
  • start open - компас развернут при старте.
  • on plan - показ компаса в окне с планом.

Keepwiew
Создает эффект перемещения. При переходе на следующую сцену сохраняется направление взгляда и угол обзора. Не требуется предварительное одинаковое выравнивание всех панорам во время сшивания.




Создаем точки для показа выбранных видов.



Вы можете создавать иконки (далее-точки) и присваивать им открытие панорам с заданным увеличением и направлением взгляда. Разместите их на планах, чертежах, документах, схемах, которые можете добавить в окно с планами.

add - добавить точку на плане или в документе.
editor off - включить/выключить редактирование точки, появляется иконка замка рядом с точкой.
scale - изменяет масштаб изображения точки. Нажмите на кнопку и смещайте в нажатом состоянии влево (уменьшение масштаба), вправо (увеличение масштаба).

Select an image:

  • start - выбор изображения точки до просмотра сцены. Щелчок по миниатюре изображения точки откроет проводник, выберите изображение в папке floorplan_SM/iconPoint folder.
  • onclick - выбор изображения точки после просмотра сцены в этой же папке.

Show text - показать текст при наведении мыши (активно - зеленая точка).

Text entry line - введите текст для показа при наведении.

Clicking a point closes the plan - активна - щелчок по точке свернет окно с планом.

Delete - удалить точку.

  • Создайте и откройте план (документ).
  • Откройте нужную панораму.
  • Включите режим редактирования - кнопка - "Editor off".
  • Нажмите кнопку "Add", появится точка на плане (документе) с иконкой открытого замка, переместите ее мышкой на нужное место. Щелчок по замку закрывает его и блокирует перемещение точки.
  • Установите в панораме нужное направление и увеличение.
  • В окне с планом (документом) нажмите на появившуюся кнопку "set view".
  • Выберите изображение иконки до щелчка и после щелчка в строке "Select an image".
  • Завершите редактирование нажав кнопку "editor on". Теперь при щелчке по созданной точке откроется установленный вами вид.



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

Окно под план разбито на две части.
1. Верхняя часть (шапка) - в виде полосы, на которой размещен выпадающий список планов и кнопка "свернуть план". Ухватившись за "шапку" можно перемещать окно с планом.
2. Само окно под изображение плана.

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


height - изменение высоты (в пикс.).
alpha - изменение прозрачности (от 0 до 1).
ox смещение по оси х (в пикс.).
oy смещение по оси y (в пикс.).

Редактирования цвета "Color".

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

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

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

Ширина бордюров (пиксели).
  • all - изменение радиуса одновременно всех углов.
  • lefttop - левый верхний угол.
  • righttop - правый верхний угол.
  • rightbottom - правый нижний угол.
  • leftbottom - левый нижний угол.
Радиус углов (пиксели).
  • all - изменение радиуса одновременно всех углов.
  • lefttop - левый верхний угол.
  • righttop - правый верхний угол.
  • rightbottom - правый нижний угол.
  • leftbottom - левый нижний угол.
Тень.
  • xoffset - отступ тени по оси x.
  • yoffset - отступ тени по оси y.
  • blur - размытие тени.
  • speed - размер тени.


Установки в файле setting_FP.xml.

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

pin_cod - Ввод пин кода.
start_open_plan - Открыть план при старте(true/false).
start_open_plan_mobila- Открыть план при старте на мобильных устройствах (true/false).

Ниже прописаны изображения точек на плане(документе) по умолчанию. Размещение изображений должно быть в папке floorplan_SM/iconPoint/.

point_url_1 - Имя изображения точки на плане (непросмотренной сцены).
point_url_2 - Имя изображения активной точки на плане.
point_url_3 - Имя изображения точки на плане (просмотренной сцены).
pointV_url_1 - Имя изображения точки в документе (непросмотренной сцены).
pointV_url_2 - Имя изображения точки в документе (просмотренной сцены)
point_current - Показывать изображение активной точки (true/false)
point_scale - Масштаб точки.
radar_scale - Масштаб радара.
compass_enabled - Включить компас (true/false).
start_open_compass - Открыть компас при старте(true/false).
compass_on_plan - Показать компас на плане (true/false).
keep_viev - Включить сохранение вида при переходе по сценам (true/false).
design_bgcolor_cb - Цвет заливки контейнера со списком планов. При регулировке цвета шапки, цвет заливки контейнера со списком планов выставляется такой же. При необходимости его можно изменить вручную.
click_spot_close_plan - Закрыть план по щелчку на точке (true/false).
click_V_close_plan - Закрыть документ по щелчку на точке (true/false).
click_close_plan - Закрыть план по щелчку в пустом месте экрана (true/false).
onhover_button_open_plan - При наведении на кнопку "открыть план" - открыть план (true/false).
width_mobile - Ширина окна с планом на мобильных устройствах (0-1). Значение 1 = 100%.
height_mobile - Высота окна с планом на мобильных устройствах (0-1). Значение 1 = 100%.
name_FIRSTXML - Если основной файл XML имеет другое имя и путь, введите путь, например: indexdata/index
list_plan - Отключение списка планов (true/false).
button_fullscreen - Отключение кнопки раскрытия на полный экран (true/false).
angle_placemark - Вкл/выкл уголок растягивания окна с планом (true/false).
open_plan_resetting_size - При повторном открытии плана вписать весь план в окно (true/false).

После выше перечисленного списка прописаны слои с изображениями планов и слои точек на плане, которые создаются в режиме редактирования.

В конце прописаны слои: top_container_plan - Контейнер заголовка окна с планом.
container_plan1 - Контейнер под изображение плана/документа.



Скачать демо-версию.

Скачайте демо-архив с примером и плагином. Вы можете подключить его к своему туру и протестировать.
Демо-версия полностью рабочая и отличается от полной наличием надписи «ДЕМО-версия».
pin code 1111.




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

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

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

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


Примечание.

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





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