Jump to content

How to scale my forms to the client screen ?


cdev

Recommended Posts

Hi,

 

I made a fine looking layout on my big high resolution screen.  But when displayed on a 13 or 11 inch screen, I loose whole parts of my layout.

I found the custommeta property in servermodule and the desktopviewport properties in the mainmodule, but I don't know what exactly I have to do to 'scale' my application to the client screen.

Can anyone help me as to this matter ?

Link to comment
Share on other sites

What do you want to achieve exactly? In my case Everything lives in frames which are created at runtime and I change their size when the browser window changes size with:

procedure TMainForm.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
var
  i,j:integer;
  tabSheet:TUniTabSheet;
begin
  if SameText(EventName, 'resize') then
  begin
    for i := 0 to UniPageControl1.PageCount-1 do
    begin
       tabsheet:=UniPageControl1.Pages[i];
       for j := 0 to tabsheet.ControlCount-1 do
       begin
           if tabsheet.Controls[j] is TUniFrame then
           begin
               (tabsheet.Controls[j] as TUniFrame).Width:=tabsheet.Width;
               (tabsheet.Controls[j] as TUniFrame).Height:=tabsheet.Height;
           end;
       end;
    end;
  end;

end;

...but maybe your scenario is different

Link to comment
Share on other sites

I am working with Client Alignment.

 

For example I have this screen, layout made on a 1920x1080 monitor :  (Let us suppose this is good, this is how I want my page to look)

image.thumb.png.092071efbbb3caafbe98857869e6c266.png

But when I display this on a bigger screen, I get this :

image.thumb.png.bdfc760c76a426611e130acbf8d9f141.png

On a 4K-screen :

image.thumb.png.f4c549d2a826feec8aba5630de8df05a.png

Or even on a small screen :

image.thumb.png.940a032e79f4f5b16b0cdcd81b354da0.png

 

With these examples, you will surely understand what I mean.  What I would like to have is more or less the same look as on the first screen.  That the elements on the page are proportionally resized (stretched or shrunk) depending on the screen display.  (Something similar as the stretch property of an image, but here for all elements on the page: image, label, panel, ...)

If we focus on the text, on the first screen the size of the font is 16: this looks good.

But on bigger screens or screens with a higher resolution, the font size should be higher, on smaller screens or lower resolution: the font size should be less.

Is there a way to achieve this ?

I guess this is also a hint for all developers: your application can look quite good on your monitor, but nowadays people work with small 11-inch screens as well as huge 4K-screens.  Your application can look quite different and even completely unwanted as in my last screenshot, where even my text is not fully displayed.

 

 

 

 

Link to comment
Share on other sites

 

One of the benefits of RadCORE is the dynamic responsive settings that I created that can be extended very easily and create "new usage situations".

I can "ask RadCORE" to adjust my components according to the device x resolution.

We can reduce / expand according to the resolution or the content of the container.

We can hide on a certain device.

Adjust font size ...

 

- Dynamic alignment : It is possible to "link" one object to another to dynamically adjust its positioning, centering, scale, etc.

image.thumb.png.1933cacf56caf08b084c31c62464e775.png

 

image.thumb.png.079db7cface8ecdb9cc3f8a86bdf11bf.png

 

image.thumb.png.bca028ab46f820eabdad766a21792476.png

 

image.png.363385c6595ef437fab1491604fd2972.png

image.thumb.png.a542358e14b488a458dabacb1b389957.png

 

image.thumb.png.040fd9d66309647b7303295a1db539ad.png

 

 

We can "interact" with uniDBGRID and also apply responsive features such as hiding or setting the width of a column in a given situation and still apply masks or "conditional" css classes to the field content without using a "field editor".

 

image.thumb.png.8b9e4c4e53817d11d8383962e75eee68.png

 

RadCORE is constantly evolving by listening to users and applying improvements and new features every month.

I always thank Farshad for creating UNIGUI.

And what I do with RadCORE is to increase (in the simplest way) the firepower of the unigui.

 

Much still to be done !!!

But the results are these:

- Responsiveness with default components ( or third party ) for any device

 

image.thumb.png.6093cf32ff6fe58988a1c63b6fa6209e.png

 

image.thumb.png.205ef54d4957b9e85175472ddfa17982.png

 

- THEME CONTROL

image.thumb.png.57f1fd01712dbc5f15d7c3835ae893bd.png

 

- TRANSLATION

 

image.png.609cd8e2a1282c4dcab7f5f859c2256d.png

image.thumb.png.f90aaa7c95c0f1db0360c224d8edba00.png

image.thumb.png.277fabe3a15702dbbe0afa665b56b169.png

 

  • Like 1
Link to comment
Share on other sites

Hi, I don't know if this will help you, but I'm using this for myself:

 

procedure SetFormSize (SelForm : TUniForm);
var
ClientWidth,
ClientHeight    : Integer;
begin

SelForm.Left := 0;
SelForm.Top := 0;
//Get Screen Size
ClientWidth := UniSession.UniApplication.ScreenWidth;
ClientHeight := UniSession.UniApplication.ScreenHeight;
//Set Data
SelForm.Width := ClientWidth;
SelForm.Height := ClientHeight;

{if (uniMainModule.AppPlatform <> [upDesktop])
AND (AnsiUpperCase (UniServerModule.SistemSettingsList.Values ['useAndroidPOS']) <> 'TRUE')
then begin
    SelForm.WindowState := wsNormal;
    SelForm.Left := 0;
    SelForm.Top := 0;
    ClientWidth := UniSession.UniApplication.ScreenWidth;
    ClientHeight := UniSession.UniApplication.ScreenHeight;

    if UniSession.FormsList.Count <= 1 then exit;

    if (ClientWidth < FormMinWidth) then
       ClientWidth := TUniForm (UniSession.FormsList [UniSession.FormsList.Count - 1]).Width;
    if (ClientHeight < FormMinHeight) then
       ClientHeight := TUniForm (UniSession.FormsList [UniSession.FormsList.Count - 1]).Height;

    if ClientWidth  < FormMinWidth then
       ClientWidth := FormMinWidth;
    if ClientHeight < FormMinHeight then
       ClientHeight := FormMinHeight;

    if ClientWidth < SelForm.Width then
       ClientWidth := SelForm.Width;
    if ClientHeight < SelForm.Height then
       ClientHeight := SelForm.Height;

    SelForm.Width := ClientWidth;
    SelForm.Height := ClientHeight;

end;

}

SelForm.Repaint;//Set MainForm Size
form_general.Left := 0;
form_general.Top := 0;
form_general.Width := SelForm.Width;
form_general.Height := SelForm.Height;
form_general.Invalidate;

//Set Top form size

TUniForm (UniSession.FormsList [UniSession.FormsList.Count - 1]).Height := SelForm.Height;
TUniForm (UniSession.FormsList [UniSession.FormsList.Count - 1]).Width := SelForm.Width;
TUniForm (UniSession.FormsList [UniSession.FormsList.Count - 1]).Invalidate;


end;

 

 

procedure TForm_General.UniFormAjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
begin

//activate resize forms

if EventName = 'resize' then begin
    SetFormSize (Self);
end;

end;

Link to comment
Share on other sites

On 4/27/2021 at 10:04 PM, mikromundo said:

@cdev

I tried to reproduce with RadCORE the model you posted.

Sorry about my bad English.

 

 

 


 

 

 

Hi Micromundo,
it's time to ask Farshad for a "dedicate" property like "CustomProp"  or similar in every Unigui components.
You cannot continue to abuse with Hint property! :-) :-)
Good job!


 

Link to comment
Share on other sites

Thanks for the feedback.

Farshad has already started adding CustomAttributes.

But there is no problem with using hint.

- It does not affect the execution of the application;

- It is almost unlimited, in the point of view that I use;

- It exists in vcl, fmx etc;

This all makes possible what I wanted from the beginning:

You don't need anything special (new components) to have excellent results and a virtually unlimited expansion of new features.

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...