Lazarus

Programming => General => Topic started by: AlphaInc. on April 13, 2021, 11:29:00 am

Title: Adjust TForm and Buttons to Screen Resolution [SOLVED]
Post by: AlphaInc. on April 13, 2021, 11:29:00 am

Hello everybody,

I already had a similar thread but revised some of it in order for it to be optimized for 1440p. After I had finished my tool, I gave it to a few people to use (and test) it. Some of my friends have 1080p-monitors, some have 2160p monitors while one still has an 720p Monitor. My Problem is, that the tool is too big (talking about size of UI not filesize) for the 720p monitor but could be too small for people with higher monitors (2160p).

The goal for my "update" would be to set custom sizes based on the screen-resolution.
For example both the length and width should be about 41,67%. The Buttons and Images should be sized as well.

I initially set a static Form Size for a 2160p Montitor before I have re-written it for a 1440p monitor.
In the first version for the 2160p Monitor I set the Form of the UI to 1600x900 (which were 41,67% of the resolution).

I don't have any idea on how to do this.
The only code I have so far is this procedure which places the tool in the middle of the screen (since I had my fair share of problems with that, too).

Code: Pascal [Select][+]

procedure TForm1.staticView();
begin
Form1.position := poDeskTopCenter;
Form1.BorderStyle := bsDialog;
end;
   

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: trev on April 13, 2021, 11:59:20 am

Have you read and digested the Wiki article: Autosize/Layout (https://wiki.lazarus.freepascal.org/Autosize_/_Layout) ?

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 13, 2021, 12:10:04 pm

Quote from: trev on April 13, 2021, 11:59:20 am

Have you read and digested the Wiki article: Autosize/Layout (https://wiki.lazarus.freepascal.org/Autosize_/_Layout) ?

I read roughly through it but did not find an option to set it for a percentage of the screen resolution.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: trev on April 13, 2021, 12:41:49 pm

From the page, this looks relevant:

Quote

Starting in Lazarus 0.9.31 the LCL can reinterprete the LCL absolute layout in pixels as a flexible grid. There are multiple modes to choose from and they will allow to reinterprete the pixel values as either really absolute, or as in being adjusted for the DPI or as in being considered simply a fraction of the form size.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 13, 2021, 02:07:19 pm

Quote from: trev on April 13, 2021, 12:41:49 pm

From the page, this looks relevant:

Quote
Starting in Lazarus 0.9.31 the LCL can reinterprete the LCL absolute layout in pixels as a flexible grid. There are multiple modes to choose from and they will allow to reinterprete the pixel values as either really absolute, or as in being adjusted for the DPI or as in being considered simply a fraction of the form size.

Okay I've read it but how do you set it to fit Screen Resolution respectively how do you get the Screen Resolution?

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: wp on April 13, 2021, 04:00:16 pm

I think scaling a form so that it is a constant fraction of the screen is the wrong way. Suppose a user with a super high-res screen with some thousands of pixels - he will be annoyed because most of his expensive monitor is covered by a super-blown-up form of some application. And then suppose a user with an 800 pixels screen who would be happy to increase the form to full resolution.

Anyway, I would like to point you to the torry site (https://torry.net) which contains the component TFormResizer (EasySize) which scales a form and all its controls in a uniform way. This was discussed in a thread of the German forum (https://www.lazarusforum.de/viewtopic.php?p=88001). I downloaded it, converted it to Lazarus, and wrote a small demo for it. In the demo the form is always scaled to cover 50% of the screen initially. The user can resize the form, and the form scales its contained controls proportionally. Note, however, that icons of bitbtns or themed parts of controls (checkboxes, radiobuttons) are not scaled (the embedded cheetah image does scale, on the other hand, because it is much larger than the displayed TImage control due to the Proportional property).

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 13, 2021, 04:37:53 pm

Quote from: wp on April 13, 2021, 04:00:16 pm

I think scaling a form so that it is a constant fraction of the screen is the wrong way. Suppose a user with a super high-res screen with some thousands of pixels - he will be annoyed because most of his expensive monitor is covered by a super-blown-up form of some application. And then suppose a user with an 800 pixels screen who would be happy to increase the form to full resolution.

Anyway, I would like to point you to the torry site (https://torry.net) which contains the component TFormResizer (EasySize) which scales a form and all its controls in a uniform way. This was discussed in a thread of the German forum (https://www.lazarusforum.de/viewtopic.php?p=88001). I downloaded it, converted it to Lazarus, and wrote a small demo for it. In the demo the form is always scaled to cover 50% of the screen initially. The user can resize the form, and the form scales its contained controls proportionally. Note, however, that icons of bitbtns or themed parts of controls (checkboxes, radiobuttons) are not scaled (the embedded cheetah image does scale, on the other hand, because it is much larger than the displayed TImage control due to the Proportional property).

I don't know if don't recomend the code from the .zip you just sent me (talking about your first statement that scaling might not be a good idea) or not but this was exactly wha I was looking for. From what I can tell (ran the exe in different resolutions with the same zooming-value) it's exaclty like i wanted it to be. Can't thank you enough.

Last question though, how do you set float numbers when setting the screen (div) ?

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: wp on April 13, 2021, 05:46:30 pm

Quote from: AlphaInc. on April 13, 2021, 04:37:53 pm

Last question though, how do you set float numbers when setting the screen (div) ?

I don't understand. You want floats as screen coordinates? Not possible.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: Handoko on April 13, 2021, 06:00:45 pm

I haven't read this discussion thoroughly.

If one writes his own GUI components, then using float for the coordinates is possible. For example using OpenGL.

I have this screen resolution problem too. So I wrote my own GUI, which internally using OpenGL. The form is initialized by setting a width and height value. For example if I set it 100 x 100, each increment means 1% no matter what the form size is or being resized. The prototype already works as what I want, so far only supports button, edit, label, rectangle. Due to my limited knowledge in using OpenGL, the project is (temporary) stopped.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 13, 2021, 06:24:09 pm

Quote from: wp on April 13, 2021, 05:46:30 pm

Quote from: AlphaInc. on April 13, 2021, 04:37:53 pm
Last question though, how do you set float numbers when setting the screen (div) ?
I don't understand. You want floats as screen coordinates? Not possible.

I don't know if we are talking about the same but I don't want floats as screen coordinates but as numbers used for division.
For example instead of div 2 I want div 2.4 (or 2,4 or 4/10 depending on how you wright it).

Is that possible or were you already referring to this ?

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: wp on April 13, 2021, 06:29:20 pm

The division operator for floats is the slash:

Code: Pascal [Select][+]

var
   x: Double;
...
  x := 1023/2.4;

But when the result is expected to be an integer you must "round" (or "trunc", or "floor", or "ceil", depending on what is supposed to occur when the divison has a remainder):

Code: Pascal [Select][+]

var
  x: Integer;
...
  x := round(1023/2.4);

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 13, 2021, 08:13:24 pm

Quote from: wp on April 13, 2021, 06:29:20 pm

The division operator for floats is the slash:
Code: Pascal [Select][+][-]
var
x: Double;
...
x := 1023/2.4;
But when the result is expected to be an integer you must "round" (or "trunc", or "floor", or "ceil", depending on what is supposed to occur when the divison has a remainder):
Code: Pascal [Select][+][-]
var
x: Integer;
...
x := round(1023/2.4);

Thank you. I'm sorry but I do have one last question.
Do you know how to correctly place my items on the screen in order for them to be scaled?

In my tool I have a TPageControl (to set up two different pages, one filled with 4 buttons to select settings and one filled with 4 buttons to do tasks linked to batch-scripts) and a background image for both TTabSheets (which was created b TPageControl). I want them to be set and streched like the rest of the tool so that the position does not change after a strech (on a different resolution).
I hope I could describe it well enough to understand what i mean?

Edit: For better explanation - I'd like to know how (or if) I can set a fixed default-layount including TPageControl, TTabSheet and Background image and set the distances between each other. Currently after scalling the picture does not fill the entire background, etc.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: speter on April 14, 2021, 12:49:22 pm

Are you using "stretchdraw" to draw your background image? If not, then that may be the fix that you need.

Have a look at the attached image and project; it is a bit of a kludge, I have written a 'resize' event handler to "manually" adjust the position and size of the buttons. It would be much nicer to use align or similar to get the buttons to automatically resize but I couldn't work that out. I thought the TBevel component allowed an empty invisible "panel", but it requires the edge to be raised or lowered...

I couldn't work out how to draw on the tabsheet so I have added a TPaintBox component (aligned to client [the tabsheet]).

Despite all the above, I hope you find the project (at least somewhat) helpful. :)

cheers
S.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 14, 2021, 01:38:49 pm

Quote from: speter on April 14, 2021, 12:49:22 pm

Are you using "stretchdraw" to draw your background image? If not, then that may be the fix that you need.

Have a look at the attached image and project; it is a bit of a kludge, I have written a 'resize' event handler to "manually" adjust the position and size of the buttons. It would be much nicer to use align or similar to get the buttons to automatically resize but I couldn't work that out. I thought the TBevel component allowed an empty invisible "panel", but it requires the edge to be raised or lowered...

I couldn't work out how to draw on the tabsheet so I have added a TPaintBox component (aligned to client [the tabsheet]).

Despite all the above, I hope you find the project (at least somewhat) helpful. :)

cheers
S.

Thank you for your reply. I think it goes in the right direction. The Align to Client function was needed.

I still try to hide the TabSheets so that any switch from one TabSheet to the other it goes unnoticed by the user. Any idea on that? I disbaled ShowTabs but there is still a small visible border on top and on the sides.

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 14, 2021, 02:10:22 pm

Edit: I have made a screenshot (Current) that shows the current state. You can see the little border around the UI. It ain't much but I'd like to remove that, so that it looks like the second picuture (Wished) which I edited using Paint.

Title: Re: Adjust TForm and Buttons to Screen Resolution [SOLVED]
Post by: AlphaInc. on April 14, 2021, 02:48:18 pm

I got it myself!
I replaced the TPageControl with a TNotebook and set two different pages. It does the same without the border. I only needed to change a little code to change between the two pages. Thank you all, who helped me! :)

Title: Re: Adjust TForm and Buttons to Screen Resolution
Post by: AlphaInc. on April 14, 2021, 11:43:21 pm

Quote from: wp on April 13, 2021, 04:00:16 pm

I think scaling a form so that it is a constant fraction of the screen is the wrong way. Suppose a user with a super high-res screen with some thousands of pixels - he will be annoyed because most of his expensive monitor is covered by a super-blown-up form of some application. And then suppose a user with an 800 pixels screen who would be happy to increase the form to full resolution.

Anyway, I would like to point you to the torry site (https://torry.net) which contains the component TFormResizer (EasySize) which scales a form and all its controls in a uniform way. This was discussed in a thread of the German forum (https://www.lazarusforum.de/viewtopic.php?p=88001). I downloaded it, converted it to Lazarus, and wrote a small demo for it. In the demo the form is always scaled to cover 50% of the screen initially. The user can resize the form, and the form scales its contained controls proportionally. Note, however, that icons of bitbtns or themed parts of controls (checkboxes, radiobuttons) are not scaled (the embedded cheetah image does scale, on the other hand, because it is much larger than the displayed TImage control due to the Proportional property).

It's me again - I'm just curious at this moment - the tool detects the screen resolution just perfect and sets the window accordingly. Is it also possible to detect zoom (or "Change the size of text, app and other items" as it's called) to select different resolutions when it's 100% zoomed or 150% zoomed?
This would be a nice feature but if it's not possible that's not it Okay too.

Title: Re: Adjust TForm and Buttons to Screen Resolution [SOLVED]
Post by: speter on April 15, 2021, 01:39:59 am

Have a look at the TNotebook component. Handoko has mentioned it a number of times (I think) suggesting that it can be used without the tabs.

cheers
S.

Title: Re: Adjust TForm and Buttons to Screen Resolution [SOLVED]
Post by: AlphaInc. on April 15, 2021, 08:38:23 am

Quote from: speter on April 15, 2021, 01:39:59 am

Have a look at the TNotebook component. Handoko has mentioned it a number of times (I think) suggesting that it can be used without the tabs.

cheers
S.

I did implement a Notebook (and deleted the TPageControl and TTabSheet).
The question is how it can detect what level of zoom windows is using (size of text, apps and other elemts) in addition to the screen resolution ?