close panorama

Advanced Combobox Plugin advanced_combobox.js
by light_line - vr.developer786@gmail.com
Version 1.0

Description

  • A combobox / dropdown-list / selectbox plugin.
  • Fully customizable, Searchable, good user experience on mobile devices
  • Works only in HTML5 and krpano (version min. 1.19 pr4).

Features

  • The list of scenes can be generated automatically by this plugin (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 supported (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. (supported languages)
  • Right to left languages are supported

Buy / Order the plugin

NOTE - this is a commercial plugin - to use it - it must be purchased.

You can purchase this plugin through the link below.
Updates for this plugin are free!

Advanced Combobox Plugin

39 € plus sales tax/VAT*

Syntax / XML Usage Example

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

Plugin Attributes

Attribute nameTypeDefault value
include_jqueryBoolean"true"
  • JQuery* library is a requirement for this plugin, but if it has already been included in your HTML page, you have to set this attribute to "False".
    If it is included, set this attribute to "False", otherwise set it to "true". If you are not sure about it, just use "true".
  • Does the plugin add JQuery to the HTML page?
    • true (default) - add JQuery library.
    • false - do not add JQuery library..

  • * JQuery is an open source and free javascript library which is released under the terms of the MIT license.
Attribute nameTypeDefault value
include_select2Boolean"true"
  • Select2* library is a requirement for this plugin, but if it has already been included in your HTML page, you have to set this attribute to "False".
    If it is included, set this attribute to "False", otherwise set it to "true". If you are not sure about it, just use "true".
  • Does the plugin add Select2 to the HTML page?
    • true (default) - add Select2 library.
    • false - do not add Select2 library..

  • * Select2 is an open source and free javascript library which is released under the terms of the MIT license.
Attribute nameTypeDefault value
auto_generate_scenes_listBoolean"true"
  • Add all scenes to the combobox automatically?
    • true (default) - generate a list of scenes automatically.
    • false - do not generate a list of scenes automatically. This way, you can add your custom items to the combobox manually.
Attribute nameTypeDefault value
group_scenesBoolean"true"
  • The advanced combobox plugin can group similar scenes together.
    for this purpose, you have to add "combobox_group" attribute to each scene in the xml file.
    as a result, advanced combobox plugin will group all scenes with the same "combobox_group" attribute together.

    Show the list of scenes in grouped view or not?
    • true (default) - group the items
    • false - do not group the items.

Preview
Examples
<scene ... combobox_group="...">
    <view ... />
    ...
</scene>

<scene name="scene_01" title="Scene 01" onstart="" thumburl="panos/01.tiles/thumb.jpg" lat="" lng="" heading="" combobox_group="Group lable 1" >

	<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

	<preview url="panos/01.tiles/preview.jpg" />

	<image type="CUBE" multires="true" tilesize="512">
		<level tiledimagewidth="1024" tiledimageheight="1024">
			<cube url="panos/01.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
		</level>
	</image>
</scene>

<scene name="scene_02" title="Scene 02" onstart="" thumburl="panos/02.tiles/thumb.jpg" lat="" lng="" heading="" combobox_group="Group lable 2">

	<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

	<preview url="panos/02.tiles/preview.jpg" />

	<image type="CUBE" multires="true" tilesize="512">
		<level tiledimagewidth="1024" tiledimageheight="1024">
			<cube url="panos/02.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
		</level>
	</image>

</scene>

<scene name="scene_03" title="Scene 03" onstart="" thumburl="panos/03.tiles/thumb.jpg" lat="" lng="" heading="" combobox_group="Group lable 1">

	<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

	<preview url="panos/03.tiles/preview.jpg" />

	<image type="CUBE" multires="true" tilesize="512">
		<level tiledimagewidth="1024" tiledimageheight="1024">
			<cube url="panos/03.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
		</level>
	</image>

</scene>

<scene name="scene_04" title="Scene 04" onstart="" thumburl="panos/04.tiles/thumb.jpg" lat="" lng="" heading=""  combobox_group="">

	<view hlookat="0.0" vlookat="0.0" fovtype="MFOV" fov="120" maxpixelzoom="2.0" fovmin="70" fovmax="140" limitview="auto" />

	<preview url="panos/04.tiles/preview.jpg" />

	<image type="CUBE" multires="true" tilesize="512">
		<level tiledimagewidth="1024" tiledimageheight="1024">
			<cube url="panos/04.tiles/%s/l1/%v/l1_%s_%v_%h.jpg" />
		</level>
	</image>

</scene>
Attribute nameTypeDefault value
native_on_mobileBoolean"true"
  • For better user experience, you can use native combobox on mobile devices.
    • true (default) - use native combobox on mobile devices.
    • false - do not use native combobox on mobile devices.

Preview
show_searchboxBoolean"true"
  • Show searchbox in the combobox plugin or not?
    • true (default) - show searchbox.
    • false - do not show searchbox.

Preview
Attribute nameTypeDefault value
themeString"default"
  • Select the theme:
    • default (default) - use default theme.
    • classic - use classic theme.

Preview
Attribute nameTypeDefault value
font_sizeinteger"13"
  • font size of combobox plugin
Attribute nameTypeDefault value
font_nameString"Roboto,sans-serif"
  • font name of combobox plugin.
Attribute nameTypeDefault value
languageString"en"

When necessary, Advanced Combobox Plugin displays certain messages to the user. For example, a message will appear when no search results were found or more characters need to be entered in order for a search to be made. These messages have been translated into many languages by this plugin.

Supported Languages :

Afrikaans, Arabic, Armenian, Azerbaijani, Basque, Bokmal, Bosnian, Bulgarian, Catalan, Chinese, Croatian, Czech, Danish, Dutch, English, Estonian, Fijian, Finnish, French, Galician, German.Greek, Hebrew, Hindi, Hungarian, Icelandic, Indonesian, Italian, Japanese, Khmer, Korean, Latvian, Lithuanian, Macedonian, Malay, Norwegian, Persian, Polish, Portuguese, Pashto, Romanian.Russian, Serbian, Slovak, Slovenian, Serbian, Spanish, Swedish, Thai, Turkish, Turkmen, Ukrainian, Vietnamese.

Language code list :
af, ar, az, bg, bs, ca, cs, da, de, dsb, el, en, es, et, eu, fa, fi, fr, gl, he, hi, hr, hsb, hu, hy, id, is, it, ja, km, ko, lt, lv, mk, ms, nb, nl, pl, ps, pt-BR, pt, ro, ru, sk, sl, sr-Cyrl, sr, sv, th, tk, tr, uk, vi, zh-CN, zh-TW


Preview
Attribute nameTypeDefault value
text_directionString"ltr"
  • ltr (default) - for left to right languages.
  • rtl - for right to left languages.
Attribute nameTypeDefault value
placeholderString
  • when no item is selected this text is displayed

Preview
Attribute nameTypeDefault value
onInitializedAction Event
  • This event will be called when plugin is initialized.
  • Could be used to add items manually.

Plugin Actions

Action name
addItem(name, onclick, group_lable*)
  • Add a new item with the given title, onclick, and group lable(optional) to the combobox.
Examples
plugin[advance_combobox].addItem('test 1',trace(item 1 is clicked););
plugin[advance_combobox].addItem('test 2',trace(item 2 is clicked);,group1);
plugin[advance_combobox].addItem('test 3',trace(item 3 is clicked);,group2);
Action name
selectItem(ItemIndex)
  • Select an item by its index number.
Examples
plugin[advance_combobox].selectItem(0);
Action name
selectItemByCaption(name)
  • Select an item by its caption.
Examples
plugin[advance_combobox].selectItemByCaption(ItemCaption);
Action name
removeItemByCaption(name)
  • Remove an item by its caption.
Examples
plugin[advance_combobox].removeItemByCaption(ItemCaption);
Action name
removeAll()
  • Remove all items from the combobox.
Examples
plugin[advance_combobox].removeAll();

Example

CLICK TO VIEW EXAMPLE