Best way to draw small images

General JUCE discussion
1

I want to draw a bypass button with a PNG/SVG image in a juce::ImageButton with a size of about 24px (width and height). Unfortunately, it currently looks very pixelated:

image

Since I created the texture myself in an SVG image editor, I can easily change the texture size and export it to any format.

What are the best settings to display such an image without it looking pixelated? Should I export the texture at the same size I want in the plugin (24px) or at a larger size (e.g., 4x as large)? What format should I use? Are there any filters I can apply to make it more detailed?

Here is the current code I’m using:

addAndMakeVisible(bypassButton);
juce::Image bypassIcon = juce::ImageCache::getFromMemory(BinaryData::bypass_image_png, BinaryData::bypass_image_pngSize);
bypassButton.setBounds(0, 0, 24, 24);
bypassButton.setImages(
    false, true, true,
    bypassIcon, 1.0f, juce::Colours::white,
    bypassIcon, 1.0f, juce::Colours::white,
    bypassIcon, 1.0f, juce::Colours::black.brighter(0.34f),
    0.0f);

Thanks in advance for your help!

2

Hi there. Instead of exporting as PNG you could export as SVG. Then either:

  • Drag-and-drop the SVG file into the Projucer’s SVG Path Conveter tool. It will create code with which you can create a juce::Path.

  • Or open the SVG file with a text editor, copy the svg path string and use Drawable::parseSVGPath in your code to turn it into a juce::Path.

The juce::Path you can then draw at any size and it will always look good.

3

Use DrawableButton instead of ImageButton.

Then load the SVG as a juce::Drawable:

juce::Drawable::createFromImageData

And set the drawable to the button:

drawableButton.setImages()
4

Just in case you’re not aware of them…

There’s fontaudio: GitHub - fefanto/fontaudio: icon toolkit for audio developers

And from that link a link to fontawesome and a JUCE wrapper for it.

Easy to get them working as/with buttons etc.

Covers a lot of basic essentials.

5

Since a SVG file is basically a XML file, you can read the XML file as a string and pass it to a function that would extract and resize the path contained into it, something like this:

void setSVG(const String& xmlString)
{
    std::unique_ptr<XmlDocument> xml;
    xml.reset(new XmlDocument(xmlString));
    if (xml)
    {
        if (auto* drb = Drawable::createFromSVG(*xml->getDocumentElement().get()))
        {
            path = drb->getOutlineAsPath();
            path.scaleToFit(0, 0, getWidth(), getHeight(), true);
            repaint();
        }
    }
}

You could write your own class that inherits from ToggleButton and override the paint() function where you paint your path, maybe change its color according to toggleState, etc.