Best way to destruct UI panels?

[d.healey]

I do it with a single panel + paint routine + mouse callback. What's the advantage of multiple panels in this use case?

[Tania Ghosh]

@iamlamprey hmm.. I know. I always love to see what everyone is doing. It gives me the potential to learn HISE properly.

[A Former User]

@yall I can post a section of my frankenstein code

/*
First we create a Viewport so we have access to a scroll bar (we can do this with scripting but I just drew it in)
Then we add a big "master panel" inside the viewport that we'll fill with all of our buttons.
Any changes we make to the Viewport will also apply to the child components (such as hiding)
*/

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

const var expHandler = Engine.createExpansionHandler();

//Grabs the names of each expansion as a string and pushes them to an array.

const var expansionNames = [];

expansionNames.push("No Expansion");

for (e in expHandler.getExpansionList())
    expansionNames.push(e.getProperties().Name);

//Populate List

const var expButton = []; //I used an array to store a "button" for each expansion, you could probably do one giant panel with XY coordinates.
const var expButtonHeight = 55; //The height of a single Library Button

//We'll make use of the Panel.addChildPanel(); function to populate our list.

//"Libraries" Title at the top of the list (not a button)

const var expPanelTitle = Panel_ExpansionsItemHolder.addChildPanel();
expPanelTitle.setPosition(0, 0, Panel_ExpansionsItemHolder.getWidth(), 20);
expPanelTitle.setPaintRoutine(function(g)
{
    g.fillAll(0x1B1B1B);
    g.setFont("Arial", 12.0);
    g.setColour(Colours.white);
    g.drawAlignedText("- Libraries -", [0,0,Panel_ExpansionsItemHolder.getWidth(),20], "centred");
});

/*
Crawling the expansion list and populating with buttons + images.

Note that these images are filmstrips so this has mouseover/click down animations.

They also call custom functions on click down, which I won't put here. Basically these custom functions handle all the expansion-loading, image-swapping and sampler-setting-uppering.
*/

for (i=1; i<expansionNames.length; i++) //We start at 1 because 0 is "No Expansion"
{
    Panel_ExpansionsItemHolder.set("height", 20 + expansionNames.length * expButtonHeight - 55);
    expButton[i] = Panel_ExpansionsItemHolder.addChildPanel();
    expButton[i].setPosition(0, 20 + i * expButtonHeight - 55, Panel_ExpansionsItemHolder.getWidth(), expButtonHeight);
    expButton[i].loadImage("{PROJECT_FOLDER}" + expansionNames[i] + "_button_base.png", "panel_" + expansionNames[i]); //Appends a bunch of strings to return the full file name.
    expButton[i].data.imagefile = "panel_" + expansionNames[i]; 
    expButton[i].data.expansionName = expansionNames[i];
    expButton[i].set("allowCallbacks", "Clicks & Hover");
    expButton[i].setPaintRoutine(function(g) 
    {
        g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 0); //My panels were 185 wide, you could use getWidth() but I got lazy :P
    });
    
    expButton[i].setMouseCallback(function(event)
    {
        if (event.clicked)
        {
            expHandler.setCurrentExpansion(this.data.expansionName);   
            load+this.data.expansionName; //This is our custom function loadSomething();
            this.setPaintRoutine(function(g) 
            {
                g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 110); //Offsetting the filmstrip to the click-down animation
            });            
        }
        
        else if (event.mouseUp)
            this.setPaintRoutine(function(g) 
            {
                g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 0); 
            });                  
            
        else if (event.hover)
            this.setPaintRoutine(function(g) 
            {
                g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 220); //Offsetting the filmstrip to the hover animation
            });    
            
        else
            this.setPaintRoutine(function(g) 
            {
                g.drawImage(this.data.imagefile, [2, 1, 185, 55], 0, 0); 
            });         
    });    
};

/*It's probably not the most efficient or performance-considerative, but it works for now. I should also probably add set("isMomentary") to the "buttons" so they don't wig out, as well as remove "storeInPreset".

I'm also hiding this whole viewport with a simple button that sets Viewport.showControl(value) and offsets the main GUI panel by 180 or whatever*/

[A Former User]

@d-healey I'm using image files, it could probably still be done in a single panel using some cursor XY trickery but this is easier for my noob brain to wrap around :face_savoring_food:

[d.healey]

@iamlamprey said in Best way to destruct UI panels?:

@d-healey I'm using image files

Me too, downloaded from a server

[A Former User]

@d-healey And that's all a single panel and you're using some XY position detection thing in your callback? Fancy

[d.healey]

@iamlamprey It's not really anything fancy

    Panel1.setMouseCallback(function(event)
    {
        var x = Math.floor(event.x / this.getWidth() * this.data.cols);
        var y = Math.floor(event.y / this.getHeight() * this.data.items.length / this.data.cols);
        var v = x + y * this.data.cols;
        
        if (event.clicked)
        {
            this.setValue(v);
            this.changed();
        }        
    });

[A Former User]

@d-healey Nice! What is this.data.cols?

Then just do stuff when value = 1?

[d.healey]

Here's full example.

HiseSnippet 1218.3ocsWs1SqTDFdVf0PqRhGievONgDS1dnT1hbNdh0SNUJfV0BMTNnIFCYX2osSX6LM6NEXkfZh+w7Wf+V7ef9Nyr25EHjlv9g1NuWe1248V6FJ7nQQhPjUoyhGSQVejcuXtbXqgDFG09.j0mYOHj4uc.IVLQt8X36AghIbez9wiIQQTejk0peqRZqRqgzO+661mDP3dzbRHz4BlG8GYiXxbpca9CrffiH9zyXiJH8dMa6I3sDAhI.xV01EMl3cEY.8XhRrUrQVevg9LoHrmjHoQHq01W3G2an3FtQ9yYQrKCnpC0Q8.CYHejHvWgXEUTqgr.+toQfHDXkt4wiUMwiO0tCymkQOOt7wZF3bMJFOrV4wfW8hvy8oCOqBvaMC7dgcOuP1XYNGE19P61bIMrOAtBJBKirnU9Ga6VBPBtr1HxUziBgCYZ37ZW2p3W45VowFk2nLbQDIwG+9NWz9rC6zC+V7ttZF6rC9bF8lwhPY8TwxH.hk5gATYKwnwBNbvYyLI1rRpU5R3zfLSXN8f5aXqU17yZ9DIolmHHBzYuYHOXhDdq.F0cmWgeh4KGB7RHC9QSwoBNES41dFsiX+FMWyoM3134QPCL7jYhHJ7hLjxFLTtY0EHMdKrSd.edvTA+RrybvYqEXoJlfbte6BouxSgJYFm5zeB2SxDbmAU1n7cFHp9ruHD6vf2O2FXF9qyu7giasUEiP2Y9R8bMIDeKHNnymikCYQSC0onXhQasHh6f2EBd4LzuU.wFS6oXvScHxg05GHDgfO2YA9zYFyTzgIglYLKAL6uba04jCTMt5LnZ1y+pNJmZMHx8Vi.PJ04jfITHk5c3Ap3uomli4KPfPZbE7WsPd9jvqz7K.z7eMnVen04opNwT+SodRBeP.0gTEuakFZotu78yd62QLIh1hDDbIzNM+5mdMTZUo7ckKdYVHDq4W61z.cgBkWNanuQ4G3ZxXi3B136zE.ZiTLY+AM30fAuUcaLmWMxn+f0Gm3Ju.l2UT+Jlj0r3lVynz6kqSreFGugPbj56jFCSYphkowKrferPROg6nhYkJeeY7rr52eg7TszBEAAzvExVMDL7wTzgOYzkzvpP7.PelfvzfoG2X+viaJNMzyzgsffBdaNSdxXJ+gFBgRZKqFGkfJPTodXzmjLLh5m1kGw7USixZ5iz.u3ZAn229.3dL0bfkAuMlFJYpWDqCnWCqMXl0Ux9.ZzURwXsrISDfMAdxN+1LG+meey3bTzq4Mp74LBM+illtyYT96vlS4y0M9bizoupJLs6V21TsUvWvSbwCiIgfMJXrhPbFf76yBj27WMgxWwMoEwQJPzRkpGgOgGDC6TM2NBvlJB+IAD4zqun1YKgAjjM0dBpcA3QLYbwc5dV1o4oB2WX2kI8FtX7txBvKjP8bi2jMD2v9v98gFv4fcM6i94m+0AQlw3CflrgLHcy93Ii5ASN7n.R3PRnpQf0JpRVyYW0Yc9Nk6qO7evSBy5pyVILqmxDMh3EJtvyTnq1AccME.Sb8p3kr6nNiyprsscq4hFAqFegmmJTrMf8EqytKgNewRnydKgNuZIz40KgNe4RnyadTcT+qjuYhTLxTl.D5dntCqk0gbBjkoyHQ+OP0q78f

[A Former User]

@d-healey You could even make those squares link to your patreon :winking_face:

[d.healey]

@iamlamprey Christoph showed me this technique in one of my livestreams (I think it was the second one).

[A Former User]

@d-healey Livestream! Yeah... I like that idea! It's been a while, hasn't it?