Size of binary pngKnob on retina

1

Hello,
I work on macbook pro 13’ retina.
I designed knobs of my plugin by drawing primitive elements in drawRotarySlider().
Eeach knob is drawing in Rectangle<float> knobSize(50.0f, 50.0f);

And now I want to draw them from binary *.png files.
So I used system Screenshot app to capture my knobs, and open it in GIMP 2.10 to polish them, remove background etc.

But unfortunately I found out in GIMP size of my knob is suddenly 100x100 (instead 50x50 like my knobSize rectangle).

And when I draw that knobs by:
g.drawImageTransformed(myKnob_png, AffineTransform::scale(1.0f));
The knob is two times bigger than it should be.

So what is recommended solution? Rescale the png file in GIMP, or better in code by AffineTransform::scale(0.5f) ?

Please notice I also want to make it looking nice on non-retina displays. Or maybe I should have some macro to recognize non-retina display and then make special code for that case?

I have no idea how to deal with that. Could anyone give some advice? Great thanks in advance.

2

Our solution to this is to have the images oversampled, like you do, and store them in a class called OversampledImage. This class basically is just a juce::Image with an additional float member variable that defines the scale of the image. Then there’s member functions like float getTrueWidth() or void drawWithTrueSizeAt(Point<int> topLeft, Graphics& g). When we draw the OversampledImage, we basically stretch it to fit into its true (non-oversampled) bounding box. That way, it will look fine on Retina and non-retina screens.

One thing to keep in mind is that the image resampling alrogithm in juce is not the best. It looks quite blocky, especially for any scale > 0.5 of for odd scalings like e.g. 0.6928. If you can avoid drawing from PNGs, do it. Drawing primitives always look better.

1 Like