Clone buttons of ui or html buttons

Help & Support
1

Hi there’s a way to clone buttons the idea it’s like creating a mini menu where the user clicks the buttons and gets a message, right now and with the help from leonidas I was able to read an xml file and depending of the length of the item of that xml are the numbers buttons

Here is the project https://playcanvas.com/editor/scene/1047123

Sample code

Ui.prototype.bindEvents = function() {
    var self = this;
    // example
    //
    // get button element by class
    var button = this.div.querySelector('.button');
    // if found
    
    var xmlAsset = this.app.assets.find('EmployeesFinal.xml');
    
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            
            var docXml = xmlAsset.resource;
            var empleados = docXml.getElementsByTagName("title");
            
            var cloned = pc.app.root.findByName("btn-default");            
            
            //console.log(empleados.length);
            
            for(var i = 0; i<= empleados.length; i++)
            {
                console.log(empleados.length);
                //clonarBtn
                var e = cloned.clone();
            }
            
        }, false);
    }
};
2

Hi @Julio_A.P, yes you can clone any entity using the clone() method. After you do that you need to add it to the scene hierarchy using the addChild method().

So using your code, that would be:

var cloned = pc.app.root.findByName("btn-default"); 
var e = cloned.clone();
pc.app.root.addChild(e);

Make sure to change the button position, otherwise it will be on top of the previous button and that can mislead you in thinking it didn’t work.

2 Likes
3

Thanks a lot the code worked right I’m trying to figure it out how to set the position with CSS and making look more appealing I was thinking maybe putting all the buttons in something ike boostrap list. If I have another question I’ll ask

4

Hi. I’m trying to move the entity to another position, right now I’m using CSS to show the original position. There’s an example of that?

This is what I’m trying but it’s not working, maybe it’s because all the entities are the same but do not get it

e.setPosition(new pc.Vec3(0, 10 + i , 0));
5

If that is a HTML button, then you should move it using CSS. For example:

position: absolute;
top: 100px;
left: 50px;
6

Ok but it’s like 13 buttons that means I have to add a different CSS for each line of them unless in the moment I am cloning them I can set the position with Js

7

Well, you can always use CSS classes to add similar styles to multiple elements. For that you need to study a CSS tutorial on how to do it.

But yes, if all positions are unique then you need to add each position separately.

9

Ok I made it with ui buttons there was and example with an label, so I replaced it with a label. Now I have to make them interactable

The example https://playcanvas.com/editor/project/553515

image
image1353×627 236 KB

10

Here is a good example on how to make UI elements interact with user input:

https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

1 Like