Toolbar image for Hi-DPI display

[WanderMax]

I use version Notepad2_x64_v4.20.03r2680, screen size is 4K and set system scale ration 250%.
I find that toolbar icon is blurred in my screen as snapshot below:

I think toolbar icon maybe small in resolution or not fit for hi-dpi screen.

[zufuliu]

We don't have Hi-DPI toolbar image for Notepad2, the toolbar image is auto resized based on current DPI.
for metapath, we have SVG sources (from Visual Studio Image Library 2017) for toolbar images (see issue #89), it can be fixed.

Notepad2 use <gdiScaling>false</gdiScaling>, while metapath use <gdiScaling>true</gdiScaling>.
can you also upload screenshot for metapath, and screenshots for following dialogs:
Scheme > Syntax Scheme... > Select Scheme dialog
File > Encoding > More > Select Encoding dialog
File > Favorites > Open Favorites... > Favorites dialog

Related issues: #45, #46

[zufuliu]

Thanks, metapath's toolbar image looks better than Notepad2's on Hi-DPI screen, but we need to turn of GDI auto scaling on the main editor window.

The image on TreeView (the Select Encoding dialog, see issue #121) is smaller than expected, the folder icon is nearly invisible, which will also affect other schemes dialogs (see issue #169) .

[WanderMax]

yeah, I hope it can be of help for you.

[zufuliu]

@WanderMax Can you help test 2f3baf2, pre-built packages is available at (or you can click Notepad2's Help > Latest Build menu)
https://ci.appveyor.com/project/zufuliu/notepad2/builds/31952662/job/9ir1ihxjkmc8b85a/artifacts

I also want to know whether code folding lines/markers is very thin on HiDPI displays. from your first screenshot, caret with line width 1 is very thin, but it can be changed from View > Caret Style, though it should default to a better one, possible line width 2.

you can copy following text into Notepad2, then change scheme to Text File, 2nd Text File or Python, then make a screenshot (after folding code on line 2) like this:

line 2
    line 3

line 5
    line 6

[zufuliu]

Thanks, icons on Select Scheme dialog is much larger than Select Encoding dialog, I reverted the changes for Scheme dialog in 77da032.

[zufuliu]

Button image on Favorites dialog is fixed in e7ae840.

[zufuliu]

The reversion is not changed, because we use shallow clone on AppVeyor
https://github.com/zufuliu/notepad2/blob/master/appveyor.yml#L35

[WanderMax]

OK, I get it.

[WanderMax]

@zufuliu for toolbar icon size, you can use waifu2x to get larger resolution img.

[zufuliu]

@WanderMax if you have made such better toolbar images (made from the three toolbar images in https://github.com/zufuliu/notepad2/tree/master/res folder, or find toolbar images from other place)

you can use it as your Notepad2's toolbar image by open Notepad2.ini, uncomment BitmapDefault=Toolbar.bmp, and set that to the image you have. then open Notepad2, right click toolbar (or go Settings -> Appearance) uncheck "Auto Scale Toolbar", then restart Notepad2.

[Toolbar Images]
BitmapDefault=Path to My 250% Toolbar.bmp
;BitmapHot=ToolbarHot.bmp
;BitmapDisabled=ToolbarDisabled.bmp

[blackcrack]

Hi @zufuliu ,

lass dich nicht erschrecken
Don't let yourself be frightened/don't be scared

it's all okey imho.. i have a LG UHD.. and there is nothing bluered ...

edit: if you whant a higher resolution, tell it.. i can make it..

best
Blacky

[zufuliu]

@blackcrack But your screenshot use Notepad3 instead of Notepad2.😂

[WanderMax]

Anyway, toolbar img blurred is not the high priority, just focus on main function~

[blackcrack]

@zufuliu okey, okey,... damn.. all so small.. 😬 😀
damn.. wrong file klicked.. (default like i have told... because opened N3 and was tired ..)
@WanderMax
😃 4096x2160 bitsch ! 😊 😆
i hope you have good feelings now hun ! 😙
*giggle*:laughing:

65% sharp compressed JPG

i can make a 5 MB jpg file with 100% sharp , if you want :))

best regards
Blacky

[blackcrack]

@WanderMax hey man, i have feel it funny, stay to you words :)
was not bad, was funny :))))) 👍 *kiss*

best greetings
Blacky

[blackcrack]

100% JPG all icons be blurred if you scale the Screen, it's the Fault of MS and not of N2 !

i guess the issue can closed :)

[zufuliu]

@WanderMax can you test latest build https://ci.appveyor.com/project/zufuliu/notepad2/build/job/i3w6v8elisioegtj
I fixed a toolbar image resizing bug in 1b483f5

Notepad3's toolbar image is purchased by Notepad3 team, you can use it as free, but I can't distribute it with Notepad2.
https://github.com/rizonesoft/Notepad3#changes-compared-to-the-notepad2-mod-fork

New toolbar icons based on Yusuke Kamiyaman's Fugue Icons (Purchased by Rizonesoft)

[WanderMax]

@zufuliu
default toolbar with scale on/off:

96 height toolbar with scale on/off:

it seems that github img is post-processed after uploading, not same sharp as original.

[zufuliu]

@WanderMax thank you, the new image resizing works as expected. For your 4K display, you will need a 16x2.5=40 pixel height toolbar image. if your toolbar image is already 40 pixel height, enable Auto scale toolbar has no effect.

[WanderMax]

@zufuliu yes, I test notepad3, you can see my snapshot below:
#rizonesoft/Notepad3#2066 (comment)

for large toolbar img, Auto scale will downscale img by limited height, it makes toolbar sharper.
auto scale off:

• 1:1 display toolbar img, maybe quite small or large;

auto scale on:

• small toolbar img, enlarge img by (system scale ratio or notepad2 defined height limit ?);
• large toolbar img, enlarge img by (system scale ratio then downscale to notepad2 defined height limit ?);

[blackcrack]

@zufuliu
hmm.. how big is the N3 Icons, how big be the native N2 Icons.. just a hint..
a mall icon who be not make smaller, is a minimal blurred, a bigger icon who make more smaller, is more sharp..
other is, if you move the the icons into a svg-file this icon is shared shrink or enlarged without bluring, i have use this technical at my iconthemes in kde/plasma, but at moment to i work in Win7 up to Reactos .. in png>svg can you resize the images without bluring, if you add the svg support
and the issue is done .. imho..
https://www.pling.com/u/Blackcrack/products

best regards
Blacky

[Matteo-Nigro]

Another thing: For this style of icon, we have to choose a dominant colour which is then repeated in each icon. For example, Vistual Studio has blue. Do you have a preference?

[zufuliu]

You can use blue as dominant color to produce Toolbar.bmp for preview and test, Visual Studio blue color is 00539c (see Save_16x.svg).

[bluenlive]

@zufuliu If you are interested in simple style icons, how about my icons?
Of course some rearrangement is needed...

[blackcrack]

maybe would a themesupport more better, to have different styles ?
for selecting what the user want.. i like the old style fro Florian .. and this actually style is also nice..
and if anyone want have a more blue.. or more abstract okey, but then maybe selectable.. as different themes..

@zufuliu i be at moment at linux, plasmatheme at work.. but i have the "autosave/backup" surface still in my screenshoot for change the style, grafikly , but at moment be i at the plasmatheme in mimeype to make in 3 different styles..
and it be ca500(x3) different icons.. a win2000, Win XP and more real/modern but not flat like Win10(baehh..)
if i have this finish, then go i again to the autosave surface ..

best :)

[zufuliu]

@bluenlive your line icon appears far too simple 😄

Current Office 2003/Visual Studio 2003~2015 style toolbar image will be kept in repository as is (new toolbar image has different name), Visual Studio blue themed toolbar image may not works well for us, as it's toolbar has background color.

[Matteo-Nigro]

Hi @zufuliu! I share with you a small 'spoiler' of what I am doing... Inspired by Visual studio but adapting it to the shape of the original icons, it seems to be coming along really well...

The work is not finished I am missing some icons and some I have to fix but the visual impact is this.

[zufuliu]

Looks clean then previous one 👍

[Matteo-Nigro]

Hello everyone! As I did for the previous toolbar, I attach the zip package with the preview of the 16 and 24 px bar with the new style. The attached ini file is set to use the 16px one. Although 1 or 2 icons may not convince me completely the job is done and I would be ready to make the pull request. Let me know @zufuliu how to proceed also to avoid overwriting previous work.
Notepa2 New Toolbar.zip

[Matteo-Nigro]

Hi @zufuliu, so how do I proceed with the toolbars? In the meantime I fixed the colours and readability of 3 icons. 😉

[zufuliu]

Just make a PR and upload what was done, but I'm not yet confident to ship the new toolbar image in v4.23.01.

Merry Christmas 🎅

[Matteo-Nigro]

OK I upload everything by making a subdirectory so as not to overwrite the other toolbar. Thanks for the good wishes. I also wish you a rest from your activities 😄

[zufuliu]

A draft plan to ship the toolbar image: in v4.23.01 normal builds are built from main branch with current 16x16 toolbar image, adding extra builds built from develop branch with _HiDPI_ in zip name.

[Matteo-Nigro]

Hi @zufuliu, Great, will the branch develop be kept so parallel or will you join it to the main at some point? When could the new icons be implemented in the main project? 😉

[zufuliu]

Yes, develop branch will be merged into main at some point after v4.23.01.

[zufuliu]

@WanderMax Can you test whether icons on Encoding dialog also looks as expected on your 4K monitor? https://github.com/zufuliu/notepad2/blob/develop/res/Encoding.bmp is made with two 16x16 images (for enabled and disabled states).

We may also need HiDPI images for Encoding.bmp, it contains following characters:

• Top: Cyrillic letter Ya, я or Я
• Bottom left: Latin small letter a
• Bottom right: Chinese character 宇 (universal)

[Matteo-Nigro]

Regardless as soon as I have a moment I can make a remastered version...

[zufuliu]

Regardless as soon as I have a moment I can make a remastered version...

We may not need them, if it (the three characters) scale well.

[WanderMax]

Here is the Encoding dialog snapshot, it seems not clear as it's small in dialog list.

And I find the metapath need HD remastered ico files, you can see the snapshot

[zufuliu]

Encoding icon seems not bad (compared to the folder icon).

Image problem for metapath can be discussed in issue #89, it's more urge to modernize these Win95 icons in https://github.com/zufuliu/notepad2/tree/main/metapath/res folder.
SVG for metapath can be used make toolbar image for other sizes, but as metapath currently use GDI scaling (issue #46), it can only use the 16x16 Toolbar.bmp.

[zufuliu]

I think we don't need other sized images for Encoding.bmp (to reduce binary size), I feel startup time for Notepad2 with HiDPI toolbar images is decreased (tested x64 build), possible due to exe size increment. so I added NP2_ENABLE_HIDPI_TOOLBAR_IMAGE configuration option in b1e9af4, but still not sure whether continue to build each release package with two versions (one with only Toolbar16.bmp, the other with all Toolbarxx.bmp) after v4.23.01.

[Matteo-Nigro]

Might it be an idea to incorporate the new 16px toolbar and keep the other sizes (24, 32, etc.) as external bmp files configurable from ini files? It would certainly keep the binary slim and give those who have the problem of blurred icons a way to solve it.

[zufuliu]

@WanderMax forgot to ask you what about Notepad2's new toolbar image? you can download prebuilt (built from develop branch) Notepad2.exe from GitHub Action, e.g. from https://github.com/zufuliu/notepad2/actions/runs/3862162679

@Matteo-Nigro after thought again, I think we can continue to build each package with two versions:

• normal version: built with small application icon and 16px toolbar image. this is suitable for most people with 100% default scaling monitor or for people prefer small binary size.
• HD version: built with HD application icon (e.g. with 256px) and HD toolbar images. HD system appears is very faster, so startup time decrease due to binary size increment is probable not noticeable.

As such, release assets will be doubled (to 62), it should not have problem as other project already has many assets (e.g. 48 assets at https://github.com/llvm/llvm-project/releases/tag/llvmorg-15.0.6).

The hard work is that I need to write Python script to auto build all assets and use GitHub public API to upload them. when this is done, release process will be much simple.

[WanderMax]

tested prebuilt develop branch, toolbar looks great in my 4K monitor, it's clean and sharp.
here is the snapshot:

[zufuliu]

Thanks for everyone, mark this feature as implemented.

[zufuliu]

Uploaded screenshot with new toolbar image to Wiki, readme.md will be updated to use this screenshot when release v4.23.01 in this weekend.
Here is the image link: https://raw.githubusercontent.com/wiki/zufuliu/notepad2/screenshots/v4.23.01HD.png