Trouble with DrawableButton

[benvining]

I’m trying to get a DrawableButton to display a DrawablePath, but I can’t get the path to show up…

I’m creating the DrawablePath like this:

static const juce::FillType pathFill { juce::Colour{ juce::uint8(168), juce::uint8(168), juce::uint8(168) } };

static const auto pathThickness = 1.f;

juce::Path p;

p.loadPathFromData (BinaryData::boxTone_classic_svg,
					BinaryData::boxTone_classic_svgSize);

drawablePath.setPath (p);
drawablePath.setFill (pathFill);
drawablePath.setStrokeFill (pathFill);
drawablePath.setStrokeThickness (pathThickness);

and then I’m setting up my DrawableButton like this:

juce::DrawableButton button { "name", juce::DrawableButton::ButtonStyle::ImageOnButtonBackground };

button.setImages (&drawablePath);

addAndMakeVisible (button);

and in my resized() I’m calling button.setBounds().

What I get is this:

Do I need to do something with the setTransformToFit() method? I’ve tried calling

drawablePath.setTransformToFit ({ 0.f, 0.f, 1.f, 1.f }, juce::RectanglePlacement{});

in my constructor before calling button.setImages(), but I got the same result.

Any ideas?

[vallant]

In the docs there is a note about colour-ids for juce::DrawableButton::ButtonStyle::ImageOnButtonBackground:
Note that if you use this style, the colour IDs that control the button colour are TextButton::buttonColourId and TextButton::buttonOnColourId.
Maybe this is defaulted to some transparent colour?

https://docs.juce.com/master/classDrawableButton.html#a7da653337d7329405ef9865cc35f612e

[benvining]

@vallant

JUCE: DrawableButton Class Reference

That’s a good thought, but when setting these color IDs to something non-transparent, I still get the same result (no path showing up).

[vallant]

Ah, i think i know whats going on- i had the same problem a while ago.
The juce::Path::loadPathFromData method is intended to be used to restore a path that was previously created with juce::Path::storePathToStream.
If you want to load a SVG, you can use:

auto icon = juce::Drawable::createFromImageData (BinaryData::boxTone_classic_svg, size_t (BinaryData::boxTone_classic_svgSize));
button.setImages (icon.get());

[aamf]

@benvining

drawablePath.setTransformToFit ({ 0.f, 0.f, 1.f, 1.f }, juce::RectanglePlacement{});

I’m guessing here, but woudn’t that place the drawablePath within a one pixel wide rectangle? What about calling drawablePath.setTransformToFit (getLocalBounds().toFloat(), juce::RectanglePlacement{}); in resized(), does it help?

[attila]

There was a recent change to Drawable [a99422ef], so there is a slight change that is causing an issue here.

In case you are working with develop you may want to see if things work more like you would expect prior to commit a99422ef.

[benvining]

This was the answer! Loading the SVGs from BinaryData using this method fixes the issue. Thank you @vallant !!

JUCE team, if you’re listening, it would be great to add a note about this in the docs. Seeing the signature of the method juce::Path::loadPathFromData, I assumed it was meant for loading paths from binary data, and there’s nothing in the docs to indicate otherwise.

[reFX]

@benvining

Seeing the signature of the method juce::Path::loadPathFromData, I assumed it was meant for loading paths from binary data, and there’s nothing in the docs to indicate otherwise.

And you can 100% do that. The problem is that you assume that a Path and an SVG are synonymous when they are different things. A path is a relatively simple string of movement instructions, usually describing a polygon of some kind. An SVG is a collection of paths, images, text, etc.