Recent

Author Topic: Adjust TForm and Buttons to Screen Resolution [SOLVED]  (Read 1789 times)

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Adjust TForm and Buttons to Screen Resolution [SOLVED]
« 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][+][-]
  1. procedure TForm1.staticView();
  2. begin
  3. Form1.position := poDeskTopCenter;
  4. Form1.BorderStyle := bsDialog;
  5. end;
  6.    
« Last Edit: April 15, 2021, 07:18:31 pm by AlphaInc. »

trev

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1441
  • Former Delphi 1-7, 10.2 user
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #1 on: April 13, 2021, 11:59:20 am »
Have you read and digested the Wiki article: Autosize/Layout ?
Lazarus 2.1 r65061 FPC 3.3.1 r49223 macOS 10.14.6 Xcode 11.3.1
Lazarus 2.1 r65070 FPC 3.3.1 r49223 macOS 11.2.3 aarch64 Xcode 12.4
Lazarus 2.1 r61574 FPC 3.3.1 r42318 FreeBSD 12.1 amd64 VMware VM
Lazarus 2.1 r61574 FPC 3.0.4 Ubuntu 20.04 Parallels VM
Lazarus 2.0.10 FPC 3.2.0 Win10 Parallels VM

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #2 on: April 13, 2021, 12:10:04 pm »
Have you read and digested the Wiki article: Autosize/Layout ?

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

trev

  • Global Moderator
  • Hero Member
  • *****
  • Posts: 1441
  • Former Delphi 1-7, 10.2 user
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #3 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.
Lazarus 2.1 r65061 FPC 3.3.1 r49223 macOS 10.14.6 Xcode 11.3.1
Lazarus 2.1 r65070 FPC 3.3.1 r49223 macOS 11.2.3 aarch64 Xcode 12.4
Lazarus 2.1 r61574 FPC 3.3.1 r42318 FreeBSD 12.1 amd64 VMware VM
Lazarus 2.1 r61574 FPC 3.0.4 Ubuntu 20.04 Parallels VM
Lazarus 2.0.10 FPC 3.2.0 Win10 Parallels VM

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #4 on: April 13, 2021, 02:07:19 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?

wp

  • Hero Member
  • *****
  • Posts: 8398
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #5 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).
Mainly Lazarus trunk / fpc 3.2.0 / all 32-bit on Win-10, but many more...

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #6 on: April 13, 2021, 04:37:53 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) ?

wp

  • Hero Member
  • *****
  • Posts: 8398
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #7 on: April 13, 2021, 05:46:30 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.
Mainly Lazarus trunk / fpc 3.2.0 / all 32-bit on Win-10, but many more...

Handoko

  • Hero Member
  • *****
  • Posts: 4209
  • My goal: build my own game engine using Lazarus
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #8 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.

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #9 on: April 13, 2021, 06:24:09 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 ?

wp

  • Hero Member
  • *****
  • Posts: 8398
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #10 on: April 13, 2021, 06:29:20 pm »
The division operator for floats is the slash:
Code: Pascal  [Select][+][-]
  1. var
  2.    x: Double;
  3. ...
  4.   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][+][-]
  1. var
  2.   x: Integer;
  3. ...
  4.   x := round(1023/2.4);
Mainly Lazarus trunk / fpc 3.2.0 / all 32-bit on Win-10, but many more...

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #11 on: April 13, 2021, 08:13:24 pm »
The division operator for floats is the slash:
Code: Pascal  [Select][+][-]
  1. var
  2.    x: Double;
  3. ...
  4.   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][+][-]
  1. var
  2.   x: Integer;
  3. ...
  4.   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.
« Last Edit: April 14, 2021, 08:43:16 am by AlphaInc. »

speter

  • Full Member
  • ***
  • Posts: 191
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #12 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.


I climbed mighty mountains, and saw that they were actually tiny foothills. :)

Laz 2.0.10 / FPC 3.2.0 / Windows 10 (64bit)

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #13 on: April 14, 2021, 01:38:49 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.
« Last Edit: April 14, 2021, 01:43:16 pm by AlphaInc. »

AlphaInc.

  • Jr. Member
  • **
  • Posts: 93
Re: Adjust TForm and Buttons to Screen Resolution
« Reply #14 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.

 

TinyPortal © 2005-2018