How can TMS FNC Ribbon and SVG files simplify a migration your app to HighDPI rapidly

One of the most frequented challenges for desktop developers is making their apps HighDPI-aware, i.e. providing apps that are able to display all forms, windows, dialogs and controls properly on various displaying units - from small tablet screens to 4K/8K displays, even with combination of screen magnification.

To be frank, when I saw our previous apps using Microsoft Ribbon (quite beautiful but slightly antiquated and totally DPI-unaware) on 4K monitor with 250% magnification, the result was simply terrible and I was frightened. Extremely small app icons on the taskbar, lilliputian images on buttons, button captions overlapped and ending somewhere on the adjacent button etc. In that time, I said "It's time to change."

First issue was the replacement of Microsoft Ribbon, that is not and will not be HighDPI-aware. As a long-term user of TMS All-Access subscription, I knew there was something whose name was TMS FNC Ribbon and could serve me well for my intentions. TMS FNC Ribbon wasn't HighDPI-aware yet in those days but my question "what is the time estimation of being this ribbon available for HighDPI" was answered by colleagues from TMS Software simply: "Very soon.". It was true.

In the meantime, I immersed into the second issue: Our apps contain a plenty of images - not only icons on BitButtons but also infographics images in dialog windows, icons on DBNavigator buttons and so on. However, some of our information systems are very large and contain tens or hundreds of various images. Well, Delphi came recently with a VirtualImageList component but there was still a very unpleasant and laborious task - to supply partial images for the most used resolution for each image contained in the project. How to do away with this time-consuming obstacle?

I read TMS Software blog regularly and about one year ago, I found there very useful blog post about supporting SVG (Scalable Vector Graphics) images within many of FNC components like TMS FNC Ribbon and retrospectively VCL components like TImage, TBitButton or SpeedButton (on behalf of TVirtualImageList). The SVG image contains an XML representation of the picture and is able to draw it in the appropriate size in relationship with screen resolution. My next question was - where I get or buy all the necessary images in SVG format? I recollect that I had bought a huge imagefiles library from grafile.com many years ago. And voila, I found that all images exist not only in prevalent PNG, JPG or BMP formats but SVG files are at disposal as well.

How it works together? Firstly, I collected all images intended for using in the concerned app. Then, I placed TSVGImageContainer into DataModule and added selected images using its collection named Images there. Built-in tool for selecting and displaying SVG files is quite handy.

Secondly, I put TVirtualImageList onto app's mainform and set it's ImageCollection property to SVGImageContainer available in the Datamodule.

Thirdly, I opened TVirtualImagelist's editor and by clicking the Add button connected all images (or the selected ones only, at pleasure) available in SVGImageContainer. As is shown, the appropriate image sizes are created dynamically based on VirtualImageList's Height and Width property- in this case we have dimensions 16, 24, 32 and 48 px. All file sizes are created automatically from one SVG source.

Finally, for each BitButton, SpeedButton or similar component I can specify Images property and consequently select the desired ImageName - the list is equipped with the image miniatures so the navigation among the items is extremely comfortable and flexible.

The guidelines for using SVG images in TMS FNC Ribbon are very similar. As for this, I concentrated all the SVG images into TTMSFNCBitmapContainer component and this special container is set as a BitmapContainer property of TMS FNC Ribbon. Adding, modifying and deleting images is made very purposefully using built-in image editor.

And now, it's time to see how the final piece of work looks. Here is the example of the new ribbon as a main control of the application. Ribbon itself can contain not only buttons but also comboboxes, speedbuttons, labels and many more. With the help of TColorRec type is very simple to set attractive color for all ribbon's elements and the ribbon itself - for example, using claMediumSeaGreen is much better than "common" clGreen.

A particular topic was using DBnavigator component. I use it widely in our systems and got used to provide TMSAdvGlowNavigator (it is TMS version of TDBNavigator) in our apps. I can confirm that also TMSAdvNavigator became HighDPI-ready and I consider it as a dignified replacement of common TDBNavigator. The last blemish of the migration process was the change of application icon which is normally displayed on the Windows taskbar. Because common ICO file contained only one ICO image (32x32 px), there was a necessity to create so called multi-icon file - the single file containing severeal icons with different sizes. I tried out (and can recommend) IcoFX editor (www.icofx.ro), however as far I know, other tools including free or opensource ones can be used for this purposes.

What are my impressions of the task that could and should have been a genuine incubus for me (and for many developers too)? Migration of our apps using SVG and TMS FNC Ribbon was simply said funny, straightforward and quite easy. I saved a lot of my valuable time and acquired some new and reusable techniques.

About the Author