Button events on button click (Smartwatch Control UI)

This is a multi-part question, so please bear with me.

I am trying to get the Activate Option button to start off saying Take-off. On left-or-right-button-click: I want the Activate Option button to say Land, and Take picture.

I am looking at User Interface - Stats Counter | Learn PlayCanvas as a tutorial, but I am stuck on which code to edit, and which code to get rid of/keep.

So far, I edited the ui-stats.js file to the following:

And, I haven’t edited the btn-states.js file yet.

Hi @Lorenzmotors! I think you disabled the right code so far. On this places you can add your own code.

@Albertos Thanks for responding. I appreciate you confirming I disabled the right code. I am fairly certain that under

11 this.setValue(0);

should be

this.setString.findByName('Activate Option');

Or something like that?

I know I should look in the API, but I’m still learning the language and don’t know the keywords I should be looking up. If you could point me in the right direction I’d appreciate it.

Is the video what you already have done or what you try to achieve?

What I’m trying to achieve.

So you want to change the text right now or make the switch? How many option there will be?

For now, I want to change the text; the middle button handles button clicks. And, there are three options.

I think you can change the text with the rule below.

this.progressText.element.text = 'Take-off';

It worked! Thank you so much :slight_smile:

(I just changed .progressText. to → activateOptionText)

I also added the code under
//change value to the right and
//change value to the left, but this only changes the value to be Land and Take picture, respectively:

My question is, what do you write to make it cycle through all of the options?

I was thinking:

this.activateOptionText.element.text =('Land', 'Take picture', 'Take-off');

to cycle through all the options, but this doesn’t work.

Or, maybe like this:

Where, depending on the button click: value either increases or decreases by 1. And, then depending on what value is equal to, the corresponding text gets activated. But, this doesn’t work :confused:

Your idea is good.

I took a look at the script and I see that you have placed everything inside the initialize function. This function is only executed once when the game starts. (An exception to this are the events). Your functions that checks what the current value is must therefore be placed in the update function. Also your value must be defined as this.value = 0; inside the initialize function, otherwise it cannot be read in the update function.

Apart from that you have to make sure that the value goes from 0 to 2 because you only want to use 3 options. In short, if the value is 2 and the button to the right is pressed again, you have to set the value back to 0 instead of further up.

1 Like