Supporting UHD displays and Dark theme
Table of contents
1. GUI mode detection
2. Scaling GUI for actual GUI font and UHD resolution
3. Color adjustment
4. Iml files
1. GUI mode detection
UHD mode is activated when standard GUI font is larger than 24 pixels. Dark theme mode is activated if IsDark(SColorPaper()), which means that grayscale value of default background is less than 80. Note that both modes create 4 combinations in total - standard resolution with light theme, standard resolution with dark theme, UHD resolution with light theme, UHD resolution with dark theme.
IsUHDMode() and IsDarkTheme() functions return respective current GUI status.
2. Scaling GUI for actual GUI font and UHD resolution
U++ coordinates in drawing operations are always in real pixels for screen targets. U++ provides various functions to adjust GUI elements metrics to host platform font size and UHD mode. Some of these function use 'font-ratio', which is the ratio of metrics of current default GUI font to 'design-font' (which is more or less defined as font where text "OK Cancel Exit Retry" has Size(99, 13), font ratio is then current GUI font Size vs this predefined size).
int Zx(int cx);
double Zxf(double cx);
|
Scales the value horizontally based on font ratio.
|
int Zy(int cy);
|
Scales the value vertically based on font ratio.
|
Size Zsz(int cx, int cy);
Size Zsz(Size sz);
|
Scales size based on font ratio.
|
Font FontZ(int face, int height = 0);
Font StdFontZ(int height = 0);
Font SansSerifZ(int height = 0);
Font SerifZ(int height = 0);
Font MonospaceZ(int height = 0);
Font RomanZ(int height = 0);
Font ArialZ(int height = 0);
Font CourierZ(int height = 0);
|
Creates the font while scaling its height based on current font ratio. If height is 0, the height is set to current GUI font height.
|
int DPI(int a);
double DPI(double a);
Size DPI(Size sz);
Size DPI(int cx, int cy);
|
If UHD mode is active, returns the input argument multiplied by 2, otherwise returns it unchanged.
|
Image DPI(const Image& a, const Image& b);
|
Returns b if UHD is active, a otherwise.
|
|
Usually DPI functions are used if the value is Image related, 'Z' functions if it is text size related.
3. Color adjustment
If application is specifying any colors, these colors need to be adjusted for dark theme. This can be often done by using predefined colors. Sometimes only the light theme color is available that needs to be converted to the dark theme - this can be done using DarkTheme function. Alternatively AdjustIfDark converts the color with DarkTheme only if dark theme mode is currently active.
4. Iml files
Iml files most often contain images that are used in GUI interface. Obviously, these images must be usually different for any of 4 GUI modes.
.iml should always contain images for either standard or UHD resolution and the light theme. These images are used to define the set of icons.
U++ then uses smart algorithms to convert such images for the current GUI mode. These work acceptably well in most cases.
Developer might decide to provide dedicated variants for any image for any target mode which will be used instead of converted basic icon. Such variant can be either placed into the same .iml file or into separate .iml file.
The complete control of the process is available in image details in the icon designer:
Fixed
|
Image is never scaled or darkened to match current mode.
|
Fixed colors
|
Image is never darkened to match current mode. Set this if the image looks better in the dark mode without actually converting it.
|
Fixed size
|
Image is never scaled to match current mode.
|
UHD variant
|
Image is variant for UHD mode.
|
Dark variant
|
Image is variant for Dark theme.
|
Export...
|
This is unrelated to UHD / Dark theme mode, but if this is checked, the Image is exported as .ico and .png files. This is intended for application icon (e.g. shown in host shell).
|
|
Finally, it is also possible to disable automatic conversion for the whole .iml file by #defining FIXED_COLORS and/or FIXED_SIZE macros:
#define IMAGECLASS MyImg
#define IMAGEFILE <MyApp/MyImg.iml>
#define FIXED_COLORS
#define FIXED_SIZE
#include <Draw/iml_source.h>
|