novosibpano@yandex.ru  

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


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

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

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


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


    Пример в 3D туре. Попробуйте расставить споты на втором этаже.



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

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

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



    PIN код.

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

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



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

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

  • 1.Выбор изображения.
    Щелкните по миниатюре с изображением плана - откроется окно проводника. Выберите изображение плана из папки edit_floorplan/plan и оно появится в окне с планом.
    По умолчанию создан пплан с именем "plansm_1". Введите свое имя в строке и нажмите "Enter"

  • 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" - Выбор изображения точки до просмотра сцены. Щелчек по миниатюре изображения точки откроет проводник, выберите изображение в папке edit_floorplan/picture/point.
  • Кнопка "onclick" - Выбор изображения точки после просмотра сцены в этой же папке.
  • Кнопка "scale" - Изменяет масштаб изображения точки. Нажмите на кнопку и смещайте в нажатом состоянии влево (уменьшение масштаба), вправо (увеличение масштаба).

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

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

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

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

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

  • 6. Не смещая направления взгляда текущей сцены открываем новую сцену текущего плана и поворачиваем в выбранном направлении (юг).

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

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

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

  • Строка "Title scene"- при необходимости введите название сцены. Если выставлены настройки показа, название будет отображаться в баре миниатюр и при наведении курсора на стрелки переходов.

  • Кнопка "Title spot" - включение отображения названия сцены при наведении курсора на точку.

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

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




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

    Окно под план разбито на две части.
    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-х значный желаемый пин код.
    Я вышлю на этот адрес ссылку на скачивание архива с примером и плагином в течении одного дня.
    Обновления плагина бесплатно!

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




    Изменения

    07.11.2018

    Версия 1.1

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


    Примечание

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