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

[WanderMax]

metapath:

[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 2f3baf2ddd5ce6ce73e47efb99a6cf651d9740b4, 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

[WanderMax]

[zufuliu]

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

[zufuliu]

Button image on Favorites dialog is fixed in e7ae8409c36a532b67e95771158224e017f579dc.

[WanderMax]

@zufuliu for latest build, could you please fix commit value to version number (highlighted)? It seems that all latest build these days are as below:

[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.. :grimacing: :grinning: damn.. wrong file klicked.. (default like i have told... because opened N3 and was tired ..) @WanderMax :smiley: 4096x2160 bitsch ! :blush: :laughing: i hope you have good feelings now hun ! :kissing_smiling_eyes: *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 :))))) :+1: *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 :)

[WanderMax]

@zufuliu I use this 2x size toolbar img in latest build as link below (from notepad3 repo), it seems good, sharp and clean in my screen. Here is the snapshot: without Auto scale toolbar with Auto scale toolbar

171 https://github.com/rizonesoft/Notepad3/issues/2066#issuecomment-611015544

[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 1b483f50680f0e0852b83396315f94881203a774

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:

https://github.com/rizonesoft/Notepad3/issues/2066#issuecomment-612557450

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

[zufuliu]

@blackcrack I don't have SVG source for these icons. icon with SVG source (metapath's toolbar image, take from Visual Studio 2017 Image Library) is already in https://github.com/zufuliu/notepad2/tree/master/tools/images folder.

[blackcrack]

@zufuliu no, not source, you can pump/move the png's into svg, this is like you use inkscape as zip programm and move the png's into a an other file like svg who it's able to read the inkscape or svg library this file and can extract the pictureinformations in the right size without blurring.. you need only a svg-library to read the svg-files :) inkscape.exe -f input.php -l -o output.svg inkscape.exe -l -o output.svg input.png (Inkscape version later as 0.92) done :) :+1:

i see, this are all 16x16 px, maybe could we use 265px size with more sharper ouput later, more sharper as in N3 ;) do you have the icons more bigger ?

[blackcrack]

@zufuliu more bigger icon's as source ? at home or can you tell me the source from the icontheme with more bigger icons ?

[zufuliu]

I'm not familiar with Inkscape, tested following bitmap with Path -> Trace Pixel Art, don't get expected result. https://github.com/zufuliu/notepad2/blob/master/res/OpenFolder.bmp

Left is trace result (possible by potrace, http://potrace.sourceforge.net/), right is original bitmap.

[blackcrack]

@zufuliu exactly this is the issue if you make it via grafic program the Icons more bigger it's becomes blured ... this is normal, but if you use bigger icons put it into the svg via move in a svg, the inkscape make the svg the icons more smaller (getting more sharp) but the native size is over 128px or 256px and at UHD have we a more sharp icon as it's be possible with a normal png/jpg/gic extraction and display because the svg makes possible to shrink and enlarge up to the nativ Icon size and make it more bigger if need .. because the picture in 128px or 256px it is sharp in native so far ..

[blackcrack]

@zufuliu if you have not a bigger Pictures as source from the 16px should we take bigger Icontheme and move it directly into a svg and make the icontheme renew with related/simular icons, so search/take a more bigger icontheme and i could make it in a svg in Openmandriva with my scripts. or you build a batchfile.. in Linux works this :

for f in *.png ;do inkscape -f $f -l ${f%.png}.svg ; done gzip -9 -S z ./*.svg

for new inkscape later as 0.92 for f in *.png ;do inkscape -o -l ${f%.png}.svg $f ; done gzip -9 -S z ./*.svg

gzip makes the z at the svg +gzip =svgz
but this is not need because be only a couples kb who makes smaller..
for n2 and a couples Icons needs only svg

if works the "for" command in dos-batch too, could it be simply in dos too.. best :)

[blackcrack]

@zufuliu so, if you have a Icontheme with 128px or 256px, tell it me and we can make the n2 fit for UHD ;) i can help you with svg compilation.

[zufuliu]

compare trace result with SVG source at https://github.com/zufuliu/notepad2/blob/master/tools/images/OpenFolder_16x.svg

All image resource comes from originally Notepad2 and metapath project at http://www.flos-freeware.ch/notepad2.html or comes from Notepad2-Mod project at https://github.com/XhmikosR/notepad2-mod . They may made by hand by Florian or @XhmikosR .

Maybe we will need to build current Notepad2's toolbar image first, Notepad2 5.0.26-beta4 has three now icons, the Replace icon (ab -> ac) looks better than our current one.

[blackcrack]

@zufuliu

compare trace result with SVG source at

jepp ! great !

[blackcrack]

https://github.com/rizonesoft/Notepad3/issues/2081

[Matteo-Nigro]

Hi @zufuliu! I see different conversations on the problems of DPI or on the quality of the icons .... I don't know if it helps ... but I am also a graphic designer and I would be perfectly able to remain the current icons in larger dimensions or at worst, redesigning them in SVG to therefore have bases for raster of any size. 😎

[zufuliu]

@Matteo-Nigro great to hear you are graphic designer, so assigned this issue to you.

"remain the current icons in larger dimensions" maybe hard (at least for me), sketch icon is OK (e.g. https://teus.me/category/IT/Notepad2 from @bluenlive) .

tools\ImageTool.py can be used to concatenate toolbar bitmap. tools\images contains icon for metapath (taken from Visual Studio Image Library https://www.microsoft.com/en-us/download/details.aspx?id=35825).

[Matteo-Nigro]

Good morning @zufuliu, sorry to answer now but we have quite a big time difference between China and Italy... :joy: I have no problem making the icons in the style we prefer.... I am fond of the classic np2 icons but we can also make them in sketch style. If we wanted, we could make 2 different versions.

Do I make them in svg to have the vector matrices or just create the toolbars in resolution?

Thanks for the script I had seen it. :wink:

[zufuliu]

I think you can first make toolbar.bmp in for preview before upload individual icons (in final make_notepad2_toolbar_bitmap() can be updated to build Toolbar.bmp for different resolutions).

[Matteo-Nigro]

Hi @zufuliu! I wanted to update you on the task... I redesigned (by hand) the original toolbar in svg this could potentially allow us to render the classic toolbar in any size. 🚀 As a preview I prepared a 32px high toolbar... (I should finish it between today and tomorrow) Do I upload the BMP file of the toolbar directly to the res/ folder via a pull request, or do I post it here as an attachment?

In case you like the result I would then go (as needed) and export the toolbars at the required resolutions starting of course with the original 16px... I have already modified the python script locally to allow the selection of the output size.

[zufuliu]

Good news, I think you can make a screenshot for Notepad2 with the 32px Toolbar.bmp. it seems better to upload Notepad2.exe and Toolbar.bmp (in zip) so other people can test it directly with auto scale toolbar unchecked (the code ResizeToolbarImageForCurrentDPI() has bug which assumes toolbar icon is 16px). I can't test this myself, my monitor only supports 100% and 125% scaling.

; use external Toolbar.bmp in Notepad2.ini
[Toolbar Images]
BitmapDefault=Path to 200% / 32px Toolbar.bmp

[Matteo-Nigro]

OK! Even I can't test it directly on my monitor... I'll finish the job and upload screenshots + zip file with notepad2 configured with the new toolbar.

P.S. Where can I attach the zip file?

[zufuliu]

It can can be directly attached to this issue by click "Attach files by dragging & dropping, selecting or pasting them." at bottom of comment box.

[Matteo-Nigro]

Hi @zufuliu ! As anticipated yesterday, here is the toolbar. I have attached the zip package containing Notepad2 pre-configured with the new toolbar. Let me know what you think.

Notepad2_toolbar_x32.zip

[zufuliu]

Looks good for me.

attachment is x64 exe built with following changes (contained in the zip).

diff --git a/src/Helpers.c b/src/Helpers.c
index 4131a901..e0871f58 100644
--- a/src/Helpers.c
+++ b/src/Helpers.c
@@ -459,6 +459,21 @@ HBITMAP ResizeImageForDPI(HBITMAP hbmp, UINT dpi, int height) {
    return hbmp;
 }

+HBITMAP ResizeToolbarImageForDPI(HBITMAP hbmp, UINT dpi, int height) {
+   BITMAP bmp;
+   if (GetObject(hbmp, sizeof(BITMAP), &bmp)) {
+       height = MulDiv(dpi, height, height*USER_DEFAULT_SCREEN_DPI/16);
+       // keep aspect ratio
+       const int width = MulDiv(height, bmp.bmWidth, bmp.bmHeight);
+       HBITMAP hCopy = (HBITMAP)CopyImage(hbmp, IMAGE_BITMAP, width, height, LR_COPYRETURNORG | LR_COPYDELETEORG);
+       if (hCopy != NULL) {
+           hbmp = hCopy;
+       }
+   }
+
+   return hbmp;
+}
+

 void BackgroundWorker_Init(BackgroundWorker *worker, HWND hwnd) {
    worker->hwnd = hwnd;
diff --git a/src/Helpers.h b/src/Helpers.h
index 668432ae..21ec0fdf 100644
--- a/src/Helpers.h
+++ b/src/Helpers.h
@@ -634,6 +634,7 @@ bool FindUserResourcePath(LPCWSTR path, LPWSTR outPath);
 HBITMAP LoadBitmapFile(LPCWSTR path);
 HBITMAP EnlargeImageForDPI(HBITMAP hbmp, UINT dpi);
 HBITMAP ResizeImageForDPI(HBITMAP hbmp, UINT dpi, int height);
+HBITMAP ResizeToolbarImageForDPI(HBITMAP hbmp, UINT dpi, int height);

 NP2_inline HBITMAP EnlargeImageForCurrentDPI(HBITMAP hbmp) {
    return EnlargeImageForDPI(hbmp, g_uCurrentDPI);
@@ -648,7 +649,7 @@ NP2_inline HBITMAP ResizeButtonImageForCurrentDPI(HBITMAP hbmp) {
 }

 NP2_inline HBITMAP ResizeToolbarImageForCurrentDPI(HBITMAP hbmp) {
-   return ResizeImageForDPI(hbmp, g_uCurrentDPI, 16);
+   return ResizeToolbarImageForDPI(hbmp, g_uCurrentDPI, 32);
 }

 bool BitmapMergeAlpha(HBITMAP hbmp, COLORREF crDest);
diff --git a/src/Notepad2.c b/src/Notepad2.c
index 840150d2..dd19e8bf 100644
--- a/src/Notepad2.c
+++ b/src/Notepad2.c
@@ -1968,7 +1968,7 @@ void CreateBars(HWND hwnd, HINSTANCE hInstance) {
    if (hbmp != NULL) {
        bExternalBitmap = true;
    } else {
-       hbmp = (HBITMAP)LoadImage(hInstance, MAKEINTRESOURCE(IDR_MAINWND), IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION);
+       hbmp = (HBITMAP)LoadImage(hInstance, MAKEINTRESOURCE(IDB_MAINWND32), IMAGE_BITMAP, 0, 0, LR_CREATEDIBSECTION);
    }
    if (bAutoScaleToolbar) {
        hbmp = ResizeToolbarImageForCurrentDPI(hbmp);
diff --git a/src/Notepad2.rc b/src/Notepad2.rc
index d56898f4..3e632a81 100644
--- a/src/Notepad2.rc
+++ b/src/Notepad2.rc
@@ -50,6 +50,7 @@ IDI_STYLES              ICON                    "..\\res\\Styles.ico"
 //

 IDR_MAINWND             BITMAP                  "..\\res\\Toolbar.bmp"
+IDB_MAINWND32           BITMAP                  "..\\res\\Toolbar_x32.bmp"
 IDB_OPEN_FOLDER         BITMAP                  "..\\res\\OpenFolder.bmp"
 IDB_NEXT                BITMAP                  "..\\res\\Next.bmp"
 IDB_PREV                BITMAP                  "..\\res\\Prev.bmp"
diff --git a/src/resource.h b/src/resource.h
index 7b55b4a1..fcbbc286 100644
--- a/src/resource.h
+++ b/src/resource.h
@@ -15,6 +15,7 @@
 #define IDB_NEXT                       103
 #define IDB_PICK                       104
 #define IDB_ENCODING                   105
+#define IDB_MAINWND32                  106
 // Cursor
 #define IDC_COPY                       100
 // Common

and screenshot for new toolbar image auto scaled to 16px, grey icon is gone. color for new toolbar icon seems sharper than original icon?.

notepad2-x64-1208.zip

[Matteo-Nigro]

OK, glad you like the toolbar. The colours may be slightly different as they were captured from the previous one so there is always a small margin for error. Specifically which grey icon are you talking about that is not visible?

P. s. Resizing icons to a different size than the original output always results in a loss of quality in the final pixel rendering. This is why in my previous comment I spoke of producing toolbars for each resolution required.

[zufuliu]

grey icon are these (when test the exe with external Toolbar_x32.bmp, BitmapAlphaBlend() not called)

[Matteo-Nigro]

There are not many alternatives... I can try making the icons darker and increasing the contrast... but I think it might make the icons uglier when they are active. The shades taken on by the icons without BitmapAlphaBlend() is not bad... can it be turned off?

However, I confirm that the x32 icons brought to x16 are very poorly defined and some appear blurred.

[Matteo-Nigro]

Or we could use a second toolbar with colours specially designed for 'disabled'... it seems to me that in the ini file there is something about BitmapDisabled... right?

[zufuliu]

Toolbar image with different size (16px at 100%, 32px at 200%, maybe 24px at 150%) is indeed needed (to avoid quality lose on resizing), other scaling can pick near (larger one) bitmap to scale down or up, which will work after 1a780c9120edd556482b430a0afbe289849946c0).

following is 32px toolbar without "Auto Scale Toolbar":