Increasing entity scale based on slider position

Help & Support
1

Hey everyone,

In this project, we’re trying to increase /decrease an entity’s scale based on the position of a html slider. I was successfully able to get the position of the slider, and use it in the setLocalScale command, but it isn’t increasing linearly like I had hoped. My initial method was to get the value of the slider expressed as a fraction of the total(increaser) and add/subtract it to the current scale of the entity in question. Although this method does change the scale, if one was to constantly change the position of the slider(as shown in this video), the scale of the entity doesn’t increase/decrease as intended, for example when the slider is at 0, often the entity isn’t at it’s lowest possible scale. My code is as follows.

CameraPath.prototype.addUi = function() {
    let self = this;
    
    let style = document.createElement('style');
    document.head.appendChild(style);
    style.innerHTML = this.css.resource || '';
    this.div = document.createElement('div');
    this.div.classList.add('container');
    this.div.innerHTML = this.html.resource || '';
    document.body.appendChild(this.div);
    
    this.pathSlider = this.div.querySelector('.slider');

    
    // Change entity scale upon changing the slider position
    this.pathSlider.addEventListener('input', function() {
        let x = self.app.root.findByName("Image").getLocalScale().x;
        let y = self.app.root.findByName("Image").getLocalScale().y;
        let z = self.app.root.findByName("Image").getLocalScale().z;
        let increaser = self.pathSlider.value / self.pathSlider.max;
        
        if (self.previous < increaser) {
            console.log(increaser);
            self.app.root.findByName("Image").setLocalScale((x+increaser), (y+increaser), (z+increaser));
        }
        
        else {
            console.log(increaser);
            self.app.root.findByName("Image").setLocalScale((x-increaser), (y-increaser), (z-increaser));
        }
        
        self.previous = increaser;
        
    });
};

Could someone please help me out with this?

2

Hi @DevilZ,

I think you need to do it simpler by calculating the new scale in relation exclusively of the slider value:

    // Change entity scale upon changing the slider position
    const initialScale = self.app.root.findByName("Image").getLocalScale().clone();
    const amount = 2;
    
    this.pathSlider.addEventListener('input', function() {

        let increaser = (self.pathSlider.value / self.pathSlider.max) * amount;
        
        self.app.root.findByName("Image").setLocalScale(initialScale.x + increaser, initialScale.y + increaser, initialScale.z + increaser);
        
    });
3

Thanks @Leonidas! Helped a lot, works perfectly now.

1 Like