novosibpano@yandex.ru  

Menu editor v1.21


  • The editor only works in conjunction with the menu plugin
    HTML5. krpano v1.2


  • Features

    • The plugin has a user interface and does not require coding.
    • The editor panel opens in the browser.
    • Create your own menu structure.
    • Configure button parameters (attributes).
    • Assign them actions (open scene, photo, view, etc.).
    • The bonus is a plug-in for viewing images.
    • Interactivity - you can immediately see the result.
    • Saves all settings to the list_menu file.xml that is needed to create the menu. Without this plugin, you create it manually.
    • You can enter your action code on the button.

    Example of working with the plugin.
    YouTube

    How to connect.

    Write mostly xml:
    <krpano>
       <include url="menu/plugins/menu_sm.xml" />
       <include url="menu/plugins/edit_menu_sm.xml" />
       <include url="menu/plugins/photo_sm.xml" />
        .
        .
    </krpano>

    Line with the photo_sm file connection.xml is a plugin for opening images. Connect if necessary.



    Creating a menu structure.

    Open the tour in your browser and the editor panel will appear. At the bottom is a block with a white border for creating elements menus and attachments.

  • - Adds a menu item.

  • Clicking on an item activates it and it turns green.

  • - Deleting an active item.

  • - Click to update the menu, you will immediately see the result.
  • When you hover over an item, an arrow appears on the right side of it, click on it and an empty window will open for creating nested items.
    If an attachment is present in the element, the arrow on it will be permanently displayed.

    Setting button parameters.

    At the top of the panel, there are lines for entering parameters (attributes) of menu buttons.
    Activate the element and the values of the set parameters will be displayed in the rows. Enter your value in the line, press "Enter", update the menu.
    You can select a thumbnail, icon, or image by clicking on the corresponding caption. The file Explorer opens and select an image , which you will place in advance on the way:

  • Icon: - menu/image/icon.
  • Thumbnails: - menu/image/thumbnails.
  • Picture: - menu/image/picture.

  • Assigning actions to buttons.

    Activate the item and assign an action:

  • - select a scene from the list that opens. The button will become a "thumbnail" and will automatically be assigned the "click" attribute. The "title_1" attribute is assigned from the scene's title.

  • - select a scene, set the view and viewing angle you want. The menu button will open this view.

  • - if the photo viewer plugin is enabled. Click and select an image in the Explorer that opens. It must be placed on path "menu/image/...". The menu button will open this image.

  • - click to opens a line for entering the site address, which opens in the frame when you click this menu button.
    Attention! Not all sites allow you to open in a frame!

  • - click to open a line for entering the youtube code. 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 the line - "hUDioIQdDGs"

  • - click and select the audio file in the opened explorer. It should be placed along the way "menu/sound/...".. The menu button will trigger the audio sound. The sound plugin is written in the file menu/plugins/layer_menu.xml under the name "soundinterface". You can set your parameters. More detailed information on the website krpano.


  • Update the menu and look at the result.

    See the example on youtube.

  • Save - save the file list_menu.xml to the "menu" folder (replacing the old list_menu.xml).





  • Menu Design Editor Window.

    Menu design setup example.
    YouTube

    Click on the button "style", a window for editing the menu design will open.
    At the top are buttons that select the item to edit.

    Customizable options:

      Container:
    • Change the border thickness individually or all 4 sides at the same time (pixels).
    • Change rounding of corners individually or all at the same time (pixels).
    • Axial shadow offset x and y (pixels).
    • Shadow blur.
    • Width change (pixels).
    • Height change (%).
    • Setting value x (pixels).
    • Setting valuey (pixels).
    • The distance between the buttons of the selected type (pixels).
    • Change fill color and transparency.
    • Change border color and transparency.
    • Change shadow color and transparency.
    • Select logo image fromе explorer.
    • Text:
    • Text indent value from 4 sides(pixels).
    • Setting the value for the shadow of the text along the axes x и y (pixels).
    • Blur text shadow.
    • Vcentr - vertically centered text (true/false).
    • Change font size.
    • Change text color.
    • Change the color and transparency of the text shadow.
    • Option to insert parameters css.
    • Enter text for logo.
    To change a parameter, click on the corresponding button and without releasing, move the cursor left or right. You can enter the value using the keyboard in the window next to the button.
    Depending on the selected item for editing unnecessary tools in the panel darkened.

    Button is active by default "Menu contayner" (green color).

    menu contayner
    The main container in which all menu items are located.



    contayner logo
    Container for logo, located at the top of the menu.
    Contains logo image and logo signature.



    logo
    Click on the mini logo, explorer window opens. Choose logo image. The logo should be in the folder with the plugin menu/image.
    You can change the height of the logo, move it along the axes x and y inside his container.
    Customize the text inside the logo. In the tab "Text" active text editing tools.



    title head
    Set the menu title and its text.
    You can change the name of the title (upon opening). Language register is important. Switch to another language and enter a name on it.



    menu buttons
    There are three types of buttons:
    • Button with or without action assigned to it - "line".
    • A button that opens a group nested within it - "head".
    • Mini button with image and caption below - "thumbnail".

    Click on the button in the editor.(block for creating menu items), she will become active (green color). The type of this button will appear at the top of the editor. Configure button options, changes will be immediately visible on the selected button.
    - refresh menu, the configured settings will apply to all buttons of this type.




    Image viewer plugin settings.

    The settings are in the file style_menu.xml .

    <settingsViewP 
    	CloseClickBg="true"			
    	CloseClickPhoto="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"
          />

    Assign the attributes
  • CloseClickBg - close the image when clicking on the background (true/false).
  • CloseClickPhoto - to close the image when you click on the picture (true/false).
  • bgalpha - background transparency (0-1).
  • bgcolor - background color (0x000000).
  • bgborder - border thickness, color, transparency(10 0xFFFFFF 1).
  • bgshadow - indent the shadow along the x, y axes, blur, color, transparency of the shadow (7 7 20 0x000000 0.5).
  • bgroundedge - the rounded corners (5 5 5 5).
  • textBgAlpha - transparency of the background under the caption text (5 5 5 5).
  • textBgcolor - the background color under the text of the signature (0x000000).
  • css - the style of the label text (font-family:Comic Sans MS, Comic Sans, cursive, Arial; color:#FFFFFF; font-size:20px; text-align:center).
  • blur - blurring the background in pixels (0...). If you have a 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".

    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.

  • height_photo - image height relative to the viewport height 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".

    • openPhotoSM(menu/image/nature1.jpg); - open image. Specify the path to the image location in parentheses.
    • 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.

    https://www.paypal-community.com/t5/user/viewprofilepage/user-id/11105888

    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 is fully operational until 25.09.2020.




    Purchase a menu plugin.

    The "menu editor" works only in conjunction with the plugin "Menu"!!!

    To purchase a plugin "Menu editor" for 20 euros.

    To purchase a plugin "Menu editor" + "Menu" for 49 euros.

    Pay via an MyCommerce "Menu editor" + "Menu"

    After receiving the payment within 24 hours, I will send you a link to download the example with the plugin.

    If you have questions about the purchase of a plug-in or have difficulties with payment - send me an email at novosibpano@yandex.ru. I will surely answer!
    You can also use the feedback form (in the lower left corner of the site), or leave information in the "Comments" section.



    Changes

    07.09.2020

    Version 1.21

    • Added a button to assign sound playback when clicking on a button in the menu.
    07.07.2020

    Version 1.2

    • 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.
    28.04.2020

    Version 1.1

    • Added menu design editor.
    21.10.2019

    Version 1.0



    Notice.

    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.






    Comments.