summaryrefslogtreecommitdiffstats
path: root/examples/datavisualization/qmlspectrogram/doc/src/qmlspectrogram.qdoc
blob: 85ece3d2cefffd953faa346da6c7ae1a733dd764 (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
/****************************************************************************
**
** Copyright (C) 2014 Digia Plc
** All rights reserved.
** For any questions to Digia, please use contact form at http://qt.io
**
** This file is part of the Qt Data Visualization module.
**
** Licensees holding valid commercial license for Qt may use this file in
** accordance with the Qt 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.io
**
****************************************************************************/

/*!
    \example qmlspectrogram
    \title Qt Quick 2 Spectrogram Example
    \ingroup qtdatavisualization_examples
    \brief Showing spectrogram graph in a QML application.

    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.

    \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. To enforce the 2D effect, we disable the
    graph rotation via mouse or touch when in the orthographic mode.

    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 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

    To enforce the 2D effect, graph rotation via user input is disabled when in orthographic mode.
    We do this by specifying a new input handler:

    \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 5
    \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 7
    \dots 0
    \snippet qmlspectrogram/qml/qmlspectrogram/main.qml 6
    \dots 0

    When the projection mode changes, we adjust the value of the
    \l{InputHandler3D::rotationEnabled}{rotationEnabled} property of the \c{customInputHandler}
    to control the rotation.

    \section1 Example contents
*/