How to disable a UI


#1

I have that code to enable the UI:

var BP= this.app.root.findByName(‘SwitchingMaterialsUI’);

    if (hitEntity.name == 'Table' || hitEntity.name == 'Pointer1'){
        localStorage.setItem('entityclick', 'Table');
        BP.enabled = true;
}

And that code to disble when I press a button of the UI:

 var BP= this.app.root.findByName('SwitchingMaterialsUI');
 BP.enabled = false;

If I check the state of BP.enabled, it is false, but the UI don’t disappear.


Enable / Disable UI elements
#2

You have not provided a link to exact replication of issue.

If your UI is DOM elements, then you have to hide/show them on event enable/disable of a script.
DOM elements don’t know about entities states, etc.


#3

I don’t know if my UI is a DOM element.
https://launch.playcanvas.com/536211?debug=true
That is my project.


#4

DOM - https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
Basically, DOM - is HTML elements. And yes, your UI is DOM elements, so you have to hide them when script is enabled/disabled.


#5

Yes, ok, but y write entity.enable = false;
But dont hide. :frowning:


#6

It will only disable entity, as DOM elements are independent and separate from entities. Regardless of where JS code is written, there is no relationship of states between DOM and Entities - you have to simply subscribe to enable/disable events on script of that entity, and set style.display = 'none' on DOM elements you want to hide. Or some style class alterations on some parent DOM element and handle display: none in CSS.


#7

@max so now that I have

Uimanager.attributes.add(‘menu’, {
type:‘entity’,
title:‘Menu’
});

Uimanager.prototype.onMenuBtnPressed = function (event)
{
// how to access the style of the entity / element I have ?
// this.menu.style.display = ‘none’ ? since such a thing doesn’t exist
};

thanks in advance


#8

@christian_ti check it here:
Enable / Disable UI elements