Best way to destruct UI panels?



  • @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*/
    
    


  • @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 😋



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

    @d-healey I'm using image files

    Me too, downloaded from a server

    f16c00e4-2d41-4de7-a46c-ff7447b40c30-image.png



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



  • @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();
            }        
        });
    


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

    Then just do stuff when value = 1?



  • Here's full example.

    Peek 2021-04-14 21-21.gif

    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
    


  • @d-healey You could even make those squares link to your patreon 😉



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



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


Log in to reply
 

6
Online

1.3k
Users

4.1k
Topics

36.5k
Posts