Scalability: Using Millimeters as Device Independent Measurement Units

Files:

• examples/native/scalability/millimeters/ScalableUI.js
• examples/native/scalability/millimeters/millimeters.qml
• examples/native/scalability/millimeters/millimeters.qmlproject

Images:

• examples/native/scalability/millimeters/images/Qt_logostrap_CMYK.png

Using device independent measurement units.

This example demonstrates how to use device independent measurement units. In this example we are using millimeters for as an device independent measurement unit.

For more details, see: Scalable Measurements and Rounding

Walkthrough

Firstly, we define a helper function for calculating pixels per millimeters from dots per inch (dpi) of the screen. We apply rounding to ensure that the calculated value is an integer number of pixels, see the Rounding of Measurements example for more information.

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

Then, define font size for the example in millimeters.

 var fontSize = millimetersToPixels(5)

And same thing for image width.

 var imageWidth = millimetersToPixels(40);

The snippet below scales the Image element with defined image size.

 Image {
     id: image
     width: ScalableUI.imageWidth
     anchors.horizontalCenter: parent.horizontalCenter
     source: "images/Qt_logostrap_CMYK.png"
     fillMode: Image.PreserveAspectFit
     smooth: true
 }

Similarly we scale font size of the Text element.

 Text {
     id: text
     text: "Hello QtQuick"
     color: "white"
     font.pixelSize: ScalableUI.fontSize
     anchors.top: image.bottom
     anchors.horizontalCenter: parent.horizontalCenter
 }