Three button positions

Questions
1

Hello. Tell me, can I make the button change on click?
Now I have a function for counting clicks, and the button changes to an even click. But I need to have three button positions like rotation, location and squeeze.

Thats my code for button:
// …
const RotAnim = scene.getAnimationGroupByName(“Rotate”);
const LocAnim = scene.getAnimationGroupByName(“Locate”);
// UI
var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI(“UI”);
var UiPanel = new BABYLON.GUI.StackPanel();
UiPanel.width = “220px”;
UiPanel.fontSize = “14px”;
UiPanel.horizontalAlignment = BABYLON.GUI.Control.HORIZONTAL_ALIGNMENT_RIGHT;
UiPanel.verticalAlignment = BABYLON.GUI.Control.VERTICAL_ALIGNMENT_CENTER;
advancedTexture.addControl(UiPanel);

		// ..
		var button = BABYLON.GUI.Button.CreateSimpleButton("but", "Locate");
		button.paddingTop = "10px";
		button.width = "100px";
		button.height = "50px";
		button.color = "white";
		button.background = "green";
		
		var clicks = 0;
		button.onPointerClickObservable.add(function () {
		clicks++;
		if (clicks % 2 == 0) {
		RotAnim.start(true, 1.0, RotAnim.from, RotAnim.to, false);
			setTimeout(() => {RotAnim.stop()}, 1300);
			button.children[0].text = "Locate";
		} else {
		LocAnim.start(true, 1.0, LocAnim.from, LocAnim.to, false);
			setTimeout(() => {LocAnim.stop()}, 1300);
			button.children[0].text = "Rotate";
		}
		});
		UiPanel.addControl(button);

Ыorry for the possibly simple question (I can’t find information anywhere) and for my english

2

Hi @Rus02 , welcome to the babylon forum!

It would be wonderful if you can show your working code in a playground (https://playground.babylonjs.com ) and explain there (or comment) what you are trying to achieve or what is not working.

pinging @msDestiny14, the GUI wizard, for GUI support :slight_smile:

3

I can not.
Anyway, the code above doesn’t work as expected, I can delete it if it is misleading. In principle, I cannot solve this problem, and I do not know how to implement such functionality.

I need one button that performs action 1, while the name of the button changes and it performs action 2. Then the name of the button changes again and it performs action 3. Then the name becomes 1 and when pressed, action 1 is performed again

4

It is possible to dynamically change the text and action depending on a state:

https://playground.babylonjs.com/#XCPP9Y#8797

3 Likes
5

Yes, that’s what I need. Thank you very much. I didn’t want to register, I thought it wouldn’t lead to anything anyway, but I couldn’t hope that the problem that I had been struggling with for so long would be solved in a few hours. Thanks to.