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

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

Для создания меню и настройке его параметров требуется написание кода, но используя простые настройки и команды вам не потребуются глубокие познания в кодировании 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" по умолчанию будет показана нижняя половина картинки, при наведении на кнопку - верхняя половина. Вы можете настроить эти параметры по своему усмотрению.

Иконка.
На кнопку можно добавить иконку, она устанавливается перед текстом. Размер иконки можно настроить по отдельности для "заголовка" и "строки".

В файле 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="" />

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

name - Название элемента. Цифры в названии определяю положение элемента в меню(номер группы, номер строки).

click - Если элемент предназначен для выполнения действия, то оно прописывается здесь (например, trace(test);). Автоматически создается "Кнопка вызова действия". Если этот атрибут пустой, то создается кнопка "Заголовок группы" .
При нажатии на кнопку текст кнопки изменяет прозрачность на "0.5". Вы можете отключить изменение прозрачности, если в конце действия не поставите точку с запятой ";"

title_1 - (Необязательно). Вводится текст на основном языке.

title_2 - (Необязательно). Если используется второй язык, введите текст на этом языке.

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"

---

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

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

Файл style_menu.xml

<menu_sm auto_menu="true" open_start="true" 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="http://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(http://novosibpano.ru/Plugins/" title_height="40" title_width="100%" title_bgcolor="0x2B6F7A" title_text_1="Menu" title_text_2="Меню" 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;" 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" menu_generator="true" loadscene_flags="MERGE" />

Назначение:

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

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

open_start - (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_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"

Если в "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 (необязательно).

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 (родной скин), то устанавливается этот флаг загрузки сцены.

---

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

Скачайте демо-тур, в нем находится плагин меню. Вы можете подключить его в своем туре и потестировать.
Демоверсия полностью рабочая до 20.05.2020.

---

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

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

---

---