High DPI Implementation

-
High DPI Implementation
I've taken the plunge. I now have a 4K machine and I'm about to start converting AlignMix (our mapping application https://www.alignmix.com ) into a High DPI aware application. I'm using Delphi 10 Seattle. 

Quick question - on many sub-forms I have an eye-candy image in the top left hand corner. I'm going to need at least two more versions of each image at higher resolutions. What's the best way to store these alternative images? ImageList? In a resource file?

- Steve #10Seattle   #HighDPI

Comments

  1. David MillingtonNovember 17, 2015 at 12:52 PM

    Other people, like Dalija Prasnikar who seems to be the resident high-DPI expert will have much better advice than me. But - would it give acceptable results to just have one high-res image, and draw it at the appropriate size at runtime?

    For example, you could resample it using Graphics32 or similar and give it to the existing image control at runtime. When the form moves screens and gets a different DPI just resample and adjust again.

    The inbuilt image list controls do not have support for this, but they should - that way buttons, toolbars, menus etc could all automatically use the right-sized image, from one source image.  https://quality.embarcadero.com/browse/RSP-12245

    ReplyDelete
  2. Wasif MahamodNovember 17, 2015 at 1:38 PM

    Can I ask how you got that microsoft office inspired theme for your application? I know it's offtopic but I have to say that it looks stunning.

    ReplyDelete
  3. Steve MaughanNovember 17, 2015 at 1:53 PM

    Wasif Mahamod it's DevExpress - they are awesome! As an aside you're free to download a copy of AlignMix and take a closer look.

    ReplyDelete
  4. Wasif MahamodNovember 17, 2015 at 4:03 PM

    Steve Maughan  I primarily work on Mac's so I use firemonkey often, is there a firemonkey equivalent to DevExpress? Also I will be downloading and checking out your software :D

    ReplyDelete
  5. Steve MaughanNovember 17, 2015 at 4:24 PM

    Wasif Mahamod I think the ribbon control is only really seen on PCs. I'm not aware of a FireMonkey framework for ribbons. I'd be interested if you find one.

    ReplyDelete
  6. Dorin DuminicaNovember 17, 2015 at 11:27 PM

    Steve Maughan off topic, the website looks excellent on my s4! Clean and elegant, same for the app from what I see in screen shots, fantastic job guys!!!

    ReplyDelete
  7. Markus JaNovember 18, 2015 at 12:03 AM

    Wasif Mahamod
    DevMachines have a similar Grid Control for FMX as DevExpress for VCL.
    http://www.devmachines.com/firedatagrid-overview.html

    ReplyDelete
  8. Dalija PrasnikarNovember 18, 2015 at 1:10 AM

    You can take a look at https://plus.google.com/+DalijaPrasnikar/posts/JqgHGuype1q

    Basic principle I follow is providing 100% and 200% images. Anything in between is down-sampled from 200% sources. 

    However, in some cases downsampling may not be good enough - for some icons with plenty of details, so you may want to provide 125%, 175% and 200% images too. But that really depends on images you have. 

    As far as storing images, default ImageList is the worst because it stores images as bitmap and provides no means for downsampling.

    I have special component that can store images as is on form (similar functionality to TImage.Picture property but without display functionality) That is quite acceptable if you store png and jpeg images that are compressed formats. If you deal with larger images you may want to use resource files and/or external files. I also use custom downsampling algorithm, but you can also use Graphics32, GDI+ or something else for actual downsampling.

    Basically, you have to divide working with image resources in two parts - first is storage of original sized images, and second is on the fly creation of proper images for particular DPI you will use for displaying. That also includes generating ImageList for controls that use them.

    ReplyDelete
  9. Dany MarmurNovember 18, 2015 at 2:17 AM

    I do not think DevExpress has taken a decision to port their VCL stuff to FMX yet. But i have been disconnected from DX for a while. Getting back into it in the beginning of next year.

    ReplyDelete
  10. David HeffernanNovember 18, 2015 at 2:33 AM

    It depends on what the image is, probably. For toolbar buttons I would have 100%, 125%, 150% and 200% versions. If I need 110% I would use 100% image with a transparent border.

    For larger images then it might be fine to 100% and 200% versions and scale the 200% version down for intermediates. But it really does depend.

    And then you have to think about what to do on bandwidth limited systems.  Like RDP with reduced colour depth.

    FWIW, I'm far from convinced by the MS implementation of per-monitor DPI. The fact that the non-client area is not scaled is something of a disaster.

    ReplyDelete
  11. André MusscheNovember 19, 2015 at 2:03 AM

    Markus Ja DevMachines grid looks very nice but they only have a XE6 and XE7 version, so no XE8 or X Seattle? And they don't react to my email about this...

    ReplyDelete
  12. Steve MaughanNovember 19, 2015 at 2:57 AM

    André Mussche note that DevExpress and DevMachines are two different companies. DevExpress controls are available for, and compatible with, XE8 and DX Seattle. My application is compiled with DX Seattle.

    ReplyDelete
  13. Ilya SDecember 11, 2015 at 5:37 AM

    Newest info on freshless subject :)
    http://blogs.technet.com/b/supportingwindows/archive/2015/12/08/display-scaling-in-windows-10.aspx

    ReplyDelete

Post a Comment