High DPI/es: what changed

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

Old	New		Line
1		-	~~### High DPI~~
	1	+	## Definicion
2	2
3		-	~~Finalmente con el Manifiesto y el escalado LCL, la aplicación se ve perfecta en High DPI.~~
	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	+	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".
4	5
	6	+	## Configurando High DPI en Windows
	7	+
	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	+
	10	+	Si elijes 100% (96 DPI) es la configuración predeterminada de DPI de Windows, no es High DPI.
	11	+
	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	+
	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	+
	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	+
	18	+	## High DPI en Lazarus
	19	+
	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	+
	22	+	### PASO 1 - Declarar High DPI
	23	+
	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	+
	26	+	### PASO 2 - Escalar Formas (Forms) y Controles (Controls)
	27	+
	28	+	Para hacer esto podemos llamar el procedimiento ScaleDPI en el evento OnCreate de cada forma del proyecto.
	29	+
	30	+	Primero copia el siguiente código y guardalo a un archivo de texto "uscaledpi.pas":
	31	+
	32	+	``` pascal
	33	+	unit uscaledpi;
5	34
	35	+	{$mode objfpc}{$H+}
	36	+
	37	+	interface
	38	+
	39	+	uses
	40	+	Graphics, Controls;
	41	+
	42	+	procedure ScaleDPI(Control: TControl; FromDPI: Integer);
	43	+
	44	+	implementation
	45	+
	46	+	procedure ScaleDPI(Control: TControl; FromDPI: Integer);
	47	+	var
	48	+	n: Integer;
	49	+	WinControl: TWinControl;
	50	+	begin
	51	+	with Control do begin
	52	+	Left:=ScaleX(Left,FromDPI);
	53	+	Top:=ScaleY(Top,FromDPI);
	54	+	Width:=ScaleX(Width,FromDPI);
	55	+	Height:=ScaleY(Height,FromDPI);
	56	+	end;
	57	+	if Control is TWinControl then begin
	58	+	WinControl:=TWinControl(Control);
	59	+	if WinControl.ControlCount > 0 then begin
	60	+	for n:=0 to WinControl.ControlCount-1 do begin
	61	+	if WinControl.Controls[n] is TControl then begin
	62	+	ScaleDPI(WinControl.Controls[n],FromDPI);
	63	+	end;
	64	+	end;
	65	+	end;
	66	+	end;
	67	+	end;
	68	+
	69	+	end.
	70	+	```
6	71
7		-	~~[![cpicksniff highdpi.png](/wiki-images/5/54/cpicksniff_highdpi.png)](</File:cpicksniff_highdpi.png>)~~
	72	+	Copia el archivo "uscaledpi.pas" a la carpeta principal del proyecto:
8	73
	74	+	` MiProyecto\uscaledpi.pas`\
	75	+	` `
	76	+
	77	+	En la sección "uses" del proyecto agrega "uScaleDPI":
	78	+
	79	+	``` pascal
	80	+	unit form1;
	81	+
	82	+	{$mode objfpc}{$H+}
	83	+
	84	+	interface
	85	+
	86	+	uses
	87	+	Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs,
	88	+	uScaleDPI; // Esto incluye el procedimiento ScaleDPI
	89	+	```
	90	+
	91	+	En el evento OnCreate de cada forma llama el procedimiento en esta forma:
	92	+
	93	+	``` pascal
	94	+	procedure TForm1.FormCreate(Sender: TObject);
	95	+	begin
	96	+	{$IFDEF WINDOWS}
	97	+	if Screen.PixelsPerInch <> 96 then ScaleDPI(Self,96); // 96 es la configuración de DPI cuando diseñaste la Forma1 (Form1)
	98	+	{$ENDIF}
	99	+	end;
	100	+	```
	101	+
	102	+	## Caso practico
	103	+
	104	+	[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	+	### DPI Predeterminado
	107	+
	108	+	Esta es la aplicación corriendo en 96 DPI (100%), sin ningún tipo de escalado ya que no es necesario.
	109	+
	110	+	![](/wiki-images/4/4b/Cpicksniff_defaultdpi.png)
	111	+
	112	+	### DPI escalado por Windows
	113	+
	114	+	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	+	![](/wiki-images/5/54/Cpicksniff_blured.png)
	117	+
	118	+	### DPI con Manifiesto
	119	+
	120	+	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	+	![](/wiki-images/1/1b/Cpicksniff_nohighdpi.png)
	123	+
	124	+	### High DPI
	125	+
	126	+	Finalmente con el Manifiesto y el escalado LCL, la aplicación se ve perfecta en High DPI.
	127	+
	128	+	![](/wiki-images/b/bd/Cpicksniff_highdpi.png)
	129	+
9	130		## High DPI en Lazarus 1.7 y superior
10	131
11		-	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.
	132	+	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.
12	133
13		-	~~Para manejar High DPI utiliando nuevas características en 1.7, sigue los siguientes pasos:~~
	134	+	Para manejar High DPI utiliando nuevas características en 1.7, sigue los siguientes pasos:
14	135
15		-	* On Windows: enable DPI awarness in Project Options -> Application. Decide if you want to support per monitor DPI awarness or not.
16		-	* Enable LCL scaling for your application DPI awarness in Project Options -> Application -> "Use LCL scaling (Hi-DPI).
17		-	* 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.
18		-	* 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);
19		-	* 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.
	136	+	- On Windows: enable DPI awarness in Project Options -\> Application. Decide if you want to support per monitor DPI awarness or not.
	137	+	- Enable LCL scaling for your application DPI awarness in Project Options -\> Application -\> "Use LCL scaling (Hi-DPI).
	138	+	- 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	+	- 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	+	- 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.
20	141
21	142		### Lazarus IDE high DPI
22	143
23		-	~~El IDE mismo de Lazarus es DPI-aware.~~
	144	+	El IDE mismo de Lazarus es DPI-aware.
24	145
25	146		## Enlaces Externos
26	147
27		-	* [High DPI (Windows)](<http://msdn.microsoft.com/en-us/library/dd464646$v=VS.85$.aspx>) Artículo MSDN sobre High DPI
28		-	* [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.
29		-	* [[Windows Icon]] Como crear iconos que funcionan con High DPI.
	148	+	- \[<http://msdn.microsoft.com/en-us/library/dd464646(v=VS.85>).aspx High DPI (Windows)\] Artículo MSDN sobre High DPI
	149	+	- [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	+	- [[Windows Icon]] Como crear iconos que funcionan con High DPI.
30	151
31	152		---
32		-	From the Free Pascal wiki, page "High DPI/es", as the Internet Archive kept it on 2025-05-16. 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).
	153	+	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	+	Category: Castellano
	155	+	Category: Español

Back to history