Advanced Combobox Plugin / Search Plugin

  • This is the discussion thread for the Advanced Combobox Plugin.
    This plugin allows you to add a combobox / dropdown-list / selectbox to your pano and interact with it.
    It is fully customizable and provides a better user experience for visitors.

    Main Features :

    • This plugin can automatically generate the list of scenes (no programming required).
    • Users can search in the item list (useful in long lists)
    • In mobile browsers, the plugin can act like a native combobox (better user experience)
    • It shows combobox items in grouped view.
    • Different themes and styles are available (currently available themes are "default" and "classic". In the next update material-design-theme and bootstrap-theme will be added).
    • Style customizable with CSS power.
    • Multilingual interface.
    • Right to left languages are supported
    • Panotour Pro plugin is included.

    Detailed description and examples can be found here
    Feature requests would be appreciated.

    Best *thumbup*





  • Hello
    I am very pleased with this plugin

    Easy to use.

    It is perfect and the display is correct on different devices like mobile and tablet.

    I bought it and I'm using it.

    Thank you, I'm telling to other members to buy it too.


    *thumbsup*

    Edited once, last by samadi (April 26, 2019 at 10:18 PM).

  • Can i make list with Groups (Electrical, Plumbing, Construction, etc) and under have names like Fuse Box, Main Switch in electrical and so on. When click on the item it will open panorama with direct view to that equipment?
    I am aware that I need to find those links myself.

    And would be nice if the list has only categories visible, and when clicked on it, it expand to show all items.

    Is that possible?
    Marcin

  • Hi,

    Thank you!
    I am glad to hear it.

    Can i make list with Groups (Electrical, Plumbing, Construction, etc) and under have names like Fuse Box, Main Switch in electrical and so on. When click on the item it will open panorama with direct view to that equipment?
    I am aware that I need to find those links myself.

    And would be nice if the list has only categories visible, and when clicked on it, it expand to show all items.

    Is that possible?
    Marcin

    Yes, it is possible.
    you have to add items manually to the combobox like this :


    Code
    plugin[advance_combobox].addItem('Fuse Box',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Electrical);
    plugin[advance_combobox].addItem('Main Switch',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Electrical);
    plugin[advance_combobox].addItem('Channel Lock',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Plumbing);
    plugin[advance_combobox].addItem('Hose Cutter',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Plumbing);
    plugin[advance_combobox].addItem('Hammer',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Construction);
    plugin[advance_combobox].addItem('Circular Saw',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Construction);


    And would be nice if the list has only categories visible, and when clicked on it, it expand to show all items.

    maybe in future updates.

  • This is a great plugin, thank you for offering it.

    I am looking to customize the style and have successfully changed the font. However I cannot figure out how to change the background color. I have tried adding

    Code
    bgcolor="0x00205b"


    but that did not work. I was able to do this successfully within the standard comobobx plugin by adding the following style:


    Code
    <combobox_design name="bluebackground" margin="4" open_close_speed="0.25">		<!-- default vtourskin.xml design -->		<style name="combobox_container_style" bgalpha="0.8" bgcolor="0x00205b" bgborder="0" bgroundedge="1" bgshadow="0 4 10 0x000000 0.3" />		<style name="combobox_marker_style" css="color:#FFFFFF;" bg="false" txtshadow="0 0 2 0x000000 1" />		<style name="combobox_item_style" css="color:#FFFFFF;" padding="4 4" bg="false" bgcolor="0xFFFFFF" bgalpha="0.5" bgroundedge="0" txtshadow="0 0 2 0x000000 1" />	</combobox_design>


    How can I accomplish additional styling with the advanced plugin? Thanks.

  • Hi Louis,

    I have updated the plugin and send its file by Wetransfer.com to your email.
    by this new update, you can customize the plugin style.
    for customizing the plugin style, you can use these new attributes:

    Code
    textcolor="x444444"
    bgcolor="xffffff"
    bgalpha="1"
    bordercolor="xaaaaaa"
    borderalpha="1"
    selected_item_bgcolor="x5897fb"
    selected_item_bgalpha="1"
    selected_item_textcolor="xffffff"


    for example, by this setting, you can use the plugin in a dark style :

    Please let me know if you have any questions

  • I am continuing to customize the plugin and have a few more questions:

    1. What code can I use to hide/show the advanced combobox plugin? I have a search icon in the bottom navigation bar. I would like for the advanced combobox to be hidden when the page is loaded, but when the user clicks on the search icon, I would like for the combobox to appear. I have tried the following code

    Code
    <layer name="skin_btn_mag"  style="skin_base|skin_glow" crop="0|192|64|64"  align="left"      x="95" y="0"  scale="0.5" onclick="switch(plugin[advanced_combobox].visible);"/>>


    in the vtourskin.xml skin_control_bar section but it does not work. I've tried using "enabled" as well, and I've even hidden the plugin off the page as referenced in this thread , but I can't bring it back to the stage when clicking the search icon. Any ideas?

    2. Also if we can get #1 working, when the advanced combobox appears I would like for it to appear in an already expanded state, as shown in the attached image. How do I do this? <img src="https://www.dropbox.com/s/i07us2wn4p3k…-state.jpg?dl=0" alt="opened-state.jpg?dl=0" title="opened-state.jpg?dl=0" style="font-size: 0.8em;" />

    3. Is it possible to customize the height of the combobox once expanded? In my example above on a desktop, when it is expanded it shows 5 items. However there is room on the screen to show more items before forcing the user to use the scroll down using the bar on the right. It would be great if the height could be configured as a % of the screen size or something else so that user scrolling effort is minimized.

    Edited once, last by ggarmen (June 17, 2019 at 3:32 AM).

  • I have updated the plugin and send its file by Wetransfer.com to your email.

    1. What code can I use to hide/show the advanced combobox plugin? If you take a look at my working version , I have a search icon in the bottom navigation bar. I would like for the advanced combobox to be hidden when the page is loaded, but when the user clicks on the search icon, I would like for the combobox to appear.

    if you want to hide/show the plugin programmatically, this the solution:

    1. create a layer and place it in your favourites position for the advanced combobox plugin.
    2. create the advanced combobox plugin and set its "parent" attribute equal previous layer name.
    3. then you can manage the visibility of the plugin by hiding/showing the parent layer.

    e.g.


    2. Also if we can get #1 working, when the advanced combobox appears I would like for it to appear in an already expanded state, as shown in the attached image. How do I do this? <img src="https://www.dropbox.com/s/i07us2wn4p3k…-state.jpg?dl=0" alt="opened-state.jpg?dl=0" title="opened-state.jpg?dl=0" style="font-size: 0.8em;" />

    you can use these methods for opening or closing the plugin:

    please consider that these methods only work on desktop devices.
    native combobox does not support these methods on mobile devices.

    Code
    plugin[advanced_combobox].open();
    plugin[advanced_combobox].close();


    3. Is it possible to customize the height of the combobox once expanded? In my example above on a desktop, when it is expanded it shows 5 items. However there is room on the screen to show more items before forcing the user to use the scroll down using the bar on the right. It would be great if the height could be configured as a % of the screen size or something else so that user scrolling effort is minimized.

    for customizing the plugin height, you can use these new attributes:

    Code
    max_height="55%"
  • Thank you for the quick support, I got #1 and #3 working.

    I'm still having a little trouble with #2 though. It appears that it is opening the list to the expanded state using the code you provided, however it is loading off the stage. You can see the attached image:


    I tried adding this code to bring it back into alignment but it did not work

    Code
    onclick="switch(plugin[my_plugin_parent].visible);  plugin[advanced_combobox].open(); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center);"/>


    Any ideas?

    Also on an unrelated note, the placeholder ("Type/Select Section") works great on desktop but the text does not appear on mobile. How can I make it show on mobile?

    Edited once, last by ggarmen (June 17, 2019 at 3:33 AM).

  • Please try this code:

    Code
    <layer name="skin_btn_mag" style="skin_base|skin_glow" crop="0|192|64|64" align="left" x="95" y="0" scale="0.5"
    onclick="set(onclick,get(onclick_close));set(plugin[my_plugin_parent].visible,true); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center); delayedcall(0.05,plugin[advanced_combobox].open(););"
    onclick_open="set(onclick,get(onclick_close));set(plugin[my_plugin_parent].visible,true); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center); delayedcall(0.05,plugin[advanced_combobox].open(););"
    onclick_close="set(onclick,get(onclick_open));set(plugin[my_plugin_parent].visible,false); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center); delayedcall(0.05,plugin[advanced_combobox].close(););"
    />
  • If you use an iframe like the example sentence, there is an error on the screen.
    If you do not use Advanced Combobox Plugin, it works normally.
    I would like to ask you to confirm what is happening in this part.

    ːGIGA CHAN (Giga Chances)ː VR VENTURE COMPANY │ VR SOLUTION LAB

  • I have finished developing the other features for my tour and am now optimizing for mobile. As stated above, the advanced combobox works perfectly on desktop, but not so much on mobile. If I access it from my phone and click on the search icon at the bottom, it brings up the advanced combobox as expected. However, if I select an option from the combobox, or even if I try to progress to the next scene using the navigation arrows at the bottom (without selecting an option from the combobox), the "Loading..." text appears, but it does not progress to the next scene and freezes all actions.


    Can you please take a look? Thanks in advance.

    Edited once, last by ggarmen (June 17, 2019 at 3:33 AM).

  • please consider that these methods only work on desktop devices.
    native combobox does not support these methods on mobile devices.

    as I told you, the open/close method doesn`t work when you use the native combobox on mobile devices.
    this is the causes of your problem.
    you have to use this code in vtourskin-mobile.xml

    Code
    <layer name="skin_btn_mag" style="skin_base|skin_glow" crop="0|192|64|64" align="center" x="30" y="0" scale="0.5" onhover="showtext(Find A Section, navbar)" 
    onclick="set(onclick,get(onclick_close));set(plugin[my_plugin_parent].visible,true); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center);"
    onclick_open="set(onclick,get(onclick_close));set(plugin[my_plugin_parent].visible,true); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center);"
    onclick_close="set(onclick,get(onclick_open));set(plugin[my_plugin_parent].visible,false); set(plugin[advanced_combobox].x,0); set(plugin[advanced_combobox].align,center);"
    />

Participate now!

Don’t have an account yet? Register yourself now and be a part of our community!