summaryrefslogtreecommitdiffstats
path: root/examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc
blob: f0dea871f5b7a7acde9e6a5e645860476e7b2326 (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
111
112
113
114
115
116
117
118
119
120
121
/****************************************************************************
**
** Copyright (C) 2016 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the documentation of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:FDL$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** GNU Free Documentation License Usage
** Alternatively, this file may be used under the terms of the GNU Free
** Documentation License version 1.3 as published by the Free Software
** Foundation and appearing in the file included in the packaging of
** this file. Please review the following information to ensure
** the GNU Free Documentation License version 1.3 requirements
** will be met: https://www.gnu.org/licenses/fdl-1.3.html.
** $QT_END_LICENSE$
**
****************************************************************************/

/*!
    \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

    \include examples-run.qdocinc

    \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
*/