Images in High DPI, how?

[c0d3r 17]

Hi, All

 

I need some help to figure out how to make images (PNGs and BMPs, we don't use ICONs) work properly under different High DPI screen. All our VCLs used were scaled properly EXCEPT Toolbars and images. I knew toolbars have to be scaled properly based on images, so the question turns to how to get images scaled properly?  Most of our images were 16x16 PNGs, few were 24x24. and few BMPs. We were using 3rd party TPngImageList to store all PNGs. Do we have to prepare different set of Images in order to make images working under different High DPI?  like a set of 20x20, a set of 24x24, 28x28 32x32... Thats a LOT and would be PITA if we have to do.  Any good solutions?

 

BTW,  Could be possible to have TPngImageList to be able to save selected PNG image to a file?  the reason why I'm asking is because we lost some of original PNGs during migration from Delphi 2007 to Delphi 10.4

Edited December 18, 2020 by c0d3r

[Kryvich 165]

For High DPI support you should consider SVG. 

 

[Guest]

by Sarina Dupont (Embarcadero)

 

by Den Zubov (FastReport)

https://blogs.embarcadero.com/quickly-migrate-and-modernize-your-delphi-c-apps-using-fastreport-with-windows-high-dpi-setup/

• Things to know on migrating your Delphi Application to High DPI ?

Edited December 18, 2020 by Guest

[c0d3r 17]

7 minutes ago, Kryvich said:

For High DPI support you should consider SVG. 

 

I knew SVG, its great. But we were using PNGs all over the places in our major production, and no way you could find all these images in SVG.

Edited December 18, 2020 by c0d3r

[Guest]

If Im not wrong, your "image" on "style" file should be "ready" for high-resolution!

by Jim McKeeth

High-DPI on Windows 10

https://blogs.embarcadero.com/high-dpi-on-windows-10/

[c0d3r 17]

42 minutes ago, emailx45 said:

If Im not wrong, your "image" on "style" file should be "ready" for high-resolution!

by Jim McKeeth

High-DPI on Windows 10

https://blogs.embarcadero.com/high-dpi-on-windows-10/

We are not using any "Style",  there was no "Style" during Delphi 2007 era. We just recently moved to Delphi 10.4, and making our production to be DPI aware.

[Guest]

ok.... but by default, in RAD Studio 10.x styles is used same that you dont. look at project options "appearance" (Windows is default)

see TStyleManager class

in portuguese-BR

http://www.sobreprogramacao.com.br/2017/04/tstylemanager-temas-visuais-no-delphi.html?m=1   github sample

Edited December 18, 2020 by Guest

[c0d3r 17]

14 minutes ago, emailx45 said:

ok.... but by default, in RAD Studio 10.x styles is used same that you dont. look at project options "appearance" (Windows is default)

see TStyleManager class

in portuguese-BR

http://www.sobreprogramacao.com.br/2017/04/tstylemanager-temas-visuais-no-delphi.html?m=1   github sample

Thanks. but what exactly does this 'Style' do with my TPngImageLists that used by toolbars, which aren't scaled to the proper High DPI?  I'm totally confused.

Edited December 18, 2020 by c0d3r

[c0d3r 17]

24 minutes ago, emailx45 said:

ok.... but by default, in RAD Studio 10.x styles is used same that you dont. look at project options "appearance" (Windows is default)

see TStyleManager class

in portuguese-BR

http://www.sobreprogramacao.com.br/2017/04/tstylemanager-temas-visuais-no-delphi.html?m=1   github sample

Just tried 'Style', and pick Windows 10 as example,  and NO its not the right way to have app DPI awared. The screen looks horribly blur, using sort of bitmap stretching way, looked exactly the same as you set 'Unaware' to the DPI awareness option.

Edited December 18, 2020 by c0d3r

[Guest]

if read article by Jim McKeeth and others you will see that "style" have a relationship with new highDPI. you can create your styles to apply in app for easy "changes" on UI.

menu Tools, Designer Bitmap

 

each style file contains bitmaps used for many UI components, include exist many styles prepared by Embarcadero to HighDPI use. but many components (olders) not is tottally prepared to use it.

do you already try AlphaSkins suite?

 

https://www.alphaskins.com/index.php

 

A scaling-engine has been rewritten completely. Improved internal structure of skins, added support of per monitor scaling under Window 10. "DPI Awareness" mode from latests RAD Studio was supported. New "smVCL" and "smCustomPPI" parameters has been added in the TsSkinManager.Options.ScaleMode property.

Edited December 18, 2020 by Guest

[c0d3r 17]

9 minutes ago, emailx45 said:

if read article by Jim McKeeth and others you will see that "style" have a relationship with new highDPI. you can create your styles to apply in app for easy "changes" on UI.

menu Tools, Designer Bitmap

 

each style file contains bitmaps used for many UI components, include exist many styles prepared by Embarcadero to HighDPI use. but many components (olders) not is tottally prepared to use it.

do you already try AlphaSkins suite?

https://www.alphaskins.com/index.php

No. We don't use any 'style' or 'skin'.  We don't like styles and skins, and totally against using them.  Our clients don't care about how fancy the software looks like, but they DO like a stable, reliable, easy to use and bug free system.

Edited December 18, 2020 by c0d3r

[Guest]

good luck, so.

hug

[c0d3r 17]

I'm leaning toward using SVG, but how to convert current PNGs to SVGs is a challenging.

[Vincent Parrett 750]

I have had good results with Vector Magic - https://vectormagic.com/

 

The key though is having larger png's to work with. Converting a 16x16px png/bmp to svg is next to impossible as there just isn't enough detail to work with. 

 

FWIW, I'm slowly making my way through converting thousands of images to svg (either by converting or finding alternatives), it's mind numbingly boring and am losing the will to live..... 😒

[Anders Melander 1782]

15 minutes ago, c0d3r said:

I'm leaning toward using SVG, but how to convert current PNGs to SVGs is a challenging.

You don't convert your PNGs to SVG. You have to replace the PNGs with new SVG images. Since SVG is a vector format (hence the "V" in SVG) the visual expression will probably be very different from what you have now and it might not be what you want. There are probably someone that will suggest using vectorization to convert from PNG to SVG but I wouldn't bother. Vectorization only works well with large bitmaps.

 

If you stay with raster images then you have to provide the individual bitmaps in different sizes and use something like TVirtualImageList. You typically don't need that many different sizes; 16, 24 and 32 should do but that of course depends on what amount of scaling you're willing to accept. Make sure that your bitmaps use alpha for best result - i.e. PNG or 32 bit bitmaps.

[David Heffernan 2345]

32 minutes ago, c0d3r said:

I'm leaning toward using SVG, but how to convert current PNGs to SVGs is a challenging.

I don't think SVG is the right way to handle scaling of icons. Why do you think that? 

[pyscripter 689]

2 minutes ago, David Heffernan said:

I don't think SVG is the right way to handle scaling of icons. Why do you think that? 

Maybe because they are scalable?  Scalable Vector Graphics (SVG)

[David Heffernan 2345]

6 minutes ago, pyscripter said:

Maybe because they are scalable?  Scalable Vector Graphics (SVG)

But scalable doesn't tend to be right for icons because you often want to tailor the icon to the size. So a small version of the icon might have quote different content from a large version. 

[Attila Kovacs 629]

It is right for the icons and it is the way, and it is hard to find an svg provider which has a wide range of icons with the same drawing-style to cover every needs.

But the result makes a difference.

[Kryvich 165]

32 minutes ago, Vincent Parrett said:

converting thousands of images to svg

I believe some type of neural network may be used for this purpose.

[David Heffernan 2345]

47 minutes ago, Attila Kovacs said:

It is right for the icons and it is the way, and it is hard to find an svg provider which has a wide range of icons with the same drawing-style to cover every needs.

But the result makes a difference.

You have different SVG files for different icon sizes in some cases? 

[Attila Kovacs 629]

@David Heffernan I don't, but I have one master main svg-imagelist and two client svg-imagelists chained to it, all three having different dimensions. As the scaling is always upward (or none), and so is the resolution there are no regressions I encounter or I could think about. You have to be more specific about your concerns.

 

[Anders Melander 1782]

1 hour ago, Kryvich said:

I believe some type of neural network may be used for this purpose.

You believe it may?

If you want vectorized images that sometimes, maybe, almost, resembles the original bitmaps, then yes I'm sure you could train an engine to do that. But it would be faster and cheaper to just have a professional design a new set of vector images.

[Guest]

4 hours ago, emailx45 said:

If Im not wrong, your "image" on "style" file should be "ready" for high-resolution!

it was said here, the "image" should be "ready", or be: if your necessity is 1920x1080 and 1024x768, then, you would have a image of 1920x1080 to use in down-scale, until where is possible!

[Anders Melander 1782]

15 minutes ago, Attila Kovacs said:

As the scaling is always upward (or none), and so is the resolution there are no regressions I encounter or I could think about. You have to be more specific about your concerns.

The problem is the same as the one you have when you resample bitmaps. For small bitmaps you want to leave out a lot of details but keep the important parts and take advantage of the fact that the brain uses pattern recognition to reassemble the details. For larger bitmaps you can add details but leave of parts that were necessary in the smaller bitmaps for pattern recognition.

This is why one can't just start with a large bitmap and downsample it to whatever size needed. The result usually looks awful.

 

Same with SVG: For small SVG you don't necessarily want all the vectors to be rasterized. For larger ones maybe you do.

An example of this is TrueType font hinting; Rasterizations of a font to a small point size uses different metrics and rules than the rasterization of the same font to a larger point size. One reason is that even with antialiasing we still need to take the pixel grid into account to get a good result.