Change filmstrip on button click?

[tomekslesicki]

Hey guys! I'm wondering if it's possible to change an image of a slider or panel on button press?

I've created some buttons that load the presets. I'd like to change the filmstrip of a slider according to the preset selected so that the graphics match the other visual changes on the interface.

[Lindon]

@tomekslesicki
mycomponent_name.set("filmstripImage", "{PROJECT_FOLDER}my graphic.png");

[tomekslesicki]

Hey @Lindon , thanks! This is what I'm using and it kind of works but the images get updated only after I compile the script again.

[ulrik]

@tomekslesicki can you use "mycomponent_name.changed()"?

[tomekslesicki]

@ulrik Thanks, but still no luck, though! For some reason, the images still change only after I compile again

[ulrik]

@tomekslesicki Ok

[d.healey]

Post a snippet

[tomekslesicki]

// Knobs //

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


// BG //

const var BG_Front = Content.getComponent("BG_Front");
const var BG_Back = Content.getComponent("BG_Back");
const var Articulation = Content.getComponent("Articulation");


// Change articulation //


inline function onArticulationControl(number, value) 
{
    if (value == 1) // Sustains
    {
        BG_Front.setImageFile("{PROJECT_FOLDER}wallpaper_piano_sustains.png", true);
        BG_Back.setImageFile("{PROJECT_FOLDER}wallpaper_piano_sustains_2nd.png", true);
        Attack.set("filmstripImage", "{PROJECT_FOLDER}attack.png");
        
        Attack.changed();
        BG_Front.changed();
        BG_Back.changed();
    }
        if (value == 2) // Shorts
    {
        BG_Front.setImageFile("{PROJECT_FOLDER}wallpaper_piano_shorts.png", true);
        BG_Back.setImageFile("{PROJECT_FOLDER}wallpaper_piano_shorts_2nd.png", true);
        Attack.set("filmstripImage", "{PROJECT_FOLDER}attack_b.png");
        
        Attack.changed();
        BG_Front.changed();
        BG_Back.changed();
    }
}
Articulation.setControlCallback(onArticulationControl);


// Sustains
inline function onArticulationButton1Control(number, value) 
{
        Articulation.setValue(1);

}

ArticulationButton1.setControlCallback(onArticulationButton1Control);



// Shorts
inline function onArticulationButton2Control(number, value) 
{
        Articulation.setValue(2);
}

ArticulationButton2.setControlCallback(onArticulationButton2Control);

[d.healey]

Export >> Export as HISE Snippet

I don't want to have to build a project to test your problem, if you give me the snippet I can quickly check it out on my system and only have to replace the image files with my own.

[tomekslesicki]

@d-healey There you go!

HiseSnippet 1214.3ocsWssaiaCDkxwJM1sdQWf1WKD7SN.oIwdy1TfEAqVeKvcyEi3zfE8EuzRz1DQhTPhJYcSCPequ1Og9ozOo8OnkWjrjcjcrSSEBBLIm4LmY3vgC65SsPAATefVgKm3g.ZekduID13FigXBnSSfVI8NtvQnd2hYViA0m3ACBP1.MsMNVHhVg7.42meacnCjXgRlB.thhsPmfcwrjY6Z9driSanM5RraJoOvriEkzf5PC4zYC88AdPqq4l9LnPrb5.sMaYiYT+dLHCEvkoN0dRuwzaIJ4uBGfG3fDCpB5wARMMnwXric2XWM..zx2Mww2P43ei9oXa7z4SB.esbAiDMRGCzxMKkxOCkptHJ0l5XK.XAzSKE8xqn2K06Y4i8XIqH31Wp2gvP9Cg7vdZZojEj6W2TuAkKAgsqK7ZTae9foZT4vWc3NG75C29MkJVp3d6Y7dBcPfwd6IFx2JBXF2.8MdGiw2GLNxHFoQHVCpqGkvGTorZ4xJPjvT+3GfQ8i6Ks8BQIV.INorsOCaE5.YXJYwLHkPS4gjI7MQxHjALMJBpksApGxXTR0UxNQxtD5pjn1ZfVsTjGSbvDjwvPhkj0TRZ4EH5ScpPBcGf72gaamPz1FkJdWohF7O7PiJx4LN5Hipay8YidgALdFcfRfH4DewQ9cCPL4I81XGTkx208hy+oVMtre6yOoYqKt+VniiGzC422CCIz9AQ3sqGYT4cLX9bB7lDTUYEBLqTdH1wMfwSHkvyE9AfCURKfJMHO.NK49ockzBMk+KXw5Yo38IhLSrplJVMl5yd9hTRzdFiS8G7LGo3QC9eoSvDDJJIqA2cFvgrRlofoN1mjgs7j2niNOVNrzYliRWIjoRUkQuW7uL.9w49rLXlJFwa8qhKT6o6B0DFcANPsU0ApM0ARQyynLz4jJaW7thEJdew4WY3vrVJBHGjeVqJtl1eIpMm+GIG+lqYuZbyU6pQKU0xTBRIcHX14dnnwIWdVMiKOAQkaE2xGQPtnL4knuH5RzdNXajO.yAYKc0IFfj7o6cArHsUQeo1eqdF4UwPoq8eAlZyynO+VvJ3OuXFndfWYB94NMgLnnIin.EO3wKVwvh8Hslna3croZ4nfdSTv0LpG2UldwEP6KT1tTjskEqjltndbEFvmh89Iw+3VrMa7Thr0eXNFgGMNosv+72L40+h50aG8UunpH.OO2V197mlZx+9WLmLcvGwlyRw+xYdJ96mXNaIZf12ourRzKiZOZRjLDtaNYHLd66CwbTWylOLlepQ9PaL8XeZnW7QimpwqkkwMwOUiu0plrtvrlrrnKLYmDT17l3pIZa.dX2y7d3o1ByLai8hWvDsfv9o6fVzkLI.ylj9.3Zzs+9Y1selErVQ59R8thmfkMeykAe4mw++luQucpjdqgCQVrDxlWu8GdpOTZMnxEzPFlL5TH+LoH64rP2d7mOZgDc9SPNAhrkbhhvpw6GmX0CQrkC9G9WzhUEi0hVrZ7h7DMKeZeKUoWwqy1RNCmSDYwpB5mJFaLstuf2t7mL12xRDH99p.P1ZTas03UqsFGr1Z750VieXs03v0ViebIZHde96BYTW0wB9DcaIujSSqEAxypjYff+EnQR+NF

[ustk]

@tomekslesicki You'll probably need to draw the images in panels:
https://docs.hise.audio/scripting/scripting-in-hise/scriptpanel.html#the-paint-routine

[d.healey]

Ok the code works fine (with a slight modification) but it's not well structured.

The button is changing the value of the slider but changing the value (using setValue()) doesn't trigger the slider's callback which is where you are changing the image. To do this you need to do as ulrik suggested and put Articulation.changed() after you set the value.

If all your button presses are doing is changing the value of a slider, why do you have the slider at all?

[Christoph Hart]

@tomekslesicki said in Change filmstrip on button click?:

Hey @Lindon , thanks! This is what I'm using and it kind of works but the images get updated only after I compile the script again.

There are a few properties which are not updated on "runtime", but only on initialisation (the most obvious being saveInPreset) and it might be possible that the filmstrip image property is one of them.

Be aware that HISE will just embed the image files which are used by the project, so if you don't click that button after loading the project and make it show once before export, the image resources will be missing in the compiled plugin (which is one of the reasons why I didn't allow changing strips on runtime).

[Lindon]

@tomekslesicki - given what Christoph says, and your limited number of "states" you are probably better off doing something like this:

> // Change articulation //
> 
> 
> inline function onArticulationControl(number, value) 
> {
>     if (value == 1) // Sustains
>     {
>         BG_Front.setImageFile("{PROJECT_FOLDER}wallpaper_piano_sustains.png", true);
>         BG_Back.setImageFile("{PROJECT_FOLDER}wallpaper_piano_sustains_2nd.png", true);
>         AttackA.showControl(true);
>         AttacKB.showControl(false);
>         
>         AttackA.changed();
>         BG_Front.changed();
>         BG_Back.changed();
>     }
>         if (value == 2) // Shorts
>     {
>         BG_Front.setImageFile("{PROJECT_FOLDER}wallpaper_piano_shorts.png", true);
>         BG_Back.setImageFile("{PROJECT_FOLDER}wallpaper_piano_shorts_2nd.png", true);
>         AttackB.showControl(true);         
>         AttackA.showControl(false);
>       
>         AttackB.changed();
>         BG_Front.changed();
>         BG_Back.changed();
>     }
> }
> Articulation.setControlCallback(onArticulationControl);

[d.healey]

Another option is to have duplicate controls, each with its own filmstrip, then just hide the one that you don't want to show. But like I said before, your code works, you were just missing a line. Whether it will still work when exported as a plugin though I don't know.

[tomekslesicki]

@d-healey , @Christoph-Hart , @ulrik , @Lindon , thanks so much for your help! I managed to get it to work thanks to your suggestions Cheers!