Today, I'll document how to address the issue of blurry installation package interfaces caused by DPI scaling during the process of creating an installer using nsNiuniuSkin and Nsis. I hope this proves helpful to everyone!

Problem Background

Early Issues

As an installation package UI plugin, nsNiuniuSkin initially did not support DPI scaling. Our previous solution was to let it automatically scale with the system, leading to several problems:

• Fonts became blurry after DPI scaling.
• Window images became blurry after DPI scaling.

This significantly affected the aesthetic appeal of the installation package, contradicting our original intention of beautifying the package! Here's an example of automatic scaling at 1.5x:

You can see that it's still quite blurry, and it becomes even more pronounced at 2x scaling.

In 2020, I began addressing this issue and achieved good results. Thanks to the DPI scaling support in Duilib_Ultimate, we easily supported DPI scaling. Afterward, we added support for no scaling and 2x scaling, meeting most application requirements.

New Issues

However, changes came swiftly. With the continuous improvement of display resolutions, 2K and 4K screens became common. Without DPI adaptation, the following problems arose:

• We unified the handling to not scale when below 1.5x DPI, causing the window to appear small at 1.5x DPI.
• Some users now have 4K displays and use 300% scaling, exceeding our existing scaling capabilities and resulting in either small displays or unsuccessful scaling.

Solution

Knowing the issues, the next step is to address them. Considering practical issues and future scalability, I focused on the following points:

• Add support for 1.5x scaling to prevent disconnection.
• Adjust scaling to 150%, 200%, 300%, 400%, etc.
• Do not support irregular scaling like 125%, 175%, and other custom factors. This decision was made to avoid difficulties in controlling image sizes and potential inaccuracies in font sizes resulting from rounding during irregular scaling.

Implementation

Next, I will demonstrate how to implement adaptive functionality for different DPI scaling scenarios using nsNiuniuSkin+Nsis:

1. Implementation Principle

The core idea is to first use system APIs to prevent our program window from automatically scaling with system DPI (automatic scaling causes blurriness). Then, within the program, read the current DPI scaling parameters, allowing our program to control window and control sizes, font sizes, control spacing, etc. Also, control the application of different images under different DPIs to ensure the window's display conforms naturally to the respective DPI scaling.

You can refer to Duilib_Ultimate for a good implementation.

2. Resource Preparation

Based on Duilib_Ultimate, I adjusted the control rules for naming images. I prefer a naming convention similar to that used for different factor images on MacOS, such as:

• bg.png
• bg@1.5x.png
• bg@2x.png
• bg@3x.png

When designing and cutting images for the installation package UI, consider which scaling scenarios to support. Generally, supporting 1x, 1.5x, and 2x should be sufficient. Support for 3x and 4x can be added in the future if needed.

It's worth mentioning that the main consideration when choosing which factors to support is the resource size. Aside from the files to be installed, the image resources significantly impact the final size of our installation package. After cutting the images, it's advisable to compress them to reduce size.

3. Configuration Process

Next, using our leeqia_senior template as an example, let's discuss the specific configuration process (already supporting 1x and 2x, adding support for 1.5x):

1. Place the prepared 1.5x image resources in the skin/images/ directory. After this addition, each image type will have three images at different scaling factors.

2. Find the script file ui_soft_setup.nsh. In its DuiPage function, add a line of script below the nsNiuniuSkin::InitEngine line:

The four parameters in this line represent support for 1.5x, 2x, 3x, and 4x scaling, respectively. Considering image size and our current needs, we currently only enable support for 1.5x and 2x (factors greater than 2x will be displayed as 2x). The following images showcase the advanced version's display at 1.5x and 2x scaling:

Advanced version's display at 2x scaling:

Here, we can clearly see that whether at 1.5x or 2x DPI scaling, the text and images on our window remain clear. Simultaneously, the window size has appropriately increased, perfectly resolving the window display issue during DPI scaling.

4. Considerations

When configuring the UI of the installation package, due to the existence of 1.5x scaling scenarios, there are a few considerations to prevent precision loss due to rounding (which is also why we do not support 125% and 175% scaling):

• Avoid odd font sizes as they won't be accurately rounded at 1.5x scaling.
• When designing control sizes and spacing, use even numbers to avoid precision loss at 1.5x scaling.
• Ensure that designed image dimensions are even numbers.

Conclusion

During the installation process, a beautiful UI can leave a lasting impression on users, reflecting the software provider's focus and care for user experience! I hope our efforts make the installation package creation easier and more enjoyable!

May there be no difficult installation packages in the world!