Customized Preset Item Table

[Evan C.]

Hello, @Christoph-Hart!
I am going to add some customized category lists which should be worked like preset systems.
Is it possible to make such customized list columns like following with current HISE?

[Christoph Hart]

I'll add a scriptable viewport then you can add a panel for each list item.

[Lindon]

• oh heaven.. Thanks.

[Christoph Hart]

Alright, I just added this feature to the master branch:

Content.makeFrontInterface(600, 500);
const var Viewport = Content.addViewport("Viewport", 27, 17);
// [JSON Viewport]
Content.setPropertiesFromJSON("Viewport", {
  "width": 174,
  "height": 150
});
// [/JSON Viewport]

const var Panel = Content.addPanel("Panel", 0, 0);
// [JSON Panel]
Content.setPropertiesFromJSON("Panel", {
  "width": 155,
  "height": 540,
  "parentComponent": "Viewport",
  "allowCallbacks": "Clicks Only"
});
// [/JSON Panel]

Panel.data.itemHeight = 30;

Panel.setPaintRoutine(function(g)
{
    var i = 0;
    
    for(item in this.data.itemList)
    {
        g.setColour(Colours.white);
        
        g.drawText(item, [0, i * this.data.itemHeight + 10, this.getWidth(), 15]);
        if(i == this.getValue())
        {
            g.setColour(Colours.withAlpha(Colours.white, 0.2));
            g.fillRect([0, i * this.data.itemHeight, this.getWidth(), this.data.itemHeight]);
            
        }
        
        i += 1;
    }
});

inline function setItems(p, itemList)
{
    p.data.itemList = itemList;
    
    p.set("height", itemList.length * p.data.itemHeight);
    p.repaint();
}

Panel.setMouseCallback(function(event)
{
    if(event.clicked)
    {
        var value = parseInt(event.y / this.data.itemHeight);
        this.setValue(value);
        this.changed();
        this.repaint();
    }
    
});

const var items = ["Item 1", "Item 2", "Item 3","Item 4", "Item 5", "Item 6", 
                   "Item 1", "Item 2", "Item 3","Item 4", "Item 5", "Item 6", 
                   "Item 1", "Item 2", "Item 3","Item 4", "Item 5", "Item 6", ];

setItems(Panel, items);

[Evan C.]

Thanks, man!

One more question, such viewport can be scrolled? And also if possible, can I customize such scroll bar with customized images or colors?

[Christoph Hart]

No problem, this was long overdue. For the original UX of a JUCE listbox I need to add a key stroke callback to the Panel, but this should get you going.

[Evan C.]

One more question, such viewport can be scrolled? And also if possible, can I customize such scroll bar with customized images or colors?

[Christoph Hart]

It's the default JUCE scrollbar. You can set the colour of the thumb with the itemColour1 property.