4K/Full HD issues

[mvitorovic]

When developing new client, there are UI issues to be careful of (all issues assume that both resolutions needs to be supported on the same machine):

• font size issues, moving between two monitors
• user pictures scaling; whatever the users create should look good on both screens
• UI icons. We need to make sure that whatever we use, the UI icons (like on tool-bars) look OK no matter what the monitor resolution is used. The client should have icons for all resolutions and use the correct ones.

[claudio-rosati]

About UI icons I was thinking to an utility in org.phoebus.core.ui to handle these and other icon-related issues.

Icons could have the the following names

<name>_<width>x<height>[@<n>x][_dark].<format>

where:

• name is the name of the icon file (e.g. warning);
• width is the width of the icon in points;
• @<n>x is optional. When present it indicates the square root of the number of screen pixels per image point. n is an integer greater than 1. So @2x indicates 4 screen pixels for an image point.
• _dark indicates that the image is done for a dark UI theme;
• format is the image format (e.g. png, jpg, etc.).

Note: imge_20x20@2x.png and imge_40x40.png contains the same number of image pixels (1600), but imge_40x40.png will be displayed as a 40x40 points image in a low-resolution screen, while imge_20x20@2x.png as a 20x20 on a high-resolution screens (Apple retina displays, for example).

The IconUtility class shoul allow the user to get the right image just specifying

• the name,
• width and height (in image points),
• and the format.

The utility will get the screen resolution from Java AWT/JavaFX, the kind of thema (dark/light) from the application preferences, and will search for the appropriate image file if exists.

Something similar already exists in NetBeans RCP and could be of inspiration: ImageUtilities#loadImageIcon.

[kasemir]

If you have a HiDPI setup, by all means start checking it out.

Clone the sources, invoke 'run_maven.sh', and then check

• Splash screen
• Icons in the toolbars of PV Tree, PV Table and debug/PV List

[claudio-rosati]

I want to point you to the following page: JavaFX Tip 27: HiRes / Retina Icons

Never use input streams to load icons, only URL or CSS, and if you provide the right set of icons... et voilà les jeux sont faits!

[claudio-rosati]

The utility class I suggested could be used to simplify things and, most important, to cache the images.

[kasemir]

Yes, by all means, please create a pull request that implements such a utility class and demonstrates its use for the toolbar icons of the PV Tree, PV Table and debug/PV List.

[claudio-rosati]

I will

[kasemir]

There is now a cache for images, org.phoebus.ui.javafx.ImageCache.
It uses the new Image(clazz.getResource(path).toExternalForm()) approach that should support HiRes, and we already have 5 icons with "@2x" alternative because these were Eclipse icons, and Eclipse 4.7.1 now includes "@2x" variants for many of its icons.

What's left:

• Somebody with a high res monitor test this
• Add more "@2x" variants.

[claudio-rosati]

So this means I can include @2x palette images for Display Builder.

[kasemir]

There are still at least 2 HiDPI related issues:

On the Mac, HiDPI variants of icons are used just fine within application windows, but in the system menu bar they result in oversized icons.

In this example, the Data Browser which offers a ...@2x.png icon has that one show up too large:

On Linux, there are so many ways to configure the desktop that we don't have a good recipe of what to do.

--> Started https://github.com/ControlSystemStudio/phoebus/wiki/HiDPI-Support to collect some detail