Multiple colors

Help & Support
1

Hey guys, so im working on a project and just have a question, i made a function that colors multiple objects when a “button” (div) is pressed inside the UI, now the color perfectly changes to the desired color of object however i want to change this color back to the original on a second click on the “button”, i was wondering if you could help me with this.

Ui.prototype.initialize = function () {
    // style element
    var style = document.createElement('style');

    //  head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    document.body.appendChild(this.div);
    
    this.counter = 0;
    
    this.bindEvents();
};

Ui.prototype.bindEvents = function() {
    var self = this;
    // example
    
    // Keep track of which texture in the array we are currently using
    this.textureIndex = 0;
    
    // get button element by class
    var button = this.div.querySelector('div');
    var counter = this.div.querySelector('div');
   

    // if found
    if (button) {
        // add event listener on `click`
            button.addEventListener('click', function() {
            ++self.counter;
            if (counter)
                counter.textContent = self.counter;
     

            // try to find object and change its material diffuse color
           var obj = pc.app.root.findByName('object1');
            var obj2 =  pc.app.root.findByName('object2');
                
            if (obj && obj.model && obj.model.model) {
                var material = obj99.model.model.meshInstances[0].material;
                if (material) {
                    material.diffuse.set(0.92,1.10,1.62); 
                    material.update();
                }
            }

             if (obj2 && obj2.model && obj2.model.model) {
                var material2 = obj2.model.model.meshInstances[0].material;
                if (material2) {
                    material2.diffuse.set(0.92,1.10,1.62);
                    material2.update();
                } 
            }
       }, false);
    }
};

The code would normally be longer since this has much more objects but this is just 2 of them to keep it short

Thanks

2

Basically, you’d have to store the initial color of those buttons. For example, you could store them as a pc.Color variables on initialize() and use’em when the button is clicked the second time.

Also, wouldn’t it be easier to use the pc.Button component?
https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/

3

Thanks for your response Sabikku, i will try what you said thanks a lot!

Have a great day
Erik Witteveen