Change click action

Hello. I am having a problem again which I cannot solve without help. I made a kind of sandbox https://playground.babylonjs.com/#XCPP9Y#9758.
My task is to make sure that the “position” button cannot be pressed until action # 0 is performed (that is, the user must first click on button.2 so that the button.2 turns red). If the user tries to press the button.0 first, a message should pop up so that button/2 is pressed first.
If button.0 was pressed and the sphere was raised, then the text color should change after the second and third click. If the user don’t pressed button.0, then the color should remain the same.
I added button.1 on purpose, because I could not align the buttons inside the panel to the left and right edges))

I solved the drop-down window problem by making an additional button on top of button 0, which turns off when button.1 is pressed (and button.0 turns on accordingly), but this is idiocy. To solve a common problem, I tried to create a variable that would change its value when button.0 is pressed. but nothing worked for me.

This is all state management but you need to do it accross both buttons handlers:

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

1 Like

Forgive me, I just re-read the text and realized that it is not clear from the explanation what exactly I meant.
The main problem is precisely that you need a pressure dependency. Both tasks set themselves the same solution. It is the trigger that is needed, button.2 adds an action if button.0 was pressed. and button.0 reacts differently depending on whether or not button.2 was pressed. If you look at the original code, you can see that the text should change on button.2 and when button.2 is clacked. This is a fundamental question.
Maybe the way I tried to solve the issue will help you. I no longer have that code, I wrote it quickly so that it was clear what I mean.
https://playground.babylonjs.com/#XCPP9Y#9781
It doesn’t work, but it shows the problem I am facing.
Thank you

What you want is something like this?

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

1 Like

Yes, I guess that’s what will help me. This is the solution to my problem. I’m a complete newbie to js and didn’t know about the parameter “!”. Thank you

2 Likes

Glad to help! JavaScript basics - Learn web development | MDN (mozilla.org) MDN page has some nice resources on learning JS if you wanna check out more :smiley:

2 Likes

Sorry, but it doesn’t work. Your code allows you to influence but the button events, but does not allow you to change how you work with objects. The event is executed in any case, regardless of the parameter “isReady”.
Here’s an example: https://playground.babylonjs.com/#XCPP9Y#9796
I have removed the rest of the buttons for now, which should switch the parameter “isReady”.

So you don’t want any function to run when the button is turned off? If so, you can just remove the onPointerClickObservable, like this: Simple GUI in fullscreen mode | Babylon.js Playground (babylonjs.com)

Here is some reading on Observables, they’re a pretty common pattern in Babylon and in general: Observables | Babylon.js Documentation (babylonjs.com) and Observer (refactoring.guru)

I have a model with animation and two buttons. By pressing one button, one animation is executed, by pressing the second, 3 animations are executed simultaneously. However, if the user pressed the first button before, 4 animations should be executed.
Look at my model https://ruslantest.online/
Now I have an invisible button on top of the left button, which is disabled by clicking the right one.
However, the action that the left button performs - set the extensometer, should start the test with the extensometer, and if the user did not press the left button, then the extensometer animation should not turn on.

For this you’ll need to do state management. I recommend looking a bit into the State Design Pattern and understanding its functionality:

Wow, this is awesome. I’ll try to figure it out, thank you

I think I did it. You can see it on my link
Thank you for your advice.

2 Likes

Wow, it looks great! I love the realism of the model and the animations :smiley:

1 Like