Top Menu

 v1.0

Short overview of the main features can be found at the plugin page
If there's anything incorrect, please let me know.

Plugin settings

Installation

Usage

Plugin settings

Bar settings

Blocks of contents

Menu style

Buttons block and additional buttons

Create categories

Edit mode

Advanced actions


Installation

The Top Menu plugin is made available as a zipped file. Before installation, remove any previous version of the plugin. Unzip the downloaded package to any temporary folder.

Place the alpo.topmenu_vN.N.N folder to:

  • Windows: C:\Users\MyName\Documents\Kolor\PanotourPro 2\plugins
  • Mac: /Users/MyName/Documents/Kolor/PanotourPro 2/plugins
  • Linux: /home/$USER/Documents/Kolor/PanotourPro 2/plugins
  • You will need to restart Panotour Pro to see the plugin!
  • To uninstall the plugin, delete the alpo.topmenu_vN.N.N directory with all of its contents.

    Usage

    After the installation completed, you can find the Top Menu plugin in the plugin library, double click on it to use in your project.

    Plugin settings

    Here you can set plugin settings, like using on devices and start actions.

    Use plugin on devices
    • Select devices where the plugin will be working.
    Add start actions
    • Enable to see hidden sections where you select start actions and choose on which device this actions will be executed. It's also possible to set delay for the actions in ms, 1000ms = 1 second.

    Bar settings

    Main settings for menu background bar, to hide bar just set color alpha to 0 in the color settings window.

    Color
    • Bar color and opacity.
    Size
    • Width and height of the bar. Additional values of min/max width and height to limit bar size on big or small screens.
    • Size for devices
    • Enable to use separate size for devices, if for width or height set 0, then separate size is not using for this setting. If for min/max set 0, then 0 will be using.
    Position
    • Bar position consist of aligning and offsets. Select aligning and offsets will be calculated from this point. It's possible to use negative values in pixels.
    • Offsets for devices
    • Enable to use separate offsets for devices, if set 0, then separate size is not using for this setting.
    Left/Right Padding
    • Gap from left or right for bar contents.
    • Padding for devices
    • Enable to use separate padding values for devices, if set 0, then this separate padding value is not using.

    Blocks of contents

    Top menu has three blocks, Categories in the center, Buttons on the right and Text on the left. Left and right blocks can have any width, but central block width is calculated automatically, and aligned to the right. On small screens, when it's not enough space for category block - text block will be hidden.

    Top menu blocks of contents

    Blocks of contents

    Text block
    • Width
    • Width of the text block, it affects the category block width. Additional values of min/max width to limit block size on big or small screens.
    • Width for devices
    • Enable to use separate width for devices, if set 0, then separate value is not using for this setting. If for min/max set 0, then 0 will be using.
    • Contents/Default contents
    • Which text to display in the text block (Category and Custom desctiptions see in the Advanced part). If Contents is not available, then selection of Default contents will be shown.
    • Use menu font
    • Enable to use the same font that is set for menu. In the description settings set any font for your text to make this option work.
    Category block
    • Auto-scroll on hover
    • Category buttons is made scrollable, when it's not enough space. With this option enabled, categories icons will be scrolling by hovering the mouse over them.
    • Icons size
    • In this section you can set Width, Height and Gap. Gap is the distance between category buttons.
    • Size for devices
    • Enable to use separate size for devices, if for width or height set 0, then separate size is not using for this setting. If for gap set 0, then 0 will be using.
    Buttons block (Click for more info)

    Menu style

    Here you can set style and behavior settings for menu and activate Edit Mode.

    Pane settings
    • Settings for category pane, which appears on click category button. Pane includes Panotour groups and panoramas assigned to appropriate category in the Create categories section.
    • Width
    • Width of panes in pixels, there's separate devices settings for width.
    • Max height
    • Max height for pane independently of how many items are assigned to it. If there's not enough height fot items they will be scrollable. If set 0, then the height of the category panes will be different, depending on the number of assigned items.
    • Gap
    • Vertical gap between category button and top of the pane, see image below.
    • Arrow size
    • Set 0 to not to use arrow on top of the pane.
    • Foldable groups
    • Enable to start with folded menu items which corresponds to Panotour groups to hide panoramas items in it.
    • Devices settings
    • Enable to use separate width for devices, if set 0, then separate value is not using for this setting. If for max height, gap and arrow size set 0, then 0 will be using.
    Category pane, arrow, gap

    Category pane, arrow, gap

    Menu items settings
    • Height settings for menu items, separately for group and pano items. Gap - vertical gap between items.
    • Devices settings
    • Enable to use separate height for devices, if set 0, then separate value is not using for this setting. If for gap set 0, then 0 will be using.
    Menu items height, gap

    Menu items height, gap

    Generate group items first
    • With this option enabled items for groups will be created in the category pane first and after them items for single panoramas will be placed.
    Close active pane on new pano
    • With this option enabled opened category pane will be closed when new panorama is loading.
    Enable Edit Mode
    • Enable this option and build to add Edit Mode to the tour.
    Style data

    Create categories

    Categories block is the main element of the menu, every category is presented by custom icon and it opens a pane which can include menu items related to groups and panoramas.
    You can find categories settings section in the bottom of the plugin settings interface. There's no limitation for categories quantity. Video: Create category .

    Category title
    • This title appears as a tooltip over the category button.
    Category icon/active icon
    • Select your images (png or jpeg) for category. Active icon appears on hovering or clicking category button. For the best user experience prepare icons to be identical size and centering, also compress your images keeping the ballance between filesize and quality.
    Assign groups by color Assign panoramas by ID
    • Type panorama IDs separated by comma/space which will be assigned to this category. Panoramas will be assigned in the order of specified IDs.
    Notes on the ordering of the menu elements.
    • You can control which appears first, groups then panoramas or vice versa, in the categoty pane. There is a checkbox option for that - "Generate groups items first", you can find it in the Menu Style section.
      However, currently there is no setting to control order which group appears as first, and which group next, the same for panoramas. This order controlled by ID number, the below example have a workaround for that.

      Example, if you have two groups (id01, id02) and two single panoramas (id01, id02) with enabled option "Generate groups items first" you will get category with this order: group "Streets"(id1), group "Interiors"(id2), pano(id1), pano(id2). If you want to display "Interiors" first and then "Streets" you can duplicate group "Streets", new identical group will be created by Panotour, it will have latest ID (id3 in this case), then remove group "Streets" (ID1). Now, in the category you have order like this: "Interiors"(id2), "Streets"(id3), pano(id1), pano(id2).

    Edit Mode

    Enable option Menu style>Enable edit mode and build the project, this will add edit mode into your tour.
    Please watch the video Using Edit Mode .

    Buttons block and additional buttons

    Buttons block placed on the right side of the menu, it's invisible but includes "main" button and separator image. Settings for buttons block you can find in the "Block of contents settings > Buttons block".

    Buttons block
    • Width
    • Width of the buttons block from the right side, it affects the category block and separator image horizontal position.
    • Width for devices
    • Enable to use separate width values for devices, if for set 0, then separate value is not using for this setting.
    • Display additional icon (separator)
    • Enable to display separator image and to open hidden settings for it.
    Top menu icons

    Top menu icons

    Buttons block

    Buttons block

    Main button
    • Settings for main button you can find in the "Buttons settings > Main buttons settings" section. Main button can have one of two options of click: 1 - Assign any Panotour actions; 2 - Display additional buttons.
      Video: Setup Main button and create additional buttons .
    • Width/Height
    • Size of the main button
    • Devices settings
    • Enable to use separate size for devices, if for width or height set 0, then separate size is not using for this setting.
    • Button title
    • Title which appears as tooltip.
    • X-offset
    • Horizontal position offset from the right side.
    • Icon/Mouse-over icon files
    • Select your images (png or jpeg) for the main button. Mouse-over icon appears on hovering or clicking the main button. For the best user experience prepare icons to be identical size and centering, also compress your images keeping the ballance between filesize and quality.
    • Main button action
    • Select "custom actions" to add any Panotour actions.
      Select "show more buttons" to display more buttons, this will show hidden sections of additional buttons settings.
    Additional buttons
    • Additional buttons aligned vertically and hidden at start, there's no limitation for buttons quantity. Every button can have one of Panotour actions (one action because of Panotour limitation in the plugin interface.).
    • Additional buttons size
    • In this section you can set Width, Height and Gap. Gap is the distance between buttons and between Main button and the first additional.
    • Devices settings
    • Enable to use separate size for devices, if for width or height set 0, then separate size is not using for this setting. If for gap set 0, then 0 will be using.
    • Additional buttons creation
    • To create new button duplicate "Additional button" section by pressing the plus icon on the right. And set individual settings in every section.
    • Button title
    • Title which appears as tooltip.
    • Desktop / Tablet / Mobile
    • Check on which device this button will be presented.
    • Button Icon/Mouse-over icon files
    • Select your images (png or jpeg) for the button. Mouse-over icon appears on hovering the button. For the best user experience prepare icons to be identical size and centering, also compress your images keeping the ballance between filesize and quality.
    • Hide all buttons on click
    • Enable to hide all additional buttons on click this button.
    • Button action
    • Assign one of panotour action to the button.

    Advanced actions

    You can use prepared javascript functions to control Top Menu, it's possible to call them in Panotour actions>advanced>Call a Javascript function or somewhere in your custom code.

    Show / hide / Toggle visibility of Top menu
    • Hide, show or toggle visibility of all the UI of the Top Menu, depending on the passed parameter.
    • Function: alpoTM.barVisibility('parameter')
    • parameter: toggle - toggles visibility, show - show if hidden, any true parameter - hides.
    Toggle category pane
    • Open/Close category pane and activate/desctivate appropriate category button, depending on the parameter.
    • Function: alpoTM.togglePane('parameter')
    • parameter: Any number - category number (see image below). If no parameter, then opened pane will be closed.
    Category number

    Category number

    Scroll to category button
    • Scrolls to category button, if buttons block is scrollable. Good to use with Toggle category pane function
    • Function: alpoTM.scrollCategBtn('parameter')
    • parameter: Any number - category number (see image above).
    Click main button
    • Executes click action of the main button. It also activates the button.
    • Function: alpoTM.toggleMainBtn()
    • If for the main button action selected Custom actions, you'll need to call Deactivate main button function after this with a timeout, for Panotour actions this would looks like this: (function(){alpoTM.toggleMainBtn();setTimeout(alpoTM.deactMainBtn,100)})()
    Deactivate main button
    • Deactivates main button if needed, see more info in the information about Click main button function above.
    • Function: alpoTM.deactMainBtn()
    Position of the Top Menu
    • Tween bar X/Y position. Position values are passed in the parameter.
    • Function: alpoTM.barPos(parameter)
    • Parameter: '{"nX":"N", "nY":"N", "iX":"N", "iY":"N", "ttm":"TN", "ttp":"T", "tgl":"false"}'
      nX - [optional] new X position, where N is any number. Position value to tween to.
      nY - [optional] new Y position, where N is any number. Position value to tween to.
      iX - [optional] initial X position, where N is any number. This sets position value which will be using as initial when toggle back.
      iY - [optional] initial Y position, where N is any number. This sets position value which will be using as initial when toggle back.
      ttm - [optional] tween time. Where TN is a number in ms, 1000ms = 1 second.
      ttp - [optional] tween type. Where T is a name of tween type. Possible tween types: easeOutQuad, easeOutQuart, easeOutQuint, easeOutSine, easeOutBounce, easeOutCirc, easeOutCubic, easeOutExpo, easeOutBack, easeInQuad, easeInQuart, easeInQuint, easeInSine, easeInBounce, easeInCirc, easeInCubic, easeInExpo, easeInBack. Visualization of tween types
      tgl - [optional] Toggle position. If set "true", then position will be toggling between new and initial position values. If initial position is not passed, first position will be saved as initial.
    • Example 1: alpoTM.barPos('{"nY":"-100", "tgl":"true"}')
    • This will tween Top Menu Y position from current (for instance 0) to -100 and on the second execution of this function it will toggle back menu to 0.
    • Example 2: alpoTM.barPos('{"nY":"0", "tgl":"true", "ttm":"1000"}')
    • Put this action to the Top Menu start actions Panotour actions>advanced>Call a Javascript function and set delay of start action to 5000ms, set Bar settings>Position>Align to Top and Y Offset to -100px. In result the tour opens with hidden Top Menu bar, because it's -100px Y position and after 5sec. the bar is tweening to 0 and appears on top of the screen. Executing this function again will tween bar to -100px out of screen.
    Calling advanced functions
    • You can call several functions with timeouts, for instance tween bar, then open category pane after 500ms.
    • Example: alpoTM.barPos('{"nY":"0", "tgl":"true", "ttm":"900"}');setTimeout(alpoTM.togglePane,1000,2)
    • Here 1000 is a delay in ms and 2 is a parameter, in this case it's category index.
      But this not works in Panotour actions>advanced>Call a Javascript function, see below.
    • Example for PTP: (function(){alpoTM.barPos('{"nY":"0", "tgl":"true", "ttm":"900"}');setTimeout(alpoTM.togglePane,1000,2)})()
    • Although one function will work in Panotour - alpoTM.togglePane(2), for more calls we have to wrap them in a function.


    Thank you so much for purchasing the plugin for Panotour Pro.
    If you have any questions relating to this plugin, I'll try my hardest to assist you.

    Alexander Popov


    Top