Enable and disable entities with a button

[LeXXik]

Glad to hear you progress

Yes, and yes - for both your points. You are correct in your thinking.

One trick I will teach you, so it will be easier: the logical NOT operator in Javascript !. Sounds complicated, but its very simple to use.

Example

var a = true;
var b = a;

You don’t need a science degree to guess that both a and b will true in this case. How to make b not true? Well, one way would be:

var a = true;
var b = false;

However, if you want b to be an opposite of a, then an easy way would be to use !:

var a = true;
var b = !a;

This is to tell that no matter what a is, b will be always its opposite. So, to upgrade your first point, instead of checking if current cube is enabled or disabled, we can use the ! operator to set it to opposite state:

myButton.enabled = !myButton.enabled;

Here, we read the current state of the button myButton.enabled, reverse it with ! and assign to itself. So, no matter what the current state is, it will be opposite, when the event happens.

[Ariel_Cancio]

Ok, @LeXXik, I have written something like this:

var EventReceiver = pc.createScript(‘changeLayouts’);

EventReceiver.prototype.initialize = function() {
var myLayoutA = this.app.root.findByName(‘LayoutA’);
myLayoutA.element.on(‘mouseup’, this.onLayoutABtnPressed, this);
this.myLayoutA = this.app.root.findByName(‘Layout A_One Box’);
myLayoutA.enabled = !myLayoutA.enabled;

};

EventReceiver.prototype.onLayoutABtnPressed = function() {
this.myLayoutA.enabled = !myLayoutA.enabled;

};

In addition to not working, the button on the screen has disappeared

[LeXXik]

Yes, try to place yourself in the shoes of the engine:

1. You load your script and start executing line by line, starting from initialize() method.
2. On the first line in initialize() you create myLayoutA variable and assign a button entity to it
3. Then you add an event hook
4. Then you create this.myLayoutA property and assign an entity to it
5. Then you set the button stored in myLayoutA to opposite of what it was. Since it was true first, you reveresed it to false.
6. initialize() method ends, and the engine leaves your script to do something else.

If you followed it closely, you may notice that on step 5 you reversed a button for no good reason, effectively hiding it. You only need to reverse the visibility state of cube entity when the button is pressed. When it is pressed, your onLayoutABtnPressed is called and there you correctly reverse it.

Edit:
Also, I would recommend to name your variables and properties descriptive to what they contain. For example, currently you have:

var myLayoutA;  // variable
this.myLayoutA;  // property

Even though the syntax is correct, it is hard to read or remember what is stored in one and what is stored in the other.

Instead, try to name them differently, so that after you write many lines of code, you can recognize what is inside:

var btnLayoutA;
// I abbreviated "button" as "btn" and added it as a 
// prefix to variable name, so I know this variable is a button

this.layoutA;
// This has no special abbreviations, so it is probably 
// some entity in the scene

[Ariel_Cancio]

Ok, LeXXik, Step 5 is not necessary, I just leave it at the end of the script. It still doesn’t work and it gives me this error.

The script now:

var EventReceiver = pc.createScript(‘changeLayouts’);

EventReceiver.prototype.initialize = function() {
var btnLayoutA = this.app.root.findByName(‘LayoutA’);
myLayoutA.element.on(‘mouseup’, this.onLayoutABtnPressed, this);
this.myLayoutA = this.app.root.findByName(‘Layout A_One Box’);

};

EventReceiver.prototype.onLayoutABtnPressed = function() {
this.myLayoutA.enabled = !myLayoutA.enabled;

};

[LeXXik]

Well, time to debug the problem. Look closely at the error it will give you the info that will help you locate the problem:

A - The error itself: myLayoutA is not defined. Hmm, seems that a variable was not defined, so the engine can’t recognize it. But where? Look at B.
B - This shows you the script file where the error happened. Cool. The name is Change Layouts.js. But where exactly in it? Look at C.
C - Shows 2 numbers - row where the eror happened and the column. You can ignore the column, and see that the error happened on line 7.

To sum it up: on line 7 of file Change Layouts.js you used a variable myLayoutA that was not defined before use. See if you can fix it yourself.

And a heads up - you will also have an error on line 17.

this.property = !this.property;

[Ariel_Cancio]

Fantastic!! Working Now!! Thanks @LeXXik

now I would like to go for the:

" I want that when I press the button with two cubes, the single cube disappears and the two cubes appear."

I have no idea where to start

[Ariel_Cancio]

So how do you suggest I should tell the script that when “onLayoutABtnPressed” in addition to enabling “Layout A_One Box” always disable “Layout B_Two Box” and “Layout C_Three Box”

Maybe this??

Pd: it does not work

[LeXXik]

I would probably change:

var btnLayoutA = this.app.root.findByName('LayoutA');
btnLayoutA.element.on('mouseup', this.onLayoutABtnPressed, this);

This was the issue previously, where you changed the name of the variable to btnLayoutA, but then tried to access its element property using its old name myLayoutA.element, which of course no longer existed.

About your error - looks at the error description. It says on line 21 you are trying to set property enabled of null. Looking at line 21 you have this line:

this.myLayoutC.enabled = false;

This means this.myLayoutC is null (in other words empty). You need to find the place where you assign a value to this property. Your script is simple, so you can quickly find that it happens on line 10:

this.myLayoutC = this.app.root.findByName('Layout A_Three Box');

So, after the engine runs this line, the this.myLayoutC becomes null - it can only happen if the engine couldn’t find the entity named Layout A_Three Box. You probably mispelled the name.

Edit:
And yes, you are on the right track with finding and storing them in properties

[Ariel_Cancio]

Is Working !!! Thank you so much for your help @LeXXik.
The code I proposed works perfectly, I just made a mistake in the name

My next challenge is to create Hierarchies, something like:
1- I want to see a cube, or a triangle or a sphere
2- I want to use the button of one, two or three objects that is applied only for the chosen geometry.

What do you think, is my idea very ambitious?

[LeXXik]

Glad to hear it

You should have all the needed knowledge to do it. Some hints:

1. Add new button event hooks. One per each new button, which will call their own methods.
2. You can add spheres and other shapes, just like your cubes. You enable/disable them the same way you already did.