Difference between revisions of "High DPI"
(→High DPI in Lazarus: Advanced) |
|||
Line 231: | Line 231: | ||
HighDPI; | HighDPI; | ||
Application.Run; | Application.Run; | ||
+ | end.</delphi> | ||
+ | |||
+ | === Advanced === | ||
+ | |||
+ | Some controls have more properties or different property names like TToolBar buttons (ButtonHeight / ButtonWidth instead Width / Height). Also if you use fixed font sizes the behavior can change in different os's. | ||
+ | |||
+ | You can edit the ScaleDPI procedure to include a code to scale all controls in the way you want. | ||
+ | |||
+ | This is the ''uscaledpi'' used in [[LazPaint]]. This is very usefull to scale ToolBars and ToolBox. Also LazPaint uses fixed fonts to be consistent in different os's. | ||
+ | |||
+ | <delphi>unit uscaledpi; | ||
+ | |||
+ | {$mode objfpc}{$H+} | ||
+ | |||
+ | interface | ||
+ | |||
+ | uses | ||
+ | Forms, Graphics, Controls, ComCtrls; | ||
+ | |||
+ | procedure HighDPI(FromDPI: Integer); | ||
+ | procedure ScaleDPI(Control: TControl; FromDPI: Integer); | ||
+ | |||
+ | implementation | ||
+ | |||
+ | procedure HighDPI(FromDPI: Integer); | ||
+ | var | ||
+ | i: Integer; | ||
+ | begin | ||
+ | for i:=0 to Screen.FormCount-1 do begin | ||
+ | ScaleDPI(Screen.Forms[i],FromDPI); | ||
+ | end; | ||
+ | end; | ||
+ | |||
+ | procedure ScaleDPI(Control: TControl; FromDPI: Integer); | ||
+ | var | ||
+ | n: Integer; | ||
+ | WinControl: TWinControl; | ||
+ | ToolBarControl: TToolBar; | ||
+ | begin | ||
+ | with Control do begin | ||
+ | Left:=ScaleX(Left,FromDPI); | ||
+ | Top:=ScaleY(Top,FromDPI); | ||
+ | Width:=ScaleX(Width,FromDPI); | ||
+ | Height:=ScaleY(Height,FromDPI); | ||
+ | {$IFDEF WINDOWS} | ||
+ | Font.Size:=0; | ||
+ | {$ELSE} | ||
+ | Font.Size:=ScaleY(Font.Size,FromDPI); | ||
+ | {$ENDIF} | ||
+ | end; | ||
+ | |||
+ | if Control is TToolBar then begin | ||
+ | ToolBarControl:=TToolBar(Control); | ||
+ | with ToolBarControl do begin | ||
+ | ButtonWidth:=ScaleX(ButtonWidth,FromDPI); | ||
+ | ButtonHeight:=ScaleY(ButtonHeight,FromDPI); | ||
+ | end; | ||
+ | end; | ||
+ | |||
+ | if Control is TWinControl then begin | ||
+ | WinControl:=TWinControl(Control); | ||
+ | if WinControl.ControlCount > 0 then begin | ||
+ | for n:=0 to WinControl.ControlCount-1 do begin | ||
+ | if WinControl.Controls[n] is TControl then begin | ||
+ | ScaleDPI(WinControl.Controls[n],FromDPI); | ||
+ | end; | ||
+ | end; | ||
+ | end; | ||
+ | end; | ||
+ | end; | ||
+ | |||
end.</delphi> | end.</delphi> | ||
Revision as of 04:19, 17 June 2011
│
Deutsch (de) │
English (en) │
español (es) │
русский (ru) │
Definition
DPI (dot per inch) is the relation between size in pixels and the actual display size. Here dot is an equivalent for pixel in printing terminology. Applications can either use pixel sizes, or take into account that actual display size. In this second cases, sizes are given in points.
On Windows Vista and further, it is possible to change the DPI ratio to make elements bigger. High DPI means any custom DPI setting with more than 96 DPI (the default setting) *.
High DPI awareness means that an application takes this DPI setting into account.
Pixels and points
For example 300 DPI means that there are 300 pixels (or dot) per inch. There are 72 points per inch, so :
300 pixels ↔ 1 inch
300/72 pixels ↔ 1 point
4.16 pixels ↔ 1 point
Now with 96 DPI :
72 pixels ↔ 1 inch
1.33 pixel ↔ 1 point
Now with 144 DPI :
144 pixels ↔ 1 inch
2 pixels ↔ 1 point
Setting High DPI in Windows
In Windows 7 go to Control Panel > Appareance and Personalization > Display.
Select Smaller 100% (default), Medium 125% or Larger 150%. If you select 100% (96 DPI) is the default Windows DPI setting, not High DPI.
If you select 125% (120 DPI) the option "Use Windows XP style DPI scaling" is enabled, applications you run under this setting are scaled like at Windows XP.
If you select 150% (144 DPI) the option "Use Windows XP style DPI scaling" is disabled (DPI Virtualization enabled), applications you run under this setting must be High DPI Awareness else they will be scaled by the system like a blurred image.
Also you can set your custom DPI setting in the option "Set custom text size (DPI)" and enable/disable the DPI Virtualization.
Example
Here is a form with an undefined font size (set to zero, which is the default value). Designed in 96 DPI (100%), it looks like this :
Now, with 120 DPI (125%), it becomes :
As you can see, the font gets bigger and clipped, the window title gets bigger, but the client area of the window keeps the same size. Note that these change of size can occur by using an application with different windows theme, or with another operating system.
To avoid this, set the font size to a non-zero value. Note that Font.Size is expressed in points and Font.Height is expressed in pixels. In fact, the value of Font.Height only is stored, and Font.Size changes according to current DPI value. So if we set the font size, it will be fixed to a certain size in pixels.
If we try again with a fixed font size of 9 points in 96 DPI (100%), we get this :
Now if the same program is run in 120 DPI (125%), it becomes :
The result is the almost the same. The title bar is bigger, but the client area and the font size is the same. Note that in fact, the size in points of the font has changed.
As a conclusion, it is possible to avoid inconsistence in the display by fixing font sizes. But we do not take into account that the graphical elements may be smaller according to actual DPI of the screen. With DPI awareness, it is possible to make application behave as if they new the real size of the pixels.
Example (Windows)
CPickSniff is an application to capture screen colors. We will use it as an example to see how High DPI works in Windows.
Default DPI
This is the app running at 96 DPI (100%). It's the default mode, when scaling isn't necessary.
Windows DPI Scaling
This is same app running at 144 DPI (150%) without manifest, so Windows scales it like a bitmap. The result is a blurred image.
With Manifest
Running at 144 DPI (150%). This time the app includes manifest but the application contains no code to handle scaling. Items aren't scaled whereas font are scaled (Windows does it automatically), so text is clipped.
High DPI
Finally with manifest and scaling handler, the app is in High DPI.
High DPI in Lazarus
With Lazarus we have to follow 2 steps in order to make an High DPI Awareness application for Windows 7.
STEP 1 - Declare High DPI Awareness
To do this we need a manifest file that includes the declaration, with Lazarus 0.9.30 we can do this going to Options > Project Options > then select the options "Use Manifest to Enable Themes (Windows)" and "Dpi Aware application (for Vista +)".
STEP 2 - Scale Forms and Controls
To do this we can call ScaleDPI procedure OnCreate event of each form in your project.
First copy the below code and save to a text file "uscaledpi.pas":
<delphi>unit uscaledpi;
{$mode objfpc}{$H+}
interface
uses
Graphics, Controls;
procedure ScaleDPI(Control: TControl; FromDPI: Integer);
implementation
procedure ScaleDPI(Control: TControl; FromDPI: Integer); var
n: Integer; WinControl: TWinControl;
begin
with Control do begin Left:=ScaleX(Left,FromDPI); Top:=ScaleY(Top,FromDPI); Width:=ScaleX(Width,FromDPI); Height:=ScaleY(Height,FromDPI); Font.Size := ScaleY(Font.Size,FromDPI); end; if Control is TWinControl then begin WinControl:=TWinControl(Control); if WinControl.ControlCount > 0 then begin for n:=0 to WinControl.ControlCount-1 do begin if WinControl.Controls[n] is TControl then begin ScaleDPI(WinControl.Controls[n],FromDPI); end; end; end; end;
end;
end.</delphi>
Copy the "uscaledpi.pas" file to the main folder of your project:
MyProject\uscaledpi.pas
In the "uses" section of your project you need to add "uScaleDPI":
<delphi>unit form1;
{$mode objfpc}{$H+}
interface
uses
Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs, uScaleDPI; // This includes ScaleDPI procedure </delphi>
OnCreate event of each form call the procedure in this way:
<delphi>procedure TForm1.FormCreate(Sender: TObject); begin
if Screen.PixelsPerInch <> 96 then ScaleDPI(Self,96); // 96 is the DPI you designed the Form1
end;</delphi>
Scale All Forms
You can change the step 2 to scale all forms.
In order to do this open your project source (typically the Project1.lpr file) add uScaleDPI in the uses clause and add this procedure:
<delphi>procedure HighDPI; var
i: Integer;
begin
for i:=0 to Screen.FormCount-1 do begin ScaleDPI(Screen.Forms[i],96); end;
end;</delphi>
Then call the procedure below the code that initializes the forms:
<delphi>begin
RequireDerivedFormResource := True; Application.Initialize; Application.CreateForm(TForm1, Form1); Application.CreateForm(TForm2, Form2); Application.CreateForm(TForm3, Form3); HighDPI; Application.Run;
end.</delphi>
The result looks like this:
<delphi>program Project1;
{$mode objfpc}{$H+}
uses
{$IFDEF UNIX}{$IFDEF UseCThreads} cthreads, {$ENDIF}{$ENDIF} Interfaces, Forms, Unit1, Unit2, Unit3, uScaleDPI;
{$R *.res}
procedure HighDPI; var
i: Integer;
begin
for i:=0 to Screen.FormCount-1 do begin ScaleDPI(Screen.Forms[i],96); end;
end;
begin
RequireDerivedFormResource := True; Application.Initialize; Application.CreateForm(TForm1, Form1); Application.CreateForm(TForm2, Form2); Application.CreateForm(TForm3, Form3); HighDPI; Application.Run;
end.</delphi>
Advanced
Some controls have more properties or different property names like TToolBar buttons (ButtonHeight / ButtonWidth instead Width / Height). Also if you use fixed font sizes the behavior can change in different os's.
You can edit the ScaleDPI procedure to include a code to scale all controls in the way you want.
This is the uscaledpi used in LazPaint. This is very usefull to scale ToolBars and ToolBox. Also LazPaint uses fixed fonts to be consistent in different os's.
<delphi>unit uscaledpi;
{$mode objfpc}{$H+}
interface
uses
Forms, Graphics, Controls, ComCtrls;
procedure HighDPI(FromDPI: Integer); procedure ScaleDPI(Control: TControl; FromDPI: Integer);
implementation
procedure HighDPI(FromDPI: Integer); var
i: Integer;
begin
for i:=0 to Screen.FormCount-1 do begin ScaleDPI(Screen.Forms[i],FromDPI); end;
end;
procedure ScaleDPI(Control: TControl; FromDPI: Integer); var
n: Integer; WinControl: TWinControl; ToolBarControl: TToolBar;
begin
with Control do begin Left:=ScaleX(Left,FromDPI); Top:=ScaleY(Top,FromDPI); Width:=ScaleX(Width,FromDPI); Height:=ScaleY(Height,FromDPI); {$IFDEF WINDOWS} Font.Size:=0; {$ELSE} Font.Size:=ScaleY(Font.Size,FromDPI); {$ENDIF} end;
if Control is TToolBar then begin ToolBarControl:=TToolBar(Control); with ToolBarControl do begin ButtonWidth:=ScaleX(ButtonWidth,FromDPI); ButtonHeight:=ScaleY(ButtonHeight,FromDPI); end; end;
if Control is TWinControl then begin WinControl:=TWinControl(Control); if WinControl.ControlCount > 0 then begin for n:=0 to WinControl.ControlCount-1 do begin if WinControl.Controls[n] is TControl then begin ScaleDPI(WinControl.Controls[n],FromDPI); end; end; end; end;
end;
end.</delphi>
Conclusion
Making your application aware of DPI setting and themes includes two steps :
- Set a fixed font size at design time (Usefull for cross-platform applications, if your target is only Windows isn't neccesary)
- Scale components at run time
NOTE:
See Discussion page for more information: Talk:High_DPI.
I'm NOT using ScaleBy & ScaleControls:
<delphi>Self.ScaleBy(Screen.PixelsPerInch,96);</delphi>
This scales the font, in Windows isn't neccesary because the OS changes font. May be usefull if you use fixed font size.
<delphi>Self.ScaleControls(Screen.PixelsPerInch,96);</delphi>
This doesn't scales form width / height. May be usefull if you scale those by yourself.
External Links
- High DPI (Windows) MSDN article about High DPI