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