Modernize Win95 style icons

[zufuliu]

This can be handled later as:

• They are only used on individual dialogs
• They seems (not sure) are smaller than equivalent bitmap images.

[Matteo-Nigro]

Hi @zufuliu, I would say that among the icons left to be "modernized" there is only Styles.ico. Shall I proceed with the makeover of this one as well?

[zufuliu]

@Matteo-Nigro yes, but only when you have free time. As work in free time, I'm not expect they (include metapth's icons) all get modernized in v4.23.03.

[Matteo-Nigro]

Okay calmly I will start working on it 😉

[Matteo-Nigro]

Hi @zufuliu , at the moment I made this icon. To keep the weight enough the 16 colors limit a lot the visual impact. If you like it I do the PR otherwise I continue with the design.

[zufuliu]

How about using a icon similar to U+1F3A8 🎨

Following is one from VS 2017. ColorPalette.zip

[Matteo-Nigro]

It can be a good icon, the problem is always the 16 colors.... This is the icon you sent me in 4 bits.

[Matteo-Nigro]

The icon called ColorDialog doesn't look bad.... It has a few colors and has regular moltor lines so it shouldn`t get too grainy with scaling.

[zufuliu]

It can be a good icon, the problem is always the 16 colors.... This is the icon you sent me in 4 bits.

Which icon software are you using?

ColorDialog seems not bad to me too.

[Matteo-Nigro]

I use IcoFx in version 1.6.4 portable which was totally free, the recent ones are all trial...

[Matteo-Nigro]

Hi @zufuliu ! I modified the ColorDialog icon adapting it to the 16 colors. Although it is very simple it looks clean and functional to me... what do you think?

This would be the details of the SVG:

[zufuliu]

Hi @Matteo-Nigro, please wait a few weeks, I'm planing to implement 16 and 256 colors bitmap and icon inside Bitmap.py. following is screenshot for res\OpenFolder.bmp (from left to right: current 32 color depth bitmap, 16 color bitmap by MS Paint, 16 color bitmap by incomplete Bitmap.py):

[zufuliu]

Bitmap.py for 2, 16 and 256 color bitmap is ready, support for icon still needs time.

Hi @Matteo-Nigro, I changed my mind for application icon. can you take time to make two bare minimum sized icons (only contains 16px, 24px, 32px and 48px RGBA, same sizes as Notepad2.ico in main branch but without 16 and 256 color image) (Notepad2_min.ico and metapath_min.ico) for non-HD version? also png for metapath.ico are missing.

I also found that icons on dialog (e.g. Run.ico and Styles.ico) can contains other sized image to get better scaling result on DPI change. e.g. Run.ico with both 32px and 48px images scales better than only with only 32px image.

[Matteo-Nigro]

OK @zufuliu, I'll proceed. Where can I upload the metapath pngs? In tools/images/metapath/icon/?

[zufuliu]

Thanks. yes inside tools/images/metapath/icon/metapath folder.

[zufuliu]

Hi @WanderMax, can you take screenshots for Notepad2's "Run" (via menu Tools -> Run Command) and "Customize Schemes" dialogs?

[WanderMax]

[Matteo-Nigro]

I also found that icons on dialog (e.g. Run.ico and Styles.ico) can contains other sized image to get better scaling result on DPI change. e.g. Run.ico with both 32px and 48px images scales better than only with only 32px image.

Hi @zufuliu ! Regarding the previous request, should I upload the updated Run.ico file with PR directly to the main branch?

[zufuliu]

@Matteo-Nigro I have renamed current Run.ico as Run_min.ico, you can upload a full-sized Run.ico (all frame are 16 color) to main. the dimensions are 32×[1, 1.5, 2, 2.5, 3], i.e. 32x32, 48x48, 64x64, 80x80, 96x96.

64x64, 80x80 and 96x96 png goes into icon\Run, they may be preprocessed later to quantize/reduce color to 16. I think icon tools may have some limitations, for VS's ColorPalette, 32px 16 color bitmap saved by Paint.Net has very good quality.

[zufuliu]

Notepad2-40px-OpenFolder.zip

Hi @WanderMax can you take screenshots for Run dialog again with exe in above zip? Notepad2-8.exe is built with OpenFolder40-8.bmp (256 color opaque bitmap), Notepad2-32.exe is built with OpenFolder40-32.bmp (32 bit RGBA).

The two bitmaps are generated with following Python script in ImageTool.py (after commit 0964a5945ffe489280d687ac543f8caf75a96269).

convert_image('images/40x40/Open.png', 'OpenFolder40-8.bmp', 8)
convert_image('images/40x40/Open.png', 'OpenFolder40-32.bmp')

[WanderMax]

Notepad2-8.exe

Notepad2-32.exe

[zufuliu]

Thanks, so will use opaque image for button.

Hi @Matteo-Nigro, I have renamed Next2_16x.svg and Prev2_16x.svg to Nex.svg and Prev.svg (596323ff097fc14cd84b67cd1c752b5210d67978), when you have time, please export 24px, 32px, 40px and 48px pngs. Also you can work on make SVG (one normal, another greyed) for Encoding.bmp.

[Matteo-Nigro]

Hi @zufuliu, in which paths do I save the png and svg you requested? I will work on it this afternoon.

[zufuliu]

Thank you. put the two SVGs for Encoding.bmp inside images folder, exported pngs goes into 16x16, etc. (just like toolbar images).

see readme.txt:

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

[zufuliu]

forget to mention that, 24px, 32px, 40px and 48px for Next.png and Prev.png is the height, with width round up after scaling.

[zufuliu]

Hi @Matteo-Nigro, I renamed Encoding_Grey.svg into EncodingGray.svg in commit f1932492a6e66f83bc23651d33fa0ebc29232d05, please export pngs for both SVG (inside images\16x16, images\24x24 etc.).

Also, last four png (Undo.png, WordWrap.png, ZoomIn.png and ZoomOut.png) inside images\40x40 need to be re-exported (they were forgotten in b01493000d90d7056372785f4b9201e6ccfaf7ee).

[zufuliu]

Hi @WanderMax, please take new screenshots for “Encoding” dialog and bottom right of "Customize Schemes" dialog (click "Global Styles -> Control Character" on left tree to see all button on the dialog) with latest builds (e.g. https://github.com/zufuliu/notepad2/actions/runs/4095658793).

[WanderMax]

[zufuliu]

OK, thank you, will try to fix color picker after "Fore" and "Back", at waste case we can add other sized bitmaps for Pick.bmp.

[zufuliu]

Hi @WanderMax, please take screenshot for "Customize Schemes" dialog again (with exe from https://github.com/zufuliu/notepad2/actions), check whether color picker image size was fixed by 2804da7d27d405fc9f7d64004bce4e51b7e825fa or not.

[WanderMax]

fixed:

[Matteo-Nigro]

Hi @zufuliu, we finally got left behind the Styles.ico icon we had talked about a few days ago.... Could the last proposed draft have been okay or do we do something else? In either case let me know how to proceed😉

[zufuliu]

Probably this will be suspended until ImageTool.py is able to make icon.

I still like ColorPalette or slashed version of ColorDialog (tested 4 KiB 32x32 RGBA icon). attachment is 16 color bitmap for them (can be generated with ImageTool.py), which doesn't lose image quality a lot compared to icon tool.

ColorPalette.zip

[zufuliu]

Hi @Matteo-Nigro, can you make svg for res\Copy.cur, metapath\res\cross1.ico, cross2.ico, crosshair.cur ?

I also found (script to read icon is finished) some strange things for 256px icon png:

1. Notepad2.ico: 256px png is 20416 bytes on disk but 28067 bytes in icon, so we can rebuilt the icon to reduce size?
2. metapath.ico: 256px png is 18084 bytes on disk but 17499 bytes in icon, so metapath\icon\metapath\256.png can be optimized further?

[Matteo-Nigro]

Hi @zufuliu it's good to hear from you again 😉. Ok I will see what I can do to optimize the various icons and related png files... One question regarding the .cur files... Do we need the svg files to remaster them to better resolution or for other purposes?

[zufuliu]

Do we need the svg files to remaster them to better resolution or for other purposes?

for better resolution.

methpath's other complex icons (mostly used on Options property dialog) can be updated later.

[Matteo-Nigro]

Hi @zufuliu I have reproduced the exact copy svg (without any restyling) of the Copy.cur file. In which directory do I upload it?

[zufuliu]

@Matteo-Nigro, good work 👍, would be great if the svg have similar appearance as system arrow cursor. you can put svg inside images\cursor folder (see commit 9709ff29695ef0f7bd314f12fa063775ce3a8738).

Also can you test following 256px png files produced by pngquant: on images\metapath\icon\metapath folder:

pngquant --force --verbose 256 --strip --output metapath-quant256.png 256.png
256.png:
  read 18KB file
  made histogram...3238 colors found
  selecting colors...5%
  selecting colors...35%
  selecting colors...70%
  selecting colors...100%
  moving colormap towards local minimum
  eliminated opaque tRNS-chunk entries...51 entries transparent
  mapped image to new colors...MSE=0.790 (Q=97)
  writing 256-color image as metapath-quant256.png
Quantized 1 image.

on images\icon folder:

pngquant --force --verbose 256 --strip --output Notepad2-quant256.png Notepad2.png
Notepad2.png:
  read 73KB file
  made histogram...10788 colors found
  selecting colors...6%
  selecting colors...46%
  selecting colors...93%
  selecting colors...100%
  moving colormap towards local minimum
  eliminated opaque tRNS-chunk entries...114 entries transparent
  mapped image to new colors...MSE=3.351 (Q=88)
  writing 256-color image as Notepad2-quant256.png
Quantized 1 image.

Notepad2-quant256.png has more colors than current icon\Notepad2\256.png (256 vs 155). quant256.zip

[Matteo-Nigro]

Ok @zufuliu I will fix the arrow cursor to make it similar to that of modern operating systems. As for the pngs, unfortunately they have the usual problem of transparencies:

[zufuliu]

As for the pngs, unfortunately they have the usual problem of transparencies:

It seems there are bugs in IcoFX with palette? they works in it's v3 version, also for png made by following steps:

1. pngquant --force --verbose 256 --strip --output quant256.png Notepad2.png, there is pngquant 3.0.1, https://lib.rs/crates/pngquant
2. save quant256.png as q256.png with Paint.Net, I don't have Photoshop
3. oxipng --strip all --nc --out t256.png q256.png, https://github.com/shssoichiro/oxipng/

both q256.png and t256.png now works in IcoFX 1.6.4, https://portableapps.com/apps/graphics_pictures/icofx_portable

for Notepad2, t256.png produced with above steps is 22,253 bytes (larger than current 155 color png, which oxipng --strip all --nc can reduce to 16,359 bytes). for metapath, t256.png is 7,505 bytes, while 256px png in C:\Windows\explorer.exe is 8,172 bytes.

[Matteo-Nigro]

Okay, I use just this version: IcoFX 1.6.4, https://portableapps.com/apps/graphics_pictures/icofx_portable . Try resetting something maybe something is compromised... So, with the material you have can you proceed or do you need me to do anything else? 😉

[zufuliu]

quant256-0203.zip

I checked other icons, no one use palette, all of them use 4x8 bits/pixel, RGB + Alpha (non-interlaced) (output by oxipng --nc). probably you can try the steps with Photoshop, attached quantized png and pngquant 3.0.1. you can download oxipng from https://github.com/shssoichiro/oxipng/releases/tag/v8.0.0

ImageTool.py can be used to extract original png from icon file after uncomment following lines in Bitmap.py: https://github.com/zufuliu/notepad2/blob/34d23615cba2728fe53a1aff1757250b394693e9/tools/Bitmap.py#L1051-L1053

and then use Icon.fromFile() in ImageTool.py, e.g.

Icon.fromFile('../res/Notepad2.ico') # 28,067 bytes
# icon extracted by ResourceHacker from C:\Windows\SystemResources\notepad.exe.mun
Icon.fromFile(notepad.ico') # 72024 bytes

[zufuliu]

Script to build icon and cursor added by 2e5cd6a6abf0fcd6a3114d5becf0f72772ada137. Run.ico can be built with following code:

Icon.makeIcon([
    ('images/32x32/Launch.png', 4),
    ('images/48x48/Launch.png', 4),
    ('images/icon/Run/64.png', 4),
    ('images/icon/Run/80.png', 4),
    ('images/icon/Run/96.png', 4),
    ], 'Run.ico')

print(Icon.fromFile('Run.ico').directory)

we can use the script to try 16 color icon for VS's ColorPalette and ColorDialog.

[zufuliu]

Hi @Matteo-Nigro, please add png (32, 48, 64, 80, 96) for recent added icon and cursor svg images. also 16.png for metapath has wrong size 16x15.

16 color high quality icon for ColorDialog and ColorPalette can be made by following code:

Icon.makeIcon([('ColorDialog_32.png', 4)], 'ColorDialog_32.ico')
Icon.makeIcon([('ColorPalette_32.png', 4)], 'ColorPalette_32.ico', QuantizeMethod.MaxCoverage)

I'm not yet decided whether to use MaxCoverage as default for icon.

icon with 256px png + palette not works in explorer's large icon mode, can you save both quant256.png in quant256-0203.zip as normal png with your Photoshop or image editor? I'd like to compare size reduction (after oxipng --nc) with Paint.Net.

[Matteo-Nigro]

Ok @zufuliu, in which path do I put the requested pngs? I see you are requesting sizes not used in other contexts such as 80 and 96... shall I proceed? Attached are the 2 quant256 files saved in Photoshop so you can see the quality.

This is the comparison of the file sizes before and after saving:

17.645 byte -> 29.634 byte 5.823 byte -> 8.766 byte

Photoshop.zip

[zufuliu]

80 (32x2.5) and 96 (32x3) is for 250% (e.g. @WanderMax's monitor) and 300% scaling (we currently don't support 400% scaling). https://github.com/zufuliu/notepad2/issues/585#issuecomment-1416674188

Notepad2-32.exe

[zufuliu]

in which path do I put the requested pngs?

In respective icon and cursor sub folder with svg name as folder name, e.g. cursor\Copy.svg exported into cursor\Copy\ folder.

[Matteo-Nigro]

Icon.makeIcon([
  ('images/32x32/Launch.png', 4),
  ('images/48x48/Launch.png', 4),
  ('images/icon/Run/64.png', 4),
  ('images/icon/Run/80.png', 4),
  ('images/icon/Run/96.png', 4),
  ], 'Run.ico')

print(Icon.fromFile('Run.ico').directory)

With this code I tried creating the ColorDialog icon and it seems to come out very well! How do you want me to proceed? Do I create the pngs for ColorDialog as well and then choose which one is best?

[zufuliu]

ColorDialog.svg is an opaque image, with small change would make it transparent (not sure which one is better then):

- .icon-vs-out{fill:#f6f6f6;} .icon-vs-fg{fill:#f0eff1;}
+ .icon-vs-out{opacity:0;fill:#f6f6f6;} .icon-vs-fg{opacity:0;fill:#f0eff1;}

transparent ColorDialog svg ColorDialog.zip

16 color ColorDialog (opaque) and ColorPalette (not looks well in lower dimensions):

[zufuliu]

ColorDialog-border.zip

Another simple change to make the border transparent.

[Matteo-Nigro]

I think @zufuliu that the choice is simply related to taste.... Since the project is yours evaluate the one you like best and then we do it.... 😉 ColorDialog as an icon I see it more consistent with the rest of the graphics than ColorPalette