Difference between revisions of "High DPI/es"

From Lazarus wiki
Jump to navigationJump to search
Line 143: Line 143:
 
* [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.
 
* [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.
 
* [[Windows Icon]] Como crear iconos que funcionan con High DPI.
 
[[Category:Tutorials]]
 
[[Category:Windows]]
 
[[Category:Windows Widgetsets]]
 

Revision as of 17:17, 23 May 2018

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

cpicksniff nohighdpi.png

High DPI

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


cpicksniff highdpi.png

High DPI en Lazarus 1.7 y superior

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.

Para manejar High DPI utiliando nuevas características en 1.7, sigue los siguientes pasos:

  • On Windows: enable DPI awarness in Project Options -> Application. Decide if you want to support per monitor DPI awarness or not.
  • Enable LCL scaling for your application DPI awarness in Project Options -> Application -> "Use LCL scaling (Hi-DPI).
  • 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.
  • 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);
  • 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.

Lazarus IDE high DPI

El IDE mismo de Lazarus es DPI-aware.



Enlaces Externos