summaryrefslogtreecommitdiffstats
path: root/examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc
blob: 317f855f9db90e5338c956e838d83f43b26241ad (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
/****************************************************************************
**
** Copyright (C) 2014 Digia Plc
** All rights reserved.
** For any questions to Digia, please use contact form at http://qt.digia.com
**
** This file is part of the QtDataVisualization module.
**
** Licensees holding valid Qt Enterprise licenses may use this file in
** accordance with the Qt Enterprise License Agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and Digia.
**
** If you have questions regarding the use of this file, please use
** contact form at http://qt.digia.com
**
****************************************************************************/

/*!
    \example qmlaxisdrag
    \title Qt Quick 2 Axis Dragging Example
    \ingroup qtdatavisualization_examples
    \brief Implementing axis dragging in QML
    \since QtDataVisualization 1.1

    The Qt Quick 2 axis dragging example concentrates on showing how to implement axis range
    changing by dragging axis labels in QML. It also gives a quick peek to two other new features
    in Qt Data Visualization 1.1: orthographic projection and dynamic custom item handling.

    \image qmlaxisdrag-example.png

    \section1 Overriding default input handling

    First we deactivate the default input handling mechanism by setting the active input handler
    of Scatter3D graph to \c{null}:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 0
    \dots

    Then we add a MouseArea and set it to fill the parent, which is the same \c Item our
    \c scatterGraph is contained in. We also set it to accept only left mouse button presses,
    as in this example we are not interested in other buttons:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 1
    \dots

    Then we need to listen to mouse presses, and when caught, send a selection query to the graph:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 2

    Current mouse position, that will be needed for move distance calculation, is caught in
    \c{onPositionChanged}:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 3
    \dots

    At the end of \c{onPositionChanged}, we'll save the previous mouse position for move distance
    calculation that will be introduced later:

    \dots 0
    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 4

    \section1 Translating mouse movement to axis range change

    in \c scatterGraph we will need to listen to \c onSelectedElementChanged signal. The signal
    is emitted after the selection query has been made in the \c{onPressed} of \c{inputArea}. We
    set the element type into a property we defined (\c{property int selectedAxisLabel: -1}) in our
    main component, since it is of a type we are interested in:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 5

    Then, back in the \c onPositionChanged of \c{inputArea}, we check if a mouse button is pressed
    and if we have a current axis label selection. If the conditions are met, we'll call the
    function that does the conversion from mouse movement to axis range update:

    \dots 0
    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 6
    \dots 0

    The conversion is easy in this case, as we have a fixed camera rotation. We can use some
    precalculated values, calculate mouse move distance, and apply the values to the
    selected axis range:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 7

    For a more sophisticated conversion from mouse movement to axis range update, see
    \l{Axis Range Dragging With Labels Example}{this example}.

    \section1 Other features

    The example also demonstrates how to use orthographic projection and how to update properties
    of a custom item on the fly.

    Orthographic projection is very simple. You'll just need to change \c orthoProjection property
    of \c{scatterGraph}. In this example we have a button for toggling it on and off:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 8

    For custom items, first we'll add one in the \c customItemList of \c{scatterGraph}:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 9

    We have implemented a timer to add, remove, and rotate all the items in the graph,
    and we'll use the same timer for rotating the custom item:

    \snippet qmlaxisdrag/qml/qmlaxisdrag/main.qml 10
    \dots

    \section1 Example contents
*/