Advanced Combobox Plugin / Search Plugin

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

1

Tuesday, April 23rd 2019, 5:47pm

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*

My Plugins :

This post has been edited 3 times, last edit by "light_line" (Jun 6th 2019, 7:15am)

Go to the top of the page

samadi

Trainee

Posts: 52

Location: Iran

Occupation: Tehran,Alborz,nazarabad,

2

Thursday, April 25th 2019, 7:10pm

perfect plugin

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*

This post has been edited 1 times, last edit by "samadi" (Apr 26th 2019, 10:18pm)

Go to the top of the page

Coldmami

Beginner

Posts: 48

3

Friday, April 26th 2019, 10:51am

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

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

4

Friday, April 26th 2019, 12:53pm

Hi,

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

Thank you!
I am glad to hear it.

Quoted 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 :

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

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

My Plugins :

Go to the top of the page

Coldmami

Beginner

Posts: 48

5

Friday, April 26th 2019, 5:13pm

Quoted 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

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

6

Wednesday, May 1st 2019, 12:34pm

Hi
The plugin has been updated.

Changelog :

improved usability in mobile browsers.

My Plugins :

Go to the top of the page

samadi

Trainee

Posts: 52

Location: Iran

Occupation: Tehran,Alborz,nazarabad,

7

Thursday, May 9th 2019, 12:05pm

perfect

this is perfect

*thumbsup*

Go to the top of the page

ggarmen

Beginner

Posts: 37

8

Thursday, May 23rd 2019, 2:38pm

Changing combobox style/color

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

	Source code
1	bgcolor="0x00205b"

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

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

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

9

Friday, May 24th 2019, 2:32am

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:

	Source code
1 2 3 4 5 6 7 8	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 :

Source 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"
/>

Please let me know if you have any questions

My Plugins :

Go to the top of the page

ggarmen

Beginner

Posts: 37

10

Friday, May 24th 2019, 3:09am

That worked perfectly, thanks!

Go to the top of the page

ggarmen

Beginner

Posts: 37

11

Friday, May 24th 2019, 9:57pm

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

	Source code
1	<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/i07us2wn4p3kmwl/opened-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.

This post has been edited 1 times, last edit by "ggarmen" (Jun 17th 2019, 3:32am)

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

12

Saturday, May 25th 2019, 3:37pm

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

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

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

Quoted 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/i07us2wn4p3kmwl/opened-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.

	Source code
1 2	plugin[advanced_combobox].open(); plugin[advanced_combobox].close();

Quoted 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:

	Source code
1	max_height="55%"

My Plugins :

This post has been edited 1 times, last edit by "light_line" (May 25th 2019, 3:58pm)

Go to the top of the page

ggarmen

Beginner

Posts: 37

13

Sunday, May 26th 2019, 10:20pm

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:

[img]https://www.dropbox.com/s/ap4yfx726pe315y/screenshot.jpg?dl=0[/img]

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

	Source code
1	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?

This post has been edited 1 times, last edit by "ggarmen" (Jun 17th 2019, 3:33am)

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

14

Tuesday, May 28th 2019, 12:53pm

Please try this code:

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

My Plugins :

Go to the top of the page

ggarmen

Beginner

Posts: 37

15

Tuesday, May 28th 2019, 3:06pm

Worked perfectly!

Thank you for the excellent plugin and support

Go to the top of the page

Gigachances

Beginner

Posts: 4

Location: Republic of Korea

Occupation: Seoul

16

Monday, June 3rd 2019, 4:51am

Confirmation of error occurred when using Advanced Combobox Plugin and iframe simultaneously

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.

Quoted

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

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

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

17

Monday, June 3rd 2019, 4:58am

Quoted 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?

My Plugins :

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

18

Thursday, June 6th 2019, 7:19am

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

My Plugins :

Go to the top of the page

ggarmen

Beginner

Posts: 37

19

Monday, June 17th 2019, 1:14am

Problem on mobile

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.

This post has been edited 1 times, last edit by "ggarmen" (Jun 17th 2019, 3:33am)

Go to the top of the page

light_line

Intermediate

Posts: 168

Occupation: krpano freelancer || creating ideas & coding them || krpano developer

20

Monday, June 17th 2019, 3:24am

Quoted 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

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

My Plugins :

Go to the top of the page