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