novosibpano@yandex.ru  

Меню v1.0.


  • HTML5.



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

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



    Описание.

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

    Кнопки меню могут иметь два назначения:
    1. Заголовок группы.
    Предназначен тоько для открытия группы (нельзя назначить другое действие). В группе должна быть одна или более кнопок. Кнопка в группе может вызывать какое либо действие или быть "заголовком" другой группы которая в свою очередь может тоже содержать кнопки "заголовок". Глубина вложений не ограничена. На кнопке "заголовок" справа появляется маркер(стрелка). При нажатии на кнопку выдвигается окно с принадлежащей ей группой.
    2.Кнопка вызова действия.
    На щелчек по кнопке назначается выполнение какого либо действия(открытие сцены, смена вида просмотра, открытия информационного окна и т.д.).
    После щелчка по кнопке текст этой кнопки становится полупрозрачным - индикация того что эта кнопка была нажата. В плагине предусмотрен код для открытия сцены load_m(name scene); введите в скобках имя открываемой сцены.

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

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



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

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

    Пропишите в основном xml:
    <krpano .... >
       <include url="menu/menu_sm.xml" />
        .
        .
    </krpano>



    По умолчанию меню создается автоматически в виде "бара миниатюр".
    Для создания собственной структуры меню установите в файле style_menu.xml - auto_menu="false" !
    Для создания меню необходимо записать элементы, проименовав их по определенной схеме. Цифры в названии определяют положение элемента в меню (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); выводит текст на экране. Посмотрите на результат.
    Пример

    Атрибуты элемента.
    <menu_v name="menu_1_2"   
    	click=""			
    	title_1="text 1" 
    	title_2="text 2"
    	height=""
    	style_cont=""
    	style_txt=""
    	icon="" 
    	picture="" 
          />

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




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

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

    Файл style_menu.xml
     <menu_sm  auto_menu="true"
    	   open_start="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_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"
    			  
    	   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_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_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"
    	/>
    	

    Назначение:




    Настройки дизайна меню
  • auto_menu - (true/false) создать меню автоматически в виде бара миниатюр. Вы можете отключить эту опцтию и создать меню самостоятельно. Так же вы можете сгенерить код и корректировать его на свое усмотрение.
  • open_start - (true/false) открыть меню при старте тура(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_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"

    Кнопка "заголовок" (открывает вложенную в нее группу).
    Если не установлен атрибут "click", то кнопка автоматически становится "заголовком" группы. Справа на кнопке появляется стрелка открытия списка группы. Группа обязательно должна иметь вложения!
  • 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_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_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"/>



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

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




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

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



    Изменения



    Примечание

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