QML-Qt.point-Applications
English
QML Qt.point() Applications
Introduction
QML Qt [qt.io] is a global object visible in QML and JavaScript namespaces. Note it is not a QML element and no need to be instantiated. It offers useful methods, properties and enumerations from Qt. To use them apply well-known dot notation. In QML documentation the object is categorized in “Utility” category [qt.io].
In this article we analyze how Qt.point() method could be used to develop dynamic behaviors of QML visible elements and have some “whirl” effects.
The examples bellow are tested in a desktop setting – Win 7, Qt SDK 1.2. The complete snippets are available here [bit.ly].
Qt.point() Definition
Qt.point() [qt.io] method takes two arguments – x and y coordinates (in screen area) – and returns a point (x,y) :
The type point is a QML basic [qt.io] type. A point type could be initialized in two ways – as a string or calling Qt.point():
We recall that the variant type property accepts point type values. The property propertyTest (anotherTest) is of point type, has two attributes (x and y) and which are accessible through the dot notation.
Note the difference in the x and y definition in Qt.point() and an Item element for example. In the first case x and y arguments are of int type whereas in an Item definition they are of real type.
Carousel Sample
There is a nice carousel example [qt.io], which use PathView element in implementation. We will demonstrate the similar effects using Qt.point() method.
The idea is as follows. A rectangle will be moved over a predefined trajectory, which is described as a sequence of Qt.point() points. The rectangle to be moved is defined as a component file – RunArea.qml. The points sequence is stored in a JavaScript array – variable path. A timer periodically fires an onTrrigered signal after which the rectangle is moved to a new position. Firstly, the Loader test loads the component RunArea.qml and then changes its position.
Whirling Text
We will animate a text (the word COOL) rotating it around an origin. Each symbol of the text is putted in a rectangle (rec1, rec2, rec3, rec4) and controlled individually. To get an access to color property of the Text element for each rectangle we define an alias col. The collection of these rectangles is stored in property cloud that is of type list. Five states are defined and they map five different positions of the text symbols. In the programming code these states are represented by JavaScript variables state1, state2, state3, state4 and state5.
The changes of the states are initiated by a Timer element. Each state is composed by QML points stored in corresponding state variables. You may experiment altering interval property of the Timer element. Additional effects you could have changing the color property of the rectangles – in the snippets it is commented.
Generating of Random Trajectories
Now we want to change the coordinates of the symbols of the word “FINE” in a random manner. For simplicity we assume that only y coordinates will be changed with a random offset. The random numbers we get with the JavaScript function random(). It generates random numbers (of type real) in the interval (0,1). With the JavaScript function floor() we round the returned value from random() to its downwards nearest integer. The both functions are methods of the JavaScript object Math so we call them like that – Math.random() and Math.floor(). We could use a normalizing factor to extend the interval of returned random numbers as is illustrated in the next line:
The above call returns numbers between 1 and 10.
The point is if the method Qt.point() accepts functions calls as arguments like that Qt.point(Math.floor(Math.random()),Math.floor(math.random()))? The next code fragment gives a positive answer to this question:
The code implementation of the “twisted” word uses the same QML constructs as in the previous section. It is as follows:
The next screenshots illustrate the running code:
The implementation file name in the downloadable package is randomText.qml.