novosibpano@yandex.ru  

Редактор меню v1.2


  • Редактор работает только совместно с плагином Меню
    HTML5. krpano v1.2


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

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

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

    Подключение.

    Пропишите в основном xml:
    <krpano>
       <include url="menu/plugins/menu_sm.xml" />
       <include url="menu/plugins/edit_menu_sm.xml" />
       <include url="menu/plugins/photo_sm.xml" />
        .
        .
    </krpano>

    Строка с подключением файла photo_sm.xml - это плагин открытия изображения. Подключите при необходимости.




    Создание структуры меню.

    Откройте тур в браузере, появится панель редактора. В нижней части расположен блок, выделенный белой рамкой, для создания элементов меню и вложений.

  • - Добавляет элемент меню.

  • Нажатие на элемент активирует его и он становится зеленого цвета.

  • - Удаление активного элемента.

  • - Нажмите для обновления меню, вы сразу увидите результат.
  • При наведении на элемент, справа на нем появляется стрелка, нажмите на нее и откроется пустое окно для созданя вложенных элементов.
    Если в элементе присутствует вложение, то стрелка на нем будет постоянно.

    Установка параметров кнопок.

    В верхней части панели находятся строки для ввода параметров(атрибутов) кнопок меню .
    Активируйте элемент, в строки выведутся значения установленных параметров. Введите в строку свое значение, нажмите "Enter", обновите меню.
    Миниатюру, иконку, картинку вы можете выбрать нажав на соответствующую подпись. Откроется проводник, выберите изображение , которое зараннее разместите по пути:

  • Icon: - menu/image/icon.
  • Thumbnails: - menu/image/Thumbnails.
  • Picture: - menu/image/Picture.

  • Назначение действий кнопкам.

    Активируйте элемент и назначьте действие:

  • - Выберите из открывшегося списка сцену. Кнопка станет "миниатюрой", ей автоматически присвоится атрибут "click". Атрибут "title_1" присвоится из подписи(title) сцены.

  • - Выберите сцену, установите нужный вам вид и угол обзора. Кнопка меню будет открывать этот вид.

  • - Если подключен плагин просмотра фото. Нажмите и выберите в открывшемся проводнике изображение. Оно должно быть размещено по пути "menu/image/...". Кнопка меню будет открывать это изображение.

  • - Нажмите - откроется строка для ввода адреса сайта, который откроется во фрейме при нажатии этой кнопки меню.
    Внимание! Не все сайты позволяют открываться во фрейме!

  • - Нажмите - откроется строка для ввода кода youtube. Нужно вводить не всю ссылку на ролик youtube. Пример: "https://www.youtube.com/watch?v=hUDioIQdDGs"
    Вам нужно скопировать и вставить в строку только этот кусок - "hUDioIQdDGs"

  • Посмотрите пример на youtube.

    Обновляйте меню и смотрите на результат.

    Save - Сохраните файл list_menu.xml в папку "menu" (с заменой старого list_menu.xml).



    Окно редактора дизайна меню.

    Пример настройки дизайна меню.
    YouTube

    Нажмите на кнопку "style", откроется окно для редактирования дизайна меню.
    В верхней части находятся кнопки, которые выбирают элемент для редактирования.

    Изменяемые параметры:

      Контейнер:
    • Изменение толщины бордюра по отдельности или одновременно все 4 стороны (пиксели)..
    • Изменение закругления углов по отдельности или одновременно все (пиксели).
    • Смещение тени по осям x и y (пиксели).
    • Размытие тени.
    • Изменение ширины (пиксели).
    • Изменение высоты (%).
    • Смещение по оси x (пиксели).
    • Смещение по оси y (пиксели).
    • Расстояние между кнопками выпранного типа (пиксели).
    • Изменение цвета и прозрачности заливки.
    • Изменение цвета и прозрачности бордюра.
    • Изменение цвета и прозрачности тени.
    • Выбор изображения логотипаи из открывающегося проводника.
    • Текст:
    • Изменение отступа текста с 4 сторон (пиксели).
    • Смещение тени текста по осям x и y (пиксели).
    • Размытие тени текста.
    • vcentr - расположение текста по центру по вертикали (true/false).
    • Изменение размера шрифта.
    • Изменение цвета текста.
    • Изменение цвета и прозрачности тени текста.
    • Возможность вставить параметры css.
    • Ввод текста логотипа.
    Для изменения параметра нажмите на сответствующую кнопку и не отпуская перемещайте курсор влево или вправо. Можете ввести значение с клавиатуры в окно рядом с кнопкой.
    В зависимости от выбранного элемента для редактирования ненужные инструменты в панели затемнены.

    По умолчанию активна кнопка "Menu contayner" (зеленого цвета).

    Menu contayner Основной контейнер, в котором расположены все элементы меню.



    contayner logo Контейнер логотипа, расположен в верхней части меню.
    В нем находятся изображение логотипа и подпись логотипа.



    logo
    Нажмите на миниатюру логотипа, откроется окно проводника. Выберите изображение логотипа. Логотип должен находиться в папке с плагином menu/image.
    Вы можете изменять высоту логотипа, смещать его по осям x и y внутри его контейнера.
    Настройте текст логотипа. Во вкладке "Text" активны инструменты для редактирования текста.



    title head
    Настройте заголовок меню и его текст.
    Вы можете изменить название заголовка(стартовое). Учитывается включенный в данный момент язык. Переключитесь на другой язык и введите название на нем.



    menu buttons
    Есть три типа кнопок:
    • Кнопка с назначеенным ей действием или без него - "line".
    • Кнопка, открывающая вложенную в нее группу - "head".
    • Кнопка миниатюра с изображением и подписью снизу - "thumbnail".

    Нажмите на кнопку в редакторе(блок для создания элементов меню), она станет активной(зеленого цвета). Сверху в редакторе выведится тип этой кнопки. Настройте параметры кнопки, изменения будут сразу видны на выбранной кнопке.
    - обновите меню, настроенные параметры применятся ко всем кнопкам этого типа.




    Настройки плагина просмотра изображений.

    Настройки находятся в файле style_menu.xml .

    <settingsViewP 
    	CloseClickBg="true"			
    	CloseClickPhoto="true" 
    	bgalpha="0.3"
    	bgcolor="0x000000"
    	bgborder="10 0xFFFFFF 1"
    	bgshadow="7 7 20 0x000000 0.5"
    	bgroundedge="5"
    	textBgAlpha="0.3" 
    	textBgcolor="0x000000" 
    	css="font-family:Comic Sans MS, Comic Sans, cursive, Arial; color:#FFFFFF; font-size:20px; text-align:center" 
    	blur="30" 
    	height_photo="80"
          />

    Назначение атрибутов
  • CloseClickBg - Закрыть изображение при клике по фону(true/false).
  • CloseClickPhoto - Закрыть изображение при клике по изображению(true/false).
  • bgalpha - Прозрачность фона(0-1).
  • bgcolor - Цвет фона(0x000000).
  • bgborder - Толщина, цвет, прозрачность бордюра(10 0xFFFFFF 1).
  • bgshadow - Отступ тени по осям x,y, размытие, цвет, прозрачность тени(7 7 20 0x000000 0.5).
  • bgroundedge - Закругление углов(5 5 5 5).
  • textBgAlpha - Прозрачность фона под текстом подписи (5 5 5 5).
  • textBgcolor - Цвет фона под текстом подписи (0x000000).
  • css - Стиль текста подписи (font-family:Comic Sans MS, Comic Sans, cursive, Arial; color:#FFFFFF; font-size:20px; text-align:center).
  • blur - Размытие фона в пикселях(0...). Если у вас есть новая лицензия krpano, то вы можете использовать для размытия фона изображения плагин Blur. Убедитесь что файл "pp_blur.js" находится в папке "plugins". Раскомментируйте plugin name="pp_blur" в файле layer_menu.xml что бы задний фон за фреймом был размыт.
  • height_photo - Высота изображения относительно высоты окна просмотра в % (0 - 100).



  • Действия:

    Вы можете использовать эти действия для назначения их на кнопки меню или в любых других действиях.

    • lang_set(1); - Укажите в скобках число от 1 до 3 что бы включить соответствующий язык(title_1...title_3).

    • openFrame(iframe, https://krpano.com, 1200, 900, true); - Открыть сайт(krpano.com) во фрейме, максимальная ширина - 1200px, максимальная высота - 900px, включена прокрутка(true). Источник
      Внимание! Не все сайты позволяют открываться во фрейме!

    • openYout(hUDioIQdDGs); - Открыть youtub во фрейме, Нужно вводить не всю ссылку на ролик youtube. Пример: "https://www.youtube.com/watch?v=hUDioIQdDGs"
      Вам нужно скопировать и вставить в скобки только этот кусок - "hUDioIQdDGs"

    • openPhotoSM(menu/image/nature1.jpg); - Открыть изображение. В скобках укажите путь до расположения изображеня
    • Если у вас есть новая лицензия krpano, раскомментируйте plugin name="pp_blur" в файле layer_menu.xml что бы задний фон за фреймом был размыт.

    • shou_m(); - Открыть меню.

    • hide_m(); - Закрыть меню.



    Скачать DEMO тур.

    Скачайте демо-тур, в нем находится плагин меню. Вы можете подключить его в своем туре и потестировать, для этого используйте файл "list_menu.xml" из папки "new project".
    Демоверсия полностью рабочая до 20.08.2020.




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

    "Редактор меню" работает только совместно с плагином ""Меню"!

    Приобрести плагин "Редактор меню" за 1400 руб.

    Приобрести плагины "Редактор меню" + "Меню" за 3400 руб.

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


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

    Для приобретения плагина напишите мне на почту novosibpano@ya.ru



    Изменения

    07.07.2020

    Версия 1.2

    • Оптимизирован под панотур.
    • Не сохранялся клик по логотипу - исправил.
    • В style_menu.xml закомментировал плагин блюра, что бы не выдавало ошибки у тех, у кого его нет.
    • Добавил возможность 3 языка lang_3="国际" title_3="title_3" lang_set(3);
    • Добавил назначение открытия URL ссылки во фрейме .
    • Добавил открытие YouTube.
    28.04.2020

    Версия 1.1

    • Добавлен редактор дизайна меню.
    21.10.2019

    Версия 1.0



    Примечание

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