Images fade in on knob turn?

[johnmike]

Question of the day…possible to make a few images fade onto interface as I’m turning a knob? Like if knob is zero the interface is clear…but one image could “fade in” at 25% another at 50% and a 3rd at 100%…webview? Lottie animations?

[Christoph Hart]

@johnmike that can be doable with some math trickery and setting the alpha channel of an image. If you want a head-start, you can look at the C++ code of the scriptnode xfader logic classes as they do pretty much the thing you want, then try to hack that back into working HiseScript code.

https://github.com/christophhart/HISE/blob/d3f364f5c2832770a8bade634607e0f70b55f9df/hi_dsp_library/dsp_basics/logic_classes.h#L487

Bonus trick from my sleeve of undocumented HISE cheats: if you want to do this with a single panel, you can set the colour before drawing an image and it will pickup the alpha value from the colour to set the transparency.

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

Panel1.loadImage("{PROJECT_FOLDER}myImage.png", "img");

Panel1.setPaintRoutine(function(g)
{
	g.setColour(Colours.withAlpha(Colours.black, Math.random()));
	g.drawImage("img", this.getLocalBounds(0), 0, 0);
});

[d.healey]

@Christoph-Hart said in Images fade in on knob turn?:

Bonus trick from my sleeve of undocumented HISE cheats

Pretty sure i showed this in a video too

[johnmike]

@d-healey which video? I’ll go check it out!

[johnmike]

@Christoph-Hart thanks! Will definitely check that out!

[d.healey]

https://youtu.be/KGOB5woRTvo?si=1ab1_rHwpsNMdsSn