HTML5. krpano v1.2
- 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 three 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.
Write mostly xml:
<krpano .... > <include url="menu/plugins/menu_sm.xml" /> . . </krpano>
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.
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:
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 (assignment can be changed!).
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.
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.
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.
<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" />Attribute assignment.
- if the element is intended to perform an action, it is written here. An "Action call button".
is automatically created. If this attribute is empty, a "Header group button"
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 ";".
title_1 - (optional). Enter text in the main language.
title_2 - (optional). If you are using a second language, enter text in that language.
title_3 - (optional). If you are using a third language, enter text in that language.
height - (not necessary). Set the button height selectively.
style_cont - (optional). If you want to apply a custom style to a specific button, enter its name here. Otherwise, the options from the menu settings are used. In the Style, you can specify the parameters that are in the element krpano "layer", except for the attributes "y", "parent".
style_txt - (optional). If you want to apply a custom button text style, enter its name here. Otherwise, the options from the menu settings are used. In the Style, you can specify the parameters that are in the element krpano layer type = "text", except for the attribute "parent".
- (optional). Specify here the full path to the location of the icon image, which will be set before
the button text (example, %CURRENTXML%/image/gory.png).
The icon style is set in the menu settings
thumbnail - (not necessary). If you want to make the button appear as a thumbnail, enter the path to the image (for example, %CURRENTXML%/menu/image/Thumbnails/nature.jpg).
- (optional) if you want to apply a custom button image, enter the path to the image (example,
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 the menu settings. Additional settings of the button with the image you can change in the file "style_menu.xml" - style "menu_picture".
namsc - (not necessary) if you want to open a scene, enter its name. Use only lowercase letters in the scene name!
In the style_menu.xml file in menu_sm you can select the main menu
You can make more advanced settings in the styles that are written in the same file.
<menu_sm auto_menu="true" open_start="true" download_delay="0" 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_cont_color="0x55D9C1" logo_cont_alpha="0.5" 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_bgcolor="0x2B6F7A" title_text_1="Menu" title_text_2="Меню" title_text_3="" title_text_4="" title_css="font-family:Arial; font-size:17px; color:#FFFFFF; text-align:center; margin-left:20px; margin-right:5px;" group_indicator_height="20" 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_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_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="" lang_4="" menu_generator="true" />
Menu design settings.
auto_menu - (true/false) create a menu automatically in the form of a bar of thumbnails. You can disable this option and create the menu yourself. You can also generate code and adjust it at your discretion.
open_start - (true/false) open the menu at the start of the tour (true/false).
download_delay - (sec.) the delay in creating menu buttons at startup is set. When starting a tour, simultaneous loading of the panorama and the menu gives a delay in loading the tour (brakes). If you load the menu a little later, the tour starts faster and smoother.
open_start_mob - (true/false) open the menu at the start of the tour on mobile devices.Hide menu on button click.
click_hide - (true/false), hide menu on button click.
mobile_click_hide - (true/false), hide menu on button click on mobile devices.
Installation of the logo and its signature. At the top of the menu, a container is created in which the logo image is placed.
logo_cont_height - (pix.) The height of the container under the logo.
logo_height - (pix.) the height of the logo image.
logo_cont_color - (0x000000) the color of the container with the logo.
logo_cont_alpha - (0-1) transparency of the container with the logo.
logo_y - (pix.) indent from the top edge.
logo_text - text under the logo.
Container-menu title with return arrow.
When you open a group its name is set at the head of the list
title_height - (pix.) the height of the container under the displayed text groups.
title_width - (pix. % ) width of the container for the output text of groups.
title_bgcolor - (0x0F373D) fill color of the container.
title_text_1 - ext in the main language.
title_text_2 - text in an additional language (languages can be switched).
title_text_3 - text in an additional third language.
title_text_4 - text in an additional fourth language.
title_css - (css) text style.
title_onover_color - (0x0F379D) container fill color on mouse hover.
(%CURRENTXML%/image/test.png) path to button image. If not filled,
the container fill is used. Additional settings of the container with the id you can change in the
file "style_menu.xml" - style "cont_title".
group_indicator_height - height of the container for group indicators .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!
head_step_V - (pix.) the height of the container under the displayed text groups .
head_width - (pix. percent) button width relative to the width of the menu. The button is positioned in the center.
head_height - (pix.) button height.
head_bgcolor - (0x0F373D) button fill color.
head_bgalpha - (0-1) button transparency.
head_line_css - (css) button text style.
head_onover_color - (0x43B1C2) button color on mouse hover.Additional settings of the container "header" you can change in the file "style_menu.xml" - style "line_head", text style - "txt_head" and marker style - "marker_m"
The group button. Starts the action.
If the "click" attribute is filled in, the button automatically becomes a group element.
line_step_V - (pix.) step between the buttons.
line_width - (pix. interest) button width relative to the width of the menu. The button is positioned in the center.
line_height - (pix.) button height.
line_bgcolor - (0x0F373D) button fill color.
line_bgalpha - the opacity of the button (0-1).
line_onover_color - (0x43B1C2) button color on mouse hover.
line_bgborder - (1,1,1,1 0x777777 0.3) settings of the curb. Thickness, color, transparency .
line_bgroundedge - (0 25 0 25) button corners are rounded.
line_bgshadow - (2 2 4 0x000000 0.6) indent along the x, y, blurr, color, and transparency axes.
line_css - (css) button text style.
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".
A button is created in the form of a thumbnail image with text at the bottom of the thumbnail.
thumbnail_bgborder - (1,1,1,1 0x777777 0.3) settings of the edging. Thickness, color, transparency.
thumbnail_bgroundedge - (0 25 0 25) rounds the corners of the thumbnail .
thumbnail_width- (pixels. percent) thumbnail width relative to the width of the menu. The button is positioned in the center.
thumbnail_height - (pix.) height of the thumbnail.
thumbnail_step_V - (pix.) the spacing between thumbnails .
thumbnail_css - (css) thumbnail signature text style.Additional settings of the container "thumbnail Bar" you can change in the file"style_menu.xml" - style"Line_menu_thumbnail" of image layer-style"menu_thumbnail" and style of thumbnail text - "txt_menu_thumbnail"
view_marker - (true/false) set a marker on the thumbnail of the viewed panorama.
picture_line - path to the button image. If not filled, the container fill is used.If the path to the image is entered in "picture_line", it is assigned to all menu buttons (optional attribute).
picture_alpha - (0-1) transparency of the image.
If the icons in the buttons are set, these settings are applied to them.
icon_style_line - (css) icon style in the button performing actions, for example-height:20px; vertical-align:middle; margin-right:10px;.
icon_style_head - (css) icon style in the button that opens the group. Icon setting.Set icons.
The bottom of the container with a button to switch language. The button appears automatically if there is a filled attribute "lang_2".
bottom_height - (pix.) height of the container at the bottom of the menu under the language change button.
lang_1 - language title_1 (optional).
lang_2 - language title_2 (optional).
lang_3 - language title_3 (optional). if there is a third language, the language switch button switches all languages sequentially.
lang_4 - language title_4 (optional). if there is a fourth language, the language switch button switches all languages sequentially.
menu_generator - (true/false) if this
option is enabled, pressing the "G" key will automatically generate a menu
code in the form of a "thumbnail bar". Open tray - the "O" key in the version krpano before 1.2,
starting with version 1.2 call the window with the "title" or "e" key. Copy the code and paste it
into the file
"list_menu.xml" for further editing and creating your own menu option.
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"/>
You can use these actions to assign them to menu buttons or any other actions.
- lang_set (1); - enter a number between 1 and 3 in parentheses to enable the appropriate language (title_1...title_3).
- openFrame (iframe, https://krpano.com, 1200, 900, true); - open a website
(krpano.com) in the frame, the maximum width is 1200px, the maximum height is 900px, and
scrolling is enabled (true). A source
Attention! Not all sites allow you to open in a frame!
- openYout (hUDioIQdDGs); - open youtub in the frame, you do not need to enter the
entire link to the youtube video.
you only need to copy and paste this part into brackets - "hUDioIQdDGs"
If you have new license krpano, uncomment plugin name="pp_blur" in the file layer_menu.xml so that the background behind the frame is blurred.
- shou_m(); - open the menu.
- hide_m(); - close the menu.
Download the DEMO tour, there is a plugin menu. You can plug it into your tour and test it. To do
this, use the file "list_menu.xml" from the folder "new project".
The demo version is fully working and differs from the full one by the presence of the inscription "Menu demo version".
The plugin costs 35 euros.
The archive for download will be sent within 24 hours after payment is received.
You can purchase the plugin by paying by the methods indicated below.
If You have any problems with payment, please email me email@example.com
Pay via Pay-Pal
- Added color and transparency settings for the logo container.
- Added the ability to install four language.
- Placed arrows in the "menu/icon" folder now you can set your own arrows
- Fixed the error in the "padding" parameter.
- Correction of minor bugs
- Added selection of the active panorama in the menu as a frame. Frame parameters are customizable.
- Fixed work of the viewed panorama marker. It is possible to disable it.
- Correction of minor bugs.
- Optimized for Panotour.
- The click on the logo was not saved - fixed it.
- In style_menu.xml commented on the bluer plugin, which would not give out errors for those who do not have it.
- Added the possibility of 3 languageslang_3="国际" title_3="title_3" lang_set(3);
- Added the purpose of opening the URL link in the frame .
- Added YouTube opening.
- Changed plugin connection.
- Changed the location of files in the plugin folder.
- menu_x - menu indent on the x axis.
- head_bgshadow - header shadow "parameters".
- line_bgshadow - options the shade "line".
- group_indicator_height - the height of the container for round indicators.
- title_width - width of the button in the header.
- click_hide - close when the button is clicked.
- mobile_click_hide - close when clicking on a button on mobile devices.
- loadscene_flags - if is not installed skin_settings.loadscene_flags (native skin), then this scene load flag is set.
- You can set the "click" action on the "header" button".
- Setting the check mark of the viewed sceneon the button with the image (thumbnail), if it corresponds to this scene.
Plugin is provided "As Is" without warranty of any kind, either express or implied, including any warranty of quality, merchantability, or fitness for a particular purpose. In no event will author of plugin be liable for loss of data, costs of procurement of substitute goods or services or any special, consequential or incidental damages, under any cause of action and regardless of whether or not plugin author have been advised of possibility of such damage. This limitation will apply notwithstanding any failure of essential purpose of any limited remedy provided herein. In any event plugin author will have no liability arising out of this agreement.