Jump to content

more GUI Controls (ie: Menu)


Recommended Posts

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):
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?

Link to comment
Share on other sites

I'm switching to BABYLON.GUI as well, and I've made a context menu:


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!


The TypeScript source:

Edited by Gijs
Corrected code version
Link to comment
Share on other sites

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

Link to comment
Share on other sites

Just messing around seeing how to make a dialog control like:

Came up with:
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.

Link to comment
Share on other sites

  • 1 year later...
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?  

Link to comment
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.

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.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...