Scalable Measurements and Rounding

Scalable Measurements

When using Qt-Components to create scalable applications, it may be convenient to define layout measurements in a device independent way. This might be a good technique for certain applications, if you are using Application Style files corresponding to Device Categories or for Generic layout definitions.

For example, you can define measurements in millimeters ("mm") or in device independent pixels (sometimes referred to as "dp"). Dp are defined as 1dp = 1 pixel at 160 DPI, and scales linearly with DPI value.

One particular example of a use case for using device independent measurements, is minimum touch area size. Typical guidance for such a value would be 6-8mm, and in practice such requirements will probably be defined in terms of physical measurements. So this is a good example where using the screen DPI directly is a good solution.

Rounding

In order to correctly convert real number measurements to pixels, it is necessary to first perform the calculations so that the result is in real number measurement of pixels, and then to apply rounding. If there are any measurements that are not rounded, images and text are automatically aligned to the nearest pixel. However, Rounding is important in a number of cases:

• When items are contained inside Flickable components such as lists. In this case, any rounding errors in item size calculations would cause the distance between graphic items to be variable whilst the content is scrolling relative to the container, causing a "crawling" visual effect. Therefore it's important that each item is a round number of pixels (in the direction of scrolling).
• When sharing space between a number of items using division. For example if you need to divide the width of a container into three equal parts, or if you need to evenly distribute several items in a container using exactly the same size of spacing between each item. In this case, you should also ensure that the remainder of the rounding is also shared between the outer margins.
• Ensure that all layout measurements are defined as even numbers of pixels. This guarantees that center aligned items have exactly the same number of pixels on either side. The Platform Style measurements are all defined following this guideline, and screen sizes are naturally defined as a multiple of two (or a multiple of a power of two).

Examples

For example, consider the following javascript implementations for "mm" and "dp", which are used in the ScaleFM application:

 function mm(number) {
     return Math.round(number * screen.dpi / 25.4)
 }

 function dp(number) {
     return Math.round(number * screen.dpi / 160);
 }

See also the following examples:

• The use of Millimeters as Device-Independent Measurement Units
• The advantages of rounding measurements