Update Sliders from JSON

[HISEnberg]

HiseSnippet 1532.3oc6Y0raabCDlqjXhkhSZRQRaOtHnsvAHHvxIMs.EnVwVVoBw+HX4FmdJfZ2QVLlK4BtbcrZQA5wdqOB8UpOB8QHuAsj6tRhqjrirfc9qQGD.mgb3LeC47C2VRgGDEIjHmx60ODPNKha2mq5sdOBkiZVG4r.dOHR87pn05GRhh.ejiSwGa35TtDJ42qVcMBiv8fQjPnmJndvlz.pZD0V0dBkwZP7g8nAVy9A0Z5I3qKXhXslTDuLJj3cH4.XahYZEvHmKsgOUIjsUDEDgbJslvue6dhWxSm+SoQzNLvLnJpsVPojaHX9FM1PEsdOJyu0.KNBoEZqQ1ewT6+l3sn9zgzGgCWOgg6nUXiGNExqdEyodUsUuksTuonRNVpToTU5F31dRZnZDGi9bEbStBjcIZX2VURmKpvm4fWWnmAWcu.xgPCodvvUrzCWd465p+6NeeEJ2iE6CKc65fGiHIJpfGcuWDcaadazsK3ohdjzqG8HXbtqKB5H5HNNit9W2XtmQPtB91BErCeo6T4WqTtxuUwcbVc6NUdFkWJXLPNU1lCPxSagKwiC5.x65dDgECCmnFUy6pvmrqx9jjWJVZMQAuImp1ID3mz4KTlCP6VKkoU5opRbpWOyol.cqINFQ8MW9VOnSJTWEkn2V2npgFWFWKSFsYTePlHgqfeBuSKsWLXBAz7LJfUFS.0DmQAb+ILAD5mZVmnHly4YXiFuBAohZbEN0gizAMRO0WFWGhNTIB0WS0fTnfaPRmKMqv2wi12urVe6AADMOrSA8.pBBhLlwtvQfrSk5.iz232FteKNSPs0l8C1a1OWSAGqxlacY+8AExG5RhYpmNt2IRAgso+RN7Jf56yfVhHp4vctYG2sK8XyIuuBEoOTlHtVhvXMdcY7Z.S7RThgNRUnQsXwGP4I5LniDnQ7B11JN0VuZlstIoCvxL0M6vlzT+ZaSsdlodIbRrca4VdlNsYIX+oggWKACMNnFR.PmA3p1eNDtvXWsC2FXp8W0NiXfsp96jogAUvM.vuiNGVNbnzLco4DNKU6E0PSlaPmUR3GyHp7opL4myXX.B67Clb.bM.02N+84V9qYUEuAtEU40a55Xgoni5PFWD5XVV+qhSCaLRAKga7rKlT71a+BmPQWKlj6VOBjmKEdENyEd4T7hnPK76bEZ8w6ReHbWJW4xWNc+W.2F395czr0WKYf6fhBN4qRFgS3bfoqGMBT1LLRnI2GN11K2NPHT8n7Cx45KNy1U0yba.mfuOw9d6b9bWQrRi.aQTxjbqaGGzVGHwCxfxnAkYkMdYy3AHZxf+U+KiYUyXmLlUGvz970sRwgqf2mbDjDvLABtUx3tBYf6iAc.SC.cZd5+97On4NdJsJrmjviBEQPUaIOFuUr4UGTw77SOkTtYYLuFZyyZdKTa.wUrI1hvyIL83bRZKp0Y3+Y0M3DsitMnsF+ch7zFqA6rOqzJlEA6S8U8pZuvQjWwl7ORj9Z+hWtHMmZ9jpevz396A4SxETo7.crMMHjAavOR2xflhQG+TcqWI8nLfZ9qSaI3hvdBNMmidWPGE3fCfbmelpA8HkxTY7PJ2r1t.CHQfcSZapq8gH03DLmXw4T.1u.mpttlX.tu+VGPw+2TS8oe6SGB7cau3mi0ghWwMwU591wW9lHu9a3ZGxZz5SRJWZXuU1kPMuMb8pUmVsCuZ0oW6fNj3Ypgq4MAYoOlf7iAZuHZ3pvjXTkr2yJqkqEyF513Y4tJUH6KS37G3QOWenDBIRXOQKFo+RQDSsH6p0w651gI7Nz7.eS9F+gopvZlYrjWV7h44SAfOmpl3MRzrgeLg45QzQSV62svlB18zkXoafjDo.oalKrLtwwsYhwZXdaP8Rg7Py6Km9N4idSaqGlN2izZ8sCFPOeCBW2Pe3ikZIl0T7WWqDua6t9PYOBHdRwy8RuIYh.rPBEM1xS93rkwaYF6N4Grx7b7zm64kWTSrvUl2Ed+4cgOXdW32LuK7gy6B+14cge2qeglr9OJVIBRyggPa0Zij.KNNouLPxsdz+AX3TEFG

I have a project which will include ~20 effects, each with only 3-5 knobs. I plan to create 5 slots on the user interface and allow the user to select which effect goes where. I plan to eventually create a preset browser (or Combobox) which will allow the user to drop in the effect they desire in a specified slot on the user interface.

My idea is to simplify the process by creating panels on the UI with 3-5 knobs each on them. When the user selects a new effect, the sliders are updated according to the effect they selected.

I wanted to make it simple for this example, so currently I have one HardcodedMasterFx (FxSlot1) and a Combobox (CmbEffect1), with two networks (Delay and Reverb) to choose from. Currently, I am trying to update the sliders on my UI (KnbParam1 & KnbParam2) according to the networks loaded in FxSlot1.

My thinking was to create an archive of the necessary information (text, min, max, middlePosition,etc.) for the sliders in a JSON format in a separate script (EffectsArchive.js), and call the parameters when a new network is chosen in the Combobox.

So far some things seem to be working for me:

1. The UI knobs are linked to the HardcodedMasterFx according to the index.

var currentEffect = FxSlot1.getCurrentEffect();
var effectName = CmbEffect1.getItemText();
var params = EffectParameters[effectName];//Effect Parameters is pulled from the varialbe in EffectsArchive.js
var paramProperties = FxSlot1.getParameterProperties();

//Connect UI Knobs to Fx Slot
inline function onKnbParam1Control(component, value) {
    if (currentEffect) { 
        currentEffect.setAttribute(0, value);
    }
}
Content.getComponent("KnbParam1").setControlCallback(onKnbParam1Control);

inline function onKnbParam2Control(component, value) {
    if (currentEffect) { 
        currentEffect.setAttribute(1, value); 
    }
}
Content.getComponent("KnbParam2").setControlCallback(onKnbParam2Control);

2. The Combobox pulls up the correct effect:

//Assign Combobox to FxSlot1
inline function onCmbEffect1Control(component, value){
	local effectName = component.getItemText();
    FxSlot1.setEffect(effectName);
    currentEffect = FxSlot1.getCurrentEffect();
	updateKnobsForEffect(effectName);
}
Content.getComponent("CmbEffect1").setControlCallback(onCmbEffect1Control);

3. Then, as far as I can tell, the UI knobs (KnbParam1 & KnbParam2) should be updated according to the data pulled from the JSON.

//Update UI Knobs according to JSON
function updateKnobsForEffect(effectName) {
	var params = EffectParameters[effectName];
	    Console.print("Updating knobs for: " + effectName);

// Update KnbParam1
    if (params && params.length > 0) {
	    Console.print("First param text: " + params[0].text);
    
        var param1 = params[0];
        Console.print("Setting KnbParam1 - Text: " + param1.text + ", Min: " + param1.min + ", Max: " + param1.max + ", Middle Position: " + param1.middlePosition);
        KnbParam1.set("text", param1.text);
        KnbParam1.set("min", param1.min);
        KnbParam1.set("max", param1.max);
        KnbParam1.set("middlePosition", param1.middlePosition);
        KnbParam1.set("mode", param1.mode);
        KnbParam1.set("stepSize", param1.stepSize);
        KnbParam1.set("suffix", param1.suffix);
        KnbParam1.setValue(param1.defaultValue);

// Update KnbParam2 with the second parameter, if it exists
    if (params.length > 1) {
        var param2 = params[1];
        Console.print("Setting KnbParam2 - Text: " + param2.text + ", Min: " + param2.min + ", Max: " + param2.max + ", Middle Position: " + param2.middlePosition);
            
        KnbParam2.set("text", param2.text);
        KnbParam2.set("min", param2.min);
        KnbParam2.set("max", param2.max);
        KnbParam2.set("middlePosition", param2.middlePosition);
        KnbParam2.set("mode", param2.mode);
        KnbParam2.set("stepSize", param2.stepSize);
        KnbParam2.set("suffix", param2.suffix);
        KnbParam2.setValue(param2.defaultValue);
        }
    }
}

However, even though the right values are printed in the Console, I don't see these changes reflected on my UI. The knobs (KnbParams 1 & 2) remain in a range of 0.0 to 1.0 instead of updating). Have I missed something here?

In short, I am wondering if anyone can offer advice on how to tackle this operation: How to dynamically change sliders according to Effect Slots. More generally, is it even good practice to update UI components like sliders and buttons according to different elements in the ModuleTree? I can't foresee any issues with this and, as is the case here, it would certainly go a long way in reducing the amount of sliders and panels I need to add into my project. Any advice is appreciated if someone has experience with this.

[HISEnberg]

@HISEnberg Just a friendly bump on this ^

[d.healey]

@HISEnberg Too much for my little brain to handle, but a few pointers.

Avoid var and use const or local. Use inline functions rather than functions, except for callbacks.

[HISEnberg]

@d-healey Thanks, I will try this. I was sticking to var since I am updating the sliders dynamically, but I could see this leading to some of the issues I am experiencing...

[d.healey]

@HISEnberg

I meant for these

var currentEffect = FxSlot1.getCurrentEffect();
var effectName = CmbEffect1.getItemText();
var params = EffectParameters[effectName];//Effect Parameters is pulled from the varialbe in EffectsArchive.js
var paramProperties = FxSlot1.getParameterProperties();

You can also use reg

[HISEnberg]

@HISEnberg Also just to clarify the issue, you can see that the slider values are not updating