Viewport esthetics

[Lindon]

I'm using a viewport to list samplemaps by category and I think I have it working but is there a way to reduce the spacing between items? (not changing the font size here..) it seems a bit big and wasting (making) scrolling...

[d.healey]

You could create a custom list using a panel. I did this for something I'm working on.

[Lindon]

@d-healey yeah nice. I could do that but given I have several instruments and each category has a different number of elements it will probably be a regal pain...

Did you do this in the "classic" KSP way - pre-baking the slider to match the number of elements...?

heres where Im up to:

[d.healey]

@Lindon The list is dynamic and I can change the number of items and their labels with a single variable in the panel's paint routine. The controls (knobs/buttons) for each item are manually positioned in the interface designer but it would be possible to add/position them dynamically too.

Here's the code for it (including the styling)

    //GUI
    const var pnlArticulations = Content.getComponent("pnlArticulations");
    pnlArticulations.setPaintRoutine(function(g)
    {
        reg text = ["Live", "Sustain", "Staccato", "Releases"];
          
        for (i = 0; i < text.length; i++) 
        {
            //Paint background
            if (i == Articulations.current)
                g.setColour(0xFFDED7CA);
            else
                g.setColour(0xFFCEC9BD);
            
            g.fillRoundedRectangle([0, i*55, 316, 50], 5.0);
        
            //Draw text
            g.setColour(0xFF000000);
            g.setFont("Arial", 18);
            g.drawAlignedText(text[i], [10, i*54, 316, 50], "left");
        }
    
        //Set panel height
        this.set("height", i*55);
        this.data.numRows = i;
    });
    
    pnlArticulations.setMouseCallback(function(event)
    {
        if (event.clicked)
        {
            var value = parseInt(event.y / this.getHeight() * this.data.numRows);
            Articulations.changeArticulation(value);
        }
    });