brianzinn Posted November 29, 2017 Share Posted November 29, 2017 I was just searching PGs for examples of AdvancedDynamicTexture.CreateForMesh and came across a really well done menu ( which I converted to TypeScript and am using):https://www.babylonjs-playground.com/#31DGYT#5 There's no menu in GUI... I've seen other nice controls like @Pryme8's spinner, dropdown and progress bar. I'm porting my interface from DOM to GUI, so interested to see what's out there before I start creating my own custom controls. One I'll be building for sure is a switcher (http://bootstrapswitch.com/). My question is - does anybody have GUI controls they'd like to share? Sebavan, Wingnut and BitOfGold 3 Quote Link to comment Share on other sites More sharing options...
Gijs Posted November 29, 2017 Share Posted November 29, 2017 (edited) I'm switching to BABYLON.GUI as well, and I've made a context menu: http://www.babylonjs-playground.com/#HG17VN#1 It's in its early stages, but it's good enough for my project ATM. In my project, the menu it is tied to a custom event system and color scheme, so in this demo the colors are hard-coded, and the clicked button only prints to the console. I'm also interested in what's out there! Edit: The TypeScript source:https://pastebin.com/raw/1zp6fyb4 Edited November 30, 2017 by Gijs Corrected code version brianzinn and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
RaananW Posted November 29, 2017 Share Posted November 29, 2017 @brianzinn - there is no reason to convert https://www.babylonjs-playground.com/#31DGYT#5 to TypeScript, it is already written in typescript. This is an extension for the GUI, a work in progress by Adam Gijs 1 Quote Link to comment Share on other sites More sharing options...
adam Posted November 29, 2017 Share Posted November 29, 2017 The menu still needs some work. For instance, I still need to figure out how I should handle menu items that use multiple font families. I'm going to bounce some ideas off Deltakosh when he gets back. Arte, Sebavan, RaananW and 1 other 4 Quote Link to comment Share on other sites More sharing options...
brianzinn Posted November 29, 2017 Author Share Posted November 29, 2017 sorry to let the cat out of the bag adam! I like how there is a MenuStyle that can be applied and it "cascades!". I have started a similar concept where JSON is used to build a GUI and am using a 'type' property, but find it cumbersome. I hope BABYLON.GUI would progress similar to a Virtual DOM like many popular frameworks (React, Angular 2, Ember, Vue, etc.) for synchronization/observer - with the composite of the entire UI we could apply, for example, a button style and use Visitor to have it applied to the whole UI where applicable. 5 hours ago, adam said: I still need to figure out how I should handle menu items that use multiple font families. I wanted to have some bold words in my sentence with text wrapping and sort of decided that was not going to happen. So, do you mean multiple font-families in the same menu or different font-families for different menu items? If you mean different items entirely then maybe something like precedence/specificity like CSS? ie: type MenuData = { id: string, title: string, items: MenuItem[] }; type MenuItem = { id: string, text: string, style?: MenuStyleOptions, subMenu?: MenuData } if style is { fontFamily: ''Verdana' } on a MenuItem, then I think it would need to be stored in _createItem() and always used . You could use spread operator on object literals to maintain that precedence let style = {...newStyle, ...objectStyle}. Quote Link to comment Share on other sites More sharing options...
adam Posted November 29, 2017 Share Posted November 29, 2017 2 hours ago, brianzinn said: So, do you mean multiple font-families in the same menu or different font-families for different menu items? Different styles in the same menu item. It can currently handle multiple styles in the same menu. brianzinn and Wingnut 2 Quote Link to comment Share on other sites More sharing options...
brianzinn Posted December 5, 2017 Author Share Posted December 5, 2017 Just messing around seeing how to make a dialog control like:https://getbootstrap.com/docs/4.0/components/modal/ Came up with:https://www.babylonjs-playground.com/#Q81PBV#1 I didn't spend much time on it, but something I would like to add is to get normal for camera.getForwardRay() and .cross or whatever to put the dialog in front of the camera. I'm not using full screen as I want it available in VR. In fact, my idea is full screen is only for showing non-interactive UI if VR is enabled (like HUD). Not sure if something like this is useful as a helper method like BABYLON.GUI.Control.AddHeader, but maybe will save somebody a little bit of time than making their own dialog from scratch. I added kinda an old TV off animation, but would be easy to add lots of transition options as well. Raggar, Arte, BitOfGold and 1 other 4 Quote Link to comment Share on other sites More sharing options...
oschakravarthi Posted January 21, 2019 Share Posted January 21, 2019 On 11/29/2017 at 6:28 PM, RaananW said: @brianzinn - there is no reason to convert https://www.babylonjs-playground.com/#31DGYT#5 to TypeScript, it is already written in typescript. This is an extension for the GUI, a work in progress by Adam Hi @RaananW, It is a good menu control. Thank you for this. Any more development on this? Any way to specify imageUrl to the menu item? 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.