Advanced Combobox Plugin / Search Plugin

light_line · April 23, 2019 at 5:47 PM

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

samadi · April 25, 2019 at 7:10 PM

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.

Coldmami · April 26, 2019 at 10:51 AM

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

light_line · April 26, 2019 at 12:53 PM

Hi,

Quote from samadi

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.

Display More

Thank you!
I am glad to hear it.

Quote from Coldmami

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&amp;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&amp;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&amp;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&amp;view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Plumbing);
plugin[advance_combobox].addItem('Hammer',loadscene(YOUR_TARGET_SCENE,view.vlookat=YOUR_TARGET_VLOOKAT&amp;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&amp;view.hlookat=YOUR_TARGET_HLOOKAT,null,BLEND(0.9));,Construction);

Quote from Coldmami

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.

Coldmami · April 26, 2019 at 5:13 PM

Quote from light_line

maybe in future updates.

I will get it anyway, but hiding stuff under group would be helpful when I have 250+ items

light_line · May 1, 2019 at 12:34 PM

Hi
The plugin has been updated.

Changelog :

improved usability in mobile browsers.

samadi · May 9, 2019 at 12:05 PM

this is perfect

ggarmen · May 23, 2019 at 2:38 PM

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.

light_line · May 24, 2019 at 2:32 AM

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 :

Code

<plugin name="advanced_combobox" url="plugins/advanced_combobox.js" keep="true" devices="html5" include_jquery="true" include_select2="true"
align="topright"
align.mobile="topcenter"
x="10"
x.mobile="0"
y="10"
y.mobile="20"
width="40%"
width.mobile="90%"
parent=""
font_size="13"
font_name="Roboto,sans-serif"
theme="default"
language="en"
text_direction="ltr"
placeholder="Select a scene"
show_searchbox="true"
auto_generate_scenes_list="true"
native_on_mobile="true"
group_scenes="true"


textcolor="xffffff"
bgcolor="x000000"
bgalpha="0.5"
bordercolor="x000000"
borderalpha="0.5"
selected_item_bgcolor="xffffff"
selected_item_bgalpha="0.5"
selected_item_textcolor="x000000"
/>

Display More

Please let me know if you have any questions

ggarmen · May 24, 2019 at 3:09 AM

That worked perfectly, thanks!

ggarmen · May 24, 2019 at 9:57 PM

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.

light_line · May 25, 2019 at 3:37 PM

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

Quote from ggarmen

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:

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

e.g.

Code

<layer name="my_plugin_parent" keep="true" type="container" 
	x.normal="10"
	x.mobile="0"
	y.normal="10"
	y.mobile="20"
	width.normal="40%"
	width.mobile="90%"
	align.normal="topright"
	align.mobile="topcenter"
/>
<plugin name="advanced_combobox" url="plugins/advanced_combobox.js" keep="true" devices="html5" include_jquery="true" include_select2="true"
	parent="my_plugin_parent"
	width="100%"
	onInitialized="test();"
	font_size="13"
	font_name="Roboto,sans-serif"
	theme="default"
	language="en"
	text_direction="ltr"
	placeholder="Select a scene"
	show_searchbox="true"
	auto_generate_scenes_list="true"
	native_on_mobile="true"
	group_scenes="true"
	max_height="55%"
/>

Display More

Quote from ggarmen

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();

Quote from ggarmen

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

ggarmen · May 26, 2019 at 10:20 PM

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?

light_line · May 28, 2019 at 12:53 PM

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(););"
/>

ggarmen · May 28, 2019 at 3:06 PM

Worked perfectly!

Thank you for the excellent plugin and support

Gigachances · June 3, 2019 at 4:51 AM

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.

Quote

<action name="pdf_frame">

set(layer[pdf_thumb], type='text', parent='pdf_box_thumb', align='center', bgcolor='0x232323', bgalpha='0.5', bgroundedge='20', width='100%', height='100%', keep='true', zorder='6024', interactivecontent='true', renderer='css3d' );
txtadd(layer[pdf_thumb].html, '[div style="position:absolute; right:0; bottom:0; left:0; top:0; overflow-y:yes; background:rgba(233, 0, 0, 0.0); -webkit-overflow-scrolling:touch;"] [iframe id="pdf_thumb" width="100%" height="100%" src="pdf_data/',%1_%2,'.pdf" frameborder="0" scrolling="yes" allow-same-origin allowfullscreen][/iframe][/div]');
set(layer[pdf_thumb].onloaded, pdf_resize(thumb););
</action>

Display More

light_line · June 3, 2019 at 4:58 AM

Quote from Gigachances

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.

can you give me a link to test your code?

light_line · June 6, 2019 at 7:19 AM

Hi
The plugin has been updated.
Panotour Pro plugin is available now.

ggarmen · June 17, 2019 at 1:14 AM

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.

light_line · June 17, 2019 at 3:24 AM

Quote from light_line

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!