Jump to content

Can we customize the look of BabylonJS.GUI?


Nodragem
 Share

Recommended Posts

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 :D ! 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 :)

Link to comment
Share on other sites

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:

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.

Link to comment
Share on other sites

  • 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?
Link to comment
Share on other sites

  • 4 weeks later...
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.

Link to comment
Share on other sites

  • 2 weeks later...
  • 1 month later...

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.

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

Loading...
 Share

  • Recently Browsing   0 members

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