novosibpano@yandex.ru  

Меню v1.21


  • HTML5. krpano v1.2



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

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

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


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



    Изменения

    05.09.2020

    Версия 1.21

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

    Версия 1.2

    • Оптимизирован под Panotour.
    • Не сохранялся клик по логотипу - исправил.
    • В style_menu.xml закомментировал плагин блюра, чтобы не выдавало ошибки у тех, у кого его нет.
    • Добавил возможность третьего языка lang_3="国际" title_3="title_3" lang_set(3);
    • Добавил назначение открытия URL ссылки во фрейме .
    • Добавил открытие YouTube.
    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



    Примечание

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






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