summaryrefslogtreecommitdiffstats
path: root/examples
diff options
context:
space:
mode:
authorMiikka Heikkinen <miikka.heikkinen@digia.com>2014-07-02 09:56:07 +0300
committerMiikka Heikkinen <miikka.heikkinen@digia.com>2014-07-02 12:35:22 +0300
commit1753a58f78dc328405e0aa77252a9e59b356e5af (patch)
tree403040fc097e22d30b523d55946a546c009492be /examples
parent7178b15207c7df560281f7cc42d090845e2b980a (diff)
Add qmlspectrogram example documentation
Change-Id: I5a325fa17215c486184cdce0bc26cce8d9c755da Reviewed-by: Mika Salmela <mika.salmela@digia.com>
Diffstat (limited to 'examples')
-rw-r--r--examples/datavisualization/qmlspectrogram/doc/src/qmlspectrogram.qdoc46
-rw-r--r--examples/datavisualization/qmlspectrogram/qml/qmlspectrogram/main.qml24
2 files changed, 59 insertions, 11 deletions
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