From 1753a58f78dc328405e0aa77252a9e59b356e5af Mon Sep 17 00:00:00 2001 From: Miikka Heikkinen Date: Wed, 2 Jul 2014 09:56:07 +0300 Subject: Add qmlspectrogram example documentation Change-Id: I5a325fa17215c486184cdce0bc26cce8d9c755da Reviewed-by: Mika Salmela --- .../qmlspectrogram/doc/src/qmlspectrogram.qdoc | 46 ++++++++++++++++++++-- .../qmlspectrogram/qml/qmlspectrogram/main.qml | 24 +++++++---- 2 files changed, 59 insertions(+), 11 deletions(-) (limited to 'examples/datavisualization/qmlspectrogram') diff --git a/examples/datavisualization/qmlspectrogram/doc/src/qmlspectrogram.qdoc b/examples/datavisualization/qmlspectrogram/doc/src/qmlspectrogram.qdoc index 6ebba93b..ee0018e3 100644 --- a/examples/datavisualization/qmlspectrogram/doc/src/qmlspectrogram.qdoc +++ b/examples/datavisualization/qmlspectrogram/doc/src/qmlspectrogram.qdoc @@ -22,20 +22,58 @@ \ingroup qtdatavisualization_examples \brief Showing spectrogram graph in a QML application. - The Qt Quick 2 surface example demonstrates how to show a polar and cartesian spectrograms + The Qt Quick 2 Spectrogram example demonstrates how to show a polar and cartesian spectrograms and how to utilize orthographic projection to show them in 2D. - TODO!!! - \image qmlspectrogram-example.png + Spectrogram is simply a surface graph with a range gradient used to emphasize the different + values. Typically spectrograms are shown with two dimensional surfaces, which we simulate + with a top down orthographic view of the graph. In this example, the default input handler + is enabled, so you can also rotate the graph to see how it looks in three dimensions. In + a real application you may want to disable the default input handling if you wish to show + only the two dimensional graph. See \l{Qt Quick 2 Custom Input Example} for guidelines on + customizing input handling. + The focus in this example is on showing how to display spectrograms, so the basic functionality is not explained. For more detailed QML example documentation, see \l{Qt Quick 2 Scatter Example}. - \section1 TODO + \section1 Creating a spectrogram + + To create a 2D spectrogram, we define a Surface3D item: \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 0 + The key properties for enabling the 2D effect are + \l{AbstractGraph3D::orthoProjection}{orthoProjection} and + \l{Camera3D::cameraPreset}{scene.activeCamera.cameraPreset}. We remove the perspective by + enabling orthographic projection for the graph, and then we eliminate the Y-dimension by + viewing the graph directly from above: + + \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 1 + + Since this viewpoint causes the horizontal axis grid to be mostly obscured by the surface, + we also specify that the horizontal grid should be drawn on top of the graph: + + \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 2 + + \section1 Polar spectrogram + + Depending on the data, it is sometimes more natural to use a polar graph instead of a cartesian + one. Qt Data Visualization supports this via \l{AbstractGraph3D::polar}{polar} property. + In this example we provide a button to switch between polar and cartesian modes: + + \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 3 + + In the polar mode, the X-axis is converted into the angular polar axis, and the Z-axis is + converted into the radial polar axis. The surface points are recalculated according to new axes. + + The radial axis labels are drawn outside the graph by default, but in this example we want to + draw them right next to the 0 degree angular axis inside the graph, so we define only a tiny + offset for them: + + \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 4 + \section1 Example contents */ diff --git a/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml b/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml index af16539b..09c1b8af 100644 --- a/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml +++ b/examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml @@ -41,7 +41,6 @@ Window { anchors.top: mainview.top anchors.left: mainview.left - //! [0] ColorGradient { id: surfaceGradient ColorGradientStop { position: 0.0; color: "black" } @@ -50,7 +49,6 @@ Window { ColorGradientStop { position: 0.8; color: "yellow" } ColorGradientStop { position: 1.0; color: "white" } } - //! [0] ValueAxis3D { id: xAxis @@ -91,6 +89,7 @@ Window { font.pointSize: 25 } + //! [0] Surface3D { id: surfaceGraph width: surfaceView.width @@ -98,18 +97,28 @@ Window { shadowQuality: AbstractGraph3D.ShadowQualityNone selectionMode: AbstractGraph3D.SelectionSlice | AbstractGraph3D.SelectionItemAndRow - scene.activeCamera.cameraPreset: Camera3D.CameraPresetDirectlyAbove - scene.activeCamera.zoomLevel: 85 axisX: xAxis axisY: yAxis axisZ: zAxis theme: customTheme + // Remove the perspective and view the graph from top down to achieve 2D effect + //! [1] orthoProjection: true + scene.activeCamera.cameraPreset: Camera3D.CameraPresetDirectlyAbove + //! [1] + + //! [2] flipHorizontalGrid: true - radialLabelOffset: 0.01 // Add little offset so the labels do not overlap + //! [2] + + //! [4] + radialLabelOffset: 0.01 + //! [4] + horizontalAspectRatio: 1 + scene.activeCamera.zoomLevel: 85 Surface3DSeries { id: surfaceSeries @@ -126,6 +135,7 @@ Window { } } } + //! [0] } RowLayout { @@ -135,12 +145,12 @@ Window { anchors.right: parent.right opacity: 0.5 + //! [3] NewButton { id: polarToggle Layout.fillWidth: true Layout.fillHeight: true text: "Switch to polar" - //! [1] onClicked: { if (surfaceGraph.polar === false) { surfaceGraph.polar = true @@ -150,8 +160,8 @@ Window { text = "Switch to polar" } } - //! [1] } + //! [3] NewButton { id: orthoToggle -- cgit v1.2.3