diff options
Diffstat (limited to 'examples')
6 files changed, 142 insertions, 10 deletions
diff --git a/examples/datavisualization/customitems/doc/src/customitems.qdoc b/examples/datavisualization/customitems/doc/src/customitems.qdoc index d034019a..20f5f96d 100644 --- a/examples/datavisualization/customitems/doc/src/customitems.qdoc +++ b/examples/datavisualization/customitems/doc/src/customitems.qdoc @@ -21,6 +21,7 @@ \title Custom Items Example \ingroup qtdatavisualization_examples \brief Adding custom items to a surface graph. + \since Qt Data Visualization 1.1 The custom items example shows how to add your own custom meshes as items to a graph, and how to remove them. diff --git a/examples/datavisualization/draggableaxes/doc/src/draggableaxes.qdoc b/examples/datavisualization/draggableaxes/doc/src/draggableaxes.qdoc index 82add19d..af081d97 100644 --- a/examples/datavisualization/draggableaxes/doc/src/draggableaxes.qdoc +++ b/examples/datavisualization/draggableaxes/doc/src/draggableaxes.qdoc @@ -21,6 +21,7 @@ \title Axis Range Dragging With Labels Example \ingroup qtdatavisualization_examples \brief Implementing a custom input handler to support axis dragging. + \since Qt Data Visualization 1.1 The Axis Range Dragging example shows how to customize the 3D graph controls in a widget application to allow changing axis ranges by clicking on an axis label and dragging. This is diff --git a/examples/datavisualization/qmlaxisdrag/doc/images/qmlaxisdrag-example.png b/examples/datavisualization/qmlaxisdrag/doc/images/qmlaxisdrag-example.png Binary files differnew file mode 100644 index 00000000..de33ba66 --- /dev/null +++ b/examples/datavisualization/qmlaxisdrag/doc/images/qmlaxisdrag-example.png 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 +*/ diff --git a/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml b/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml index 64472a57..06f59bf1 100644 --- a/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml +++ b/examples/datavisualization/qmlaxisdrag/qml/qmlaxisdrag/main.qml @@ -56,10 +56,12 @@ Item { }); } + //! [10] onTriggered: { rotationAngle = rotationAngle + 1 - scatterSeries.setMeshAxisAndAngle(Qt.vector3d(1,1,1), rotationAngle) qtCube.setRotationAxisAndAngle(Qt.vector3d(1,0,1), rotationAngle) + //! [10] + scatterSeries.setMeshAxisAndAngle(Qt.vector3d(1,1,1), rotationAngle) if (isIncreasing) { for (var i = 0; i < 10; i++) appendRow() @@ -112,8 +114,11 @@ Item { width: parent.width height: parent.height + //! [0] Scatter3D { id: scatterGraph + inputHandler: null + //! [0] width: dataView.width height: dataView.height theme: dynamicColorTheme @@ -121,7 +126,6 @@ Item { scene.activeCamera.yRotation: 45.0 scene.activeCamera.xRotation: 45.0 scene.activeCamera.zoomLevel: 75.0 - inputHandler: null Scatter3DSeries { id: scatterSeries @@ -136,6 +140,7 @@ Item { rotationRole: "rotation" } } + //! [9] customItemList: [ Custom3DItem { id: qtCube @@ -145,6 +150,8 @@ Item { scaling: Qt.vector3d(0.3,0.3,0.3) } ] + //! [9] + //! [5] onSelectedElementChanged: { if (selectedElement >= AbstractGraph3D.ElementAxisXLabel && selectedElement <= AbstractGraph3D.ElementAxisYLabel) @@ -152,41 +159,50 @@ Item { else selectedAxisLabel = -1 } + //! [5] } + //! [1] MouseArea { id: inputArea anchors.fill: parent - hoverEnabled: true acceptedButtons: Qt.LeftButton + //! [1] property int mouseX: -1 property int mouseY: -1 property int previousMouseX: -1 property int previousMouseY: -1 + //! [3] onPositionChanged: { mouseX = mouse.x; mouseY = mouse.y; + //! [3] + //! [6] if (pressed && selectedAxisLabel != -1) dragAxis(mouseX, mouseY, previousMouseX, previousMouseY); + //! [6] + //! [4] previousMouseX = mouseX; previousMouseY = mouseY; } + //! [4] + //! [2] onPressed: { scatterGraph.scene.selectionQueryPosition = Qt.point(inputArea.mouseX, inputArea.mouseY); } + //! [2] } } + //! [7] function dragAxis(mouseX, mouseY, previousMouseX, previousMouseY) { // Directional drag multipliers based on rotation - // In this example camera is locked to 45 degrees, so we can use precalculated values - var xMulX = 0.70710678146 - var xMulY = 0.7071067809 - var zMulX = 0.7071067809 - var zMulY = 0.70710678146 + // Camera is locked to 45 degrees, so we can use one precalculated value instead of + // calculating xx, xy, zx and zy individually + var cameraMultiplier = 0.70710678 // Get the drag amount var moveX = mouseX - previousMouseX @@ -195,12 +211,12 @@ Item { // Adjust axes switch (selectedAxisLabel) { case AbstractGraph3D.ElementAxisXLabel: - var distance = (moveX * xMulX - moveY * xMulY) / dragSpeedModifier + var distance = ((moveX - moveY) * cameraMultiplier) / dragSpeedModifier scatterGraph.axisX.min -= distance scatterGraph.axisX.max -= distance break case AbstractGraph3D.ElementAxisZLabel: - distance = (moveX * zMulX + moveY * zMulY) / dragSpeedModifier + distance = ((moveX + moveY) * cameraMultiplier) / dragSpeedModifier scatterGraph.axisZ.min += distance scatterGraph.axisZ.max += distance break @@ -211,6 +227,7 @@ Item { break } } + //! [7] NewButton { id: rangeToggle @@ -240,6 +257,7 @@ Item { } } + //! [8] NewButton { id: orthoToggle width: parent.width / 3 @@ -255,6 +273,7 @@ Item { } } } + //! [8] NewButton { id: exitButton diff --git a/examples/datavisualization/qmlaxisformatter/doc/src/qmlaxisformatter.qdoc b/examples/datavisualization/qmlaxisformatter/doc/src/qmlaxisformatter.qdoc index b990c490..156135bd 100644 --- a/examples/datavisualization/qmlaxisformatter/doc/src/qmlaxisformatter.qdoc +++ b/examples/datavisualization/qmlaxisformatter/doc/src/qmlaxisformatter.qdoc @@ -21,6 +21,7 @@ \title Qt Quick 2 Axis Formatter Example \ingroup qtdatavisualization_examples \brief Example of a hybrid C++ and QML application demonstrating different axis formatters. + \since Qt Data Visualization 1.1 The Qt Quick axis formatter example shows how to use predefined axis formatters and how to create a custom one. |
