QtComplexGeometryTool

IMPORTANT: The content of this page is outdated. Reason: Qt Quick 1 If you have checked or updated this page and found the content to be suitable, please remove this notice.

Qt-Complex Geometry tool

One of the primary goals of the Qt-Complex project was to find some good methods to design Qt Quick UI basd on QML in a device-independent way. The first steps in this direction was concerning the parametrization of the custom UI components together with the intensive application of the loader methods as created in the Qt-Complex 1.0 beta release. The obtained result was almost good expecially the feature to manage the device screen orientation: rotating the device the sizes changes and usually inverts. This first approach evidentiated a limit difficult to workaround: the physical screen size of the device itself. Regardless of the screen dimension (physical units, i.e. mm) the same parameters that are working for a certain screen category should be modified and adapted to work on devices with different screen size (pixel ratio).

As the Qt-Complex release supporting Harmattan Meego 1.2 devices (formerly N9 and N950) was possible when it was released the Qt SDK 4.7.3 as adopting the last version of the Qt Quick components it was possible a more efficient approach to the screen geometry with Qt-Complex. Using the Screen Qt Quick component Qt-Geometry includes a set of functions that support in a best way the screen orientation (including rotation angle where disposable), information on display size and geomtry, the native device sizes etc.

Geometry.js

As a matter of fact the Geometry tool is a javascript set of methods that can be used to obtain the framework component sizes depending by the following parameters:

• Physical orientation where the ancle '0' i the device oriented in the native position
• Device category as classified by Qt Quick components (but also by Meego operating system and Android): Small, Normal, Large, ExtraLarge.
• Proportional customizable sizes for the components i.e. button height, field spacing, object separator and so on.

Geometry methods

getDeviceWidth ()

Return the physical width of the device running the application.

getDeviceHeight ()

Return the physical height of the device running the application.

getObjectHeight (constrains, subobjects)

Get the height of a object based on the screen size

getObjectWidth (constrains, subobjects)

Get the width of a object based on the screen size

getButtonSpacing ()

Spacing between buttons when grouped of aligned.

getFormBorder ()

Get the form border size.

getFieldSpacing ()

Spacing between fields when grouped or aligned.

getFieldHeight ()

Get the field height in pixels.

getButtonHeight ()

Get the button height in pixels.

getBigButtonHeight ()

Get the Big Button component height in pixels.

getRadius ()

Get a reasonable radius for rounded corners objects based on the device category

getFontPoints ()

Get the base font size in points for a certain object. The title font size is obtained wit getFontPoints() + 1

getSeparator ()

Get the separator space (in pixels) between two objects, groups of components etc.

Behind the scene: stylish your interface

A typical Geometry function returning a numeric value sounds like the following example:

function getSeparator() {
 switch(qtComplex.screenCategory) {
 case device_screen_Small:
 return 14;
 break;
 case device_screen_Normal:
 return 20;
 break;
 case device_screen_Large:
 return 35;
 break;
 case device_screen_ExtraLarge:
 return 40;
 break;
 }
}

This means that depending by the screen category (or in other function by the screen size etc.) the function returns a choice of a predefined value. This means that you can personalize the style of the Geometry behavior changing these parameters accordingly with the geometry values creating the UI aspect that you prefer. Calibrating correctly the parameters the Geometry tool can manage the same UI aspect on a wide range of different devices.

Using Geometry in your QML documents

A typical QML source implementing the framework with the Geometry tool is shown in the following scriptlet

import QtQuick 1.1
import com.meego 1.0
import "QtComplex" as Framework
import "QtComplex/Theme.js" as Theme
import "QtComplex/Geometry.js" as Geometry

At this point the Geometry functions can be managed by your QML code.

Importing the correct Qt Quick components for your target platform

If you are developing for symbian platforms you should use the statement

import com.nokia.symbian 1.0

instead of

import com.meego 1.0

that should be used for Harmattan platforms.