Scaling forms and objects (pics etc) to fit screen resolution

[dietmar]

Hi,

I want that my program fits onto every screen resolution between 1024x768 and 1600:900.
How can I scale the forms and objects like icons, buttons, pictures etc., so I looks nice on every resolution?
I think there must be some much easier way then to create forms and objects (e.g. scaling pics) for every case?

I hope I didn't confuse you and that there will be a elegant resolution.

Thx in advance!

[Handoko]

As far as I know, there no such feature in Lazarus. But it is not impossible to have it. Recently people here are talking about implementing modern UI components for Lazarus. This non-resolution dependent auto-resizing visual components or widgetset or interface feature may be included. But so far, no 'real' works have been done.

The default widgetsets depends on the OS to handle and draw the components. Because OSes do not have 'scaling' component feature, so Lazarus default widgetsets do not have it too.

In theory, you may try to resize all the components manually using TForm.OnResize event, but the calculation is extremely hard especially to calculate the font size and text auto line-break.

I never try it, but I guess using Custom Drawn widgetset is easier because it doesn't depend the OS too much to perform the drawing. If you interested to try it, read here:
http://wiki.freepascal.org/Lazarus_Custom_Drawn_Controls

Other possibility is to try to implement web CSS technique. I found this discussion interesting that you may want to read:
http://stackoverflow.com/questions/3175937/delphi-with-html-css-interface

The last possibility and the hardest part is to write your own. I write mine after I tried QB64, which I impressed that it can autoresize auto stretch the display if I resize the form. You may interested to try QB64 to see how it works:
http://www.qb64.net/

My OpenGL visual components are not ready to use, but they already work correctly on different form sizes and screen resolutions I ever tried. The hardest part is to make text to look good. I mean, for example if you stretch text widely, the the font will look ugly. I solve this problem with lots of calculations. Also playing with OpenGL is no fun at all.

I hope I didn't confuse you and that there will be a elegant resolution.

I do hope we can have an elegant resolution, which I've been looking for years. But  we don't have such elegant resolution for now.

[lainz]

Hi,

I want that my program fits onto every screen resolution between 1024x768 and 1600:900.
How can I scale the forms and objects like icons, buttons, pictures etc., so I looks nice on every resolution?
I think there must be some much easier way then to create forms and objects (e.g. scaling pics) for every case?

I hope I didn't confuse you and that there will be a elegant resolution.

Thx in advance!

Well if you need that the images look fine you need to:
- provide images of the biggest size of the screen you want to display
- scale down these images for lower screen sizes, that can be done at runtime so you don't need to store all image sizes

About scaling components, is not as hard as you think. You need to multiply by a factor, for that you need to specify what is 100% of width and height. Like this:

(for example if your app works fullscreen, else you need to calculate the menu bar of each OS)
1024 = 100% width
768 = 100% height

1280 = 1280 x 100 / 1024 = 125%
960 = 960 x 100 / 768 = 125%

And then apply a scaling for each control you have in the form, based on the calculation of the percent you need.

So you multiply the width of a button by 1.25. So if the button width is 100, then scaled width is 125. The same you need to do for the font height.

Notice that 1024x768 is a 4:3 aspect ratio and 1600x900 is 16:9, so you have this problem. Maybe you want to scale it to the minimum value, that is the height, and then add a margin for left and right to fit the 16:9 with a color. So in fact you design your application for 4:3 and display it in 16:9 with "black" margins, like when you play a 4:3 video on YouTube. https://www.youtube.com/watch?v=mM5_T-F1Yn4

Or just resize the window and let the "black" margins be nothing than the desktop.

[avra]

Scaling forms, fonts and percentual layout manager can be found here:
http://stackoverflow.com/questions/8296784/how-do-i-make-my-gui-behave-well-when-windows-font-scaling-is-greater-than-100

[lainz]

That question in stack overflow is about DPI, and here the question was screen resolution. These are two different things.

If the application is working at 1024x768 at 96 dpi (100% of DPI), and in another PC at 120 dpi (150 of DPI), the font scaling can be:
- the same in all dpi settings
- scaled by dpi settings

You must handle that.

So consider that are different things, one thing is the scaling of elements by a screen resolution and the other is the scaling of elements by the DPI settings.

[avra]

That question in stack overflow is about DPI, and here the question was screen resolution.

You haven't looked at the ScaleForm procedure given there, have you?

Several scaling procedures can also be found here:
http://forum.lazarus.freepascal.org/index.php?topic=10924.0

And here is what I used in one 20 years old Delphi application:

Code: Pascal  [Select][+][-]

1. procedure ScaleAllForms(const ScaleFactor: integer);
2. var
3.   Divisor: integer;
4.   DivisorStep: integer;
5.   ix: integer;
6. const
7.   Multiplier = 100;
8. begin
9.   if ScaleFactor <> 0 then
10.   begin
11.     if ScaleFactor > 0 then
12.       DivisorStep := 20
13.     else
14.       DivisorStep := 10;
15.  
16.     Divisor := Multiplier + (ScaleFactor * DivisorStep);
17.  
18.     with Screen do
19.       for ix := 0 to FormCount - 1 do
20.         Forms[ix].ScaleBy(Divisor, Multiplier);
21.   end;
22. end;
23.  

[lainz]

That question in stack overflow is about DPI, and here the question was screen resolution.

You haven't looked at the ScaleForm procedure given there, have you?

Several scaling procedures can also be found here:
http://forum.lazarus.freepascal.org/index.php?topic=10924.0

And here is what I used in one 20 years old Delphi application:

Code: Pascal  [Select][+][-]

1. procedure ScaleAllForms(const ScaleFactor: integer);
2. var
3.   Divisor: integer;
4.   DivisorStep: integer;
5.   ix: integer;
6. const
7.   Multiplier = 100;
8. begin
9.   if ScaleFactor <> 0 then
10.   begin
11.     if ScaleFactor > 0 then
12.       DivisorStep := 20
13.     else
14.       DivisorStep := 10;
15.  
16.     Divisor := Multiplier + (ScaleFactor * DivisorStep);
17.  
18.     with Screen do
19.       for ix := 0 to FormCount - 1 do
20.         Forms[ix].ScaleBy(Divisor, Multiplier);
21.   end;
22. end;
23.  

hi I was only thinking about the difference between the two. But didn't say that your link was wrong. In fact you must really consider the two else.on high dpi you will get a bigger text that will go over your controls.

Edit: I remember that article,

Several scaling procedures can also be found here:
http://forum.lazarus.freepascal.org/index.php?topic=10924.0

I wrote it originally (that 'lainz' it's me from an old account), then all the people contributed to it. It was recently 'trimmed' by a lazarus developer, so you will not find too much scaling procedures in that wiki article.

What you can use from that article is Form1.AutoAdjustLayout(...) but need to look to the right parameters. BTW is better than anything because it scales UI elements that scaling with ScaleBy or any other function are not scaled normally (ToolBar items for example), and better if you use Lazarus trunk, where it was being developed.