Возможности

• По умолчанию меню создается автоматически в виде "бара миниатюр".
  
• Формирование необходимого количества строк в меню, назначение действия.
  
• Создание необходимого количества групп.
  
• Создание группы внутри групп с необходимой глубиной вложений.
  
• При переполнении высоты окна автоматически появляется прокрутка меню.
  
• Настройка ширины, цвета, прозрачности меню.
  
• Индивидуальный дизайн кнопок.
  
• Присвоение иконки кнопкам.
  
• Создание бара миниатюр.
  
• Ввод текста на трех (!) языках. Кнопка переключения языка появится автоматически.
  

Для создания меню и настройки его параметров требуется написание кода. Но, используя простые настройки и команды, вам не потребуются глубокие познания в кодировании krpano. Структура создания меню довольно проста, вы можете ознакомиться с примером кода здесь.

Если вы хотите облегчить работу, то для этого есть дополнительный плагин "редактор меню", который имеет интерфейс пользователя и позволяет создавать, редактировать и назначать действия кнопкам меню практически без написания кода. Более подробная информация здесь.

---

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

Для подключения меню поместить папку "menu" в корневую папку с туром.

Пропишите в основном xml:

<krpano> <include url="menu/plugins/menu_sm.xml" /> . . </krpano>

---

По умолчанию меню создается автоматически в виде "бара миниатюр".
Для создания собственной структуры меню установите в файле style_menu.xml - auto_menu="false" !
Для создания меню в файле list_menu.xml необходимо записать элементы, проименовав их по определенной схеме. Цифры в названии определяют положение элемента в меню (menu_№_№..._№). Например: name="menu_1_2_3" означает что это третья строка в группе 2, группа 2 - это вторая строка в группе 1, группа 1 - это первая строка в стартовом списке меню.

Пример использования синтаксиса / XML. Файл list_menu.xml

<krpano > <menu_v name="menu_1" title_1="Menu 1"/> <menu_v name="menu_1_1" title_1="Menu 1-1" click="Test(Menu 1-1);"/> <menu_v name="menu_1_2" title_1="Menu 1-2"/> <menu_v name="menu_1_2_1" title_1="Menu 1-2-1" click="Test(Menu 1-2-1);"/> <menu_v name="menu_1_2_2" title_1="Menu 1-2-2" click="Test(Menu 1-2-2);"/> <menu_v name="menu_1_2_3" title_1="Menu 1-2-3" click="Test(Menu 1-2-3);"/> <menu_v name="menu_2" title_1="Menu 2" click="Test(Menu 2);"/> </krpano>

В этом примере показана запись создания меню с двумя строками в начале меню (menu_1,menu_2). Первая строка (menu_1) открывает группу из двух строк (menu_1_1, menu_1_2). Вторая строка (menu_1_2) в группе открывает следующую группу из трех строк (menu_1_2_1, menu_1_2_2, menu_1_2_3). Глубина вложений равна 3.
В примере действие Test(text); выводит текст на экране. Посмотрите на результат.

---

Виды кнопок.

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

2. Заголовок группы.
Предназначен для открытия группы (вложенные в нее кнопки). В группе должна быть одна или более кнопок. Кнопка в группе может вызывать какое либо действие или быть "заголовком" другой группы, которая в свою очередь может тоже содержать кнопки "заголовок". Глубина вложений не ограничена. На кнопке "заголовок" справа появляется маркер (стрелка). При нажатии на кнопку выдвигается окно с принадлежащей ей группой. Дополнительно на кнопку можно назначить выполнение какого либо действия.

Виды дизайна кнопок:
1. Контейнер.
По умолчанию кнопка является типом "container". Это слой с настройками бордюра, заливки, теней, прозрачности и т.д. По умолчанию, при наведении мыши на кнопку, меняется цвет заливки (назначение можно изменить).
2. Миниатюра.
Кнопке присваивается изображение (миниатюра). Изображение миниатюры устанавливается на 100% ширины кнопки. Высота устанавливается пропорционально изображению. Если кнопка по высоте меньше высоты изображения, то оно подрезается под кнопку. Внизу миниатюры создается полоска с текстом. При наведении мыши на текст - подсвечивается фон текста. Щелчок по миниатюре устанавливает маркер (просмотра) в левом верхнем углу. Кнопку можно использовать для открытия сцен, фотографий, и т.д.
3. Картинка.
Установите свое изображение кнопки, градиентный или текстурный рисунок и т.д. По умолчанию в стиле установлено кадрирование изображения при наведении мыши "crop".
Например, используя "crop", по умолчанию будет показана нижняя половина картинки, при наведении на кнопку - верхняя половина. Вы можете настроить эти параметры по своему усмотрению.
4. Иконка.
На кнопку можно добавить иконку, она устанавливается перед текстом. Размер иконки можно настроить по отдельности для "заголовка" и "строки".

В файле style_menu.xml прописываются различные параметры, которые позволят вам создать индивидуальный дизайн меню.
В плагине предусмотрен код для открытия сцены load_m(name scene); введите в скобках имя открываемой сцены. Вы можете назначить этот код на любую кнопку.

Атрибуты кнопки.

<menu_v name="menu_1_2" click="" title_1="text 1" title_2="text 2" height="" style_cont="" style_txt="" icon="" thumbnail="" picture="" namsc="scene_1" />

Назначение атрибутов

• name - название элемента. Цифры в названии определяют положение элемента в меню (номер группы, номер строки).
• click - если элемент предназначен для выполнения действия, то оно прописывается здесь (например, trace(test);). Автоматически создается "Кнопка вызова действия". Если этот атрибут пустой, то создается кнопка "Заголовок группы".
  При нажатии на кнопку текст кнопки изменяет прозрачность на "0.5". Вы можете отключить изменение прозрачности, если в конце действия не поставите точку с запятой ";".
• title_1 - (необязательно) вводится текст на основном языке.
• title_2 - (необязательно) если используется второй язык, введите текст на этом языке.
• title_3 - (необязательно) если используется третий язык, введите текст на этом языке.
• height - (необязательно) задайте выборочно высоту кнопки.
• style_cont - (необязательно) если нужно применить индивидуальный стиль к конкретной кнопке с типом "container", введите его название здесь. Иначе используются параметры из настроек меню. В стиле вы можете задать параметры, которые есть в элементе krpano "layer", кроме атрибутов "y", "parent".
• style_txt - (необязательно) если нужно применить индивидуальный стиль текста кнопки, введите его название здесь. Иначе используются параметры из настроек меню. В стиле вы можете задать параметры, которые есть в элементе krpano layer type = "text" , кроме атрибута "parent".
• icon - (необязательно) укажите здесь полный путь до расположения изображения иконки (например, %CURRENTXML%/menu/image/icon/gory.png), которое будет установлено перед текстом кнопки. Стиль иконок устанавливается в настройках меню
• thumbnail- (необязательно) Если нужно сделать кнопку в виде миниатюры, введите путь до изображения (например, %CURRENTXML%/menu/image/Thumbnails/nature.jpg).
• picture - (необязательно) если нужно применить индивидуальное изображение кнопки, введите путь до изображения (например, %CURRENTXML%/menu/image/Picture/nature.jpg). Создается дополнительный слой изображения, который расположен внутри контейнера кнопки и заполняет его по высоте и ширине на 100%. Вы можете изменять у контейнера бордюры, закругления они будут применимы к кнопке. Стиль изображения берется из настроек меню. Дополнительные настройки кнопки с изображением вы можете изменить в файле "style_menu.xml" - стиль "menu_picture".
• namsc- (необязательно) Если нужно открыть сцену, введите ее название. Прописывайте только строчные буквы в названии сцены !

---

Настройки меню.

В файле style_menu.xml в menu_sm вынсены основные настройки меню.
Более расширенные настройки вы можете сделать в стилях, которые прописаны в этом же файле.

Файл style_menu.xml

<menu_sm auto_menu="true" open_start="true" open_start_mob="false" click_hide="false" mobile_click_hide="true" menu_width="250" menu_bgcolor="0x0F373D" menu_bgalpha="0.8" menu_align="lefttop" logo_cont_height="70" logo_height="70" logo_y="5" logo="%CURRENTXML%/image/logotip.png" logo_text="https://novosibpano.ru/Plugins" logo_css_text="font-family:Arial; font-size:15px; color:#FFFFFF; text-align:center; margin-left:5px; margin-right:5px;" logo_click="openurl(https://novosibpano.ru/Plugins/" title_height="40" title_width="100%" title_bgcolor="0x2B6F7A" title_text_1="Menu" title_text_2="Меню" title_text_3="***" title_css="font-family:Arial; font-size:17px; color:#FFFFFF; text-align:center; margin-left:20px; margin-right:5px;" title_onover_color="0x367F8A" title_picture="menu/icon/butt2.jpg" group_indicator_height="20" head_step_V="10" head_width="90%" head_height="50" head_bgcolor="0x2D707A" head_bgalpha="1" head_bgborder="1,1,1,1 0x777777 0.3" head_bgroundedge="0 25 0 25" head_bgshadow="2 2 4 0x000000 0.6" head_line_css="font-family:Arial;font-size:17px; color:#FFFFFF; margin-left:15px; margin-right:20px;" head_onover_color="0x43B1C2" line_step_V="7" line_width="92%" line_height="37" line_bgcolor="0x2D707A" line_bgalpha="1" line_onover_color="0x43B1C2" line_bgborder="1,0,1,0 0xFFFFFF 0.0" line_bgroundedge="0 0 0 0" line_bgshadow="2 2 4 0x000000 0.6" line_css="font-family:Arial; font-size:15px; color:#FFFFFF; margin-left:15px; margin-right:10px;" thumbnail_bgborder="2,2,2,2 0xFFFFFF 0.3" thumbnail_bgroundedge="0 15 0 15" thumbnail_width="85%" thumbnail_height="100" thumbnail_step_V="20" thumbnail_css="font-family:Arial; font-size:14px; color:#FFFFFF; text-align:center; margin-left:5px; margin-right:5px;" view_marker="true" border_viewed_panorama="2,2,2,2 0xFFFFFF 1.00" picture_line="" picture_alpha="1" picture_crop="0|80|273|80" picture_onower="set(crop,0|0|273|80)" picture_onout="set(crop,0|80|273|80)" icon_style_line="height:20px;vertical-align:middle; margin-right:10px;" icon_style_head="height:25px;vertical-align:middle; margin-right:10px; " bottom_height="40" lang_1="EN" lang_2="RU" lang_3="" menu_generator="true" loadscene_flags="MERGE" />

Назначение:

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

auto_menu - (true/false) создать меню автоматически в виде бара миниатюр. Вы можете отключить эту опцию и создать меню самостоятельно. Так же можете сгенерить код и корректировать его на свое усмотрение.

open_start - (true/false) открыть меню при старте тура.

open_start_mob - (true/false) открыть меню при старте тура на мобильных устройствах.

Спрятать меню при клике по кнопке.

click_hide - (true/false) спрятать меню при щелчке по кнопке.

mobile_click_hide - (true/false) спрятать меню при щелчке по кнопке на мобильных устройствах.

menu_width - (пикс.) ширина меню.

menu_bgcolor - (0x0F373D) цвет заливки меню .

menu_bgalpha - (0-1) прозрачность фона меню .

menu_align - (lefttop, righttop) расположение меню слева или справа.

Дополнительные настройки контейнера меню вы можете изменить в файле "style_menu.xml" - стиль "Line_menu".

Установка логотипа и его подписи. В верхней части меню создается контейнер , в котором размещается изображение логотипа.

logo_cont_height - (пикс.) высота контейнера под логотип.

logo_height - (пикс.) высота изображения логотипа.

logo_y - (пикс.) отступ логотипа от верхнего края.

logo - (%CURRENTXML%/image/logotip.png) путь до изображения логотипа.

logo_text - текст под логотипом.

logo_css_text - css. стиль текста под логотипом.

logo_click - действие щелчка по логотипу (открыть ссылку, фотографию и т.д.).

Контейнер - заголовок меню со стрелкой возрата.
При открытии группы во главе списка устанавливается ее название

title_height - (пикс.) высота контейнера под выводимый текст групп.

title_width - (пикс./%) ширина контейнера под выводимый текст групп.

title_bgcolor - (0x0F373D) цвет заливки контейнера .

title_text_1 - текст на основном языке.

title_text_2 - текст на дополнительном языке (возможно переключение языков).

title_text_3 - текст на дополнительном третьем языке.

title_css - (css) стиль текста .

title_onover_color - (0x0F379D) цвет заливки контейнера при наведении мыши.

title_picture - (%CURRENTXML%/image/test.png) путь до изображения кнопки. Если не заполнен, то используется заливка контейнера .

Дополнительные настройки контейнера с названием вы можете изменить в файле "style_menu.xml" - стиль "cont_title".

group_indicator_height - высота контейнера под индикаторы групп .

Кнопка "заголовок" (открывает вложенную в нее группу).
Справа на кнопке появляется стрелка открытия списка группы. Группа обязательно должна иметь вложения!

head_step_V - (пикс.) высота контейнера под выводимый текст групп .

head_width - (пикс. проценты) ширина кнопки относительно ширины меню. Кнопка позиционируется по центру.

head_height - (пикс.) высота кнопки.

head_bgcolor - (0x0F373D) цвет заливки кнопки.

head_bgalpha - (0-1) прозрачность кнопки.

head_bgborder - (1,1,1,1 0x777777 0.3) настройки бордюра. Толщина, цвет, прозрачность.

head_bgroundedge - (0 25 0 25) закругления углов кнопки.

head_bgshadow - (2 2 4 0x000000 0.6) отступ по оси x,y, блюр, цвет, прозрачность.

head_line_css - (css) стиль текта кнопки.

head_onover_color - (0x43B1C2) цвет кнопки при наведении мыши.

Дополнительные настройки контейнера "заголовок" вы можете изменить в файле "style_menu.xml" - стиль "line_head" , стиль текста - "txt_head" и стиль маркера - "marker_m".

Кнопка "строка".
При наличии заполненного атрибута "click" кнопка запускает прописанное в нем действие.

line_step_V - (пикс.) шаг между кнопками.

line_width - (пикс. проценты) ширина кнопки относительно ширины меню. Кнопка позиционируется по центру.

line_height - (пикс.) высота кнопки.

line_bgcolor - (0x0F373D) цвет заливки кнопки.

line_bgalpha - прозрачность кнопки (0-1).

line_onover_color- (0x43B1C2) цвет кнопки при наведении мыши.

line_bgborder - (1,1,1,1 0x777777 0.3) настройки бордюра. Толщина, цвет, прозрачность .

line_bgroundedge - (0 25 0 25) закругления углов кнопки .

line_bgshadow - (2 2 4 0x000000 0.6) отступ по оси x,y, блюр, цвет, прозрачность.

line_css - (css) стиль текта кнопки.

Дополнительные настройки контейнера "Кнопка вызова действия" вы можете изменить в файле "style_menu.xml" - стиль "Line_menu" и стиль текста- "txt_line".

"Бар миниатюр".

Создается кнопка в виде миниатюры изображения с текстом в нижней части миниатюры.

thumbnail_bgborder - (1,1,1,1 0x777777 0.3) настройки бордюра. Толщина, цвет, прозрачность.

thumbnail_bgroundedge - (0 25 0 25) закругления углов миниатюры.

thumbnail_width - (пикс. проценты) ширина миниатюры относительно ширины меню. Кнопка позиционируется по центру.

thumbnail_height - (пикс.) высота миниатюры.

thumbnail_step_V - (пикс.) шаг между миниатюрами.

thumbnail_css - (css) стиль текта подписи миниатюры.

Дополнительные настройки контейнера "Бар миниатюр" вы можете изменить в файле "style_menu.xml" - стиль"Line_menu_thumbnail" слоя изображения - стиль"menu_thumbnail" и стиль текста миниатюры - "txt_menu_thumbnail".

view_marker - (true/false) установить маркер на миниатюру просмотренной панорамы.

border_viewed_panorama - (2,2,2,2 0xFFFFFF 1.00) установить параметры рамки для миниатюры. Рамка будет показана, если текущая панорама соответствует этой миниатюре.

picture_line - путь до изображения кнопки. Если не заполнен, то используется заливка контейнера.

Если в "picture_line" введен путь до изображения, оно присваивается всем кнопкам меню (необязательный атрибут).

picture_alpha - (0-1) прозрачность изображения.

picture_crop - (0|80|273|800) кадрирование изображения (необязательно).

picture_onower - действие при наведении мыши на кнопку. Пример set (crop,0|0|273|80).

picture_onout - действие при отведении мыши с кнопки. Пример set (crop,0|80|273|80).

Дополнительные настройки контейнера кнопки с изображением вы можете изменить в файле "style_menu.xml" - стиль "menu_picture".

Если установлены иконки в кнопках, к ним применяются эти параметры.

icon_style_line - (css) стиль иконки в кнопке выполняющей действия, например - height:20px;vertical-align:middle; margin-right:10px; .

icon_style_head - (css) стиль иконки в кнопке открывающей группу.

Установка иконки.

Нижний контейнер с кнопкой переключения языка. Кнопка появляется автоматически, если есть заполненный атрибут "lang_2".

bottom_height - (пикс) высота контейнера снизу меню под кнопку смены языка.

lang_1 - язык title_1 (необязательно).

lang_2 - язык title_2 (необязательно).

lang_3 - язык title_3 (необязательно). если есть третий язык, то кнопка переключения языка переключает все языки последовательно.

menu_generator - (true/false). Если опция включена, то при нажатии клавиши "G" автоматически сгенерится код меню в виде "бара миниатюр". Открыть трей - клавиша "O" в версии krpano до 1.2, начиная с версии 1.2 вызов окна клавишей "tidle" или "ё". Скопируйте код и вставьте его в файл "list_menu.xml" для дальнейшего редактирования, создания своего варианта меню.
Подписи берутся из "title" прописанных в сценах.

Пример сгенерированного кода.

<menu_v name="menu_1" title_1="NGU" title_2="" click="load_m(scene_ngu);" thumbnail="panos/NGU.tiles/thumb.jpg"/> <menu_v name="menu_2" title_1="1 Altay" title_2="" click="load_m(scene_1);" thumbnail="panos/1.tiles/thumb.jpg"/> <menu_v name="menu_3" title_1="acadtmparc" title_2="" click="load_m(scene_acadtmparc);" thumbnail="panos/acadtmparc.tiles/thumb.jpg"/> <menu_v name="menu_4" title_1="alp_lag" title_2="" click="load_m(scene_alp_lag);" thumbnail="panos/alp_lag.tiles/thumb.jpg"/> <menu_v name="menu_5" title_1="Bassein" title_2="" click="load_m(scene_bassein);" thumbnail="panos/Bassein.tiles/thumb.jpg"/>

loadscene_flags - Если не установлен skin_settings.loadscene_flags (родной скин), то устанавливается этот флаг загрузки сцены.

---

Действия:

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

• 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"



Если у вас есть новая лицензия krpano, раскомментируйте plugin name="pp_blur" в файле layer_menu.xml, чтобы задний фон за фреймом был размыт.

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


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

---

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

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

---

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

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

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

---

---

---

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