[Windows]Êtes-vous DPI-aware ?
Publié : ven. 02/mars/2012 14:52
Vous avez remarqué que de plus en plus d'applications présentent des défauts d'affichage : Bouton trop petit, texte qui déborde de son gadget, défaut de layout (non-alignement des gadgets), etc.
Ces défauts n'apparaissent qu'avec XP, Vista et suivant.
Ceci est dû à la valeur DPI de l'affichage : Dot Per Inch = points par pouce = ppp.
C'est en relation avec la grosseur physique d'un point d'écran qui prend en compte les dimensions physique de l'écran ainsi que sa géométrie (4:3, 16:9, 16:10).
Elle est finalement assez complexe à calculer en millimètre.
Voir ici http://fr.wikipedia.org/wiki/D%C3%A9fin ... %C3%A9cran
Simplement, pour une résolution donnée, par ex 1024pointsx768points, on comprend que pour un écran de 14 pouces, le point sera plus petit que pour un écran 60 pouces ! On a le même nombre de points sur des surfaces d'affichages différentes.
Alors le système d'exploitation le prend en compte...mais si le programmeur a créé un logiciel pour un dpi standard de 96 ppp alors que l'utilisateur utilise un réglage d'affichage à 192 ppp soit un grandissement de 200%, il va y avoir plein des problèmes, des "artéfactes".
Microsoft est parfaitement au courant (à lire)
http://msdn.microsoft.com/en-us/library ... 85%29.aspx
"An application that is not DPI-aware but is running on a high-DPI display setting can suffer from many visual artifacts, including incorrect scaling of UI elements, clipped text, and blurry images. By adding support in your application for DPI awareness, you guarantee that the presentation of your application's UI is more predictable, making it more visually appealing to users."
Bref, il faut que votre application soit "dpi-aware"
Ici, Windows 7 change de lui-même le dpi en fonction de votre écran. Il est probable que la majorité des W7 ne soit plus en 96 dpi, le standard.
"Writing a DPI-aware application is the key to making a UI look consistently good across a wide variety of high-DPI display settings."
The following table shows a list of features related to high DPI that are supported by each platform.
Vista introduit la DPI Virtualization= grossissement du pixel mais cela donne un effet de flou et des applications anciennes ont des problèmes de compatibilités.
Quelques problèmes rencontrés :
• Clipped UI elements or text
• Incorrect font size
• Incorrect layout
• Blurred UI elements
• Pixelated text and bitmaps
• Misalignment of coordinate space affecting input
• Partial rendering of a full-screen application
• Incorrect use of effective resolution
Comment rendre une application dpi-aware : https://msdn.microsoft.com/en-us/librar ... s.85).aspx
The following table provides a list of the key DPI issues and their most common causes and solutions.
Issue Most common cause Solution to investigate
Clipped UI elements or text UI elements are not resizing based on the GetTextExtent function.
Scaling text
Tableau
To make your existing application DPI-aware, do the following:
1. Test your application at high DPI and write down all issues found.
2. Search the source code for common DPI coding issues.
3. Do an analysis on the cost of making the application fully DPI-aware.
4. List all required high-DPI assets, such as toolbars, buttons, and icons.
5. Fix issues found in step 1 by using the corresponding solution to the issue.
6. Declare your application DPI-aware.
7. Verify that all issues have been fixed. If not, repeat the preceding steps.
New Win32 Applications
To make your new application DPI-aware, do the following:
1. Declare your application DPI-aware.
2. Familiarize yourself with the coding techniques.
3. List all required high-DPI assets, such as toolbars, buttons, and icons.
4. Write your application.
5. Integrate the new assets from step 3.
6. Test your application for DPI compatibility.
7. Verify that all DPI issues have been resolved. If not, repeat the preceding steps.
Addressing High-DPI Issues
There are several techniques you can use to resolve high-DPI issues in your application. These techniques include:
• Declaring DPI awareness
• Using system metrics to calculate layout
• Determining the DPI scale factor
• Scaling text
• Scaling graphics
• Scaling layout
• Handling minimum effective resolution
Bref, c'est compliqué.
Dans un premier temps, il faudrait prendre des précautions.
Pour les boutons, laisser 1 cm d'espace avant et après le texte et un bon ½ cm en haut et en bas.
Ne pas créer des menus trop longs.
Laisser de l'air entre les gadgets, ne jamais coller 2 boutons par exemple.
Éviter de mettre des gadgets sur plusieurs colonnes ou alors complètement coller à la bordure gauche et droite de la fenêtre.
Utiliser peu de gadget.
Sinon, il faut coder.
Une solution multiplatforme de Feak: Excellente (à garder)
http://purebasic.developpez.com/sources ... sizeGadget
Au départ c'est un code qui prend en compte la police de l'OS mais il permet de rendre une application "dpi-aware" de fait.
Pour le dpi-aware API
http://www.purebasic.fr/english/viewtop ... 3%A5gensen
Avant de découvrir le code de freak par hasard, j'avais développé le mien qui n'est pas multiplateforme mais prend en compte un peu plus de gadget, le voici dans le post suivant.
Mesa.
Ces défauts n'apparaissent qu'avec XP, Vista et suivant.
Ceci est dû à la valeur DPI de l'affichage : Dot Per Inch = points par pouce = ppp.
C'est en relation avec la grosseur physique d'un point d'écran qui prend en compte les dimensions physique de l'écran ainsi que sa géométrie (4:3, 16:9, 16:10).
Elle est finalement assez complexe à calculer en millimètre.
Voir ici http://fr.wikipedia.org/wiki/D%C3%A9fin ... %C3%A9cran
Simplement, pour une résolution donnée, par ex 1024pointsx768points, on comprend que pour un écran de 14 pouces, le point sera plus petit que pour un écran 60 pouces ! On a le même nombre de points sur des surfaces d'affichages différentes.
Alors le système d'exploitation le prend en compte...mais si le programmeur a créé un logiciel pour un dpi standard de 96 ppp alors que l'utilisateur utilise un réglage d'affichage à 192 ppp soit un grandissement de 200%, il va y avoir plein des problèmes, des "artéfactes".
Microsoft est parfaitement au courant (à lire)
http://msdn.microsoft.com/en-us/library ... 85%29.aspx
"An application that is not DPI-aware but is running on a high-DPI display setting can suffer from many visual artifacts, including incorrect scaling of UI elements, clipped text, and blurry images. By adding support in your application for DPI awareness, you guarantee that the presentation of your application's UI is more predictable, making it more visually appealing to users."
Bref, il faut que votre application soit "dpi-aware"
- Feature Windows XP Windows Vista Windows 7
Control Panel setting of DPI Yes Yes Yes
Custom DPI settings Yes Yes Yes
DPI virtualization No Yes Yes
API to declare DPI awareness No Yes Yes
APIs to retrieve system metrics and DPI Yes Yes Yes
Reboot/log off to apply changes to DPI setting Reboot Reboot Log off
Per user DPI setting No No Yes
DPI auto-configuration out of the box No No Yes
Ici, Windows 7 change de lui-même le dpi en fonction de votre écran. Il est probable que la majorité des W7 ne soit plus en 96 dpi, le standard.
"Writing a DPI-aware application is the key to making a UI look consistently good across a wide variety of high-DPI display settings."
The following table shows a list of features related to high DPI that are supported by each platform.
- Feature Windows XP Windows Vista Windows 7
Control Panel setting of DPI Yes Yes Yes
Custom DPI settings Yes Yes Yes
DPI virtualization No Yes Yes
API to declare DPI awareness No Yes Yes
APIs to retrieve system metrics and DPI Yes Yes Yes
Reboot/log off to apply changes to DPI setting Reboot Reboot Log off
Per user DPI setting No No Yes
DPI auto-configuration out of the box No No Yes
Vista introduit la DPI Virtualization= grossissement du pixel mais cela donne un effet de flou et des applications anciennes ont des problèmes de compatibilités.
Quelques problèmes rencontrés :
• Clipped UI elements or text
• Incorrect font size
• Incorrect layout
• Blurred UI elements
• Pixelated text and bitmaps
• Misalignment of coordinate space affecting input
• Partial rendering of a full-screen application
• Incorrect use of effective resolution
Comment rendre une application dpi-aware : https://msdn.microsoft.com/en-us/librar ... s.85).aspx
The following table provides a list of the key DPI issues and their most common causes and solutions.
Issue Most common cause Solution to investigate
Clipped UI elements or text UI elements are not resizing based on the GetTextExtent function.
Scaling text
Tableau
- Incorrect font size Fonts are being created with hard-coded pixel sizes. Scaling text
Incorrect layout Main window is not resizing correctly based on DPI. Scaling layout
Blurred UI elements Application is not declared DPI-aware, and DPI virtualization is enabled. DPI virtualization
Declaring DPI awareness
Pixelated text Application is using bitmap-based fonts. Scaling text
Misalignment of coordinate space affecting input Application is not declared DPI-aware, and DPI virtualization is enabled. DPI virtualization
Declaring DPI awareness
Partial rendering of a full-screen application Application is not declared DPI-aware, and is using a mix of virtualized and non-virtualized metrics. DPI virtualization
Declaring DPI awareness
Determining the DPI scale factor
Incorrect use of effective resolution Application is not declared DPI-aware and is using virtualized system metrics. DPI virtualization
Declaring DPI awareness
Determining the DPI scale factor
Handling Minimum Effective Resolution
To make your existing application DPI-aware, do the following:
1. Test your application at high DPI and write down all issues found.
2. Search the source code for common DPI coding issues.
3. Do an analysis on the cost of making the application fully DPI-aware.
4. List all required high-DPI assets, such as toolbars, buttons, and icons.
5. Fix issues found in step 1 by using the corresponding solution to the issue.
6. Declare your application DPI-aware.
7. Verify that all issues have been fixed. If not, repeat the preceding steps.
New Win32 Applications
To make your new application DPI-aware, do the following:
1. Declare your application DPI-aware.
2. Familiarize yourself with the coding techniques.
3. List all required high-DPI assets, such as toolbars, buttons, and icons.
4. Write your application.
5. Integrate the new assets from step 3.
6. Test your application for DPI compatibility.
7. Verify that all DPI issues have been resolved. If not, repeat the preceding steps.
Addressing High-DPI Issues
There are several techniques you can use to resolve high-DPI issues in your application. These techniques include:
• Declaring DPI awareness
• Using system metrics to calculate layout
• Determining the DPI scale factor
• Scaling text
• Scaling graphics
• Scaling layout
• Handling minimum effective resolution
Bref, c'est compliqué.
Dans un premier temps, il faudrait prendre des précautions.
Pour les boutons, laisser 1 cm d'espace avant et après le texte et un bon ½ cm en haut et en bas.
Ne pas créer des menus trop longs.
Laisser de l'air entre les gadgets, ne jamais coller 2 boutons par exemple.
Éviter de mettre des gadgets sur plusieurs colonnes ou alors complètement coller à la bordure gauche et droite de la fenêtre.
Utiliser peu de gadget.
Sinon, il faut coder.
Une solution multiplatforme de Feak: Excellente (à garder)
http://purebasic.developpez.com/sources ... sizeGadget
Au départ c'est un code qui prend en compte la police de l'OS mais il permet de rendre une application "dpi-aware" de fait.
Pour le dpi-aware API
http://www.purebasic.fr/english/viewtop ... 3%A5gensen
Avant de découvrir le code de freak par hasard, j'avais développé le mien qui n'est pas multiplateforme mais prend en compte un peu plus de gadget, le voici dans le post suivant.
Mesa.