How to create modern GUI

Hello guys :stuck_out_tongue:
back again with my station … but now I upload a PG just with buttons :smiley:
https://playground.babylonjs.com/#37G8FG#2

please how can I make panels and buttons more “sexy” :stuck_out_tongue:, like those of cl3ver :

thank you guys
you are the best

BG

Anes

You just have to think about a design, that’s all :blush: Then, depending of what you’ve created, extract background image, custom fonts, color scheme, etc.

2 Likes

@Vinc3r do you have a demo ?
cuz I want to create kind of menu to filter my station components, and according to my PG, the buttons creating by “BABYLON.GUI.Button.CreateSimpleButton” is kind old :confused:
I want to know if cl3ver use the same GUI library and the possibilty of creating kind of attractive panels and buttons in BJS

I still haven’t gone deep in GUI so I just tried to learn how to map an image to a button, but by using an atlas to not waste memory.

I took a random image from the Internet, and… here a playground :slight_smile: https://www.babylonjs-playground.com/#2HJJV5#4

You may want to take a look into this scheme, helping to understand values:

Default mapped button (OFF) is the dark red one, ON state just shift image to the light red.

Now to get a beautiful UI, open Photoshop :smile:

4 Likes

@Vinc3r thanks and how about menu, I need to create a beautiful menu look at the PG, when I click to show it opens a panel nearby and it is kind classic, I want to make it more attractive like cl3ver :frowning: :frowning: :frowning:

@Vinc3r a menu like this example made by BJS Interface interactive
:frowning: :frowning: :frowning:

Lol I know this app, I’m one of those who made it :smiley: But here it’s not using GUI but simply html+css.

I don’t know what more to say: just made your graphic design, then adapt it using the way you prefer, that’s all. A nice UI can’t be done in a minute, you have to test something, tweak it, adjust it to the need of your app, etc.