Cant use two scripts at the same time

Help & Support
1

Hey Forum, I have a little problem…

I seem to be unable to use two scripts at the same time. When I activate them both (both are adding a button to toggle a feature) then the second is working, but the first is not. When i don’t add the second one, then the first is working just fine. I guess there is something obvious I am not seeing :smiley:

For my camera, I am using a script like this:

image
image1099×275 14 KB

And for my Light I am using the other script like this:

image
image1097×261 13.8 KB

Sadly, I don’t know how to share the whole project (including the Code, not just the result). But Here are the two scripts I am using:

var Ui = pc.createScript('ui');

Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

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

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);

    
    this.bindEvents();
};

Ui.prototype.bindEvents = function() {
     var self = this;
    // get button element by class
    var button = this.div.querySelector('.button');
    // if found
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            self.entity.script.ssao.enabled = !self.entity.script.ssao.enabled;
        }, false);
    }
};


var Ui = pc.createScript('ui_Shadow');

Ui.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

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

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);

    
    this.bindEvents();
};

Ui.prototype.bindEvents = function() {
     var self = this;
    // get button element by class
    var button = this.div.querySelector('.button');
    // if found
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            self.entity.light.castShadows = !self.entity.light.castShadows ;
        }, false);
    }
};

So I am only getting one or the other button but never both:
image
image
But there are no Error showing up or anything…

Do you have any idea why this is happening?

Thank you for your time! <3

2

Hi @Sarrus4x4,

It seems your second script type definition is still UI, try updating your script like this:

(to share a project here in the forums, if it’s public, you can just paste your editor url)

var Ui_Shadow = pc.createScript('ui_Shadow');

Ui_Shadow.attributes.add('css', {type: 'asset', assetType:'css', title: 'CSS Asset'});
Ui_Shadow.attributes.add('html', {type: 'asset', assetType:'html', title: 'HTML Asset'});

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

    // append to head
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    
    // Add the HTML
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    
    // append to body
    // can be appended somewhere else
    // it is recommended to have some container element
    // to prevent iOS problems of overfloating elements off the screen
    document.body.appendChild(this.div);

    
    this.bindEvents();
};

Ui_Shadow.prototype.bindEvents = function() {
     var self = this;
    // get button element by class
    var button = this.div.querySelector('.button');
    // if found
    if (button) {
        // add event listener on `click`
        button.addEventListener('click', function() {
            self.entity.light.castShadows = !self.entity.light.castShadows ;
        }, false);
    }
};
3

Thank you, but I think it still does not work.

https://playcanvas.com/editor/scene/1709022

Are you able to View my Project like this?

4

Yes I can! The issue is that both elements are placed at the same height, so the 2nd element is hiding (overlaying) the first one.

The solution is to change slightly your CSS of the first element:

top: 30px;

image
image660×679 34.8 KB

5

But I did that from the start? :smiley: And I still get the same result :expressionless:

image
image

Something is fishy…

Thank you for your help!

6

As you can see here, the placement of the elements is different. So I dont think it has something to do with the CSS.

7

Well, you should be using a different class name for each element, your second .CSS file is overwriting the first class style because of that (.container).

1 Like
8

Yesss! Thank you so much <3
My coding is quite crappy, sorry

1 Like