Enable / Disable UI elements


#1

I need to open a menu when tapped on a button and close again when tapped for a second time.

there’s no problem with detecting the button tap, but can’t enable / disable the menu.

I have the menu as an attribute. and first I was trying enable = true / false , then read about DOM and
it turned out that UI elements are DOM elements and don’t have a relation to the entity hence enable = true won’t work.

Then tried this code:

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

Uimanager.prototype.onMenuBtnPressed = function (event) 
{
   var menu = this.menu;
   var style = document.createElement('style');
   style.appendChild(menu);
   style.display = 'none';
}

but I have the common error,
"Uncaught TypeError: Failed to execute ‘appendChild’ on ‘Node’: parameter 1 is not of type ‘Node’ "

trying several different methods to be able to get the attribute and use it as a node, but not successful.

Now my main question is that, if I have a menu attached to an attribute in the script, how it can be accessed to be enable / disabled or show / hide … ?


#2

PlayCanvas UI elements are not DOM Elements. They are Entities with Element components. DOM API code will not work with PlayCanvas Entites.


#3

@dave thanks.

But according to this thread:

I was convinced that PlayCanvas UI are DOM Elements, however if that’s not the case,
what’s the proper way of enabling and disabling UI elements?

For example in unity, one of the methods is gameObject.SetActive(true)

thanks in advance


#4

try using:

this.menu.enabled = false;

I think that is what you are looking for


#5

Yes already tried and got this error:
Uncaught TypeError: Cannot set property ‘enabled’ of undefined

but I have the attribute in the code and dragged and dropped the menu to the script, didn’t get what or why its undefined.


#6

Could you give me a link to your scene??


#8

After many trials, I found out that the attributes / local variables can be used to enable / disable.
(this.menu.enabled = true) gives an error.

However declaring a var (globally, outside a function’s scope and not an attribute) works.
full code is below

var Uimanager = pc.createScript(‘uimanager’);

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

var menu;

Uimanager.prototype.initialize = function()
{
menu = this.menu;
this.menuButton.element.on(‘mousedown’, this.onMenuBtnPressed, this.menuButton);
};

Uimanager.prototype.onMenuBtnPressed = function (event)
{
menu.enabled = !isMenuOpen;
isMenuOpen = !isMenuOpen;
};


How to disable a UI
#9

Try this:

var Uimanager = pc.createScript('uimanager');

Uimanager.attributes.add('menuButton', {
	type:'entity',
	title:'Menu Button'
});

Uimanager.prototype.initialize = function()
{
	this.menuButton.element.on('mousedown', this.onMenuBtnPressed, this);
};

Uimanager.prototype.onMenuBtnPressed = function (event)
{
	this.menu.enabled = !this.menu.enabled;
};

You shouldn’t need a global variable to store the menu entity reference. The issue was that you variable that you passed as the scope for the event callback.

That said, where did this.menu come from? It’s not an attribute?


#10

@yaustar thanks! yes after changing the last parameter to “this”
this.menu.enabled worked properly!

But can you explain more about the scope of the event.
Previously as I had set as the 3rd parameter as “this.menuButton”,
so what does it mean to have the scope of the event this.menuButton ?


#11

The API doc should help here: https://developer.playcanvas.com/en/api/pc.events.html#on

It means that this in the function of callback is reference menuButton object that you passed.


#12

Hello,

I am trying to disable my html file but i cant get it to work. I have a gem in the game and when i connect with it, it disappears but the html doesn’t disappear. Can somebody help me?

my project link: https://playcanvas.com/editor/scene/662089

The code is in the script called Gem