[Theming] ColorWheel color chooser is not honoring high DPI scale factor about radiance HOT 27 CLOSED

Interesting, should be somewhere around https://github.com/kirill-grouchnikov/radiance/blob/sunshine/theming/src/main/java/org/pushingpixels/radiance/theming/internal/contrib/randelshofer/quaqua/colorchooser/ColorWheel.java#L68

from radiance.

The fix can be made inside the ColorWheel class. Changes are needed in two locations.

In MouseHandler.update(MouseEvent e) you can do something like this:

       private void update(MouseEvent e) {
            double scaleFactor = RadianceCommonCortex.getScaleFactor(ScaledColorWheel.this);

            int x = e.getX() - getWidth() / 2;
            int y = e.getY() - getHeight() / 2;

            float r = (float) (scaleFactor * Math.sqrt(x * x + y * y));
            float theta = (float) Math.atan2(y, -x);

            int RR = (int) (Math.min(1f, r / colorWheelProducer.getRadius()) * 100f);

            model.setValue(0, 180 + (int) (theta / Math.PI * 180d));
            model.setValue(1, RR);

            // FIXME - We should only repaint the damaged area
            repaint();
        }

in paintComponent(), a similar fix is needed. (Cut paste is not working for me right now for some reason unrelated to Radiance!)

from radiance.

Ok. In paintComponent(), do something like this:

       double r = colorWheelProducer.getRadius()/scaleFactor * model.getValue(1) / 100d;
        double angle = model.getValue(0) * Math.PI / 180d;
        int x = w / 2 + (int) (r * Math.cos(angle));
        int y = h / 2 - (int) (r * Math.sin(angle));

from radiance.

PS: I personally think it looks better to enlarge that cursor a little bit. Something like this:

        g.setColor(Color.white);
        g.fillRect(x - 2, y - 2, 4, 4);
        g.setColor(Color.black);
        g.drawRect(x - 4, y - 4, 6, 6);

from radiance.

What are the changes in paintComponent() for?

from radiance.

Ah, it's for the indicator box

from radiance.

Thanks for the quick response!

Your code fixes the problem that I identified.

Yet in your fixed code, the cursor size appears very different depending on the DPI of the display. Here I have a low-dpi version (scale factor 1.0) and high-dpi (scale factor 2.5).

from radiance.

Ok, the cursor looks exactly the same size in those two uploaded images, but when the two images are displayed on the two monitors they are shown at the same physical size, which means the cursor in the top picture looks small and the one in the lower picture looks big.

from radiance.

Oh, the size should be scaled in the 1x rendering. I'll make a quick fix in 7.0.1

from radiance.

Thanks. Maybe wait a few days in case other bugs come in? I'll try to test 7.0.0 (if there are no breaking changes that actually affect me.)

from radiance.

I'll cut 7.0.1 later in the day

from radiance.

There is also an issue with the crayon color chooser. Here it is with scale factor 2.5.

I had not noticed this because I turn off that color panel (since I don't want to translate color names to 15 languages.)

from radiance.

PS: In my quick tests, I didn't notice any problems upgrading from 6.5 to 7.0.

from radiance.

Looks OK for me

from radiance.

I cannot explain why it works for you and not me! I'm Java 11 on Windows 10, two displays, one 2.5 scale (#1 in image) and one 1.0 scale (#2 in image), using "extend these displays".

I mis-spoke earlier. It is the low-dpi display that shows the problem, with scale factor 1.0, while my main screen is scale factor 2.5.

from radiance.

That would be in https://github.com/kirill-grouchnikov/radiance/blob/sunshine/theming/src/main/java/org/pushingpixels/radiance/theming/internal/contrib/randelshofer/quaqua/colorchooser/Crayons.java#L171

I don't have a 1x monitor, only 2x and 2.5x.

I think that it's due to the mismatch between the creation of the crayons image in RadianceImageCreator.getCrayonsImage that is using the max scale factor of all the screens, and then drawing that image on a lower-res monitor in Crayons.paintComponent respecting the scale factor of that particular screen.

from radiance.

I'm thinking that the logic in Crayons.paintComponent should "scale" the scale factor to account for that, something like scaleFactor = RadianceCommonCortex.getScaleFactor(this) / RadianceCommonCortex.getScaleFactor(null). Or maybe multiply instead of divide. Or flip the order. I don't have a 1x monitor to verify which one would be the right one to do.

from radiance.

I can try testing code changes.
(My 1.0 monitor is very old!)

from radiance.

"Or maybe multiply instead of divide."

Neither of those works correctly. I'll try some other things....

from radiance.

This is what works for me:

// use scaleFactorA for the image....
double scaleFactorA = RadianceCommonCortex.getScaleFactor(null);
RadianceCommonCortex.drawImageWithScale(g2d, scaleFactorA, crayonsImage, 0, 0);

// then use scale factor as before for the rest
double scaleFactor = RadianceCommonCortex.getScaleFactor(this);

from radiance.

PS: It would be really nice if there were a setting somewhere to disable drawing the color name in this panel. That way I wouldn't need to worry about translation. Just have some flag to disable the call to "g2d.drawString(selectedCrayon.name....)"

from radiance.

An API to configure the color chooser would be a nice addition, something along the lines of an enum that lists all available panels, and allows the app to choose which ones to display and in which order. I'll need to think of a way to configure the specific per-panel display options so that it's not just for the color name of the selected crayon, but something a bit more generic.

That would happen in the next release.

from radiance.

Thanks for fixing the crayons and color wheel!

"lists all available panels, and allows the app to choose which ones to display and in which order"

Something like that already exists, though without the enum. Please don't take this ability away!

UIManager.put("ColorChooser.defaultChoosers", new String[] {ColorWheelChooser.class.getName(), SwatchesChooser.class.getName()});

I only keep the ones that scale well and don't have much (or any) text to translate.

I was also able to easily test changes, like those scaling options above, by creating a custom chooser and including it in the list:

UIManager.put("ColorChooser.defaultChoosers", new String[] {MySpecialChooser.class.getName()});

from radiance.

I don't have a 1x monitor, only 2x and 2.5x.

FWIW, for testing purposes one may use -Dsun.java2d.uiScale=1.0 system property, possibly with another desired value.

from radiance.

I think that would apply to all connected monitors. The environment that was needed to recreate this bug was to have one high-res monitor, and another at 1x.

from radiance.

Ah, all right. I've missed the secondary issue of the color cursor not adjusting its size on a secondary monitor with a different DPI.

from radiance.

Using -Dsun.java2d.uiScale=1.0 would cause all parts of the program to run without scaling to match the monitor resolution. Thus on a 2.5-scale monitor, text in normal font sizes would be too small to read.

But thanks for the comment. And your xbrz library could prove useful. :)

from radiance.