Can we customize the look of BabylonJS.GUI?

[Guest]

Good job! (For the doc, I'll add the info)

Your questions:

Quote

- Button created with CreateImageWithCenterTextButton(): Can we move the text for precise positioning? (useful for RT/LT):

 Yes, the textbox is button.children[1]

Quote

- Button created with CreateImageOnlyButton: no reaction to hover and click? why?

Can you share a repro in the PG?

Quote

- Button: how to change the color for hover / click events

http://doc.babylonjs.com/how_to/gui#button (see visual animations)

You can also just register to one of the observable: http://doc.babylonjs.com/how_to/gui#events

Quote

- Button: how to change the image for hover / click events

Same as before (image is button.children[0]

Quote

- Font: how do change the font?

button.fontXXX: https://www.babylonjs-playground.com/#PLTRBV#2

Quote

 

- General: I would like to never use "px" to size my button (B, A, Y, etc). Using proportion is much better as everything resizes based on the device screen size. However, for the button Y, for isntance, if I do "button.height=0.2; button.width=0.2", the button is elliptic, squashed on Y-axis, because the container (the white rectangle) had a width greater than its height. Would it be possible to have an option "controller.fixedRatio = true", so that when I change "button.height=0.2", the width is computed automatically so that the button keeps its original ratio? that would be awesome!

 

That's a good idea. ideally we could add a control.fixedRatio as you said and update the the control._measure to compute width or height. Question would be then, how to define the ratio? Should it be an additional property? like control.fixedRatio = 1 (instead of true). And then, we also need to define which property to keep if both width and height are defined.

Quote

- Image: around the same idea as above, can we force a ratio?

Would be easier here as we know the ratio of the image. But we still need to define the "major" dimension

Quote

- Populating a menu: is there a quick way to open a json file without using the AssetManager? I used "import menuData from ""./data/menuData.json" for now.

Tools.LoadFile?

Quote

- Clipped by Parent: for people who wondered what I meant previously, I think we can see why I would like to be able to disable the clipped by parent here  ! the (play) (A) and (back) (B) buttons, for instance, are attached to the main panel (i.e. there are children of the main panel); and they get cut. Note that it does make sense to attach them to the main panel, in order to align them to the bottom.

Fixed now sir

[Nodragem]

Thank you for the tips!

Concerning 

21 hours ago, Deltakosh said:

Yes, the textbox is button.children[1]

 

21 hours ago, Deltakosh said:

button.children[0]

Maybe simpler for the user to have the helpers similar to as:
- button.getTextBox(), or button.textBox

- button.getImage(), or button.image

- button.getShape(), or button.shape (I wanted to say button.getRectangle(), but it might not be a rectangle ...  maybe button.getFrame()?)

 

21 hours ago, Deltakosh said:

Can you share a repro in the PG?

It seems that the button actually work. I start to think that there is something catching the mouse input over my button.

21 hours ago, Deltakosh said:

http://doc.babylonjs.com/how_to/gui#button (see visual animations)

the following seems to work:

this.button.pointerEnterAnimation = () => {this.button.alpha=1}
this.button.pointerOutAnimation = () => {this.button.alpha=0.7}

However, it seems that I need to keep a reference of `button` in `this` for it to work. I would have preferred being able to create an actual BABYLON.Animation. 

21 hours ago, Deltakosh said:

button.fontXXX: https://www.babylonjs-playground.com/#PLTRBV#2

I meant changing the font, as in using a different font, such as one downloaded from there: http://www.fontspace.com

21 hours ago, Deltakosh said:

Question would be then, how to define the ratio? Should it be an additional property? like control.fixedRatio = 1 (instead of true). And then, we also need to define which property to keep if both width and height are defined.

Something like control.fixedRatio = 16/9? with the following API doc: fixedRatio is defined as Horizontal/Vertical, e.g. 16/9, 4/3, etc. A control.fixedRatio = 0 would free the ratio. When width and height are defined, the last to be defined win. Maybe control.forcedRatio is a better name? I don't know.

[Guest]

• Buttons can have only image or only text. This is why there is no getText or getImage. But it could return nothing if not present..?
• For font, you can change the .fontFamily property (just use the same name as if you would be in a CSS file)
• For fixedRatio: I like that name, and yes be can decide that the last to talk wins. Fancy doing a PR?

[Guest]

1. is fixed now: https://github.com/BabylonJS/Babylon.js/commit/9b8e4ec011c3f58ff23f8f8f61eb3bb232a55be6

[Nodragem]

Thank you very much! can't wait to use it!

I'm happy to try to do a PR on that. 

 

[Dad72]

On 10/5/2018 at 6:55 PM, Deltakosh said:

(Scrollbars is something we NEED to add, I would love to get a scrollViewer control)

@Deltakosh  When do you plan scrollViewer function that you were talking to. Indeed, I think it would be very useful. It's been several times that I'm trying to get something decent, but without success.

[Guest]

@JohnK is currently working on it (https://github.com/BabylonJS/Babylon.js/issues/5458)

[Nodragem]

I made a progress bar using two rectangles, a container and a text block, here  I thought I would share because I am very proud of myself  !

 

You can find the code to run it just here: https://playground.babylonjs.com/ts.html#P3XLK9

[oschakravarthi]

On 9/20/2018 at 10:47 PM, Dad72 said:

Yes you can do it:

I have customized the GUI interface of Babylon here :

WOW... unbelievable. Is the compass custom made or the source is available?

[Guest]

We moved to a new forum: forum.babylonjs.com