PresetBrowser Expansion Icons work, but text in other columns disappears when using drawPresetBrowserListItem

[filipalex96]

Hi everyone,

I’m working on a custom PresetBrowser UI in HISE and I’m a bit stuck.
I feel like I’m going in circles, so I’d really appreciate some guidance from someone who knows the internals better.

What I’m doing

I enabled Expansions and I load an Icon.png from each expansion into a custom LookAndFeel.
The icon drawing itself works perfectly when I only draw the icon column.

Here is the exact code I’m using right now:

inline function loadExpansionImagesIntoLaf(obj)
{
local expHandler = Engine.createExpansionHandler();

for (e in expHandler.getExpansionList())
{
    local img = e.getWildcardReference("Icon.png");

    if (isDefined(img))
    {
        obj.loadImage(img, e.getProperties().Name);
    }
}

}

lav.registerFunction("drawPresetBrowserListItem", function(g, obj)
{
var a = obj.area;

if (obj.columnIndex == -1)
{   
    g.setColour(Colours.withAlpha(Colours.white, obj.hover ? 1.0 : 0.5));
    g.drawImage(obj.text, a, 0, 0);
}

});

The problem

With this code:

Expansion icons show correctly

Text in the other columns (preset name, tags, etc.) is not visible anymore

If I add an else branch and manually draw the text:

Text becomes visible

The expansion icon stops showing

So basically:

Icon only → icon works, text disappears

Icon + text (using else) → text works, icon disappears

[David Healey]

@filipalex96 said in PresetBrowser Expansion Icons work, but text in other columns disappears when using drawPresetBrowserListItem:

lav.registerFunction("drawPresetBrowserListItem", function(g, obj)

This affects all columns, so you need to draw the items in all columns not just the expansion column.

[filipalex96]

@David-Healey Thanks for the clarification — that makes sense
I understand now that drawPresetBrowserListItem overrides drawing for all columns, so everything has to be drawn manually.

I tried doing exactly that, but I still get the same behavior.
When I draw both the icon column and the text columns, the text becomes visible but the expansion icon disappears.

This is the code I tried:

lav.registerFunction("drawPresetBrowserListItem", function(g, obj)
{
var a = obj.area;

// Expansion icon column
if (obj.columnIndex == -1)
{
    g.setColour(Colours.withAlpha(Colours.white, obj.hover ? 1.0 : 0.5));

    if (lav.getImage(obj.text))
        g.drawImage(obj.text, a, 0, 0);

    return;
}

// Other columns (text)
g.setColour(Colours.withAlpha(Colours.white,
    obj.selected ? 1.0 : (obj.hover ? 0.9 : 0.65)));

g.setFont("Default", obj.selected ? 15.0 : 14.0);
g.drawAlignedText(obj.text, a.reduced(8, 0), "left");

});

The result is:

Text in the other columns shows correctly

The expansion icon still does not appear

The icons are loaded like this:

inline function loadExpansionImagesIntoLaf(obj)
{
local expHandler = Engine.createExpansionHandler();

for (e in expHandler.getExpansionList())
{
    local img = e.getWildcardReference("Icon.png");

    if (isDefined(img))
        obj.loadImage(img, e.getProperties().Name);
}

}

Am I misunderstanding what obj.text contains in the icon column?
Is there a specific property in obj that should be used to identify the expansion / library for the current row, instead of obj.text?

Thanks a lot for your help!

[David Healey]

@filipalex96 you need an else

[filipalex96]

@David-Healey said in PresetBrowser Expansion Icons work, but text in other columns disappears when using drawPresetBrowserListItem:

you need an else

// ICON column
if (obj.columnIndex == -1)
{
g.setColour(Colours.withAlpha(Colours.white, obj.hover ? 1.0 : 0.5));

    // draw only if obj.text matches a loaded image id
    if (lav.getImage(obj.text))
        g.drawImage(obj.text, a, 0, 0);

    return;
}
else // TEXT columns
{
    g.setColour(Colours.withAlpha(Colours.white,
        obj.selected ? 1.0 : (obj.hover ? 0.9 : 0.65)));

    g.setFont("Default", obj.selected ? 15.0 : 14.0);
    g.drawAlignedText(obj.text, a.reduced(8, 0), "left");
}

});

same behavior

[filipalex96]

@David-Healey Any ideas? Thanks!

[filipalex96]

@filipalex96 I solve the problem with this : if (obj.columnIndex == -1)
{
g.setColour(Colours.withAlpha(Colours.white, obj.hover ? 1.0 : 0.5));
g.drawImage(obj.text, a, 0, 0);
}

else if (obj.columnIndex >= 0)
{

    g.setFont("Default", obj.selected ? 15.0 : 14.0);
   g.drawAlignedText(obj.text, obj.area, "centred");
   
   // TEXT
      var alpha = obj.selected ? 1.0 : (obj.hover ? 0.9 : 0.6);
      g.setColour(Colours.withAlpha(Colours.white, alpha));
   
      g.setFont("Default", obj.selected ? 15.0 : 14.0);
      g.drawAlignedText(obj.text, obj.area, "centred");

} Thank You for Help , have a nice day

[David Healey]

@filipalex96 said in PresetBrowser Expansion Icons work, but text in other columns disappears when using drawPresetBrowserListItem:

else if (obj.columnIndex >= 0)

That's the same as just putting else. But actually I missed your return statement in the previous post because of the formatting. You should wrap you entire code block in code tags (three backticks) so it's easier to read.

With the return there you shouldn't need the else.

I'm not 100% sure why it is working now and it wasn't before, nothing obvious stands out to me, I'd need to take a closer look. But if it's working stick with it.