Radio button issue

I have set up a list of radio buttons and use button.onIsCheckedChangedObservable.add to capture a change. However, it’s always giving me the previous choice not the current one. Do I need to set up some kind of timeout? if so, how? I suspect that when I click a button, the choice at that instance isn’t registered.

Can you repro in the playground? This should work :slight_smile:

var panel2 = new BABYLON.GUI.StackPanel();
panel2.width = “220px”;
panel2.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
panel2.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_TOP;

advancedTexture.addControl(panel2);

var addRadio = function(text, parent) {

    var button = new BABYLON.GUI.RadioButton();
    button.width = "20px";
    button.height = "20px";
    button.color = "black";
    button.background = "white"; 
    button.alpha = 0.4;  
    button.onIsCheckedChangedObservable.add(function(state) { 
        switch(text) {
           case("Scriabin Colors"): colormode=1; break;
           case("Piano Colors"): colormode=2;  break;
           case("All White"): colormode=3; break;
        }
    }); 

    var header = BABYLON.GUI.Control.AddHeader(button, text, "200px", { isHorizontal: true, controlFirst: true });
    header.height = "30px";
    parent.addControl(header);    
}


addRadio("Scriabin Colors", panel2);
addRadio("Piano Colors", panel2);
addRadio("All White", panel2);

The playground here is key :slight_smile:

just a blank scene

not sure to understand.

Can you repro your issue using playground.babylonjs.com

Nevermind, I got rid of it because it won’t work size-wise on the mobile version anyway.

1 Like