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

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

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

<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", обновите меню.
Миниатюру, иконку, картинку вы можете выбрать нажав на соответствующую подпись. Откроется проводник, выберите изображение, которое зараннее разместите по пути:

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

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

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

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

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

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

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

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

Настройка дизайна.

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

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

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

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

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

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

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

• Кнопка с назначеенным ей действием или без него - "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"
      />

Действия:

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

• 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".
Демоверсия полностью рабочая до 30.01.2021.

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