HyperlinkButton on dark background

General JUCE discussion
1

Hi,

I have a HyperlinkButton on a dark background but unfortunately, when I move the mouse over it, the text becomes darker and therefore unreadable. As far as I can see this is a hardcoded behaviour defined in juce_HyperlinkButton.cpp.

What is the best way to avoid this problem? Subclass HyperlinkButton and override paintButton?

I suppose that ideally there would be a second colourId (like “mouseOverTextColourID”) for which one could choose any colour. If I would write the corresponding code (should not be much more of an effort than subclassing HyperlinkButton), is there a possibility that this code would eventually make it in the official library?

Best regards,
Fritz

2

That does just sound like an oversight, and making that colour adjustable would probably be a good move. Will try to remember to do it when I get a moment…

3

Hello Jules,

thank you very much for that fast reply! I decided for my project to make my own “ExtendedHyperlinkButton” class which should be backwards-compatible to the regular HyperlinkButton. Just in case it may save you some work, here are the modifications to HyperlinkButton I’ve made:

Basically, I added two new colour ids, a custom setColour method and modified paintButton accordingly.

modified code in ExtendedHyperlinkButton.h:

    enum ColourIds
    {
        textColourId             = 0x1001f00, /**< The colour to use for the URL text. */
        textMouseOverColourId    = 0x1001f01, /**< The colour to use for the URL text when mouse is over button. */
        textButtonDownColourId   = 0x1001f02, /**< The colour to use for the URL text when button is pressed. */
    };

    void setColour (int colourId, const Colour& colour);

modified code in ExtendedHyperlinkButton.cpp:

void ExtendedHyperlinkButton::setColour (const int colourId, const Colour& colour)
{
	Component::setColour(colourId, colour);
	if (colourId==textColourId) {
		Component::setColour(textMouseOverColourId, colour.darker(0.4f));
		Component::setColour(textButtonDownColourId, colour.darker(1.3f));
	}
}


void ExtendedHyperlinkButton::paintButton (Graphics& g,
                                   bool isMouseOverButton,
                                   bool isButtonDown)
{
    const Colour textColour (findColour (textColourId));
    const Colour buttonDownColour (findColour (textButtonDownColourId));
    const Colour mouseOverColour (findColour (textMouseOverColourId));

    if (isEnabled())
        g.setColour ((isMouseOverButton) ? ((isButtonDown) ? buttonDownColour : mouseOverColour)
                                         : textColour);
    else
        g.setColour (textColour.withMultipliedAlpha (0.4f));

    g.setFont (getFontToUse());

    g.drawText (getButtonText(),
                2, 0, getWidth() - 2, getHeight(),
                justification.getOnlyHorizontalFlags() | Justification::verticallyCentred,
                true);
}

Yes, I know the code is not perfect (it requires the user to set a colour for textColourId first and only afterwards for textMouseOverColourId and textButtonDownColourId because otherwise they would get overwritten), so you should come up with a better solution than I did (if you want to keep backwards-compatibility)…

4

Hmm, is it possible that 10 years later there is still only HyperlinkButton::textColourId?

5

Yes, make that 11 years