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.

[Matteo-Nigro]

Great, so how do you want me to proceed now? Do I produce the toolbar in the other dimensions? If yes, can you specify which ones you need? (maybe 16px and 24px) After that you can tell me what to load with pull requests. :wink:

[zufuliu]

Just checked Notepad2.ico, it contains 16x16, 24x24, 32x32 and 48x48, so toolbar image can make the same size? not sure whether 40x40 (250%, e.g. for @WanderMax's monitor) is needed or not.

[zufuliu]

Some changes in resources.h

#define IDB_TOOLBAR16                   100
#define IDB_OPEN_FOLDER                 101
#define IDB_PREV                        102
#define IDB_NEXT                        103
#define IDB_PICK                        104
#define IDB_ENCODING                    105
#define IDB_TOOLBAR24                   106
#define IDB_TOOLBAR32                   107
#define IDB_TOOLBAR40                   108
#define IDB_TOOLBAR48                   109

Notepad2.rc

- IDR_MAINWND             BITMAP                  "..\\res\\Toolbar.bmp"
+ IDB_TOOLBAR16x          BITMAP                  "..\\res\\Toolbar16.bmp"
+ IDB_TOOLBAR24x          BITMAP                  "..\\res\\Toolbar24.bmp"
+ IDB_TOOLBAR32x          BITMAP                  "..\\res\\Toolbar32.bmp"
+ IDB_TOOLBAR40x          BITMAP                  "..\\res\\Toolbar40.bmp"
+ IDB_TOOLBAR48x          BITMAP                  "..\\res\\Toolbar48.bmp"

and Notepad2.c (in CreateBars() function)

if (hbmp != NULL) {
    bExternalBitmap = true;
} else {
    LPCWSTR resource;
    if (g_uCurrentDPI <= USER_DEFAULT_SCREEN_DPI) {
        resource = MAKEINTRESOURCE(IDB_TOOLBAR16x);
    } else if (g_uCurrentDPI <= USER_DEFAULT_SCREEN_DPI + USER_DEFAULT_SCREEN_DPI/2) {
        resource = MAKEINTRESOURCE(IDB_TOOLBAR24x);
    } else if (g_uCurrentDPI <= 2*USER_DEFAULT_SCREEN_DPI) {
        resource = MAKEINTRESOURCE(IDB_TOOLBAR32x);
    } else if (g_uCurrentDPI <= 2*USER_DEFAULT_SCREEN_DPI + USER_DEFAULT_SCREEN_DPI/2) {
        resource = MAKEINTRESOURCE(IDB_TOOLBAR40x);
    } else {
        resource = MAKEINTRESOURCE(IDB_TOOLBAR48x);
    }
    hbmp = (HBITMAP)LoadImage(hInstance, resource, IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION);
}

[zufuliu]

As it's near Christmas and New Year, I created develop branch in hope to hoist the development for the new toolbar image, so we have enough time to finish all the details before ship it (in or post v4.23.01), and other people can test it using the develop branch.

[Matteo-Nigro]

OK, I created the toolbars in the various sizes. Do I load these files (already named as I read your code) into the res/ folder via a pull request to the dev branch? Do I also load the entire folder structure with the various png files that formed the toolbars? Do I also load the updated python script?

Sorry for the questions, but this is quite a complex task :joy:

[zufuliu]

Yeah, you can upload your changes (Toolbarxx.bmp in res folder, png files and script to build each bitmap).

exported png can be placed in tools\images\16x16, tools\images\24x24, etc., svg can placed just inside images folder, existing files in images folder (mostly for metapath) can be kept as is.

Previously posted code snippet has bugs (need to remove x after IDB_TOOLBAR16 to match definitions inside resource.h).

[zufuliu]

Maybe we don't need the 40px toolbar image?

@WanderMax Can check the toolbar size (for other application) on your 4K monitor?

[WanderMax]

Sorry for my late reply. I test the 16px 24px 32px 40px 48px toolbar via BitmapDefault in .ini file. I think 32px is a little blurred (but enough), 40px is sharp Here is the snapshot:

[zufuliu]

Thanks, I merged PR #569 (with 40px image included).

[zufuliu]

Beside color, gradient, fill and stroke tuning, it seems we'd better to design toolbar icon with the 16px icon template and place most edge and vertex at integral pixel (similar to those _16x.svg from Visual Studio Image Library) to ensure good image quality at 16px, 32px and 48px.

CopyItem_16x.svg with View -> Page Grid checked:

[Matteo-Nigro]

Of course, the 16px toolbar I also edited it in photoshop to adjust the off-grid pixels... I was forced to because I kept the original svg's... If you want to do a good job and have detailed icons you would need to make specific svg... One svg for small icons and one for larger icons containing more detail and shading....

The single svg can be adopted if you have very stylised icons consisting essentially only of regular lines.

[Matteo-Nigro]

Hi @zufuliu , so do you think toolbars can be introduced in v4.23.01? In the meantime, is there anything else to be done? 😉

[zufuliu]

likely post v4.23.01, I'd say the toolbar image needs further tuning.

[Matteo-Nigro]

OK I agree... Is there anything I can do or are we waiting for more feedback?

[zufuliu]

Personally, I'd like to reduce icon details (use more abstract and simple icon like Visual Studio Image Library or Inkscape icons). simple icon appears modern (meets current fluent/metro design), has good image quality on resizing. I think it's better to convert these 256x256 svg to small sizes and make most edge and vertex pixel aligned.

[Matteo-Nigro]

OK understood. Let's say this would involve redoing everything from scratch... (the predecessor took about 30h). Maybe the icon set made could be kept as an 'extra' for those who prefer the classic design. I'll get to work on the new toolbar... If you have some screenshots to show me (besides the examples you gave) to better understand the style you prefer, maybe I'll guess the right direction...

[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. :wink:

[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 :smile:

[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 b1e9af41be84c10f50878f69e20d3689e7955afd, 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