Advanced Combobox Plugin / Search Plugin

light_line

Fortgeschrittener

Beiträge: 169

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

1

Dienstag, 23. April 2019, 17:47

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 :

Dieser Beitrag wurde bereits 3 mal editiert, zuletzt von »light_line« (6. Juni 2019, 07:15)

Zum Seitenanfang

samadi

Schüler

Beiträge: 56

Wohnort: Iran

Beruf: Tehran,Alborz,nazarabad,

2

Donnerstag, 25. April 2019, 19:10

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*

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »samadi« (26. April 2019, 22:18)

Zum Seitenanfang

Coldmami

Anfänger

Beiträge: 48

3

Freitag, 26. April 2019, 10:51

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

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

4

Freitag, 26. April 2019, 12:53

Hi,

Zitat von »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.

Zitat von »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 :

Quellcode

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

Zitat von »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 :

Zum Seitenanfang

Coldmami

Anfänger

Beiträge: 48

5

Freitag, 26. April 2019, 17:13

Zitat von »light_line«

maybe in future updates.

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

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

6

Mittwoch, 1. Mai 2019, 12:34

Hi
The plugin has been updated.

Changelog :

improved usability in mobile browsers.

My Plugins :

Zum Seitenanfang

samadi

Schüler

Beiträge: 56

Wohnort: Iran

Beruf: Tehran,Alborz,nazarabad,

7

Donnerstag, 9. Mai 2019, 12:05

perfect

this is perfect

*thumbsup*

Zum Seitenanfang

ggarmen

Anfänger

Beiträge: 37

8

Donnerstag, 23. Mai 2019, 14:38

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

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

Quellcode

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

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

9

Freitag, 24. Mai 2019, 02:32

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:

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

Quellcode

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

Zum Seitenanfang

ggarmen

Anfänger

Beiträge: 37

10

Freitag, 24. Mai 2019, 03:09

That worked perfectly, thanks!

Zum Seitenanfang

ggarmen

Anfänger

Beiträge: 37

11

Freitag, 24. Mai 2019, 21:57

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

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »ggarmen« (17. Juni 2019, 03:32)

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

12

Samstag, 25. Mai 2019, 15:37

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

Zitat von »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.

Quellcode

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

Zitat von »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.

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

Zitat von »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:

	Quellcode
1	max_height="55%"

My Plugins :

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »light_line« (25. Mai 2019, 15:58)

Zum Seitenanfang

ggarmen

Anfänger

Beiträge: 37

13

Sonntag, 26. Mai 2019, 22:20

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

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

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »ggarmen« (17. Juni 2019, 03:33)

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

14

Dienstag, 28. Mai 2019, 12:53

Please try this code:

Quellcode

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

Zum Seitenanfang

ggarmen

Anfänger

Beiträge: 37

15

Dienstag, 28. Mai 2019, 15:06

Worked perfectly!

Thank you for the excellent plugin and support

Zum Seitenanfang

Gigachances

Anfänger

Beiträge: 4

Wohnort: Republic of Korea

Beruf: Seoul

16

Montag, 3. Juni 2019, 04:51

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.

Zitat

<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

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

17

Montag, 3. Juni 2019, 04:58

Zitat von »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 :

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

18

Donnerstag, 6. Juni 2019, 07:19

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

My Plugins :

Zum Seitenanfang

ggarmen

Anfänger

Beiträge: 37

19

Montag, 17. Juni 2019, 01:14

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.

Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von »ggarmen« (17. Juni 2019, 03:33)

Zum Seitenanfang

light_line

Fortgeschrittener

Beiträge: 169

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

20

Montag, 17. Juni 2019, 03:24

Zitat von »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

Quellcode

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

Zum Seitenanfang