Features

• The presence of the interface. Visual control over all changes - you immediately see the result!
• Working in a regular Internet browser.
• Flexible customization of the overall menu design (width, color, transparency, shadow, borders, etc.)
• Installing a logo that opens the site on a click.
• Creating buttons (4 options by default).
• Customize the design of both a group of buttons and individual options (width, height, color, transparency, shadow, borders, text, etc.).
• Assigning an icon to buttons.
• The ability to set the image in the button.
• Creating an individual menu tree structure. Assign an opening to any button groups of buttons, which in turn can also have groups.
• Assigning preset actions to buttons (open panorama, photo, selected view, youtube, website). You can also assign any action to a button click by writing the corresponding code.
• Enter text in four languages.
• The project settings and all buttons (in the form of layers) are saved in an xml file.
• The ability to save design presets for use in subsequent ones projects.
• There is a wide opportunity to edit the code of layers and menu styles.

---

Connection.

To connect the menu with the editor, place the "menu" folder in the root folder with the tour.

Write in the main xml:

<krpano>
  <include url="menu/plugins/menu_sm.xml" />
  <include url="menu/plugins/edit_menu_sm.xml" />   
    .
    .
</krpano>
	

After completing the work, disable the editor by deleting this line:

<include url="menu/plugins/edit_menu_sm.xml" />
	

---

Work with the plugin in an internet browser! The plugin will not work in krpano tools!

- open the design editor panel.

"Onclick:" - the code is output to this line, executed when you click on the button. You can add your own or change this code.

"Title 1:" - the text of the button is displayed in this line. Enter in the line custom button text (by default, the name of the layer of the button being created is displayed).

"Title 2:, Title 3:" - enter the text in other languages, it will be switch when the language change button is pressed.

"Icon:" - Click on "Icon:" - the explorer window opens. Select the icon in the folder "menu/image/icon/". It will be set before the text in the button. The full path to the icon will be written in the line. You can enter your path. First, you must put it in this folder icons.

"Image:" - Click on "Image:" - the explorer window opens. Select the thumbnail image in the folder "menu/image/Thumbnails/". It will be installed in the button, filling it in width by 100%. You must first place thumbnail images in this folder.

"Style image:" - name of the image layer style. You can set your own image style.

"Style text:" - name of the text layer style. You can install your own text style.

"Style cont:" - name of the button container layer style. You can set your own style.

line - creates a button with a preset design of the button container and text.

head - creates a button with a preset design of the button and text container. Unlike the first one, the font of the text is higher and larger.

thumbnail - creates a thumbnail button. The text of the button is located at the bottom and changes the background when you hover the cursor. Clicking on it opens a list of thumbnails of panoramas. Select from the list a panorama, by clicking on it. The icon and the name of the panorama will be set to the button.

picture - By default, the button is set to crop the image on mouse hover "crop".
For example, using "crop", by default, the lower half of the image will be shown, and when you hover over the button, the upper half will be displayed.

To assign any actions to a button (opening a group of buttons, changing the design of the button) it must be activated by clicking on it.

add group - activate the button that you want to assign the opening of the group to. Create a group by clicking on "add group". The block with the buttons will move to the left and a clean window will appear. Here you can create buttons the current group. You can also assign the opening of groups to the buttons inside the group. Thus, you can make a tree-like menu structure with many attachments.

- Block button actions. If you are editing buttons, this will make it easier to activate the button for editing.

delete button - delete the active button. If there is a nested group, it is also deleted.

- Move the button one position up/down. The indicator shows the position number of the active button.

- If the buttons overlap each other, then you can set the overlap order. The indicator shows the visibility layer number of the active button.

Example.
YouTube

---

Assigning preset actions to buttons.

Activate the button and assign an action:
- Select a scene from the list that opens. If the button "thumbnail", it will be automatically assigned scene thumbnail and thumbnail caption text, the opening of the selected scene is assigned. To other buttons the opening of the selected scene and the signature will be assigned.

- select the scene, set the desired view and viewing angle. The menu button will open this view.

- Click and select an image in the explorer that opens. It should be placed on the path "menu/image/". The button will open this image.

- click - a line will appear for entering the site address, which will open in the frame when you click menu buttons.
Attention!!! Not all sites allow you to open during frame! Use links without symbols like "&", an error will be generated!

- click - a line opens for entering the code youtube. You do not need to enter the entire link to the video УouTube. Example: "https://www.youtube.com/watch?v=hUDioIQdDGs"
You need to copy and paste only this piece into the line - "hUDioIQdDGs"

- click and select an audio file in the explorer that opens. It should be placed on the path "menu/sound/". An audio panel will appear. The button will start the audio sound.

Attention!!! You need to connect the plugin krpano soundinterface.

Example.
YouTube


Save - save the file saved_settings.xml to the folder "menu" (with replacement the old one saved_settings.xml).

---

Design Settings Panel.

Example of setting up the menu design.
YouTube

Click on the button "style", a window opens for editing the menu design.
At the top there are buttons that select the element to edit.

Changeable parameters:
Container:

• Changing the thickness of the border individually or simultaneously all 4 sides (pixels).
• Changing the rounding of corners individually or all at the same time (pixels).
• Shadow offset along the x and y axes (pixels).
• Blurring the shadow.
• Width change (pixels/%).
• Height change (pixels/%).
• X-axis offset (pixels).
• Y-axis offset (pixels).
• Distance between buttons (pixels).
• Changing the fill color and transparency.
• Changing the color and transparency of the fill when hovering the cursor.
• Changing the color and transparency of the border.
• Changing the color and transparency of the shadow.
• Selecting a logo image from the explorer that opens.

Text:

• Changing the text indentation from 4 sides (pixels).
• Offset of the text shadow along the x and y axes (pixels).
• Blurring the text shadow.
• Vcentr - vertical position of the text in the center (true/false).
• Changing the font size.
• Changing the text color.
• Changing the color and transparency of the text shadow.
• Ability to insert parameters css.
• Entering the logo text.

To change the parameter, click on the corresponding button and, without releasing it, move the cursor to the left or right. You can enter the value from the keyboard in the window next to the button.
Depending on the selected item for editing, unnecessary tools in the panel are darkened. The button is active by default "Menu contayner" (green color).

---

menu contayner
Main container, in which all the menu items are located.

---

contayner logo
The logo container is located at the top of the menu.
It contains the image of the logo and the signature of the logo.

---

logo
Click on the logo thumbnail, the explorer window opens. Choose a logo image. The logo must be located in the folder with the plugin menu/image.
You can change the height of the logo, move it along x and y inside its container.
Customize the logo text. The text editing tools are active on the"Text" tab.

---

title head
Customize the menu title and its text.
You can change the title title (starting position). The currently enabled language is taken into account. Switch to another language and enter a name in it.

---

menu buttons
Editing a button:

Activate the menu button by clicking on it (if the button opens a group nested in it (click), then press and without releasing move the cursor to the side and release (click). Then there will be no transition to the group). The type of this button will be displayed in the editor at the top. Configure the button parameters, the changes will be made immediately visible on the selected button.

---

Grouping buttons for editing.

By default, you can create 4 types of buttons. Each type is combined into one group.
When you open the design editing panel, green indicators (dots) will appear on the buttons.
- Indicator in a rhomb - the button is active for editing.
There are green indicators opposite the menu button creation buttons. They are clickable and switch - edit all buttons of this type simultaneously or separately.

- The green indicator on the button, changes to the active button are applied to all buttons of this button at the same time groups.
The changes are saved and will be applied to the newly created buttons.

- Yellow indicator on the button - all buttons of this group are ungrouped and edited by separately.

When you re-enable grouping, the change in the active button of a specific parameter apply to all buttons. For example: you have ungrouped the buttons and set different colors on them. Then grouped it again and they began to change the thickness of the curb. The border thickness will change for all buttons, but the color of the buttons will not will chang.

Clicking on the indicator in the button switches its state.
- Red. The button is completely blocked from editing in the group and is edited individually.

Example.
YouTube

---

Menu Settings. XML.

To a file style_menu.xml в menu_sm/plugins/ the main settings of the software menu are made by default.These settings will be applied when creating a new project. In the process of editing and changing the menu parameters, saving the project, new settings are registered in the file saved_settings.xml and are prioritized at startup. To make the new settings become settings by default, copy them from the file saved_settings.xml and paste it into style_menu.xml.

File style_menu.xml:

 <menu_sm  open_start="true"
	   open_start_mob="false"
	   click_hide="false"
	   mobile_click_hide="true"
	   menu_width="250"
	   menu_height="100%"
	   menu_x="0"
	   menu_y="0"
	   menu_bgcolor="0x0F373D"
	   menu_bgborder="0,0,0,0 0x689EB0 1.00"
	   menu_bgroundedge="0 0 0 0"
	   menu_bgshadow="2 2 3 0x000000 0.4"
	   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_x="5"
	   logo="%CURRENTXML%/image/logotip.png"
	   logo_text="https://novosibpano.ru/Plugins"
	   logo_txtshadow="2 2 4 0x000000 0.6"
	   logo_css_text="font-family:Arial;  font-size:15px; color:#FFFFFF; 
			      text-align:center; margin-left:5px; margin-right:5px;"
	   logo_padding="0 131 10 8"
	   logo_click="openurl(https://novosibpano.ru/Plugins/"
			  
	   title_height="40"
	   title_width="100%"
	   title_bgcolor="0x2B6F7A"
	   title_bgalpha="1"
	   title_bgshadow="0 5 18 0x000000 0.60"
	   title_bgborder="2,0,0,0 0x5C8587 1.00"
	   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;"
	   title_padding="0 0 0 0"	  
	   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_x="0"
	   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_padding="0 0 0 20"
	   head_line_css="font-family:Arial;font-size:17px; color:#FFFFFF;
			      margin-left:15px; margin-right:20px;"
	   head_onover_color="0x43B1C2"
	   head_onover_bgalpha="0.9"
						
	   line_step_V="7"
	   line_width="92%"   
	   line_height="37"
	   line_x="0"
	   line_bgcolor="0x2D707A"
	   line_bgalpha="1"
	   line_onover_color="0x43B1C2"
	   line_onover_bgalpha="0.9"
	   line_bgborder="1,0,1,0 0xFFFFFF 0.0"
	   line_bgroundedge="0 0 0 0"
	   line_bgshadow="2 2 4 0x000000 0.6"
	   line_text_bgshadow="2 2 4 0x000000 0.6"
	   line_padding="0 0 0 15"
	   line_css="font-family:Arial;  font-size:15px; color:#FFFFFF; 
			 margin-left:15px; margin-right:10px;"		
		
	   thumbnail_width="85%"
	   thumbnail_height="100"
	   thumbnail_x="0"
	   thumbnail_step_V="20"
	   thumbnail_bgcolor="0x0B5D66"
	   thumbnail_bgalpha="0.3"
	   thumbnail_onover_bgalpha="0.8"
	   thumbnail_onover_bgalpha="0.8"
	   thumbnail_onover_color="0x097D8A"
	   thumbnail_bgroundedge="0 0 0 0"
	   thumbnail_bgborder="1,1,1,1 0xFFFFFF 0.97"
	   thumbnail_bgshadow="6 8 8 0x000000 0.51"
	   thumbnail_text_bgshadow="2 2 3 0x1D1D1D 0.6"
	   thumbnail_padding="0 1 0 0"
	   thumbnail_css="font-family:Arial;  font-size:14px; color:#FFFFFF;
			      text-align:center; margin-left:5px; margin-right:5px;"
	   view_marker="true"
	  
	   
	   picture_url="%FIRSTXML%/menu/image/Picture/butt2.jpg"
	   picture_line="0"
	   picture_height="30"
	   picture_alpha="1"
	   picture_bgborder="0,0,0,0 0xFFFFFF 1"
	   picture_bgroundedge="2 2 2 2"
	   picture_bgshadow="2 2 3  0x1D1D1D 0.6"
	   picture_crop="0|80|273|80"
	   picture_onower="set(crop,0|0|273|80)"
	   picture_onout="set(crop,0|80|273|80)"
	   picture_padding="0 5 0 20"
	   picture_css="font-family:Verdana; font-style:italic; font-size:14px; color:#FFFFFF; text-align:center;"	   
						
	   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=""
	   
	   loadscene_flags="MERGE"
	   backup="false"
	

Appointment:

Menu Container Settings.

open_start - (true/false) open the menu at the start of the tour.

open_start_mob - (true/false) open the menu at the start of the tour on mobile devices.

click_hide - (true/false), hide the menu when the button is clicked.

mobile_click_hide - (true/false), hide the menu when the button is clicked on mobile devices.

menu_width - (pixels) width menu.

menu_height - (%) the height of the menu relative to the height of the menu screen.

menu_x - (pixels) - menu offset on the axis x.

menu_y - (pixels) - menu offset on the axis y.

menu_bgcolor - (0x0F373D) fill color.

menu_bgborder - (0,0,0,0 0x689EB0 1.00) border settings.

menu_bgroundedge - (0 0 0 0) corner radius settings.

menu_bgshadow - (2 2 3 0x000000 0.4) shadow settings.

menu_bgalpha - (0-1) transparency menu background.

menu_align - (lefttop, righttop) menu location menu on the left or right.

You can change the additional settings of the menu container in the file "style_menu.xml" - style "row_container".

Installing the logo and its name.

A container is created at the top of the menu, where the logo image is placed.

logo_cont_height - (pixels) height of the container for the logo.

logo_height - (pixels) height of the logo image.

logo_cont_color - (0x000000) color of the container with the logo.

logo_cont_alpha - (0-1) transparency of the container with the logo.

logo_y - (pixels) logo offset from the top edge.

logo_x - (pixels) logo indentation on the left.

logo - (%CURRENTXML%/image/logotip.png) way before the logo image.

logo_text - text under the logo.

logo_txtshadow (2 2 4 0x000000 0.6) - text shadow.

logo_css_text - css. the style of the text under the logo.

logo_padding (0 131 10 8) - text indent.

logo_click - action click by the logo (open the link, photo, etc.).

Container - the menu title with the return arrow.

When you open a group, its name is set at the head of the list.

title_height - (pixels) the height of the container for the output text of the groups.

title_width - (pixels/%) the width of the container for the output text of the groups.

title_bgcolor - (0x0F373D) container fill color.

title_bgalpha - (0-1) transparency of the container fill.

title_bgalpha - (0 5 18 0x000000 0.60) container shadow.

title_bgborder - (2,0,0,0 0x5C8587 1.00) container border.

title_bgroundedge - (0 0 0 0) rounding corners.

title_text_1 - text in the main language.

title_text_2 - text in an additional language (it is possible to switch languages.

title_text_3 - text in an additional third language.

title_text_4 - text in an additional fourth language.

title_text_bgshadow - (2 2 3 0x000000 0.4) text shadow.

title_css - (css) text style.

title_padding - text inden.

title_onover_color - (0x0F379D) the fill color of the container on mouse hover.

title_picture - (%CURRENTXML%/image/test.png) path to the button image. If not filled in, then the container fill is used. You can change the additional settings of the container with the name 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 nested in it).
An arrow appears on the right side of the button to open the group list. The group must have attachments!

head_step_v - (pixels) the height of the container for the output text of the groups.

head_width - (pixels/%) the width of the button relative to the width of the menu. The button is positioned in the center.

head_height - (pixels) button height.

head_x - (пикс.) axis offset x.

head_bgcolor - (0x0F373D) button fill color.

head_bgalpha - (0-1) button transparency.

head_bgborder - (1,1,1,1 0x777777 0.3) border settings - thickness, color, transparency.

head_bgroundedge - (0 25 0 25) rounding the corners of the button.

head_bgshadow - - (2 2 4 0x000000 0.6) Shadow parameters. x , y axis indentation, blur, color, transparency.

head_text_bgshadow - (2 2 4 0x000000 0.6)text shadow

head_padding - (0 0 0 20) text indent

head_line_css - (css) button text style.

head_onover_color - (0x43B1C2) the color of the button on mouse hover.

head_onover_bgalpha - (0-1) transparency when hovering the cursor.

You can change the additional settings of the "header" container in the file "style_menu.xml" - style "header_container", text style - "txt_head" and the marker style - "ic_next"

ic_next
If the "click" attribute is filled in, the button launches the action specified in it.

line_step_v - (pixels) step between buttons.

line_width - (pixels/%) the width of the button relative to the width of the menu. The button is positioned in the center.

line_height - (pixels) button height.

line_x - (pixels) axis offset х.

line_bgcolor - (0x0F373D) button fill color.

line_bgalpha - button transparency (0-1).

line_onover_color - (0x43B1C2) the color of the button on mouse hover.

line_onover_bgalpha - (0-1) transparency of the button when hovering the mouse.

line_bgborder - (1,1,1,1 0x777777 0.3) border settings - thickness, color, transparency.

line_bgroundedge - (0 25 0 25) rounding the corners of the button.

line_bgshadow - shadow parameters (2 2 4 0x000000 0.6) indent along the x, y, blur, color, transparency axes.

line_text_bgshadow - (2 2 4 0x000000 0.6) text shadow.

line_padding - text indent.

line_css - (css) button text style.

You can change the additional settings of the "string" container in the file "style_menu.xml" - style "row_container" 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.

thumbnail_width - (pixels/%) the width of the thumbnail relative to the width of the menu. The button is positioned in the center.

thumbnail_height - (pixels) thumbnail height.

thumbnail_x - (pixels) x-axis offset.

thumbnail_step_v - (pixels) step between thumbnails.

thumbnail_bgcolor - (0x0B5D66) background color under the text.

thumbnail_bgalpha - (0-1) transparency of the background under the text.

thumbnail_onover_color - (0x0B5D66) background color under the text when hovering the cursor.

thumbnail_onover_bgalpha - (0-1) transparency of the background under the text when hovering the cursor.

thumbnail_bgroundedge - (0 25 0 25) rounding the corners of the thumbnail.

thumbnail_bgborder - (1,1,1,1 0x777777 0.3) border settings - thickness, color, transparency.

thumbnail_bgshadow - button shadow.

thumbnail_text_bgshadow - text shadow.

thumbnail_padding - text indent.

thumbnail_css - (css) thumbnail caption text style.

You can change the additional settings of the "Thumbnail Bar" container in the file "style_menu.xml" - style "container_thumbnails" image layer - style "menu_thumbnail" and the thumbnail text style - "txt_menu_thumbnail"

view_marker - (true/false) set a marker on the thumbnail of the viewed panorama.

picture_url - path to the button image. If it is not filled, then the container fill is used.

If the path to the image is entered in "picture_url", it is assigned to all menu buttons (optional attribute).

picture_height - (pixels) button height.

picture_bgborder - button border.

picture_bgroundedge - rounding the corners of the button.

picture_bgshadow - button shadow.

picture_crop - (0|80|273|800) cropping images (not necessary).

picture_onower - action when hovering а mouse over the button. Example: set (crop,0|0|273|80).

picture_onout - action when removing а mouse from the button. Example: set (crop, 0|80|273|80).

picture_padding - text indent.

picture_css - text style.

You can change the additional settings of the button container with the image in the file "style_menu.xml" - style "container_picture"

If the icons in the buttons are set, these parameters are applied to them.

icon_style_line - (css) the style of the icon in the button that performs actions, for example: height:20px; vertical-align:middle; margin-right:10px;.

icon_style_head - (css) the style of the icon in the opening button the group.

Lower container with a language switch button. The button appears automatically if there is a filled-in attribute "lang_2".

bottom_height - (pixels) the height of the container at the bottom of the menu under the language change button.

lang_1 - language title_1 (not necessary).

lang_2 - language title_2 (not necessary).

lang_3 - language title_3 (not necessary). If there is a third language, then the language switch button switches all languages sequentially.

lang_4 - language title_4 (not necessary). If there is a fourth language, then the language switch button switches all languages sequentially.

loadscene_flags - flag loading the scene.

backup - (true/false) If installed "true", initially, when saving the project, the name for saving the backup file in the format will be displayed "saved_settings.xml - backup-2021.11.09-20.51.42.xml" and then "saved_settings.xml"

---

Image Viewer Plugin Settings.

The settings are located in the file menu/plugins/layer_menu.xml .
You can assign to the open photo button.

<settingsViewP 
	сloseClickBg="true"			
	сloseClickPhoto="true" 
	bgalpha="0.3"
	bgcolor="0x000000"
	bgborder="10 0xFFFFFF 1"
	bgshadow="7 7 20 0x000000 0.5"
	bgroundedge="5"
	textBgAlpha="0.3" 
	textBgcolor="0x000000" 
	css="font-family:Comic Sans MS, Comic Sans, cursive, Arial; 
	color:#FFFFFF; font-size:20px; text-align:center" 
	blur="30" 
	height_photo="80"
      />

Assigning attributes.

closeClickBg - close the image when clicking on the background (true/false).
closeClickPhoto - close the image when clicking on the image (true/false).
bgalpha - background transparency (0-1).
bgcolor - background color(0x000000).
bgborder - thickness, color, transparency of the border (10 0xFFFFFF 1).
bgshadow - shadow offset along the x, y axes, blur, color, shadow transparency (7 7 20 0x000000 0.5).
bgroundedge - rounding corners (5 5 5 5).
textBgAlpha - transparency of the background under the caption text (5 5 5 5).
textBgcolor - background color under the caption text (0x000000).
css - signature text style (font-family:Comic Sans MS, Comic Sans, cursive, Arial; color:#FFFFFF; font-size:20px; text-align:center).
blur - background blur in pixels (0...).
If you have new license krpano, then you can use the plugin to blur the background of the image. Blur.Make sure that the file "pp_blur.js" located in the folder "plugins".
Uncomment it plugin id="pp_blur" in the file layer_menu.xml, so that the background behind the frame is blurred.
height_photo - the height of the image relative to the height of the viewport in % (0 - 100).

---

Actions:

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. Example:"https://www.youtube.com/watch?v=hUDioIQdDGs"
  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 DEMO tour.

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".

---

Purchase "Menu + editor" plugin.

You can purchase the plugin by paying by the methods indicated below.
The archive for download will be sent within 24 hours after payment is received.
You will receive plug-in updates for free!
To purchase a plugin "Menu + editor" for 49 EUR.

Pay-Pal payment

Send your Pay-Pal address to novosibpano@yandex.ru and write the name of the plugin,
I will send you an invoice for payment via Pay-Pal.

If you have a PayPal account, send me the address, I will issue an invoice via PayPal.

---

---

---

Comments.