Trayicon on highdpi is ugly

[rutkas]

When dpi > 100% in Windows 10 is set for high resolution screens then sync-trayzor's tray icon looks ugly. For example one of my system has 125% DPI setting and tray icon is very blurred. I have tried different DPI scaling app settings for binary and it did not solve the problem.

[henriklb]

Also, I'd love an monochrome option if it isn't too much trouble

[tomasz1986]

I have just tested the newest version, and I would like to add that not only is the icon blurry, but the overall SyncTrayzor window itself is blurry too.

How to reproduce:

1. Set DPI to 125% when the system default is 100%.
2. Start SyncTrayzor.
3. The overall GUI, including the browser, is blurry.

The problem is limited to Windows 10, because the scaling method has changed in the OS. Windows 7 and 8 do not have this problem, even when using non-standard DPI.

[rutkas]

3. The overall GUI, including the browser, is blurry.

High DPI is a pain, this is related to many programs, to fix it just right click on the icon or binary file, go to properties -> Compatibility -> Change settings for all users -> Change high DPI settings and set Ovverdie high DPI scaling behaviour to Application. Restart app and check results. You can also play with high settings
settings there to get better results.

But tray icon blur problem can not be fixed by this method, icon resolution should be fixed in the code.

[tomasz1986]

I know and regularly use this this method for many other programs, but for some reason it does not seem to work for SyncTrayzor.

[rutkas]

I have 125% DPI, here is how SyncTrayzor looks on my system. Maybe browser a little blurry but not critical. And actually I have no difference between "Application" selected and notging selected. But choosing "System" makes everyting blurry.

Have you also tried zoom in and zoom out of browser in synctrayzor in menu?

[canton7]

Can you try this build please https://ci.appveyor.com/project/canton7/synctrayzor/builds/37076296/artifacts ?

It contains some switches which should make the embedded browser non-blurry (but I can't reproduce the blurriness myself, so I can't check...).

The tray icon only contains up to 32x32 -- I'm in the process of adding the new resolutions

[rutkas]

Can you try this build please https://ci.appveyor.com/project/canton7/synctrayzor/builds/37076296/artifacts ?

Yes, I cant notice difference between previous release, here is the screenshot from the build you provided:

[tomasz1986]

Maybe browser a little blurry but not critical.

Yeah, it is not unusable, but definitely blurry when compared side by side with an actual Chromium browser.

Have you also tried zoom in and zoom out of browser in synctrayzor in menu?

Does not help, unfortunately. The zoom itself works, but the browser window is still blurry regardless.

Can you try this build please ci.appveyor.com/project/canton7/synctrayzor/builds/37076296/artifacts ?

I have just checked it, but there does not seem to be any difference.

By the way, what do you use to change the system DPI? You may need to use "custom scaling", not the Windows 10 slider with pre-defined levels. Can you try reproducing with DPI set to something like 130%?

[canton7]

No luck I'm afraid -- still crisp

[canton7]

Out of curiosity, can you try File -> Settings -> Disable hardware rendering?

[rutkas]

Can you send desktop screenshot with SyncTrayzor opened ?

[tomasz1986]

Out of curiosity, can you try File -> Settings -> Disable hardware rendering?

No difference. I have a feeling that this is related to the blurry icon though, regardless of the size. I use some other older software here, and their tray icons may look pixelated, but not blurry. Only the SyncTrayzor icon has this blurriness.

Just for comparison, here is how the tray icon looks in Windows 7 and 10. Both systems are set to 127% DPI.

Windows 7

Windows 10

[canton7]

We're talking at cross purposes -- this is why it's a bad idea to mix two different problems into the same issue!

I haven't touched the tray icons yet -- all of the discussion so far as been about the blurry embedded browser.

[canton7]

For the blurry embedded browser, can you try this build? https://ci.appveyor.com/project/canton7/synctrayzor/builds/37076655/artifacts

[tomasz1986]

I am sorry for the mix. I hope that it is fine to continue with the browser blurriness here?

I have tried the newest build, but to no avail.

This is how the Syncthing GUI looks right now in SyncTrayzor. Everything is a little blurry.

And this is how it looks when opened in the actual Chromium browser. The browser uses 100% default settings, including zoom, etc.

[canton7]

and you can only repro that with a custom scaling, not one of the standard scalings?

[tomasz1986]

Actually, no. I had originally thought so, but I have tested the pre-defined 125% scaling right now, and the GUI is still blurry.

[canton7]

For the blurry tray icons, can you try this build please https://ci.appveyor.com/project/canton7/synctrayzor/builds/37076901/artifacts ?

Those tray icons contain: 16, 32, 20, 40, 24, 48, 32, 64.

[tomasz1986]

The new icon looks much better now. Windows 10 @ 127% DPI.

[canton7]

It won't be perfect at non-standard scalings, as Windows will be doing its own scaling of the icon, but it has more to work with than it did before

[canton7]

For the blurry embedded browser, it looks like things are offset by 0.5px perhaps -- see the top and bottom of that folder icon.

Can you try this build? https://ci.appveyor.com/project/canton7/synctrayzor/builds/37076940/artifacts

[tomasz1986]

I think that you have nailed it 👏. The GUI in the new build seems to look exactly as in the Chromium browser.

It won't be perfect at non-standard scalings, as Windows will be doing its own scaling of the icon, but it has more to work with than it did before

I would not worry too much… Those that use non-standard scaling, including myself, are probably used to imperfect icons. As long as the icon is not broken or blurry, slight misalignment is no big deal.

Edit: Just a side note though, I see that you have added icons up to 200% DPI. I have seen some laptops that use extremely high DPI, e.g. 250% or even 300%, and this is by default. They may need even larger sizes for the icon not to be blurry.

[canton7]

Good to hear! Just for fun, can you try this one? I changed two things last time, and it would be good to know which affected it: https://ci.appveyor.com/project/canton7/synctrayzor/builds/37077030/artifacts . Thanks!

[tomasz1986]

Unfortunately, the last one is blurry again. The working one is https://ci.appveyor.com/project/canton7/synctrayzor/builds/37076940/artifacts.

[canton7]

OK, good to know what it was, thanks

[rutkas]

I have cheked version with new icons and it's great, tray icon is not blurry now, I think you can add them to release 👍

[canton7]

This is the comination of fixes that I'm planning to release: https://ci.appveyor.com/project/canton7/synctrayzor/builds/37077130/artifacts . Icons up to 300%, just the fix for your blurriness (and not the other unrelated things I tried at the same time). Mind giving it a sanity-check? Thanks!

[rutkas]

Sure, thanks, please write me if you need some help in testing

[rutkas]

By the way. what VS version are you using to build the project?

[tomasz1986]

I have tested the final build. No blurriness in the GUI and the icon anymore 👍.

[canton7]

Thanks!

By the way. what VS version are you using to build the project?

VS2019