improve support for modern scaled high-dpi LAFs

[axtimwalde]

This PR is a start to improve support for modern auto-scaling high-dpi Swing Look and Feels like the fabulous https://www.formdev.com/flatlaf/.

FlatIntelliJLaf

FlatDarculaLaf

TODO

• FlatLaf implements sophisticated logic to extract the correct UI scaling factor on all platforms which in 2021 Swing is apparently still a thing. In this PR, I made a dirty shortcut by comparing the resulting Panel.font size to an assumed nominal 12px font size. Why Panel.font? Because all L&Fs on my platform know it (unlike defaultFont). This leaves the antique Metal skin uncompromised but is notably NOT the correct scaling factor for the FlatLaf skins that have a nominal font size of 15px... Should we depend on FlatLaf and use their method? I would like that very much!
• The scaling property is currently fetched and loaded by various classes at construction or class loading time, whatever was easier. This prevents the property from updating when a user changes the scaling factor. Not too big of a deal in most daily life scenarios (compare Eclipse which can't do it either), but there are situations where this would be nice to have, e.g. when one connects to a projector or different monitor with a different scaling profile. The FlatLaf skins can do this on-the-fly adjustment and we should use their estimator or attach to a property with a listener. I assume that they have this somewhere.
• The range sliders still look bad. We should replace them with JIDE range sliders because they are perfectly supported https://github.com/JFormDesigner/FlatLaf/releases/tag/0.45.
• The animated side panel handle does not scale and adjust colors, mostly becasue I did not have an SVG icon to play with. I think it should do that but in the meantime seems to be usable at 200%.
• The card title bars on Metal are now a bit too bright. Look for another configurable color that works for all UIs or add a special hook for Metal.
• No tests performed anywhere but on Ubuntu 20.10 Gnome at 100% and 200% UI scale. We need to test elsewhere, in particular Mac and Windows because they handle UI scaling differently.
• Add a menu to select the theme. (Should we call it Theme, Look and Feel, Skin, ...? I think theme is compatible with the mainstream.)

[tpietzsch]

There is a weird issue: The background of the "current" radio buttons in the table is not set. (That's also visible in your screenshots). This happens here: https://github.com/bigdataviewer/bigdataviewer-core/blob/152b743ce91e93e878c679374484af68f0a8b4c0/src/main/java/bdv/ui/sourcetable/RadioButtonRenderer.java#L58

For the FlatLaf it just doesn't work for that specific color.

The weird thing is, that if I slightly modify the color, e.g., instead of

setBackground( table.getSelectionBackground() );

I do

final Color c = table.getSelectionBackground();
setBackground( new Color( c.getRGB() + 1 ) );

then it works.

[DevCharly]

The problem is probably that the radio renderer is not opaque. setOpaque(true) should fix it.

See also: https://github.com/JFormDesigner/FlatLaf/blob/c6fec0a131c6f04345b3f4aec5b06d09c25c7d33/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatTableUI.java#L141-L145

The problem is that radiobuttons (and checkboxes) are non-opaque in FlatLaf and therefore do not paint selection background when used as renderer. In other Lafs (Windows, Metal, ...), they are opaque and do not have this problem.

[DevCharly]

The weird thing is, that if I slightly modify the color, e.g., instead of

setBackground( table.getSelectionBackground() );

I do

final Color c = table.getSelectionBackground();
setBackground( new Color( c.getRGB() + 1 ) );

then it works.

Yes, the reason is that there is a check in FlatRadioButtonUI that paints the background if the color does not implement interface UIResource: https://github.com/JFormDesigner/FlatLaf/blob/c6fec0a131c6f04345b3f4aec5b06d09c25c7d33/flatlaf-core/src/main/java/com/formdev/flatlaf/ui/FlatRadioButtonUI.java#L118-L127

I think I should change this and paint the background as soon as the backgound color is different to default color (UI key RadioButton.background). Then this should work without setOpaque(true).

[DevCharly]

Regarding scaling: There is a class com.formdev.flatlaf.util.UIScale in FlatLaf that is used for scaling. Useful methods are e.g. float getUserScaleFactor() or int scale( int value ). This class is Laf independent and works also with other Lafs.

User scale factor is based on font size: https://github.com/JFormDesigner/FlatLaf/blob/c6fec0a131c6f04345b3f4aec5b06d09c25c7d33/flatlaf-core/src/main/java/com/formdev/flatlaf/util/UIScale.java#L222-L241

See class header for description of system/user scaling modes: https://github.com/JFormDesigner/FlatLaf/blob/master/flatlaf-core/src/main/java/com/formdev/flatlaf/util/UIScale.java#L39-L62

Let me know if there are problems or questions. BTW I'm the author of FlatLaf 😉

[tpietzsch]

@DevCharly thanks a lot for the pointer! setOpaque(true) indeed fixes the radio-button highlighting.

[DevCharly]

FYI if you need to use custom colors for different themes (light/dark), there is some new documentation online that could be interesting for you: https://www.formdev.com/flatlaf/how-to-customize/#application_properties

There is also a UI Defaults Inspector available, which might be useful for development: https://github.com/JFormDesigner/FlatLaf/tree/master/flatlaf-extras#ui-defaults-inspector

[tpietzsch]

@axtimwalde in branch laf-switching I worked on making the UI adapt nicely to changing Look-And-Feel

Could you try it out, whether it works for you on Linux as well?

There is still stuff to do for HighDPI scaling, which I cannot test here. Here are some places which I suspect would need to be looked at: https://github.com/bigdataviewer/bigdataviewer-core/blob/89da3ccb7859f6d32572c0834119c13aabd05300/src/main/java/bdv/ui/convertersetupeditor/ColorPanel.java#L94-L95 https://github.com/bigdataviewer/bigdataviewer-core/blob/89da3ccb7859f6d32572c0834119c13aabd05300/src/main/java/bdv/ui/convertersetupeditor/ColorPanel.java#L148 https://github.com/bigdataviewer/bigdataviewer-core/blob/0b57883714e03575a787abe24490e06e3cbac27b/src/main/java/bdv/ui/CardPanel.java#L227-L230

Tobias Pietzsch @tpietzsch Mar 02 23:54 https://github.com/bigdataviewer/bigdataviewer-core/blob/c4ca7e01a067102f15ff04b6aedf85dbb8d506d0/src/main/java/bdv/ui/rangeslider/RangeSliderUI.java#L233 Maybe you can find a method that is called when a window is moved from highDPI to normal screen and update stuff from there? (For the LAF changes, JComponent.updateUI() is called. That's where I put the relevant updates for colors etc.)

[imagesc-bot]

This pull request has been mentioned on Image.sc Forum. There might be relevant details there:

https://forum.image.sc/t/new-bigdataviewer-version-10-4-1/68818/1