ToggleButton, versions and documentation

Hi,

I’ve been struggling with ToggleButton for a few hours now but I think I have worked out that it must have only recently been added - avail in 5.0 but not 4.2

As far as I understand 5.0 is still in alpha so I am using 4.2 however the documentation seems to reflect 5.0 but there is no indication of this. Is it possible to have an indication on the documentation as to when a feature is avail or be able to select previous versions of the documentation? I assumed the docs would be reflecting the most recent stable release.

PG for ref: Babylon.js Playground
setting to 4.2 gives ToggleButton is not a constructor but 5.0 is fine, although textBlock is returning undef so how do I set the text?

We normally try to indicate the version from which a new feature has been added, it must be an oversight here. The toggle button is new in 5.0 indeed, a PR is always welcome!

Adding @kintz_09 who is the creator of the control regarding the textBlock property being undefined.

[…] It seems you need to add the text as a child control:

https://playground.babylonjs.com/#TB3YPJ#1

However, I don’t understand the purpose of the textBlock and image properties of ToggleButton which can only be read and not written (so they will always be undefined)…

@kintz_09 Could you confirm that we could remove those properties as they are useless at the moment or are you planing to upgrade it ?

@sebavan, @Evgeni_Popov My apologies for just now noticing this thread!

I modeled this ToggleButton control after the Button control. Here’s the playground I used to demo its functionality.

Upon reviewing both controls, I noticed that the Button control’s image property is also read only. Unless I’m understanding the code incorrectly, the only way to add an image to a Button is by creating a new button with either the Button.CreateImageOnlyButton() or Button.CreateImageWithCenterTextButton() methods. In a button created manually using the the constructor, the image property is read only.

Thinking back to when I created this ToggleButton control, I remember planning to create similar public methods to simplify the creation of a ToggleButton. However, I didn’t have the time to get to those methods, and my needs were met by the current state of the ToggleButton. I believe that would explain how the image property got included but not used.

Take this function that creates a button as an example:

const buildTestButton = () => {
    const result = new BABYLON.GUI.Button("test");
    result.widthInPixels = 120;
    result.heightInPixels = 40;
    result.background = "white";
    result.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;
    result.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
    result.textBlock.text = "TEST BUTTON";

    return result;
}

The line result.textBlock.text = "TEST BUTTON"; will cause an error because textBlock is undefined. The same is true if trying to access result.image.*.

This raises the following question:

  • Should it be possible to set the textBlock or image property on a Button control created using the constructor?
  • Should it be possible to change the image on an existing Button that was created with the CreateImageOnlyButton() method?

I don’t believe either of these are possible currently. If that’s how the Button is intended to function, then it would make sense to remove both the textBlock and image properties from the ToggleButton. Alternatively, we could implement helper methods similar to those found in the Button control class.

Adding @msDestiny14 who is in charge of our GUI.

About the Button yes, I guess having a function like addText, or addImage use by the static you mentioned would make sense.

Now in the toggle, I guess we should remove the properties until a PR where we support the create in the same way.

So the average button is rectangle which is a container. Therefore you should be able to add and remove any component as you please. Text, images, even a slider if you wanted too.

Should it be possible to set the textBlock or image property on a Button control created using the constructor?

There is a simple button function that does this. https://playground.babylonjs.com/#XCPP9Y#1

Should it be possible to change the image on an existing Button that was created with the CreateImageOnlyButton() method?

Is this not possible?

I do think some of these questions do call for some API helpers because I see how this can be confusing.

They are API available on the button object:

    button1.textBlock.text = "Hello"
    button1.image.source = "textures/crate.png"

Example:
Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

And here is the complete code to answer your first question:

    var button1 = new BABYLON.GUI.Button("but1");

    // Adding text
    var textBlock = new BABYLON.GUI.TextBlock("text_button", "Hey!");
    textBlock.textWrapping = true;
    textBlock.textHorizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_CENTER;
    textBlock.paddingLeft = "20%";
    button1.addControl(textBlock);

    // Adding image
    var iconImage = new BABYLON.GUI.Image("icon", "textures/crate.png");
    iconImage.width = "20%";
    iconImage.stretch = BABYLON.GUI.Image.STRETCH_UNIFORM;
    iconImage.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_LEFT;
    button1.addControl(iconImage);

    button1.width = "150px"
    button1.height = "40px";
    button1.color = "white";
    button1.cornerRadius = 20;
    button1.background = "green";
    button1.onPointerUpObservable.add(function() {
        alert("you did it!");
    });

Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

Ok, this all makes sense. The thing that was confusing me previously was the fact that the button’s image and textblock property will always be undefined unless the button is created using one of the helper methods.

It was easy to think if I instantiated a button with the new keyboard and then added a textBlock or image control to it, that it might be accessible using the button’s image or `textBlock accessor property. I see now that’s not the case

It makes total sense to remove the textBlock and image properties from the ToggleButton control. Until there’s either a setter for them or a static helper function that uses the properties, they are useless and confusing.

2 Likes