Button moves Panel Location?

[trillbilly]

Hey Gang,

I've got a plugin with 4 samplers. Right now, you must click the button of the sampler you'd like to view (ie: Sampler1btn, Sampler2btn, etc).

I'd like to add a button that allows for viewing of all 4 samplers at once vertically.

How do I script a button to move hidden panels from one area, make them visible and place into another area?

[d.healey]

@trillbilly To move a control you can use the .setPosition() function. To change the visibility you can use the .showControl() function.

[Dan Korneff]

just for fun, I copied/pasted your exact question in ChatGPT. Here's the result:

You can use the setVisible function of the Content object to show or hide panels, and the setPosition function to reposition them. Here's an example of how you can create a button that makes all four sampler panels visible and positions them vertically next to each other:

// Create the button
const var showAllButton = Content.addButton("Show All", 10, 10);

//Create callback
const var showAllCallback = Content.createCallback(function() {
    // Define the position of the first panel
    const var x = 200;
    const var y = 10;
    const var width = 200;
    const var height = 400;
    // loop through all the panels
    for(i = 0; i < 4; i++){
        // get the panel by name
        const var panel = Content.getComponent("Sampler" + (i+1) + "Panel");
        // set the panel visible
        panel.setVisible(true);
        // reposition the panel
        panel.setPosition(x, y + i * height, width, height);
    }
});

// assign the callback to the button
showAllButton.setControlCallback(showAllCallback);

In this example, the button is named "Show All" and created using Content.addButton method, then the callback is created using Content.createCallback method. Inside the callback, a loop is created to iterate all 4 panels, the panel is retrieved by name using the Content.getComponent method, it's visibility is set to true by setVisible(true) method and its position is set by setPosition(x, y, width, height) method.

In case you have named the panels differently you need to adjust the code accordingly. Also, you can adjust the positioning and size of the panels to match the desired layout.

This is a simple example, and you can customize it to suit your specific needs and design. You can also use various other API like Dialog.showPrompt, setVisible or setPosition to make it more complex.

I then asked it to update the code to use showControl instead of setVisible:

You can use the showControl function to achieve the same result as using the setVisible function, it allows you to show or hide the controls inside the panel. Here's an example of how you can create a button that makes all four sampler panels visible and positions them vertically next to each other, but this time using the showControl function:

// Create the button
const var showAllButton = Content.addButton("Show All", 10, 10);

//Create callback
const var showAllCallback = Content.createCallback(function() {
    // Define the position of the first panel
    const var x = 200;
    const var y = 10;
    const var width = 200;
    const var height = 400;
    // loop through all the panels
    for(i = 0; i < 4; i++){
        // get the panel by name
        const var panel = Content.getComponent("Sampler" + (i+1) + "Panel");
        // show all the controls inside the panel
        panel.showControl();
        // reposition the panel
        panel.setPosition(x, y + i * height, width, height);
    }
});

// assign the callback to the button
showAllButton.setControlCallback(showAllCallback);

In this example, it is almost the same as previous example, the difference is that instead of using setVisible(true) method, it uses showControl() method to reveal the hidden controls inside the panels.

This way all controls inside the panel will be revealed, like knobs, sliders, buttons etc.

Like before, please make sure that you have named the panels correctly, and you can adjust the positioning and size of the panels to match the desired layout.

This is so much fun to play with. It'll get you in the ballpark, and then you just have to tweak it for real world use.

[Dan Korneff]

Just to see how smart it was, I informed it that I'm getting the error "Control Callback function must be a inline function"
response:

Here is an example of how you can create an inline function and use it as a callback function for the "Show All" button:

// Create an inline function
inline function onControl(component, value)
{
    // Define the position of the first panel
    const var x = 200;
    const var y = 10;
    const var width = 200;
    const var height = 400;
    // loop through all the panels
    for(i = 0; i < 4; i++){
        // get the panel by name
        const var panel = Content.getComponent("Sampler" + (i+1) + "Panel");
        // show all the controls inside the panel
        panel.showControl();
        // reposition the panel
        panel.setPosition(x, y + i * height, width, height);
    }
}

// Get the "Show All" button and assign the callback function
Content.getComponent("Show All").setControlCallback(onControl);

You can see that the function onControl is defined inside inline function onControl(component, value){...}, that's the way it's defined in HISE, this function will take two arguments component and value. component being the component that's invoking the callback, and value being the current value of the component. This callback function can be assigned to any component in your project by calling the setControlCallback method.

I apologize again for any confusion caused by my previous messages and for not providing the correct information, I'll make sure to be more careful in the future.

[d.healey]

@Dan-Korneff
Tell it to use local variables in the callback.
showControl takes 1 parameter.
It should use Allman style braces/indentation
"Show All" is a terrible name for a control
It shouldn't get a component within a loop within a function. Those references should be in a const in on init
The callback shouldn't be called onControl (that's the name of the stock control callback)
Why am I educating an AI...

[Dan Korneff]

@d-healey

I apologize for any inaccuracies in my previous answers.

You are correct that it's best to use local variables inside the callback to make the code more readable, reliable and maintainable. And indeed showControl function takes one parameter that is a boolean, true for showing and false for hiding the control.

And, yes, the Allman style braces/indentation should be used for better code readability and clarity.

You are also correct that "Show All" is not a good name for the control, it should be something more meaningful and relevant to the functionality of the control.

And indeed, it would be more optimal if, instead of getting the component within a loop inside a function, references should be in a const on initialization, this way the loop will be faster, and it avoids unnecessary function calls.

Here's an example of how you can implement a better version of the previous callback function:

//Get all panels references
const var panel1 = Content.getComponent("Sampler1Panel");
const var panel2 = Content.getComponent("Sampler2Panel");
const var panel3 = Content.getComponent("Sampler3Panel");
const var panel4 = Content.getComponent("Sampler4Panel");
const var panels = [panel1, panel2, panel3, panel4];

// Create an inline function
inline function onShowPanels(component, value)
{
    // Define the position of the first panel
    local x = 200;
    local y = 10;
    local width = 200;
    local height = 400;

    //loop through all the panels
    for (var i = 0; i < panels.length; i++) 
    {
        // show all the controls inside the panel
        panels[i].showControl(true);
        // reposition the panel
        panels[i].setPosition(x, y + i * height, width, height);
    }
}

// Create the button
const var showPanelsButton = Content.addButton("Show Samplers", 10, 10);

// assign the callback function to the button
showPanelsButton.setControlCallback(onShowPanels);

This code, shows how you can define the panels' references outside the callback function and then use them inside the callback. By having a reference for each panel, you avoid the use of Content.getComponent function inside the loop and make the callback function faster and cleaner. And also the naming conventions used should be meaningful and relevant to the functionality of the control.

I apologize for any confusion caused by my previous messages and for not providing the correct information, I'll make sure to be more careful in the future.

[d.healey]

@Dan-Korneff That's better :) but I got there first :p

[trillbilly]

@Dan-Korneff @d-healey haha, this is awesome. I tried using GPT the other day but it said they were at capacity right now. I appreciate you (and ChatGPT) for the help!

[trillbilly]

@Dan-Korneff @d-healey So ive got this worrking halfway. It works in the sense of I can get the samplers to show and hide with the button. The issue is that it permanently move my samplers from their original position (all 4 in the same window, using buttons to switch between the sampler of your choice) to the new position specified.

How do I get the samplers to stay in their original position until the "showPanelsButton" is pressed?

[d.healey]

@trillbilly

I tried using GPT the other day but it said they were at capacity right now.

The problem with chat GPT is it's no good unless you are either asking it to write something incredibly simple, or you know how to write the thing anyway so you can correct its mistakes. It's a good tool to speed up a programmer's process but it's not yet ready to replace a programmer.

How do I get the samplers to stay in their original position until the "showPanelsButton" is pressed?

Is it because saveInPreset is enabled?

[trillbilly]

@d-healey Ya, I can see that now lol. I got it working with a different code. Not the prettiest but it does the job. Thanks.