Menu.
HTML5
by Alexandr Mikhailov - novosibpano.ru/Plugins/Menu
Click to view an example. 
Features.
- By default, the menu is created automatically as a "thumbnail bar".
- Set the required number of lines in the menu and assign them your actions.
- Create the number of groups you need.
- Create groups within groups. You can set the depth of nested lists.
- When the window height is full, the menu scrolls automatically.
- Adjust menu width, color, transparency.
- Change You own design of the buttons.
- You can change the design of the individual button.
- Assign icons to buttons.
- You can create thumbnail bar.
- Enter text in two languages. The language switch button will appear automatically.
To create a menu and configure its parameters, you need to write code,
but using simple settings and commands you don't need deep knowledge of krpano coding.
The structure of the menu is pretty simple, you can find sample code here.
But if you want to make your work easier, there is an additional plugin "menu editor",
which has a user interface and allows you to create, edit, and assign actions to menu buttons without writing code.
More detailed information here.
How to connect the plugin.
To connect the menu, place the "menu" folder in the root folder with the tour.Write mostly xml:
<krpano .... >
<include url="menu/plugins/menu_sm.xml" />
.
.
</krpano>
By default, the menu is created automatically as a "thumbnail bar".
To create your own menu structure set in the file: style_menu.xml - auto_menu="false" !
To create a menu, you need to write down the elements, renaming them according to a certain scheme. The numbers in the name determine the position of the item in the menu (menu_ №… _ №…_ № ), for example: name= "menu_1_2_3" means that this is the third line in group 2, group 2 is the second line in group 1, group 1 is the first line in the start menu list.
An example of the use of syntax / XML. File 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>
This example shows a menu creation entry with two lines at the beginning of the menu (menu_1, menu_2), the first line (menu_1) opens a group of two
lines (menu_1_1, menu_1_2). The second row (menu_1_2) in the group opens the next group of three rows (menu_1_2_1, menu_1_2_2, menu_1_2_3). The depth of attachments is 3.n the example, the Test (text); action displays text on the screen. Look at the result.
Types of buttons.
1.Button "string".You can assign an action to click on the button (opening a scene, changing the viewport, opening an information window, etc.).
After clicking on the button, the text of this button becomes translucent-an indication that this button was pressed.
2. Group header.
It is intended for opening a group (buttons nested in it). The group must have one or more buttons. A button in a group can trigger an action or be the "header" of another group that, in turn, it can also contain "header" buttons. The depth of attachments is not limited. A marker (arrow) appears on the "title" button on the right. When you click the button, a window with the group that belongs to it opens. Additionally you can assign an action to the button.
Types of button design:
1. Container.
By default, the button is of the "container" type. This is a layer with border, fill, shadow, transparency settings, etc. By default, the fill color changes when you hover the mouse (назначение можно изменить).
2. Thumbnail.
The button is assigned an image (thumbnail). The thumbnail image is set to 100% of the button width, the height is set in proportion to the image. If the button height is less than the image height, the image adjusts to the button. A text bar is created at the bottom of the thumbnail. When you hover the mouse, the background of the text is highlighted. Clicking on the thumbnail sets the marker (views) in the upper left corner. You can use this button to open scenes, photos, etc.
3. Picture.
Set your button image, gradient or texture drawing, etc. By default, the "style" is set to crop the image on mouse hover "crop"
For example, using " crop"
by default, the lower half of the image will be displayed, and when you hover over the button, the upper half will be displayed.
You can configure these parameters as you like.Icon.
You can add icon to the button, it is set before the text. The icon size can be adjusted individually for "header" and "row".
In the style_menu file.xml specifies various parameters that will allow you to create individual menu design.
The plugin provides code for opening a scene load_m(name scene); enter the name of the scene to open in parentheses. You can assign this code to any button.
The attributes of the element.
<menu_v name="menu_1_2" click="" title_1="text 1" title_2="text 2" height="" style_cont="" style_txt="" icon="" thumbnail="" picture="" />
Attribute assignment
When you click on the button, the button text changes the transparency to "0.5". You can turn off the transparency change, if at the end of the action do not put a semicolon ";"
The icon style is set in the menu settings
An additional image layer is created, which is located inside the button container and fills it in height and width by 100%. You can change the borders of the container, they will be applied to the button. The image style is taken from themenu settings .Additional settings of the button with the image you can change in the file "style_menu.xml" - style "menu_picture"
Menu setting..
In the style_menu.xml file in menu_sm you can select the main menu settings.
You can make more advanced settings in the styles that are written in the same file.
<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_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" />
Appointment:
Menu design settings
Installation of the logo and its signature. At the top of the menu , a container is created in which the logo image is placed.
Container-menu title with return arrow.
When you open a group its name is set at the head of the list
The "title" button opens the group attached to it.
If the "click" attribute is not set, the button automatically becomes the" title" of the group. An arrow appears on the right of the button to open group list. The group must have attachments!
The group button. Starts the action.
If the "click" attribute is filled in, the button automatically becomes a group element.
Additional settings of the container "action call Button" you can change in the file "style_menu.xml" - style "Line_menu" and text style - "txt_line"
"Thumbnail bar.".
A button is created in the form of a thumbnail image with text at the bottom of the thumbnail.
If the path to the image is entered in "picture_line", it is assigned to all menu buttons. (Optional attribute)
If the icons in the buttons are set, these settings are applied to them.
The bottom of the container with a button to switch language. The button appears automatically if there is a filled attribute "lang_2".
Signatures are taken from the "title" spelled out in the scenes.
Sample generated code.
<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"/>
More information
Go to the site with the description in order to download a demo plugin or buy a plugin
novosibpano.ru/Plugins/Menu