novosibpano@yandex.ru  

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


  • только HTML5. krpano-1.19-pr16.

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

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


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


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




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

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

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

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



    PIN код.

    После подключения плагина при первом старте нажмите комбинацию клавиш "E+F", откроется строка для ввода 4-х значного пин кода.
    Введите код и нажмите "Enter" (Учитываются заглавные буквы), появится свернутая панель плагина. Раскройте панель и нажмите "Save", Откроется окно проводника, укажите путь для сохранения "floorplan_SM/param_EFR.xml"
    Важно! После сохранения всегда перезагружайте окно браузера!
    При повторном открытии тура панель плагина будет доступна, ввод пин кода не требуется.

    По завершении работ нажмите клавишу "Delete PIN" Откроется окно, сохраните файл "param_EFR.xml" Перезагрузите браузер - для открытия плагина опять потребуется ввод пин кода.



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

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

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

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

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

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

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

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

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

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

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

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




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

  • "Select a image"
    • "start" - Выбор изображения точки до просмотра сцены. Щелчек по миниатюре изображения точки откроет проводник, выберите изображение
    • в папке floorplan_SM/iconPoint.
    • "onclick" - Выбор изображения точки после просмотра сцены в этой же папке.
    • "active" - Изображение активной точки (с радаром).
    • "Active spot" - Показывать или нет изображение активной точки.
    • "scale" - Изменяет масштаб изображения точки. Нажмите на кнопку и смещайте в нажатом состоянии влево (уменьшение масштаба), вправо (увеличение масштаба).

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

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

  • 3. Поворачиваем сцену в направлении (например на юг).

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

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

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

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


    • Title scene- Введите название сцены. Если выставлены настройки показа, название будет отображаться в баре миниатюр. Если кнопка активна(зеленая точка), то при наведении курсора на точку будет показан всплывающий текст.
    • Clicking a point closes the plan- Активна - щелчек по точке свернет окно с планом.
    • Delete spot- удаляет выбранную точку. "Замочек должен быть открыт".
    • Compass
      • enabled - выключение компаса. Убирается кнопка раскрытия компаса и компас на планах этажей.
      • start open - компас развернут при старте.
      • on plan - показ компаса в окне с планом.

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



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



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

  • "add" - Добавить точку на плане или в документе.
  • "editor off" - Включить/выключить редактирование точки, появляется иконка замка рядом с точкой.
  • "scale" - Изменяет масштаб изображения точки. Нажмите на кнопку и смещайте в нажатом состоянии влево (уменьшение масштаба), вправо (увеличение масштаба).
  • "Select a image"
    • "start" - Выбор изображения точки до просмотра сцены. Щелчек по миниатюре изображения точки откроет проводник, выберите изображение
    • в папке floorplan_SM/iconPoint.
    • "onclick" - Выбор изображения точки после просмотра сцены в этой же папке.
  • "Show text" - Показать текст при наведении мыши(активно - зеленая точка).
  • "text entry line" - Введите текст для показа при наведении.
  • "Clicking a point closes the plan"- Активна - щелчек по точке свернет окно с планом.
  • "delete" - Удалить точку.
    • Создайте и откройте план(документ).
    • Откройте нужную панораму.
    • Включите режим редактирования - кнопка "Editor off"
    • Нажмите кнопку "add", появится точка на плане(документе) с иконкой открытого замка, переместите ее мышкой на нужное место. Щелчек по замку закрывает его и блокирует перемещение точки.
    • Установите в панораме нужное направление и увеличение.
    • В окне с планом(документом) нажмите на появившуюся кнопку "set view".
    • Выберите изображение иконки до щелчка и после щелчка в строке "Select a 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 - тень хотспота.
    • Ползунки изменения параметров цвета.
      • Тон - изменение тона цвета
      • Насыщенность - изменение насыщенности
      • Яркость - изменение яркости.
      • Прозрачность - изменение прозрачности.

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

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


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

    Полностью рабочаяа демо-версия с ограничением по времени 14 дней. Отправьте на почту novosibpano@ya.ru запрос на получение демо версии и я вышлю ссылку на скачивание.



    Получить плагин создания планов .

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

    Внести пожертвование 34 EUR.




    Изменения

    08.10.2019

    Версия 1.42

    • При вводе пин кода появляется блокирующее окно с предупреждением о перезагрузке тура.
    03.10.2019

    Версия 1.41

    • Исправлена ошибка при создании первой точки.
    • Исправлена ошибка при позиционировании окна справа.
    • Важно! После сохранения всегда перезагружайте окно браузера!
    26.08.2019

    Версия 1.4

    • Теперь при сохранении проекта без пин кода не загружаются файлы редактора.
      Законченный проект загружается быстрее, увеличелась производительность.
    • Изменено - при переходе на новую сцену точка с радаром на карте плавно перемещается.
    • Возможность в мобильной версии выставить размер окна под планы в пропорциоальном отношении к высоте и ширине окна просмотра.(файл param_EFR.xml - width_mobile и height_mobile)
    03.08.2019

    Версия 1.3

    • Добавлена панель для создания и редактирования точек открывающих заданные виды.
    08.07.2019

    Версия 1.2

    • Добавилась кнопка смены активной точки.
    • Частично изменен интерфейс.
    • Создан индивидуальный выпадающий список.
    • Изменено имя папки с плагином.
    • Изменено расположение папки с иконками точек.
    • Исправлены некоторые недочеты и оптимизирован код.
    07.11.2018

    Версия 1.1

    • Добавилась кнопка выбора открывающейся сцены при переключении между планами.
    • Добавилась кнопка "свернуть план по клику в пустом месте экрана" (да/нет).
    • Добавилась кнопка "развернуть план при наведении курсора мыши на кнопку открытия плана" (да/нет).
    • Добавилась возможность выбора иконок изображения точек до и после просмотра сцены индивидуально для каждой точи.
    • Добавилась возможность изменения масштаба иконки для каждой точки.
    • Исправлены некоторые недочеты в исполняющем коде.
    17.07.2018

    Версия 1.0



    Примечание

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