GUI Functionality

[Borjan]

I've just removed the prefix "solved". As a matter of fact, I've made a mistake by stuffing 5 issues in one post. The first issue has been responded to, the others not. Next time, I'll start more focused topics.

Two issues have to do with my lack of experience (and shortcomings in the documentation) see #1 and #4.

Points #2 and #5 are questions/suggestions regarding the functionality. I believe those are of interest to other forum users. For me, there is a simple workaround: will use a fixed-size font.

Point #3 is something I've incidentally discovered while testing, but of no further interest to me.

..............................................

I have used the GUI extension and basically it does what I need. See https://www.babylonjs-playground.com/index.html#RBP60B#8

Yet I have several questions and suggestions.

1. The background color of a container, in my case an instance of BABYLON.GUI.Rectangle is assigned by a string value ("black", "white"...). Which colors are possible? I would prefer to use BABYLON.Color3(...)

2. What I need is a 'sticky' label. For that, I create a rectangle and used it as a container for a TextBlock and that works fine. However, what I would like to have is that my label would be transparent or semi-transparent and the text not. In the present implementation, if I change alpha of the rectangle, it seems topropagate to child controls (my TextBlock), so the text becomes also semi-transparent. I believe this is a small bug: if I want the text to be semi-transparent, I can change the alpha of the TextBlock

3. I can link a TextBlock directly to a mesh. However, in that case I cannot change link offsets (linkOffsetX, linkOffsetY ...). Apparently, linkOffsetY has some value (100?) and the others are 0. Wouldn't it be a welcome feature?

4. Vertical text alignment of a TextBlock can be controlled by setting textVerticalAlignment to 0, 1 or 2, but I could not find it in the documentation.

5. Apparently, the object TextBlock has been designed to work in conjunction with some container object. Otherwise, it has no boundaries so it cannot decide on text wrapping. Is it possible to let the container (a Rectangle, for example) to be resized to match the text size (this would need to be somehow reconciled with wrapping - maybe like in MS PowerPoint). The simplest possibility would be to enable the programmer to do it. For example, to introduce a method that would return the "bounding box" of a text with the preset width and word wrap (Y/N). If I would have something like that, I could decide dynamically what container size I would need and whether to truncate my text. 

 

[Dad72]

7 minutes ago, Borjan said:

1. The background color of a container, in my case an instance of BABYLON.GUI.Rectangle is assigned by a string value ("black", "white"...). Which colors are possible? I would prefer to use BABYLON.Color3(...)

You can do this with BABYLON.Color3 and also #000000

[Borjan]

4 minutes ago, Dad72 said:

You can do this with BABYLON.Color3 and also #000000

Could you show me that in the code? I've tried:

var label = new BABYLON.GUI.Rectangle("label for " + mesh.name);
label.background = new BABYLON.Color3(0.9, 0, 0);

That does nothing.

[Dad72]

With you try like this:

var label = new BABYLON.GUI.Rectangle("label for " + mesh.name);
label.background = "#000000";

[Borjan]

7 minutes ago, Dad72 said:

You can do this with BABYLON.Color3 and also #000000

this works: label.background = "#E70000";

thanks!

[Borjan]

4 minutes ago, Dad72 said:

With you try like this:

var label = new BABYLON.GUI.Rectangle("label for " + mesh.name);
label.background = "#000000";

Thanks, this is exactly what I need.

[JCPalmer]

See here for a wide range of color names, which if you can find one will be more readable months from now.