High DPI/es: what changed

Revision 2 to 3. Removed lines have a minus sign; added lines have a plus sign.

Old	New		Line
1	1		## Definicion
2	2
3	3		Cualquier configuración personalizada de DPI superior a 96 DPI (la configuración predeterminada) \[<http://msdn.microsoft.com/en-us/library/ee318406(VS.85>).aspx *\].\
4	4		En español debe emplearse el término PPP (Puntos por pulgada) que es la traducción de "DPI" (Dots per inch), "High DPI" sería "PPP elevado" o "Configuración elevada de PPP", "High DPI Awareness" sería aplicación "Consciente de la configuración elevada de PPP".
5	5
6	6		## Configurando High DPI en Windows
7	7
8	8		En Windows 7 ve al Panel de Control \> Pantalla. Elije Más pequeño 100% (predeterminado), Mediano 125% o Más grande 150%.
9	9
10	10		Si elijes 100% (96 DPI) es la configuración predeterminada de DPI de Windows, no es High DPI.
11	11
12	12		Si elijes 125% (120 DPI) la opción "Usar ajuste de ppp con el estilo de Windows XP" esta activada, las aplicaciones que ejecutes con esta configuración son escaladas como en Windows XP.
13	13
14	14		Si elijes 150% (144 DPI) la opción "Usar ajuste de ppp con el estilo de Windows XP" esta desactivada (Virtualización de DPI activada), las aplicaciones que ejecutes con esta configuración deben ser "High DPI Awareness", sino serán escaladas por el sistema como si se tratara de una imagen blureada.
15	15
16	16		También puedes establecer una configuración personalizada de DPI en la opción "Establecer tamaño de texto personalizado (PPP)" y activar/desactivar la Virtualización de DPI.
17	17
18	18		## High DPI en Lazarus
19	19
20	20		Con Lazarus debemos seguir estos pasos para hacer una aplicación "High DPI Awareness" para Windows 7. No estoy usando ScaleBy ni ScaleControls porque tienen muchos bugs para este propósito.
21	21
22	22		### PASO 1 - Declarar High DPI
23	23
24	24		Para hacer esto necesitamos un archivo de manifiesto que incluya la declaración, con Lazarus 0.9.30 podemos hacer esto entrando a Opciones \> Opciones del proyecto \> y seleccionando las opciones "Usar el archivo de manifiesto para habilitar temas (solo Windows)" y "Aplicación 'DPI-Aware' (para Vista+)".
25	25
26	26		### PASO 2 - Escalar Formas (Forms) y Controles (Controls)
27	27
28	28		Para hacer esto podemos llamar el procedimiento ScaleDPI en el evento OnCreate de cada forma del proyecto.
29	29
30	30		Primero copia el siguiente código y guardalo a un archivo de texto "uscaledpi.pas":
31	31
32	32		``` pascal
33	33		unit uscaledpi;
34	34
35	35		{$mode objfpc}{$H+}
36	36
37	37		interface
38	38
39	39		uses
40	40		Graphics, Controls;
41	41
42	42		procedure ScaleDPI(Control: TControl; FromDPI: Integer);
43	43
44	44		implementation
45	45
46	46		procedure ScaleDPI(Control: TControl; FromDPI: Integer);
47	47		var
48	48		n: Integer;
49	49		WinControl: TWinControl;
50	50		begin
51	51		with Control do begin
52	52		Left:=ScaleX(Left,FromDPI);
53	53		Top:=ScaleY(Top,FromDPI);
54	54		Width:=ScaleX(Width,FromDPI);
55	55		Height:=ScaleY(Height,FromDPI);
56	56		end;
57	57		if Control is TWinControl then begin
58	58		WinControl:=TWinControl(Control);
59	59		if WinControl.ControlCount > 0 then begin
60	60		for n:=0 to WinControl.ControlCount-1 do begin
61	61		if WinControl.Controls[n] is TControl then begin
62	62		ScaleDPI(WinControl.Controls[n],FromDPI);
63	63		end;
64	64		end;
65	65		end;
66	66		end;
67	67		end;
68	68
69	69		end.
70	70		```
71	71
72	72		Copia el archivo "uscaledpi.pas" a la carpeta principal del proyecto:
73	73
74		-	~~` MiProyecto\uscaledpi.pas`\~~
75		-	~~` `~~
	74	+	```text
	75	+	MiProyecto\uscaledpi.pas
	76	+	```
76	77
77	78		En la sección "uses" del proyecto agrega "uScaleDPI":
78	79
79	80		``` pascal
80	81		unit form1;
81	82
82	83		{$mode objfpc}{$H+}
83	84
84	85		interface
85	86
86	87		uses
87	88		Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs,
88	89		uScaleDPI; // Esto incluye el procedimiento ScaleDPI
89	90		```
90	91
91	92		En el evento OnCreate de cada forma llama el procedimiento en esta forma:
92	93
93	94		``` pascal
94	95		procedure TForm1.FormCreate(Sender: TObject);
95	96		begin
96	97		{$IFDEF WINDOWS}
97	98		if Screen.PixelsPerInch <> 96 then ScaleDPI(Self,96); // 96 es la configuración de DPI cuando diseñaste la Forma1 (Form1)
98	99		{$ENDIF}
99	100		end;
100	101		```
101	102
102	103		## Caso practico
103	104
104	105		[CPickSniff](http://sourceforge.net/projects/cpicksniff2/) es una aplicación para capturar los colores del escritorio, es el programa que utilizaremos para ver como funciona High DPI en Windows.
105	106
106	107		### DPI Predeterminado
107	108
108	109		Esta es la aplicación corriendo en 96 DPI (100%), sin ningún tipo de escalado ya que no es necesario.
109	110
110	111		![](/wiki-images/4/4b/Cpicksniff_defaultdpi.png)
111	112
112	113		### DPI escalado por Windows
113	114
114	115		Esta es la misma aplicación corriendo en 144 DPI (150%), no tiene el manifiesto por lo que Windows realiza el escalado: el resultado es una aplicacion blureada.
115	116
116	117		![](/wiki-images/5/54/Cpicksniff_blured.png)
117	118
118	119		### DPI con Manifiesto
119	120
120	121		Corriendo en 144 DPI (150%). Esta vez la aplicación incluye el manifiesto declarando High DPI, pero no el código para manejar el escalado: el resultado es que los elementos no son escalados de acuerdo a como se escalan las fuentes (Windows realiza esto automáticamente), por lo que el texto aparece recortado.
121	122
122	123		![](/wiki-images/1/1b/Cpicksniff_nohighdpi.png)
123	124
124	125		### High DPI
125	126
126	127		Finalmente con el Manifiesto y el escalado LCL, la aplicación se ve perfecta en High DPI.
127	128
128	129		![](/wiki-images/b/bd/Cpicksniff_highdpi.png)
129	130
130	131		## High DPI en Lazarus 1.7 y superior
131	132
132	133		Nota: la información que aparece debajo es válida para la version actual del SVN trunk (Mayo 2017). Se hará oficial el how-to tan pronto como se publique la versión 1.8 de Lazarus 1.8. High-DPI se encuentra actualmente en construcción por lo que sus propiedades pueden cambiar antes de la publicación definitiva de la versión 1.8.
133	134
134	135		Para manejar High DPI utiliando nuevas características en 1.7, sigue los siguientes pasos:
135	136
136	137		- On Windows: enable DPI awarness in Project Options -\> Application. Decide if you want to support per monitor DPI awarness or not.
137	138		- Enable LCL scaling for your application DPI awarness in Project Options -\> Application -\> "Use LCL scaling (Hi-DPI).
138	139		- Set TForm.Scaled=True for all your forms (it is the default value). All WYSIWYG should work automatically. Also the designer scales the forms accordingly.
139	140		- If you create controls run-time, escala todas las coordenadas, tamaños, etc que tengan que ver con DPI-aware mediante TControl.ScaleCoord() o ScaleCoord96() (dependiendo de tu elección del PPI por defecto) o prepara tu contenedor (e.g. un panel con controles) como si estuviese en 96 PPI y entonces haz la llamada a TControl.AutoAdjustLayout(lapAutoAdjustForDPI, 96, ParentFormOfTheContainer.PixelsPerInch, 0, 0);
140	141		- Si algunos de tus componentes no realiza el escalado de sus dimensiones internas, override DoAutoAdjustLayout y escala sus dimensiones (ver TToolBar) - debe realizarse con todos los controles. Si un control LCL pierde DoAutoAdjustLayout por favor reportalo en Mantis y caso de disponer de un parche de solución, apórtalo.
141	142
142	143		### Lazarus IDE high DPI
143	144
144	145		El IDE mismo de Lazarus es DPI-aware.
145	146
146	147		## Enlaces Externos
147	148
148	149		- \[<http://msdn.microsoft.com/en-us/library/dd464646(v=VS.85>).aspx High DPI (Windows)\] Artículo MSDN sobre High DPI
149	150		- [Guía para escalado](http://msdn.microsoft.com/en-us/library/windows/apps/hh465362) Windows Dev Center - Guía de experiencia de usuario para el escalado de estilo de aplicaciones Metro.
150	151		- [[Windows Icon]] Como crear iconos que funcionan con High DPI.
151	152
152	153		---
153	154		From the Free Pascal wiki, page "High DPI/es", as it stood on 2020-02-17 after a change by Trev, out of the wiki's dump of 2024-05-26. Copyright stays with the author who wrote it, according to the old wiki's [[Licensing]] page. If you have concerns about this material, [message the admin](/wiki-contact).
154	155		Category: Castellano
155	156		Category: Español

Back to history