novosibpano@yandex.ru  

Меню v1.1.


  • HTML5.



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

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

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

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




    Приобрести плагин Меню v1.1.

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



    Изменения

    20.02.2020

    Версия 1.1

    • Изменено подключение плагина.
    • Изменено расположение файлов в папке с плагином.
    • menu_x - отступ меню по оси x.
    • head_bgshadow - параметры тени "заголовка"
    • line_bgshadow - параметры тени "строки"
    • group_indicator_height - высота контейнера под индикаторы групп.
    • title_width - ширина кнопки в шапке.
    • click_hide - закрыть при щелчке по кнопке.
    • mobile_click_hide - закрыть при щелчке по кнопке на мобильных устройствах.
    • loadscene_flags - если не установлен skin_settings.loadscene_flags (родной скин), то устанавливается этот флаг загрузки сцены.
    • Можно установить действие "click" на кнопку "заголовка"
    • Установка галочки просмотра при загрузке сцены на кнопку с изображением(миниатюра), если она соответствует этой сцене.
    21.10.2019

    Версия 1.0



    Примечание

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