summaryrefslogtreecommitdiffstats
path: root/examples/qmlsurface/doc/src/qmlsurface.qdoc
blob: acbb2a85c67bfee2fd525b1b90fcd940b57ae1e5 (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
/****************************************************************************
**
** Copyright (C) 2013 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 qmlsurface
    \title Qt Quick 2 Surface Example
    \ingroup qtdatavisualization_examples
    \brief Using Surface3D in a QML application.

    The Qt Quick 2 surface example shows how to make a simple 3D surface plot using Surface3D with
    Qt Quick 2.

    \image qmlsurface-example.png

    The focus in this example is on generating a surface graph from height data, so in this section
    we skip explaining application creation. For more detailed QML example documentation,
    see \l{Qt Quick 2 Scatter Example}.

    \section1 Adding data to the graph

    This example shows two method to set data to surface graph, using the HeightMapSurfaceDataProxy
    and ItemModelSurfaceDataProxy. First we go through setting the data using height map specific
    data proxy. It is done with the code snippet below. The \c heightMapFile property specifies the image
    file containing the height data. The value properties defines the minimum and maximum values for
    surface area width and depth. This example shows the terrain around Tycho crater at imaginary
    position from 67 to 97 and from 30 to 60. Note that on the graph the scale on the Y dimension
    exaggerates the height.

    \snippet ../examples/qmlsurface/qml/qmlsurface/data.qml 0

    The other method to set surface data used in this example is with model mapping. We do that by first
    defining a ListModel containing the data for the surface:

    \snippet ../examples/qmlsurface/qml/qmlsurface/data.qml 1
    \dots 4

    Then we set up a SurfaceDataMapping which maps the roles for columns, rows and values. In this
    example the row holds values for longitude, column for latitude and the value is for height.

    \snippet ../examples/qmlsurface/qml/qmlsurface/data.qml 2

    The ItemModelSurfaceDataProxy is created to tie the model and the mapping together.

    \snippet ../examples/qmlsurface/qml/qmlsurface/data.qml 3

    \section1 Showing data

    In the \c main.qml, we set up the Surface3D element to show the data and various UI elements
    to illustrate few interesting features. First is the surface gradient, which can be defined
    as seen in this code snippet. With the \c ColorGradient we set example colors from position 0.0 to
    1.0. This element is set for \c gradient property in Surface3D.

    \snippet ../examples/qmlsurface/qml/qmlsurface/main.qml 0

    Other interesting features can be controlled with buttons. The first button is to toggle on and off
    the surface grid, for which use the following code.

    \snippet ../examples/qmlsurface/qml/qmlsurface/main.qml 1

    Second button is for surface smooth status, which is controlled with this code.

    \snippet ../examples/qmlsurface/qml/qmlsurface/main.qml 2

    Third and fourth buttons are for controlling background features. The last button is for switching
    between HeightMapSurfaceDataProxy and ItemModelSurfaceDataProxy, for which use the following
    code. We also set the maximum value to 500 in model proxy to make the surface flatter and
    250 on height map proxy to show exaggerated height. At the same time the color position
    on the gradient is modified.

    \snippet ../examples/qmlsurface/qml/qmlsurface/main.qml 3

    \section1 Example contents
*/