Trigger animation only on value changes

[Mighty23]

I'm looping a filmstrip animation following the example in the documentation. I would like to be able to change this type of animation so that it triggers only when the value of the knob changes, while at the moment the animation is more intense at higher values ​​​​and stops when the value is at zero.

Current Implementation:

// ANIMATION
const var Panel1 = Content.getComponent("Panel1");

reg index = 0; // index of the filmstrip 
reg total_frames = 5; // total frames in the filmstrip
reg frame_height = 1000; // the height(y) of each frame


Panel1.loadImage("{PROJECT_FOLDER}filmstripFire.png", "dot");

Panel1.setPaintRoutine(function(g){
    
    g.drawImage("dot", [0, 0, this.get("width"), this.get("height")], 0, index * frame_height);
});

Panel1.setTimerCallback(function(){
    index = (index + 1) % total_frames;
    this.repaint();
});

inline function onknbFeedbackControl(component, value)
{
	script_fx1.setAttribute(script_fx1.Feedback, value);
	// trig animation
	if (value) //  >> I need a new logic << 
	    {  
	        Panel1.startTimer(10);
	    }
	    else
	    {
	        Panel1.stopTimer();
	    }
		
};

[aaronventure]

I recommend using a value change broadcaster.

[Mighty23]

@aaronventure Thanks for your reply but after reading the documentation I don't think I'll be able to make it happen. So I have to choose an option that I can be able to understand and reuse.

My goal remains to trigger the animation only when the value changes:

// ANIMATION
const var Panel1 = Content.getComponent("Panel1");

reg index = 0; // index of the filmstrip 
reg total_frames = 5; // total frames in the filmstrip
reg frame_height = 1000; // the height(y) of each frame

Panel1.loadImage("{PROJECT_FOLDER}filmstripFire.png", "dot");

Panel1.setPaintRoutine(function(g){
    g.drawImage("dot", [0, 0, this.get("width"), this.get("height")], 0, index * frame_height);
});

reg numCycles = 30; // Number of cycles to complete
reg currentCycle = 0; // Current cycle counter

Panel1.setTimerCallback(function(){
    index = (index + 1) % total_frames;
    this.repaint();

    // Check if we completed a cycle
    if (index == 0) 
    {
        currentCycle++;
        // Stop timer after completing the specified number of cycles
        if (currentCycle >= numCycles)
        {
            Panel1.stopTimer();
            currentCycle = 0; // Reset cycle counter
        }
    }
});

// Variable to keep track of the previous knob value
reg prevKnobValue = -1;
inline function onknbFeedbackControl(component, value)
{

	script_fx3.setAttribute(script_fx3.Feedback, value);

	// trig animation
	if (value != prevKnobValue)
	    {  
	        Panel1.startTimer(100);
	    }
	    else
	    {
	        Panel1.stopTimer();
	    }
	
		// Update the previous knob value
		prevKnobValue = value;
};
Content.getComponent("knbFeedback").setControlCallback(onknbFeedbackControl);

in this version the animation is triggered when the vst starts and (sometimes) does a shorter animation when the values ​​change. I could say I'm close to the solution but I can't make the animation "longer" when the "feedback" value changes.

[ulrik]

@Mighty23 if you remove this from your "onknbFeedbackControl", will it work?

else
{
    Panel1.stopTimer();
}

[Mighty23]

@ulrik This solves the problem completely, thanks. By commenting that line I can get the desired result