novosibpano@yandex.ru  

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


  • Редактор работает только совместно с плагином Меню
    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.

  • - Нажмите и выберите в открывшемся проводнике аудио файл. Он должен быть размещен по пути "menu/sound/...". Кнопка меню будет запускать аудиозвук. Плагин звука прописан в файле menu/plugins/layer_menu.xml под именем "soundinterface" Вы можете установить свои параметры, более подробная информация на сайте krpano.


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

    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.11.2020.




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

    Для приобретения плагина напишите мне на почту novosibpano@ya.ru. Я вышлю архив для скачивания в течение 24 часов.

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

    "Редактор меню" работает только совместно с плагином ""Меню"!
    Плагин "Редактор меню" - 20 евро.
    Плагин "Редактор меню" + "Меню" - 49 евро.

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



    Изменения

    07.09.2020

    Версия 1.21

    • Добавил кнопку для назначения воспроизведения звука при нажатии на кнопку в меню.
    07.07.2020

    Версия 1.2

    • Оптимизирован под Panotour.
    • Не сохранялся клик по логотипу - исправил.
    • В 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



    Примечание.

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




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