Mekaboo Posted September 29, 2018 Share Posted September 29, 2018 (edited) Good morning! Is there examples of PGs using dropdown buttons? With that turn the selections into action target links. Thank ya ??, Mekaboo Edited September 29, 2018 by Mekaboo Add more Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted September 29, 2018 Share Posted September 29, 2018 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 ) Mekaboo 1 Quote Link to comment Share on other sites More sharing options...
ssaket Posted September 29, 2018 Share Posted September 29, 2018 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 aWeirdo and Mekaboo 2 Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted September 29, 2018 Share Posted September 29, 2018 Hi @ssaket Works well Mekaboo 1 Quote Link to comment Share on other sites More sharing options...
Mekaboo Posted September 29, 2018 Author Share Posted September 29, 2018 (edited) 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 September 29, 2018 by Mekaboo edit Quote Link to comment Share on other sites More sharing options...
Mekaboo Posted September 30, 2018 Author Share Posted September 30, 2018 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 Quote Link to comment Share on other sites More sharing options...
aWeirdo Posted September 30, 2018 Share Posted September 30, 2018 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; }()); Wingnut and Mekaboo 1 1 Quote Link to comment Share on other sites More sharing options...
Mekaboo Posted September 30, 2018 Author Share Posted September 30, 2018 SUPERRIFFIC! Will add to my code! ??, Mekaboo Quote Link to comment Share on other sites More sharing options...
Guest Posted October 1, 2018 Share Posted October 1, 2018 The open issue is flagged as "Help needed" so if someone wants to offer an PR, that could be cool Mekaboo 1 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.