Popup : set background colour ?

[subv0x]

hello folks,
trying to figure out how to change the background and highlight bar colours in popup menus.
https://docs.juce.com/master/classPopupMenu.html

but apparently Ctrlr does not have access to this directly, and requires writing a class to hook it up, according to chatGPT, which gave the following:

In JUCE PopupMenu, you can set the text color for items using the setColour method 
and specifying TextColourId for text color. Unfortunately, this is not directly available 
in the Lua API for Ctrlr, but you can use a similar approach with a custom LookAndFeel.

Here's how you can modify your code to set the text color for submenus:

lua

-- Custom LookAndFeel for PopupMenu
local CustomLookAndFeel = {}
CustomLookAndFeel.new = function()
    local self = {}
    self.__index = self

    setmetatable(self, {
        __index = LookAndFeel
    })

    return self
end

-- Override item text color
function CustomLookAndFeel:drawPopupMenuItem(g, text, image, isSeparator, width, height, isHighlighted, isSelected)
    local textColour = Colour(0xFFFF0000) -- Set your desired text color here
    g:setColour(textColour)
    g:drawText(text, 4, 0, width - 8, height, JustificationType.left, true)
end

-- Use CustomLookAndFeel for PopupMenu
local customLookAndFeel = CustomLookAndFeel.new()

-- Called when a mouse is down on this component
popupPCM3 = function(comp, event)
    -- This stops issues during panel bootup -- else popup will hang startup!
    if panel:getRestoreState() == true or panel:getProgramState() == true then
        return
    end

    local bankSelect = panel:getModulatorByName("bankSelect"):getValue()
    pcmTables() -- load pcm lists A & B
    local menu, sub1, sub2 = PopupMenu(), PopupMenu(), PopupMenu()

    -- Set the LookAndFeel for the PopupMenu
    menu:setLookAndFeel(customLookAndFeel)
    
    -- add submenus
    menu:addSubMenu("select", sub1, true, Image(), false, 0)
    menu:addSeparator()
    menu:addSubMenu("write", sub2, true, Image(), false, 0)
    menu:addSeparator()

    -- populate submenus
    for i = 1, 128 do
        sub1:addColouredItem(i, i .. ":" .. pcmListA[i], Colour(0xFF0000FF), true, false, Image())
        sub2:addColouredItem(i, i .. ":" .. pcmListB[i], Colour(0xFFFF8800), true, false, Image())
    end

    -- display
    local ret = menu:show(20) -- text size -- ?? parameters? show(0,0,0,0)
    if ret ~= nil then
        -- do something
    end
end

In this example, CustomLookAndFeel is a Lua class that inherits from 
the JUCE LookAndFeel class. It overrides the drawPopupMenuItem method 
to set the text color for items. An instance of this custom look and feel is 
assigned to the main PopupMenu using setLookAndFeel. Submenus 
(sub1 and sub2) inherit this look and feel automatically. You can modify the 
color in the setColour method within drawPopupMenuItem to set your 
desired text color for items.

but we can give items a text colour when we create them. what about background colour?
there is this, 'colourIds', with the enumerator: 'backgroundColourId ':
https://docs.juce.com/master/classPopupMenu.html#a0888091ddab0f599bb9d2fab28153f6b

also 'headerTextColourId', 'highlightedBackgroundColourId', 'highlightedTextColourId'. that's what i'm looking for.
there is a link to this: LookAndFeel::setColour
https://docs.juce.com/master/classLookAndFeel.html#a167a1e914771f32e433a0d45aaba45e3

what would that look like?

edit: cannot find mention of 'drawPopupMenuItem' - did chatGPT make that up? just googled it. oh no, here it is:
https://docs.juce.com/master/structPopupMenu_1_1LookAndFeelMethods.html

[damiensellier]

popupmenu in Juce is not a component so the only way to style it is via lookandfeel.
I don't think the whole thing is implemented in the Ctrlr LuaBind library. This is why you cannot pass those particular values to the popup.
I'll see if I can add an extra LUA bind function to add all the setColour to all the component elements.

drawPopupMenuItem exists, it's everywhere in the ctrlr menuBar:
https://docs.juce.com/master/structPopupMenu_1_1LookAndFeelMethods.html#a65f8fd08fdf0a6c9d6fe7eafa1afb020

[subv0x]

chatGPT, yes, can confuse and take you on detours. but it's instructive. and the level of interaction is, i would say, positive. you can chuck your brainjunk at it, ask it the same question repeatedly, ... it don't mind. although it will point out if you asked something before. it still needs a bit more tetchiness for that to be realistic, but it's a relief when you get a cheerful encouraging response.
chatGPT is good as a sounding board, and it's great how it will make suggestions, and even suggest sensible variable names. use it as a tool to chuck stuff at, and prompt yourself, as much as prompt it - ??? -

[subv0x]

however it might also make you inherently LAZY and less reliant on your best faculties.

[damiensellier]

@Ted-juh Are you refering to this thread? https://forum.juce.com/t/setting-comboboxs-popupmenu-colors/33057/7

[Ted-juh]

Been a while since I ran into the same problem subvox has.. but yes, looks like that is the thread I mentioned. And it states that the "PopupMenuBackgroundWithOptions" relies on the Options class, which isn't available through luabind yet if I remember correctly.

I could give it a try to add that class, since I (partially) succesfully added the NormalisableRange class. Then add the lookandfeel options for the PopupMenuBackGroundWithOptions def. Then test if it's possible to change the background color.

Don't expect it to be done by tomorrow.. I got a long list of things to do and I'm heavily invested into Cmake at the moment. But I'll give it a try.

[subv0x]

um, when you're both saying you'll 'add' a class, what are you referring to, working on a new version of Ctrlr? drafting your own Ctrlr?

i do not know how to try the code chatGPT showed me. with the class creation thing, is that a separate method? does it have to be run by a panel Load method? what about the other bits? it looks like several (3) methods.

[subv0x]

ok- starting to begin to get my head around this ... or at least finding out where to look for conversations about it that can give some clues.

thus, i glean:
1/ i have to create the class with a method that gets called at startup. so lets call this 'initClass':

-- Initialize or set up the custom class
initClass = function()
    -- Custom LookAndFeel for PopupMenu
    CustomLookAndFeel = {}
    CustomLookAndFeel.new = function()
        local self = {}
        self.__index = self
        setmetatable(self, { __index = LookAndFeel })
        return self
    end
end

so now in theory i can have CustomLookAndFeel.new() - where ..? '.new' could be eg:
CustomLookAndFeel:drawPopupMenuItem(g, text, image, isSeparator, width, height, isHighlighted, isSelected)

closest thing is: drawPopupMenuBackground() from JUCE PopupMenu::LookAndFeel, for which parameters are Graphics & , int width, int height - don't know if this gives access to anything other than width and height?
chatGPT suggested:

	-- Create a function to draw the PopupMenu background with a custom color
	function drawCustomPopupMenuBackground(g, width, height, color)
    g:fillAll(Colour(color))
	end

don't know if that is valid,
and still don't know how to build the function to be called from a button to test it - say a simple popup with 4 items, and try to make the background green FF00FF00 or something.

( ... and now i'm seeing a JUCE discussion about IsOpaque() ... :-/ stumbled across a discussion about making transparent popup windows)

[subv0x]

been diggin' a bit over at JUCE forum, searching for topics with 'popupMenu' and 'background'. ('what i'm studying tonight')
came across several, and people seem to be getting their colours and transparency with LookAndFeel in JUCE. here's a first one, with some promising references:
https://forum.juce.com/t/bug-popup-menu-background-and-logic-silicon/43243/3
(example)

class TestLookAndFeel    : public LookAndFeel_V4
    {
    public:
        TestLookAndFeel()
        {
            const Colour newBgColour(53,53,53);
            const Colour newFgColour(220,220,220);
            setColour (PopupMenu::highlightedBackgroundColourId, newFgColour);
            setColour (PopupMenu::highlightedTextColourId, newBgColour.withAlpha(0.9f));
            setColour (PopupMenu::backgroundColourId, newBgColour.withAlpha(0.9f));
            setColour (PopupMenu::textColourId, newFgColour);
        }
        
        ~TestLookAndFeel() {}
        
        void drawPopupMenuBackground (Graphics& g, int width, int height) override
        {
            Rectangle<int> area(0, 0, width, height); //getLocalBounds().toFloat().reduced (0.5f);
            
            g.setColour(findColour (PopupMenu::backgroundColourId));
            //g.fillAll (findColour (PopupMenu::backgroundColourId));
            g.fillRoundedRectangle(area.toFloat().reduced(0.5f), 4.0f);
            //ignoreUnused (width, height);
        }
    };

which all looks quite familiar. or here, something else, about 'opaqueness', and something about a default white background default for 'opaque': (these are in no particular order)
https://forum.juce.com/t/menu-fillall-request/13231/2

another one on that:
https://forum.juce.com/t/white-background-of-popup-menu/9958

more on transparency:
https://forum.juce.com/t/popupmenu-transparent/48455/2

more chats on LookAndFeel:
https://forum.juce.com/t/several-popupmenu-look-and-feel/48316/6

oh look more, and now about Font:
https://forum.juce.com/t/popupmenu-fonts-using-lookandfeel/3400

this is what PopupMenu::Options looks like:
https://docs.juce.com/master/classPopupMenu_1_1Options.html

(nope, not there. wtf... why is this so hard)

lastly the original reference:
https://docs.juce.com/master/structPopupMenu_1_1LookAndFeelMethods.html#a65f8fd08fdf0a6c9d6fe7eafa1afb020

[Ted-juh]

Besides what you are trying to achieve with the Lua class, this is the way to do it in Ctrlr..

In the init file:

	lf = LookAndFeel()
	lf:setImplementation (pum1LF)
	panel:getComponent(nameOfTheComponent):setCustomLookAndFeel(lf)

Then add a new method that contains:

pum1LF = {
drawPopupMenuBackground = function (g, width, height) 
g.fillAll(Colour(0xFFFF0000))
end
}

But that doesn't work. And it's because of: panel:getComponent(nameOfTheComponent):setCustomLookAndFeel(lf). When you create the PopupMenu and name it "mainMenu", it doesn't work because it isn't a physical (?) component. Setting it to the button (PCM) won't matter because only the "button" l&F would apply.

One thing to try is to apply the lookAndFeel to the canvas because every component should take the L&F applied to it. But even then it's not applied to the PopupMenu.

Like I said last time.. some things are not bound/ linked right. And I can't tell if it's Juce or if it's Ctrlr (probably the latter). But when you add the scripts mentioned above and add a combo box... guess what? Yup, it has a red background in the drop-down menu.

What I meant by "adding a class" is adding a class that binds the Juce "Options" class to Lua (Source/Lua/JuceClasses folder of the repository) in the luabind folder. It isn't there yet in Ctrlr, period. Writing your own Lua class/function won't help that much because you simply do not have access to the L&F class from Juce. But if the class is added to the JuceClasses, then it should be a little step to make use of "drawPopupMenuBackgroundWithOptions" which should offer a way to set the background of a popup menu.

*Edit, lua class/function = the one you tried to write in posts mentioned before mine.

[subv0x]

@Ted-juh
are you saying that what i want to do is not possible in Ctrlr? this is a whole new rabbit hole for me to go down (instead of finishing my panel...) and i'm getting my head around the general principles (vaguely, i have no proof of concept at my end).

ChatGPT identified a lot of the issues i'm seeing mentioned. must've been hanging out at JUCE forums.
i don't even really grasp how Lua and JUCE are related (didn't Lua come first, in the 60s?) (don't know where i saw that)
so i'm having a look at Damien's thread about L&F (heh getting the lingo) - it's ok: i get the idea that you can 'lua-bind' (although: why no upper case L there? ..) to JUCE in order to access parameters not directly available via Lua, and Ctrlr. i struggle to grasp how, if the guys developing JUCE decide to add something now, Ctrlr, finished in its current state several years ago, could access those changes in JUCE - unless Ctrlr is really built in JUCE? i'm just a brute force user, so show me the buttons, and what those knobs do, and i'll see what i can do.

i would expect to be able to do this. i'm not the only person asking about it, it's on the JUCE forum. if i can conceive of a popup menu, i immediately think "oh what if that could be transparent with luminous text?' (like tomcruise in monetaryreport) - so we can only assume that there wasn't time for this. but i also see these being referred to as 'combos', which is the word we use for a specific modulator type. should i therefore forget about (very cool and easy) popup menu and use combo instead? no: you can't have submenus in Ctrlr combos.
(sorry, waffling follow-up post).

HOW? is there a 'how'? or forget about it?

[Ted-juh]

There might be a 'how' but not at this moment. So, better move on. Find another way. Get your thinking cap on.

You can change the options provided in a combox. So if you have two buttons, let's name them pcm1 and pcm2, you can change the options of 1 combobox. Might that do the trick?

For your info: Ctrlr IS made in Juce. You are basically building a panel inside a Juce project/ panel which you can export to different formats like standalone or vst. Quite genius if you ask me.

Lua is added to the mix as an easier programming language. But to get access to the Juce modules, there's luabind to do the translation to C++ in a way that Juce knows what class you need and which member of that class you need access to. But that's hard-coded into Ctrlr. I'm not entirely sure you can get access to those modules with a lua class, like you tried.

The reason those bindings still work is because Juce doesn't want to introduce changes that might break code. It happens, see Juce's change list at the repository. But Ctrlr 5.3.201 uses an older version of Juce and as long as it stays at that version, you won't get nasty bugs.

[damiensellier]

Popup full styling will be hard because it requires to setLookAndFeel() of the entire panel which we don't have access to.
You can change LookAndFeel at component level for a slider, button etc but a Popup is not really a component so the only way is to define its style from the ctrlrEditor.cpp. Maybe you could reach it with the callback on Canvas repaint "Called to paint a custom panel Canvas" in the globals. That would be where I'd put the popup lookandfeel definitions.

I'm working on the update of the entire Ctrlr software to get the V4 look and feel. I pulled my hair for hours about the popup on right clicking the canvas. Same for menuBar style.
The way it will work on my next release is that you can select your "environnement" colourScheme (dark, midnight, light etc) and you should get the related popup colourScheme by default, same for menu, same for alertBox. But no real customization.

My advice about all that, is don't waste your time on this popup colour scheme for too long, it will never work entirely the way JUCE, Ctrlr and LUA are working all together. give a try to "Called to paint a custom panel Canvas" though.

[Ted-juh]

Nice work on the colour schemes and the l&f v4 implementation Damien. Been pulling my own hair over smaller things than you are trying to do.

Applying it to the canvas doesn't work either, by the way. As stated in an earlier post by me. I wonder what the difference is between when you apply a l&f to the canvas in a init file or the option you mentioned. Does one load earlier than the other so changes to the l&f do apply?

Worth a shot.

[subv0x]

i've seen 'IsOpaque( )' in JUCE forum posts. same thing there? if it could default to black (bodged transparent) instead of white ?