diff options
author | Tomi Korpipää <tomi.korpipaa@digia.com> | 2014-05-22 08:38:49 +0300 |
---|---|---|
committer | Tomi Korpipää <tomi.korpipaa@digia.com> | 2014-05-22 08:42:11 +0300 |
commit | 4e37f474d69c64cb1f7d605467e47538464ba332 (patch) | |
tree | 19533cfdbf34f0fbbb68e14400ae6d09caf659b7 /examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc | |
parent | cb79f11be1c0c379a1eccea62606a58b73442f2f (diff) |
Docs for qml axis drag example
Task-number: QTRD-3128
Change-Id: I731074040d51dc7dcd7aa2774c5889d5ae588191
Reviewed-by: Miikka Heikkinen <miikka.heikkinen@digia.com>
Diffstat (limited to 'examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc')
-rw-r--r-- | examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc | 110 |
1 files changed, 110 insertions, 0 deletions
diff --git a/examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc b/examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc new file mode 100644 index 00000000..0371dcaf --- /dev/null +++ b/examples/datavisualization/qmlaxisdrag/doc/src/qmlaxisdrag.qdoc @@ -0,0 +1,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 Qt Data Visualization 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 + + Mouse position (\c mouseX and \c mouseY used in \c{onPressed}) 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 +*/ |