How I make DPI-aware apps
Posted: Sun Mar 11, 2018 2:34 am
In response to another post I saw about cropped text in gadgets, here is how I personally code my apps to be DPI-aware. There are other techniques but they seem to have too much code... when just a simple multiplier works great. I've seen dozens of screenshots of my apps on other people's PCs and websites, and the gadgets are always perfect, so I know this works. I test my apps on two displays before release to the public: 1280 x 1024 resolution at 100% DPI (Small Fonts) with Aero theme and default colors; and 1024 x 768 resolution at 150% DPI (Large Fonts) with Basic theme and alternate color scheme.
In this day and age you simply CANNOT hard-code your X/Y/W/H parameters (well, unless your apps are for your own personal use). For release to the public, they must be DPI-aware to ensure correct display with no cropping. It's unprofessional if you don't, and yes, people still do use 1024 x 768 resolution with Large Fonts (I have several customers with that setup).
So, here's how I do it (it's really easy). I simply use a global variable called "dpi" which I multiply all my X,Y,W,H parameters with. As you can see from the screenshots below, it works great!
The DPI-aware results of the above code:
Now, compare that to hard-coded X,Y,W,H parameters without any DPI multiplication:
The results without any DPI multiplication:
The images speak for themselves.
In this day and age you simply CANNOT hard-code your X/Y/W/H parameters (well, unless your apps are for your own personal use). For release to the public, they must be DPI-aware to ensure correct display with no cropping. It's unprofessional if you don't, and yes, people still do use 1024 x 768 resolution with Large Fonts (I have several customers with that setup).
So, here's how I do it (it's really easy). I simply use a global variable called "dpi" which I multiply all my X,Y,W,H parameters with. As you can see from the screenshots below, it works great!
Code: Select all
Global dpi.d=GetDeviceCaps_(GetDC_(0),#LOGPIXELSX)/100 ; The magic!
OpenWindow(0,200,200,180*dpi,100*dpi,"test",#PB_Window_SystemMenu)
x=10*dpi
w=155*dpi
h=20*dpi
TextGadget(1,x,10*dpi,w,h,"This is text that fills the gadget",#PB_Text_Border)
StringGadget(2,x,40*dpi,w,h,"Another small test of fitted text")
ButtonGadget(3,x,70*dpi,w,h,"And last example of exact text")
Repeat : Until WaitWindowEvent()=#PB_Event_CloseWindow
Now, compare that to hard-coded X,Y,W,H parameters without any DPI multiplication:
Code: Select all
; No DPI multiplication for X/Y/W/H parameters. :(
OpenWindow(0,200,200,180,100,"test",#PB_Window_SystemMenu)
x=10
w=155
h=20
TextGadget(1,x,10,w,h,"This is text that fills the gadget",#PB_Text_Border)
StringGadget(2,x,40,w,h,"Another small test of fitted text")
ButtonGadget(3,x,70,w,h,"And last example of exact text")
Repeat : Until WaitWindowEvent()=#PB_Event_CloseWindow
The images speak for themselves.