Difference between revisions of "High DPI/es"

From Lazarus wiki
m (Text replace - "delphi>" to "syntaxhighlight>")
(Enlaces Externos)
Line 120: Line 120:
  
 
*[http://msdn.microsoft.com/en-us/library/dd464646(v=VS.85).aspx High DPI (Windows)] Artículo MSDN sobre High DPI
 
*[http://msdn.microsoft.com/en-us/library/dd464646(v=VS.85).aspx High DPI (Windows)] Artículo MSDN sobre High DPI
 +
* [http://msdn.microsoft.com/en-us/library/windows/apps/hh465362 Guía para escalado] Windows Dev Center - Guía de experiencia de usuario para el escalado de estilo de aplicaciones Metro.
 +
* [[Windows Icon]] Como crear iconos que funcionan con High DPI.
 +
 +
[[Category:Tutorials]]
 +
[[Category:Windows]]
 +
[[Category:Windows Widgetsets]]

Revision as of 11:12, 12 May 2017

Deutsch (de) English (en) español (es) русский (ru)

Definicion

Cualquier configuración personalizada de DPI superior a 96 DPI (la configuración predeterminada) *.
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".

Configurando High DPI en Windows

En Windows 7 ve al Panel de Control > Pantalla. Elije Más pequeño 100% (predeterminado), Mediano 125% o Más grande 150%.

Si elijes 100% (96 DPI) es la configuración predeterminada de DPI de Windows, no es High DPI.

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.

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.

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.

High DPI en Lazarus

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.

PASO 1 - Declarar High DPI

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+)".

PASO 2 - Escalar Formas (Forms) y Controles (Controls)

Para hacer esto podemos llamar el procedimiento ScaleDPI en el evento OnCreate de cada forma del proyecto.

Primero copia el siguiente código y guardalo a un archivo de texto "uscaledpi.pas":

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);
  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.

Copia el archivo "uscaledpi.pas" a la carpeta principal del proyecto:

 MiProyecto\uscaledpi.pas
 

En la sección "uses" del proyecto agrega "uScaleDPI":

unit form1;
  
{$mode objfpc}{$H+}
  
interface
  
uses
  Classes, SysUtils, FileUtil, Forms, Controls, Graphics, Dialogs,
  uScaleDPI; // Esto incluye el procedimiento ScaleDPI

En el evento OnCreate de cada forma llama el procedimiento en esta forma:

procedure TForm1.FormCreate(Sender: TObject);
begin
  {$IFDEF WINDOWS}
  if Screen.PixelsPerInch <> 96 then ScaleDPI(Self,96); // 96 es la configuración de DPI cuando diseñaste la Forma1 (Form1)  
  {$ENDIF}
end;

Caso practico

CPickSniff es una aplicación para capturar los colores del escritorio, es el programa que utilizaremos para ver como funciona High DPI en Windows.

DPI Predeterminado

Esta es la aplicación corriendo en 96 DPI (100%), sin ningún tipo de escalado ya que no es necesario.

cpicksniff defaultdpi.png

DPI escalado por Windows

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.

cpicksniff blured.png

DPI con Manifiesto

Corriendo en 144 DPI (150%). Esta vez la aplicación incluye el manifiesto declarando High DPI, pero no la escala: el resultado es que los elementos se ven mal posicionados y mas pequeños de lo que deberían ser.

cpicksniff nohighdpi.png

High DPI

Finalmente con el Manifiesto y el escalado, la aplicación se ve perfecta en High DPI.

cpicksniff highdpi.png

Enlaces Externos