Viewport esthetics



  • 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...



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

    Peek 2019-04-08 16-41.gif



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

    alt text



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

Log in to reply
 

14
Online

544
Users

2.1k
Topics

16.2k
Posts