more GUI Controls (ie: Menu)

[brianzinn]

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?

[Gijs]

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

[RaananW]

@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

[adam]

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.

[brianzinn]

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

[adam]

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]

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.

[oschakravarthi]

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?