Changing attribute variable at runtime from code

Help & Support
#1

Hi

I’m in this mobile AR app I’m developing and I have an UI-button that I have hooked up to change the size/with of the model rendered over the AR marker.

The button fires an event, the ArMarker script listens to it and changes it’s attribute (this.width) value accordingly. I console log this value and it is indeed changed.

But then in the update method, I log the same value, and it is never changed there. I feel I must be missing something fundamentally, like, can I not change script attribute values from code? or is this some type of “by reference” problem? this is a number though, no complex datatype.

stripped code:


ArMarker.prototype.onToggleScale = function() {
       
    this.width = 1.5;
    console.log("setting this.width:" + this.width);
};

// update code called every frame
ArMarker.prototype.update = function(dt) {
    if (this.active) {
        var timeSinceLastSeen = (Date.now() - this.lastSeen) / 1000;

        if (timeSinceLastSeen > this.deactivationTime) {
            this.hideChildren();
            this.active = false;
        }
        
        console.log("this.width:" + this.width);
        
         if (this.width > 0){
             this.entity.setLocalScale(1 / this.width, 1 / this.width, 1 / this.width);
         }
    }
};
#2

How are you setting up the listener for the event?

#3

Hi Steven, thanks for taking a look.

Like this:

   
// initialize code called once per entity
ArMarker.prototype.initialize = function () {

    // Other code not included....

    this.app.on('marker:toggleScale', this.onToggleScale);
};

But my log messages confirm the event is reached.

#4

@yaustar is most probably correct in guiding you towards the issue. Most probably your this in onToggleScale points to the button element, and not the ArMarker. When you are hooking the event, you need to pass 3 arguments: the event name, the function callback to call when event happens, and the context under which to call that callback function. If you don’t pass the context scope, it will use the one which initiated the event - the button. Which will result in button-element.width = 1.5 and not ArMarker.width = 1.5.

this.app.on('marker:toggleScale', this.onToggleScale, this);

Edit:
Saw your post after posting mine. Updated the example to match your event hook.

2 Likes
#5

That was exactly it. Thank you very much both!

1 Like