Mekaboo

Drop down button

Recommended Posts

Good morning!

Is there examples of PGs using dropdown buttons? With that turn the selections into action target links. Thank ya

💖💖,

Mekaboo

Edited by Mekaboo
Add more

Share this post


Link to post
Share on other sites

Hi @Mekaboo 
Nothing complete yet as far as i know, but you can check this out: https://www.babylonjs-playground.com/#H10NI4#3

( Click on the dropdown named "Correct" on scene, select "Option A" and it will send you to babylonjs.com )
( "Correct" dropdown on scene, is called "dropdownA" in code )

Share this post


Link to post
Share on other sites

Hi @Mekaboo 

There's an open issue for this on github,  Also, I was working on same like 2 months ago.

Solution provided my @aWeirdo is pretty cool, though there a small problem on the z-indexing (based on the initial placing/creation of the dropdowns )

To fix this, I used onPointerEnterObservable and onPointerOutObservable to change the "zIndex" of the container, you can check here playground- https://www.babylonjs-playground.com/#H10NI4#4

 

@aWeirdo and @Deltakosh - what do you guys think of this solution? 

THanks

Share this post


Link to post
Share on other sites

Hey Sirs @aWeirdo & @ssaket!!!

These are great options to choose from..thank you both so very much😍! Im going to test this and get back to you all later!! Thanks again for the help it means alot🧡

❤️💜,

Mekaboo

Edited by Mekaboo
edit

Share this post


Link to post
Share on other sites

Dear Sirs @aWeirdo & @ssaket

I tried to implememnt the code from the PG to my site and it broke..the site wouldnt load up. The button from this PG I have in my code but it the only function is that it links:

http://playground.babylonjs.com/#41IFI5#15

How do I change this into a dropdown? I figure just change this one button up and thats all I need for now. Thank ya again so very much 😍

❤️💜,

Mekaboo

 

Share this post


Link to post
Share on other sites

Hi @Mekaboo

http://playground.babylonjs.com/#41IFI5#18

You must include the dropdown constructor;

var Dropdown = (function () {
	function Dropdown(advancedTexture, height, width, color, background) {
		// Members
        this.height = height;
        this.width = width;
        this.color = color || "black";
        this.background = background || "white";

        this.advancedTexture = advancedTexture;

        // Container
		this.container = new BABYLON.GUI.Container();
        this.container.width = this.width;
        this.container.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        this.container.isHitTestVisible = false;
        
        // Primary button
        this.button = BABYLON.GUI.Button.CreateSimpleButton(null, "Please Select");
        this.button.height = this.height;
        this.button.background = this.background;
        this.button.color = this.color;
        this.button.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

        // Options panel
        this.options = new BABYLON.GUI.StackPanel();
        this.options.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
        this.options.top = this.height;
        this.options.isVisible = false;
        this.options.isVertical = true;

        var _this = this;
        this.button.onPointerUpObservable.add(function() {
            _this.options.isVisible = !_this.options.isVisible;
        });

        //custom hack to make dropdown visible;
        this.container.onPointerEnterObservable.add(function(){
            _this.container.zIndex = 555; //some big value
        });

        this.container.onPointerOutObservable.add(function(){
            _this.container.zIndex = 0; //back to original
        });

        // add controls
        this.advancedTexture.addControl(this.container);
        this.container.addControl(this.button);
        this.container.addControl(this.options);
        
        // Selection
        this.selected = null;
        this.selectedValue = null;
	}
    Object.defineProperty(Dropdown.prototype, 'top', {
		get: function() { 
			return this.container.top;
		},
		set : function(value) {
            this.container.top = value;
		},
		enumerable: true,
		configurable: true
	});
    Object.defineProperty(Dropdown.prototype, 'left', {
		get: function() { 
			return this.container.left;
		},
		set : function(value) {
            this.container.left = value;
		},
		enumerable: true,
		configurable: true
	});
    Dropdown.prototype.addOption = function(value, text, color, background){
        var _this = this;
        var button = BABYLON.GUI.Button.CreateSimpleButton(text, text);
        button.height = _this.height;
        button.paddingTop = "-1px";
        button.background = background || _this.background;
        button.color = color || _this.color;
        button.onPointerUpObservable.add(function() {
            _this.options.isVisible = false;
            _this.button.children[0].text = text;
            _this.selected = button;
            _this.selectedValue = value;
        });
        this.options.addControl(button);
    };
	return Dropdown;
}());

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.