Babylon GUI Responsive Top Menu

Questions
1

Does anybody have some examples of responsive Babylon GUI interfaces like Navbar - Navbar · Bootstrap v5.0 ?

2

@msDestiny14 which is our GUI queen is on vacation for now, but I’ll ping her to check this out when she comes back!
The general suggestion from the questions I’ve searched seems to be going for “%” values.

These are some I’ve found, hopefully they help somehow:
GUI image scaling - Questions - Babylon.js (babylonjs.com)
Not sure how to support different screen resolutions with GUI - Questions - Babylon.js (babylonjs.com)
How to make everything in an advanced dynamic texture responsive to the window height and width? - Questions - Babylon.js (babylonjs.com)

2 Likes
3

Hi @labris I’m back from vacation! This is a really cool idea and I’m going to try to implement a demo like this for you. :slight_smile:

Stay tuned :wink:

2 Likes
5

this is pretty fancy

2 Likes
6

Wow this is really cool!

Here’s is the start of the demo I am working on, all done using our awesome GUI Editor! :blush:

https://gui.babylonjs.com/#T9MZM2#5

In the editor layout I linked, you can see I’m creating lots of grids inside grids :wink: Also, notice how I am using a combination of both px and % when it comes to sizing (I tested it on the different sample responsive sizes just to get a feel).

I’m going to now go work on implementing some functionality to this. There are actually for now two ways to do this. Either I can create separate layouts and then call load on each one. Or have all the elements visible on one layout and then hide/show them using code. Probably will go with the latter implementation for this.

5 Likes
7

I have been curious about this for a while. Is the purpose of babylon gui to be svg or gl/wgl context only so it can render outside of the browser?

8

Here is the implementation side of the above-posted layout. (This was really fun to make as well btw)

This could go on and on and there are tons of ways to expand on this or even make it more generic. But here is an in-depth summary of how we did it:

  1. Load in the advancedTexture using parseFromSnippetAsync (lines 30-31)

  2. Find specifically the Features button and the drop-down rectangle, so we can program the drop-down on click. (lines 34-41)

    • We use onPointerClickObservable to set the drop-down to visible and not visible.

  3. Get all the text buttons and use onPointerEnterObservable and onPointerOutObservable to program different effects for hover feedback. (lines 43 - 64)

  4. Repeat the same step except with the feature drop down buttons (lines 60-79)

  5. Finally we implement the search bar (lines 82-87)

    searchButton.onPointerClickObservable.add( () => {  
        alert("Now leaving playground");
        window.location.href = 'https://doc.babylonjs.com/search?q=' + searchBar.text;
    });

Let me know if anyone has any questions about this. :slight_smile:

@jeremy-coleman as for your question let me find more about that. One purpose I can tell you about BJS GUI is the unique ability to be able to project onto a 3D mesh and can even get buttons and input to work on it pretty easily. https://playground.babylonjs.com/#H896c7#13.

5 Likes
9

I love that example.

2 Likes
10

And even the search function is working - it is real miracle!

2 Likes
12

Thanks for taking the time and sharing @msDestiny14. Tied in with a hamburger menu version for mobile phone and we are off to the races.

1 Like
13

Hi,
I like the NAVBAR, discussed below:

question: How to place NAVBAR inside the stackpanel above the 3 columns, keeping same size?

Any ideas how to combine the two would be extremely helpful. The advancedTexture variable
doesn’t seem compatible with panels as a stack item in the following 3 panel scene:

14

cc @carolhmj our gui expert

16

Can you describe a bit more the layout you want?

17

Hi Carolhmj,

I want the NAVBAR to appear in the top grid-ROW in the following updated example.

not sure if the NAVBAR can have a 2nd advancedTexture to attach onto PANEL0.

Thanks,

18

Hi didn’t get a reply but I created a workaround using a (sort of) dashboard thingy. :slight_smile:
thanks. But last question: How can the navbar show other images below? The sphere and ground do not show in the demo below, only the NAVBAR above. If I add " loadGUI.dispose()" then the NAVBAR is disabled but can’t seem to have both at the same time.

19

Hello! Apologies, I was a bit pressed for time recently :sweat_smile: But glad you arrived at a solution!

About showing the images, it’s because the rectangle where the navbar was in had a opaque background color, just switch that to a transparent one and it’s good to go: Load GUI From Snippet Server | Babylon.js Playground (babylonjs.com)