Look & Feel - ComboBox Background.

[Lindon]

Hi I'd like to remove (set to transparent) the ComboBox background - so the element coloured white in this image:

I looked and found this

LAF.registerFunction("drawPopupMenuBackground", function(g, obj)
{
	var a = obj.area;
	g.setColour(Colours.yellow);
    g.fillRect(a);
});

-- which I think is the correct call - but its not "doing" anything - other than turning the background white. Does anyone have any pointers?

[DanH]

@Lindon that's weird, but try just

g.fillAll(0xFF016265);

instead

[ulrik]

@Lindon strange, the obj contains only the width and height

HiseSnippet 892.3ocsV88aSbDDdWmrHrgVAR7Re6TdxQJXcFnzJgP3XmXjE1AKLE0ppJzl8VedI6syo81ifUER8e3Jw+Avr2cNmSwJDrTuGx44m22Ny2LalZAgLKCrDZyWuLURn2lMaowsXvBtxPFcDg9irI7LmzFTpp+xTdVlLhPo67buBZycIEOe5Y84ZtQHqUQHuATB4XUhxUqcZuWnz5g7H4qUIq48i5MR.lAfFxQ7rCKjjxEmwikmv8t0fQn233HkCrybbmLiP2sODsb1B3bSo+uQkoNUK8BcIyvDUpdHni7H1qkLXgRGMc04NifYYZcUXmxpv8XSTQpKzWWMtSggf5HVudPabUvq62FdgaBdz0f2tkv6trYBqJ0UawisawFYvF0bN1BVGVk9RZ7uT1..8v35jvOSNzhBWDQ6GGFdP.9m8eRqVXaHyE7dN1zmzO3oAqBKV5F.IofAEZuGZauZuGe3v07TXkXMXLH35w.b1glngRots2czwNVYrxSpFlaDNEXZuWjke9THMOchzj2G66wVH2Ds2AAyW4S7AAvoua+V+cql3mICzxNoVEhDm0e.71v72LtSlGldVT6xWYcVJ0Z3bzZ.9D2YNx+dkT3Z+m3YNrHscNWE4VT9yERU7B2egt+QOfwyoOke0gAOH6+jUnK.Lm.N4KMsK.XqO1J3+ZZ97MZyWxrfVKsazreFwdUA11jmbpzd.1uz4xKbDIKWlMdiqGaTT1AWyQvLxnbuLUVIe0iSjJJfm4VgPzUWAu8NU7VjDcJzG9.QgogwvBLo.7quLg7aiNh63qRClQ7qjJsNk+vPOR9dbyR43PS1QxrybPZguU7SB8leyO5Gp+fpdKqE9idErgKT7O7dkbhZWF0Kgigyn63C1ISPP8SrwJSDX51p78Cpd+Pbm2WMCiaRfnbM2c40K9cpUFvt7kli8yplLka45kouicNgW6UhWW3dW1TkSrXy3swFvK1M++FuUav+A1wymii30fcW1veeaWW+c.kWA4NkIdB2YUdBxI4IyvcPBIhDiQpy7jlF94jR4PuruxLSZhJD9L9TYrqWlVYr6JijDtvBuUTNc4ui3lEZPLYJtprIdmMJGzc0XEiE1IjjfWc8VgvWJtOh8MGyC1hXd3VDyi1hX94sHlGuEw7KaQL+5UFi++Z3vbGjTNlfJldbw5MJ8XCGYYELRxW.MYhkrC

[Lindon]

@DanH gives me this;

and whilst thats a nice colour :-), its not what I'm looking for...

[DanH]

@Lindon can't you make it 0x00000000?

[Lindon]

@ulrik - oh yeah, very odd I think...

[Lindon]

@DanH said in Look & Feel - ComboBox Background.:

@Lindon can't you make it 0x00000000?

hmm, just randomly throwing hex values into the ring isnt helping here...try it yourself and see if this works (hint: it doesnt)

[DanH]

@Lindon so sorry

[Lindon]

this gets a strange result:

ComboBoxLAF.registerFunction("drawPopupMenuBackground", function(g, obj)
{
	//var a = obj.area;
	g.setColour(Colours.red);
    g.drawRect([0,0,2000,2000], 1);
});

you get this:

-- see the little red line on the left side?

ComboBoxLAF.registerFunction("drawPopupMenuBackground", function(g, obj)
{
	//var a = obj.area;
	g.setColour(Colours.red);
    g.fillRect([0,0,2000,2000]);
});

predictably gets this:

but this:

ComboBoxLAF.registerFunction("drawPopupMenuBackground", function(g, obj)
{
	//var a = obj.area;
	g.setColour(0x00000000);
    g.fillRect([0,0,2000,2000]);
});

gets us back to this:

[David Healey]

@Lindon I'm pretty sure you can't make the background of the combo box transparent. It will give a white outline (the panel is opaque basically). You can make the individual items have a transparent background though.

[Lindon]

@d-healey - yeah that's the position I'm rapidly reaching. Thanks. I'm not sure this is a bug but its certainly a feature it would be nice to have,....

[DabDab]

BG CB transparent is not a bug. Transparent is not possible right now with out altering the source Code. How ever it will be a good feature request to have CB transparent BG.

[David Healey]

I would like to give this one a bump. According to everything I read on the JUCE forum, the popup menu is by default opaque, unless you set PopupMenu::backgroundColourId to a colour with an alpha < 1.0.

I've been through all the HISE popup look and feel functions I could find and set this property to transparentWhite but still the combo boxes show a white background.

@Christoph-Hart Any ideas?

[Chazrox]

If you use a viewport and check 'useList'. Then you can make a transparent list area. You just have to also make a label of some sort showing the currently loaded index/value, so that the user can click to reveal the viewport list. Pretty much what a combobox is. Little hacky but I got what I wanted without doing anything too crazy. I prefer to do this when the list is very long, you can set it to open at a set size and have a nice scrollbar.

[dannytaurus]

@David-Healey I just had a go at fixing this. Is that what you mean?

HiseSnippet 1112.3ocsVs2aaaCDmJIJKwacqEne.H7e4roYH+pIcACMO8pwxCi4rhMDDTPKcxhKRjFRTMwXneH12z8MH6ndXKO6klZfI.av6Eue2wi2w9QRGHNVFQLpb0jw.w3qLGLQn7O1mwEjdmPL9ZyyYwJHhlw5nIiYwwfKwvX8eRyvX6MHoe+8aNhEvDNvLVDx6jbG3LdHWMia+C9YdPPWlKbEOrj1sOnmiTbrLPlf3YcSaxXlysrQvELsZqYRdKK1mX7sl1scX60zqSqVu9061wcH330.FtqCytCyqCC41l0tSi1DiMO0kqjQCTLEDia5QR2IC7k2Ixbv63w7gAflnAY.54L1ji84At8KRNwDhwF8mkpVOKU8Ryy4t7o7mkxddp.5LKJmzLV6wfTiOCHYTBRajAoWXNvIhOVMShFOeoYOAdB5wvylxPISWxZ+05lGKQMDp5gragtQHwTKp0z11hh+sy9UpfmOwJZ.yi9izBSbh.LRNS5vBNSJu8PgaW.BpoUGUrdDLhqqe5lHbTbonVU2H1c8kiSFeNHRNBOhGEISDtUsndE5LxhJG9G6T4OqPwuQ0iAUVcQsp12am+UEcQlXOrd5W.GUsqssrsz.F+cCJ9iOQTzSAg+29+CrHJCiXjUcFFs3dVvdLy8PjCJ7Z1012P+NZSKJ65FSW07F52SaqW0Jc0M6uPHo2Vd7a4i7CveJvk9FZln35ih.PP+gozCCRf4CacpCb0QOSLJ.pkiHK5d6TBmJ3dUAPy0HCt6YUDCHnmsNE1Md0LFstYIHu.U24yUyfEJuKVaTq5IfGKIPgI1FsqaOUtNyeHFpBv8JDVowuFeVSQoEsZ.3opVbBlU1crLbn7H48MJU7MRikvwRAnc3TMzVNkPCnEJOwhhc1u37lJEWHUvkhZ5i7sq7wJz+sHOukJSiiHYP.DsTw5FbQOlg0DIgCgHK7PRexVnHdgd9tDa9z5R3jkVJonTzSvUWNFxo6JCb0290qWrmBIOup6tjiPTUUZukmm2aoHuR3t5VKSSyjzPnbyexu16DlhUrY39h9ZLDo35Px3D3C3vgrFWaadBDeqRNF6yO8.kXrUlqeVQaMl.BR86VloqaPturCmTl.KICKFlr8lDxCOLO2lkYeG2U4OyZ9A9f9tXYNjR35KdhoDDclFMyPlowKwEgrTdqunO+8CzXCSLei4kBnxU2IqbkOd8GGXtPedbBizMIfoleridfbt.rJatd8594hXtZR4A1eFyhrezYQOUH9By9bki+xw3ZKAiXsy+GXLeB9yLO0yC6bNCfaX182V0w0eB2icpUbwnyYpHttF3hjvAXYnCfdWf0xw55h0z2Ayns0z5Lv.P3lR7.9kKrgl1HWXiBgX0kSj78NY2b0uQXqTNHlDougZa7wbHMcIWVCwmr7dGm42pELr4pZXqU0v1qpgcVUCe0pZ3tqpg68oMT+hxCSTxvrqMDx48OMs4pgwoBFVAlVsR9GztgJYG

Content.makeFrontInterface(200, 200);

const laf = Content.createLocalLookAndFeel();

laf.registerFunction("drawPopupMenuBackground", function(g, obj)
{
    g.setColour("0x00000000"); // any transparent colour
    g.fillRect([0,0,200,200]);
});

laf.registerFunction("drawPopupMenuItem", function(g, obj)
{
    var a = obj.area;

    var padArea = [a[0] + 2, a[1] + 2, a[2] - 4, a[3] - 4];
    g.setColour(obj.isHighlighted ? Colours.green : Colours.blue);
    g.fillRoundedRectangle(padArea, 8);

    var textArea = [padArea[0] + 8, padArea[1], padArea[2] - 16, padArea[3]];
    g.setColour(Colours.white);
    g.setFont("Default", 14.0);
    g.drawAlignedText(obj.text, textArea, "left");
});

const ComboBox1 = Content.getComponent("ComboBox1");
ComboBox1.setLocalLookAndFeel(laf);

The drawPopupMenuBackground object should probably include an area, and the popup menu items still have a subtle drop shadow. But they're both fixes for another day.

PR here, if it's useful: https://github.com/christophhart/HISE/pull/805

[David Healey]

@dannytaurus Excellent, thanks

[Chazrox]

@dannytaurus sick man.

[David Healey]

@dannytaurus Seems to work perfectly

[dannytaurus]

@David-Healey Excellent! Your example just reminded me this also solves my issue with getting rounded corners on the MID Learn popup too. Bonus

[Chazrox]

@dannytaurus You just upped everyones combo box game. haha.